Show a description below the file chooser input

personalizedrefrigerator · Dec 23, 2024 · 197cea7 · 197cea7
1 parent 579fdac
commit 197cea7
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 36 deletions.
diff --git a/packages/app-mobile/components/screens/ConfigScreen/ConfigScreen.tsx b/packages/app-mobile/components/screens/ConfigScreen/ConfigScreen.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Platform, Linking, View, Switch, ScrollView, Text, TouchableOpacity, Alert, PermissionsAndroid, Dimensions, AccessibilityInfo } from 'react-native';
+import { Platform, Linking, View, ScrollView, Text, TouchableOpacity, Alert, PermissionsAndroid, Dimensions, AccessibilityInfo } from 'react-native';
 import Setting, { AppType, SettingMetadataSection } from '@joplin/lib/models/Setting';
 import NavService from '@joplin/lib/services/NavService';
 import SearchEngine from '@joplin/lib/services/search/SearchEngine';
@@ -12,7 +12,6 @@ import { connect } from 'react-redux';
 import ScreenHeader from '../../ScreenHeader';
 import { _ } from '@joplin/lib/locale';
 import BaseScreenComponent from '../../base-screen';
-import { themeStyle } from '../../global-style';
 import * as shared from '@joplin/lib/components/shared/config/config-shared';
 import SyncTargetRegistry from '@joplin/lib/SyncTargetRegistry';
 import biometricAuthenticate from '../../biometrics/biometricAuthenticate';
@@ -36,6 +35,8 @@ import EnablePluginSupportPage from './plugins/EnablePluginSupportPage';
 import getVersionInfoText from '../../../utils/getVersionInfoText';
 import JoplinCloudConfig, { emailToNoteDescription, emailToNoteLabel } from './JoplinCloudConfig';
 import shim from '@joplin/lib/shim';
+import SettingsToggle from './SettingsToggle';
+import { UpdateSettingValueCallback } from './types';
 
 interface ConfigScreenState {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
@@ -673,22 +674,16 @@ class ConfigScreenComponent extends BaseScreenComponent<ConfigScreenProps, Confi
 		);
 	}
 
-	// eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any -- Old code before rule was applied, Old code before rule was applied
-	private renderToggle(key: string, label: string, value: any, updateSettingValue: Function, descriptionComp: any = null) {
-		const theme = themeStyle(this.props.themeId);
-
-		return (
-			<View key={key}>
-				<View style={this.styles().getContainerStyle(false)}>
-					<Text key="label" style={this.styles().styleSheet.switchSettingText}>
-						{label}
-					</Text>
-					{/* eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied */}
-					<Switch key="control" style={this.styles().styleSheet.switchSettingControl} trackColor={{ false: theme.dividerColor }} value={value} onValueChange={(value: any) => void updateSettingValue(key, value)} />
-				</View>
-				{descriptionComp}
-			</View>
-		);
+	private renderToggle(key: string, label: string, value: unknown, updateSettingValue: UpdateSettingValueCallback) {
+		return <SettingsToggle
+			key={key}
+			settingId={key}
+			value={value}
+			label={label}
+			updateSettingValue={updateSettingValue}
+			styles={this.styles()}
+			themeId={this.props.themeId}
+		/>;
 	}
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied

diff --git a/packages/app-mobile/components/screens/ConfigScreen/SettingComponent.tsx b/packages/app-mobile/components/screens/ConfigScreen/SettingComponent.tsx
@@ -38,7 +38,7 @@ const SettingComponent: React.FunctionComponent<Props> = props => {
 	const styleSheet = props.styles.styleSheet;
 
 	const descriptionComp = !settingDescription ? null : <Text style={styleSheet.settingDescriptionText}>{settingDescription}</Text>;
-	const containerStyle = props.styles.getContainerStyle(!!settingDescription);
+	const containerStyles = props.styles.getContainerStyle(!!settingDescription);
 
 	const labelId = useId();
 
@@ -49,8 +49,8 @@ const SettingComponent: React.FunctionComponent<Props> = props => {
 		const label = md.label();
 
 		return (
-			<View key={props.settingId} style={{ flexDirection: 'column', borderBottomWidth: 1, borderBottomColor: theme.dividerColor }}>
-				<View style={containerStyle}>
+			<View key={props.settingId} style={containerStyles.outerContainer}>
+				<View style={containerStyles.innerContainer}>
 					<Text key="label" style={styleSheet.settingText}>
 						{label}
 					</Text>
@@ -124,19 +124,22 @@ const SettingComponent: React.FunctionComponent<Props> = props => {
 	} 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.updateSettingValue}
-				/>
+				<View style={containerStyles.outerContainer}>
+					<FileSystemPathSelector
+						themeId={props.themeId}
+						mode={md.key === 'sync.2.path' ? 'readwrite' : 'read'}
+						styles={props.styles}
+						settingMetadata={md}
+						updateSettingValue={props.updateSettingValue}
+					/>
+					{descriptionComp}
+				</View>
 			);
 		}
 
 		return (
-			<View key={props.settingId} style={{ flexDirection: 'column', borderBottomWidth: 1, borderBottomColor: theme.dividerColor }}>
-				<View key={props.settingId} style={containerStyle}>
+			<View key={props.settingId} style={containerStyles.outerContainer}>
+				<View key={props.settingId} style={containerStyles.innerContainer}>
 					<Text key="label" style={styleSheet.settingText} nativeID={labelId}>
 						{md.label()}
 					</Text>

diff --git a/packages/app-mobile/components/screens/ConfigScreen/SettingsToggle.tsx b/packages/app-mobile/components/screens/ConfigScreen/SettingsToggle.tsx
@@ -24,9 +24,11 @@ const SettingsToggle: FunctionComponent<Props> = props => {
 	const theme = themeStyle(props.themeId);
 	const styleSheet = props.styles.styleSheet;
 
+	const containerStyles = props.styles.getContainerStyle(!!props.description);
+
 	return (
-		<View>
-			<View style={props.styles.getContainerStyle(false)}>
+		<View style={containerStyles.outerContainer}>
+			<View style={containerStyles.innerContainer}>
 				<Text key="label" style={styleSheet.switchSettingText}>
 					{props.label}
 				</Text>

diff --git a/packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.ts b/packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.ts
@@ -6,8 +6,11 @@ type SidebarButtonStyle = ViewStyle & { height: number };
 export interface ConfigScreenStyleSheet {
 	body: ViewStyle;
 
+	settingOuterContainer: ViewStyle;
+	settingOuterContainerNoBorder: ViewStyle;
 	settingContainer: ViewStyle;
 	settingContainerNoBottomBorder: ViewStyle;
+
 	headerWrapperStyle: ViewStyle;
 
 	headerTextStyle: TextStyle;
@@ -39,12 +42,17 @@ export interface ConfigScreenStyleSheet {
 	settingControl: TextStyle;
 }
 
+interface ContainerStyles {
+	outerContainer: ViewStyle;
+	innerContainer: ViewStyle;
+}
+
 export interface ConfigScreenStyles {
 	styleSheet: ConfigScreenStyleSheet;
 
 	selectedSectionButtonColor: string;
 	keyboardAppearance: 'default'|'light'|'dark';
-	getContainerStyle(hasDescription: boolean): ViewStyle;
+	getContainerStyle(hasDescription: boolean): ContainerStyles;
 }
 
 const configScreenStyles = (themeId: number): ConfigScreenStyles => {
@@ -107,6 +115,14 @@ const configScreenStyles = (themeId: number): ConfigScreenStyles => {
 			justifyContent: 'flex-start',
 			flexDirection: 'column',
 		},
+		settingOuterContainer: {
+			flexDirection: 'column',
+			borderBottomWidth: 1,
+			borderBottomColor: theme.dividerColor,
+		},
+		settingOuterContainerNoBorder: {
+			flexDirection: 'column',
+		},
 		settingContainer: settingContainerStyle,
 		settingContainerNoBottomBorder: {
 			...settingContainerStyle,
@@ -229,7 +245,9 @@ const configScreenStyles = (themeId: number): ConfigScreenStyles => {
 		selectedSectionButtonColor: theme.selectedColor,
 		keyboardAppearance: theme.keyboardAppearance,
 		getContainerStyle: (hasDescription) => {
-			return !hasDescription ? styleSheet.settingContainer : styleSheet.settingContainerNoBottomBorder;
+			const outerContainer = hasDescription ? styleSheet.settingOuterContainer : styleSheet.settingOuterContainerNoBorder;
+			const innerContainer = hasDescription ? styleSheet.settingContainerNoBottomBorder : styleSheet.settingContainer;
+			return { outerContainer, innerContainer };
 		},
 	};
 };

diff --git a/packages/app-mobile/components/screens/ConfigScreen/plugins/PluginUploadButton.tsx b/packages/app-mobile/components/screens/ConfigScreen/plugins/PluginUploadButton.tsx
@@ -91,7 +91,7 @@ const PluginUploadButton: React.FC<Props> = props => {
 	}, [props.pluginSettings, props.updatePluginStates]);
 
 	return (
-		<View style={props.styles.getContainerStyle(false)}>
+		<View style={props.styles.getContainerStyle(false).innerContainer}>
 			<TextButton
 				type={ButtonType.Primary}
 				onPress={onInstallFromFile}

diff --git a/packages/app-mobile/components/screens/ConfigScreen/types.ts b/packages/app-mobile/components/screens/ConfigScreen/types.ts
@@ -8,7 +8,7 @@ export interface CustomSettingSection {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-export type UpdateSettingValueCallback = (key: string, value: any)=> Promise<void>;
+export type UpdateSettingValueCallback = (key: string, value: any)=> void|Promise<void>;
 
 export interface PluginStatusRecord {
 	[pluginId: string]: boolean;