feat: Initial clean release of CHM

packages/app-mobile/components/screens/ConfigScreen/SettingComponent.tsx

@@ -0,0 +1,182 @@
+import * as React from 'react';
+
+import { UpdateSettingValueCallback } from './types';
+import { View, Text } from 'react-native';
+import Setting, { AppType, SettingItem } from '@joplin/lib/models/Setting';
+import Dropdown from '../../Dropdown';
+import { ConfigScreenStyles } from './configScreenStyles';
+import SettingsToggle from './SettingsToggle';
+import FileSystemPathSelector from './FileSystemPathSelector';
+import ValidatedIntegerInput from './ValidatedIntegerInput';
+import SettingTextInput from './SettingTextInput';
+import shim from '@joplin/lib/shim';
+import { themeStyle } from '../../global-style';
+import SettingsButton from './SettingsButton';
+import { useCallback, useState } from 'react';
+import { _ } from '@joplin/lib/locale';
+
+type OnSettingButtonClick = (key: string)=> Promise<void>;
+
+interface Props {
+	settingId: string;
+
+	// The value associated with the given settings key
+	value: unknown;
+
+	styles: ConfigScreenStyles;
+	themeId: number;
+
+	onUpdateSettingValue: UpdateSettingValueCallback;
+	onSettingButtonClick: OnSettingButtonClick;
+}
+
+
+const SettingComponent: React.FunctionComponent<Props> = props => {
+	const themeId = props.themeId;
+	const theme = themeStyle(themeId);
+	const output: React.ReactElement | null = null;
+
+	const md = Setting.settingMetadata(props.settingId);
+	const settingDescription = md.description ? md.description(AppType.Mobile) : '';
+
+	const styleSheet = props.styles.styleSheet;
+
+	const descriptionComp = !settingDescription ? null : <Text style={styleSheet.settingDescriptionText}>{settingDescription}</Text>;
+	const containerStyles = props.styles.getContainerStyle(!!settingDescription);
+
+	if (md.isEnum) {
+		const value = props.value?.toString();
+
+		const items = Setting.enumOptionsToValueLabels(md.options(), md.optionsOrder ? md.optionsOrder() : []);
+		const label = md.label();
+
+		return (
+			<View key={props.settingId} style={containerStyles.outerContainer}>
+				<View style={containerStyles.innerContainer}>
+					<Text key="label" style={styleSheet.settingText}>
+						{label}
+					</Text>
+					<Dropdown
+						key="control"
+						items={items}
+						selectedValue={value}
+						itemListStyle={{
+							backgroundColor: theme.backgroundColor,
+						}}
+						headerStyle={{
+							color: theme.color,
+							fontSize: theme.fontSize,
+						}}
+						itemStyle={{
+							color: theme.color,
+							fontSize: theme.fontSize,
+						}}
+						onValueChange={(itemValue: string) => {
+							void props.onUpdateSettingValue(props.settingId, itemValue);
+						}}
+						accessibilityHint={label}
+					/>
+				</View>
+				{descriptionComp}
+			</View>
+		);
+	} else if (md.type === Setting.TYPE_BOOL) {
+		return (
+			<SettingsToggle
+				settingId={props.settingId}
+				value={!!props.value}
+				themeId={props.themeId}
+				styles={props.styles}
+				label={md.label()}
+				updateSettingValue={props.onUpdateSettingValue}
+				description={descriptionComp}
+			/>
+		);
+	} else if (md.type === Setting.TYPE_INT) {
+		return (
+			<ValidatedIntegerInput
+				settingId={props.settingId}
+				value={props.value as number}
+				themeId={props.themeId}
+				styles={props.styles}
+				label={md.label()}
+				updateSettingValue={props.onUpdateSettingValue}
+				description={descriptionComp}
+			/>
+		);
+	} else if (md.type === Setting.TYPE_STRING) {
+		if (['sync.2.path', 'plugins.devPluginPaths'].includes(md.key) && (shim.fsDriver().isUsingAndroidSAF() || shim.mobilePlatform() === 'web')) {
+			return (
+				<FileSystemPathSelector
+					themeId={props.themeId}
+					mode={md.key === 'sync.2.path' ? 'readwrite' : 'read'}
+					styles={props.styles}
+					settingMetadata={md}
+					updateSettingValue={props.onUpdateSettingValue}
+					description={descriptionComp}
+				/>
+			);
+		}
+
+		return (
+			<SettingTextInput
+				settingId={props.settingId}
+				value={props.value as string}
+				themeId={props.themeId}
+				styles={props.styles}
+				label={md.label()}
+				updateSettingValue={props.onUpdateSettingValue}
+				description={descriptionComp}
+			/>
+		);
+	} else if (md.type === Setting.TYPE_BUTTON) {
+		return (
+			<SettingButtonComponent
+				metadata={md}
+				styles={props.styles}
+				onSettingButtonClick={props.onSettingButtonClick}
+			/>
+		);
+	} else if (Setting.value('env') === 'dev') {
+		throw new Error(`Unsupported setting type: ${md.type}`);
+	}
+
+	return output;
+};
+
+export default SettingComponent;
+
+interface SettingButtonProps {
+	metadata: SettingItem;
+	styles: ConfigScreenStyles;
+	onSettingButtonClick: OnSettingButtonClick;
+}
+
+const SettingButtonComponent: React.FC<SettingButtonProps> = ({ metadata, styles, onSettingButtonClick }) => {
+	const key = metadata.key;
+
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string|null>(null);
+
+	const onClick = useCallback(async () => {
+		setError(null);
+		setLoading(true);
+
+		try {
+			await onSettingButtonClick(key);
+		} catch (error) {
+			setError(String(error));
+		} finally {
+			setLoading(false);
+		}
+	}, [key, onSettingButtonClick]);
+
+	return <SettingsButton
+		title={metadata.label()}
+		description={metadata.description?.(AppType.Mobile)}
+		styles={styles}
+		clickHandler={onClick}
+		statusComponent={error && <Text style={styles.styleSheet.warningText}>{_('Failed: %s', error)}</Text>}
+		disabled={loading}
+	/>;
+};