From e8bacf4596b97c00e4271b70813a757e808c51f1 Mon Sep 17 00:00:00 2001 From: Gabriele Marino <62339254+nubsthead@users.noreply.github.com> Date: Fri, 27 Jan 2023 15:32:43 +0100 Subject: [PATCH] fix: use controlled mode select * fix: use controlled mode select * fix: render the select only when a selection is provided * build(deps): update dependencies - Zextras/carbonio-design-system 1.0.1 * refactor: fixup types * fix: avoid possible duoble find execution Co-authored-by: Beatrice Guerra Co-authored-by: Cataldo Mazzilli refs: (#192) --- package-lock.json | 16 +++--- package.json | 2 +- .../settings-sent-messages.tsx | 6 +- .../dark-theme-settings-section.tsx | 39 +++++++++---- .../language-and-timezone-settings.tsx | 57 ++++++++++++------- 5 files changed, 77 insertions(+), 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index d6501135..781e6c59 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@fontsource/roboto": "^4.5.7", "@sentry/browser": "^6.17.7", "@tinymce/tinymce-react": "^3.13.0", - "@zextras/carbonio-design-system": ">=1.0.0", + "@zextras/carbonio-design-system": "^1.0.1", "@zextras/carbonio-ui-preview": "^1.0.0", "darkreader": "4.9.46", "history": "^5.2.0", @@ -99,7 +99,7 @@ }, "peerDependencies": { "@reduxjs/toolkit": "^1.6.2", - "@zextras/carbonio-design-system": ">=1.0.0", + "@zextras/carbonio-design-system": "^1.0.0", "core-js": "^3.19.1", "moment": "^2.29.1", "node-fetch": "^2.6.6", @@ -3913,9 +3913,9 @@ "license": "Apache-2.0" }, "node_modules/@zextras/carbonio-design-system": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-1.0.0.tgz", - "integrity": "sha512-ZxFrrm0GjxmSTDvxVc/E/YUf1uGbvUEVT2ZqvdZfTSUN9SVQS8RvSXKlMGeokkgYbVLd62BaxfukTPOVzhZC6Q==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-1.0.1.tgz", + "integrity": "sha512-nuwaYRE5oJSzTwCVJwD1BHuCNM71VTK0kRXFdX6RbZLBW5E3WDQ+Rqj119spFdRdhr58ahc/XhGdcOKlEDgSyw==", "dependencies": { "@popperjs/core": "2.11.6", "darkreader": "4.9.58", @@ -17669,9 +17669,9 @@ "version": "4.2.2" }, "@zextras/carbonio-design-system": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-1.0.0.tgz", - "integrity": "sha512-ZxFrrm0GjxmSTDvxVc/E/YUf1uGbvUEVT2ZqvdZfTSUN9SVQS8RvSXKlMGeokkgYbVLd62BaxfukTPOVzhZC6Q==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-1.0.1.tgz", + "integrity": "sha512-nuwaYRE5oJSzTwCVJwD1BHuCNM71VTK0kRXFdX6RbZLBW5E3WDQ+Rqj119spFdRdhr58ahc/XhGdcOKlEDgSyw==", "requires": { "@popperjs/core": "2.11.6", "darkreader": "4.9.58", diff --git a/package.json b/package.json index f45bb371..7a6c22f9 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,7 @@ "@fontsource/roboto": "^4.5.7", "@sentry/browser": "^6.17.7", "@tinymce/tinymce-react": "^3.13.0", - "@zextras/carbonio-design-system": "^1.0.0", + "@zextras/carbonio-design-system": "^1.0.1", "@zextras/carbonio-ui-preview": "^1.0.0", "darkreader": "4.9.46", "history": "^5.2.0", diff --git a/src/settings/components/account-settings/settings-sent-messages.tsx b/src/settings/components/account-settings/settings-sent-messages.tsx index 6d197077..f2ae05be 100644 --- a/src/settings/components/account-settings/settings-sent-messages.tsx +++ b/src/settings/components/account-settings/settings-sent-messages.tsx @@ -14,7 +14,7 @@ import { Row, Select, SelectItem, - SelectProps, + SingleSelectionOnChange, Text } from '@zextras/carbonio-design-system'; import { TFunction } from 'i18next'; @@ -109,9 +109,9 @@ const SettingsSentMessages = ({ [fromAddress, t] ); - const onChangeFromAddress = useCallback( + const onChangeFromAddress = useCallback( (newAddress) => { - if (!newAddress || typeof newAddress !== 'string') { + if (!newAddress) { return; } diff --git a/src/settings/components/general-settings/dark-theme-settings-section.tsx b/src/settings/components/general-settings/dark-theme-settings-section.tsx index 1411d296..5aaca6f9 100644 --- a/src/settings/components/general-settings/dark-theme-settings-section.tsx +++ b/src/settings/components/general-settings/dark-theme-settings-section.tsx @@ -4,9 +4,9 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { Select, SelectProps, Text } from '@zextras/carbonio-design-system'; +import { Select, SelectItem, SingleSelectionOnChange, Text } from '@zextras/carbonio-design-system'; import { find } from 'lodash'; -import React, { FC, useCallback, useContext, useMemo } from 'react'; +import React, { FC, useCallback, useContext, useEffect, useMemo, useState } from 'react'; import { AddMod, DarkReaderPropValues, isDarkReaderPropValues, RemoveMod } from '../../../../types'; import { ThemeCallbacksContext } from '../../../boot/theme-provider'; import { DARK_READER_PROP_KEY, SHELL_APP_ID } from '../../../constants'; @@ -18,8 +18,8 @@ const DarkThemeSettingSection: FC<{ removeMod: RemoveMod; }> = ({ addMod, removeMod }) => { const { setDarkReaderState } = useContext(ThemeCallbacksContext); - const darkReaderResultValue = useDarkReaderResultValue(); + const [selection, setSelection] = useState(); const t = getT(); const items = useMemo>( @@ -39,14 +39,24 @@ const DarkThemeSettingSection: FC<{ ], [t] ); - const defaultSelection = useMemo( - () => find(items, { value: darkReaderResultValue }), - [darkReaderResultValue, items] + + const setSelectNewValue = useCallback( + (value: DarkReaderPropValues) => { + const item = find(items, { value }); + if (item) { + setSelection(item); + } + setDarkReaderState(value); + }, + [items, setDarkReaderState] ); - const onSelectionChange = useCallback>( + + const onSelectionChange = useCallback( (value) => { if (isDarkReaderPropValues(value)) { - setDarkReaderState(value); + if (value) { + setSelectNewValue(value); + } if (value !== darkReaderResultValue) { addMod('props', DARK_READER_PROP_KEY, { app: SHELL_APP_ID, value }); } else { @@ -54,9 +64,18 @@ const DarkThemeSettingSection: FC<{ } } }, - [addMod, darkReaderResultValue, removeMod, setDarkReaderState] + [addMod, darkReaderResultValue, removeMod, setSelectNewValue] ); + useEffect(() => { + if (darkReaderResultValue) { + setSelectNewValue(darkReaderResultValue); + } + }, [darkReaderResultValue, items, setSelectNewValue]); + + if (!selection) { + return null; + } return ( <> @@ -64,7 +83,7 @@ const DarkThemeSettingSection: FC<{ { - if (value && value !== settings.prefs.zimbraPrefLocale) - updatePrefs(value, 'zimbraPrefLocale'); - }} + onChange={onLocaleChange} defaultSelection={defaultLocale} showCheckbox={false} dropdownMaxHeight="12.5rem" @@ -77,15 +95,12 @@ const LanguageAndTimeZone: FC<{ /> )} - {Object.keys(settings.prefs).length > 0 && timezones && ( + {Object.keys(settings.prefs).length > 0 && timezones && defaultTimeZone && (