Merge remote-tracking branch 'origin/devel' into IRIS-3443-local-copy…

…-of-roboto
zextras · Jan 27, 2023 · bcf1803 · bcf1803
2 parents de0870d + e8bacf4
commit bcf1803
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 43 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -99,7 +99,7 @@
 	"dependencies": {
 		"@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
@@ -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<SelectProps['onChange']>(
+	const onChangeFromAddress = useCallback<SingleSelectionOnChange>(
 		(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
@@ -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 type { AddMod, DarkReaderPropValues, RemoveMod } from '../../../../types';
 import { ThemeCallbacksContext } from '../../../boot/theme-provider';
 import { DARK_READER_PROP_KEY, SHELL_APP_ID } from '../../../constants';
@@ -21,8 +21,8 @@ const DarkThemeSettingSection: FC<{
 	removeMod: RemoveMod;
 }> = ({ addMod, removeMod }) => {
 	const { setDarkReaderState } = useContext(ThemeCallbacksContext);
-
 	const darkReaderResultValue = useDarkReaderResultValue();
+	const [selection, setSelection] = useState<SelectItem>();
 
 	const t = getT();
 	const items = useMemo<Array<{ label: string; value: DarkReaderPropValues }>>(
@@ -42,32 +42,51 @@ 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<NonNullable<SelectProps['onChange']>>(
+
+	const onSelectionChange = useCallback<SingleSelectionOnChange>(
 		(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 {
 					removeMod('props', DARK_READER_PROP_KEY);
 				}
 			}
 		},
-		[addMod, darkReaderResultValue, removeMod, setDarkReaderState]
+		[addMod, darkReaderResultValue, removeMod, setSelectNewValue]
 	);
 
+	useEffect(() => {
+		if (darkReaderResultValue) {
+			setSelectNewValue(darkReaderResultValue);
+		}
+	}, [darkReaderResultValue, items, setSelectNewValue]);
+
+	if (!selection) {
+		return null;
+	}
 	return (
 		<>
 			<Text size="medium" weight="bold">
 				{t('settings.general.theme_options', 'Theme Options')}
 			</Text>
 			<Select
 				items={items}
-				selection={defaultSelection}
+				selection={selection}
 				label={t('settings.general.dark_mode', 'Dark Mode')}
 				onChange={onSelectionChange}
 			/>

diff --git a/src/settings/language-and-timezone-settings.tsx b/src/settings/language-and-timezone-settings.tsx
@@ -10,6 +10,7 @@ import {
 	Modal,
 	Padding,
 	Select,
+	SingleSelectionOnChange,
 	Text
 } from '@zextras/carbonio-design-system';
 import React, { FC, useCallback, useMemo } from 'react';
@@ -41,17 +42,37 @@ const LanguageAndTimeZone: FC<{
 		[addMod]
 	);
 
-	const defaultLocale = useMemo(() => {
-		const localeId = (settings.prefs.zimbraPrefLocale as string) ?? 'en';
-		const locale = find(locales, { id: localeId });
-		return locale ?? find(locales, { id: 'en' });
-	}, [locales, settings.prefs.zimbraPrefLocale]);
+	const defaultLocale = useMemo(
+		() =>
+			(settings.prefs.zimbraPrefLocale &&
+				find(locales, { id: `${settings.prefs.zimbraPrefLocale}` })) ||
+			find(locales, { id: 'en' }),
+		[locales, settings.prefs.zimbraPrefLocale]
+	);
+
+	const onLocaleChange = useCallback<SingleSelectionOnChange>(
+		(value) => {
+			if (value && value !== settings.prefs.zimbraPrefLocale)
+				updatePrefs(value, 'zimbraPrefLocale');
+		},
+		[settings.prefs.zimbraPrefLocale, updatePrefs]
+	);
 
-	const defaultTimeZone = useMemo(() => {
-		const timeZoneId = (settings.prefs.zimbraPrefTimeZoneId as string) ?? 'UTC';
-		const timezone = find(timezones, { value: timeZoneId });
-		return timezone ?? find(timezones, { value: 'UTC' });
-	}, [timezones, settings.prefs.zimbraPrefTimeZoneId]);
+	const defaultTimeZone = useMemo(
+		() =>
+			(settings.prefs.zimbraPrefTimeZoneId &&
+				find(timezones, { value: `${settings.prefs.zimbraPrefTimeZoneId}` })) ||
+			find(timezones, { value: 'UTC' }),
+		[timezones, settings.prefs.zimbraPrefTimeZoneId]
+	);
+
+	const onTimeZoneChange = useCallback<SingleSelectionOnChange>(
+		(value) => {
+			if (value && value !== settings.prefs.zimbraPrefTimeZoneId)
+				updatePrefs(value, 'zimbraPrefTimeZoneId');
+		},
+		[settings.prefs.zimbraPrefTimeZoneId, updatePrefs]
+	);
 
 	return (
 		<FormSubSection
@@ -64,28 +85,22 @@ const LanguageAndTimeZone: FC<{
 				{Object.keys(settings.prefs).length > 0 && (
 					<Select
 						items={locales}
-						background="gray5"
+						background={'gray5'}
 						label={t('label.language', 'Language')}
-						onChange={(value: any): void => {
-							if (value && value !== settings.prefs.zimbraPrefLocale)
-								updatePrefs(value, 'zimbraPrefLocale');
-						}}
+						onChange={onLocaleChange}
 						defaultSelection={defaultLocale}
 						showCheckbox={false}
 						dropdownMaxHeight="12.5rem"
 						selectedBackgroundColor="highlight"
 					/>
 				)}
 				<Padding top="small" width="100%">
-					{Object.keys(settings.prefs).length > 0 && timezones && (
+					{Object.keys(settings.prefs).length > 0 && timezones && defaultTimeZone && (
 						<Select
 							items={timezones}
-							background="gray5"
+							background={'gray5'}
 							label={t('label.time_zone', 'Time Zone')}
-							onChange={(value: any): void => {
-								if (value && value !== settings.prefs.zimbraPrefTimeZoneId)
-									updatePrefs(value, 'zimbraPrefTimeZoneId');
-							}}
+							onChange={onTimeZoneChange}
 							selection={defaultTimeZone}
 							showCheckbox={false}
 							dropdownMaxHeight="12.5rem"