Adjust file picker control styles

personalizedrefrigerator · Dec 23, 2024 · f56d022 · f56d022
1 parent 00cbe5a
commit f56d022
Showing 1 changed file with 42 additions and 36 deletions.
diff --git a/packages/app-mobile/components/screens/ConfigScreen/FileSystemPathSelector.tsx b/packages/app-mobile/components/screens/ConfigScreen/FileSystemPathSelector.tsx
@@ -12,11 +12,13 @@ import type FsDriverWeb from '../../../utils/fs-driver/fs-driver-rn.web';
 import { IconButton, TouchableRipple } from 'react-native-paper';
 import { _ } from '@joplin/lib/locale';
 
+type Mode = 'read'|'readwrite';
+
 interface Props {
 	themeId: number;
 	styles: ConfigScreenStyles;
 	settingMetadata: SettingItem;
-	mode: 'read'|'readwrite';
+	mode: Mode;
 	description: React.ReactNode|null;
 	updateSettingValue: UpdateSettingValueCallback;
 }
@@ -26,83 +28,86 @@ type ExtendedSelf = (typeof window.self) & {
 };
 declare const self: ExtendedSelf;
 
-const pathSelectorStyles = StyleSheet.create({
-	innerContainer: {
-		paddingTop: 0,
-		paddingBottom: 0,
-		paddingLeft: 0,
-		paddingRight: 0,
-	},
-	mainButton: {
-		flexGrow: 1,
-		flexShrink: 1,
-		padding: 22,
-		margin: 0,
-	},
-	buttonContent: {
-		flexDirection: 'row',
-	},
-});
-
-const FileSystemPathSelector: FunctionComponent<Props> = props => {
+const useFileSystemPath = (settingId: string, updateSettingValue: UpdateSettingValueCallback, accessMode: Mode) => {
 	const [fileSystemPath, setFileSystemPath] = useState<string>('');
 
-	const settingId = props.settingMetadata.key;
-
 	useEffect(() => {
 		setFileSystemPath(Setting.value(settingId));
 	}, [settingId]);
 
-	const selectDirectoryButtonPress = useCallback(async () => {
+	const showDirectoryPicker = useCallback(async () => {
 		if (shim.mobilePlatform() === 'web') {
 			// Directory picker IDs can't include certain characters.
 			const pickerId = `setting-${settingId}`.replace(/[^a-zA-Z]/g, '_');
-			const handle = await self.showDirectoryPicker({ id: pickerId, mode: props.mode });
+			const handle = await self.showDirectoryPicker({ id: pickerId, mode: accessMode });
 			const fsDriver = shim.fsDriver() as FsDriverWeb;
-			const uri = await fsDriver.mountExternalDirectory(handle, pickerId, props.mode);
-			await props.updateSettingValue(settingId, uri);
+			const uri = await fsDriver.mountExternalDirectory(handle, pickerId, accessMode);
+			await updateSettingValue(settingId, uri);
 			setFileSystemPath(uri);
 		} else {
 			try {
 				const doc = await openDocumentTree(true);
 				if (doc?.uri) {
 					setFileSystemPath(doc.uri);
-					await props.updateSettingValue(settingId, doc.uri);
+					await updateSettingValue(settingId, doc.uri);
 				} else {
 					throw new Error('User cancelled operation');
 				}
 			} catch (e) {
 				reg.logger().info('Didn\'t pick sync dir: ', e);
 			}
 		}
-	}, [props.updateSettingValue, settingId, props.mode]);
+	}, [updateSettingValue, settingId, accessMode]);
 
-	const clearPathButtonPress = useCallback(() => {
+	const clearPath = useCallback(() => {
 		setFileSystemPath('');
-		void props.updateSettingValue(settingId, '');
-	}, [props.updateSettingValue, settingId]);
+		void updateSettingValue(settingId, '');
+	}, [updateSettingValue, settingId]);
 
 	// Supported on Android and some versions of Chrome
 	const supported = shim.fsDriver().isUsingAndroidSAF() || (shim.mobilePlatform() === 'web' && 'showDirectoryPicker' in self);
-	if (!supported) {
-		return null;
-	}
+
+	return { clearPath, showDirectoryPicker, fileSystemPath, supported };
+};
+
+const pathSelectorStyles = StyleSheet.create({
+	innerContainer: {
+		paddingTop: 0,
+		paddingBottom: 0,
+		paddingLeft: 0,
+		paddingRight: 0,
+	},
+	mainButton: {
+		flexGrow: 1,
+		flexShrink: 1,
+		paddingHorizontal: 16,
+		paddingVertical: 22,
+		margin: 0,
+	},
+	buttonContent: {
+		flexDirection: 'row',
+	},
+});
+
+const FileSystemPathSelector: FunctionComponent<Props> = props => {
+	const settingId = props.settingMetadata.key;
+	const { clearPath, showDirectoryPicker, fileSystemPath, supported } = useFileSystemPath(settingId, props.updateSettingValue, props.mode);
 
 	const styleSheet = props.styles.styleSheet;
 
 	const clearButton = (
 		<IconButton
 			icon='delete'
 			accessibilityLabel={_('Clear')}
-			onPress={clearPathButtonPress}
+			onPress={clearPath}
 		/>
 	);
 
 	const containerStyles = props.styles.getContainerStyle(!!props.description);
 
 	const control = <View style={[containerStyles.innerContainer, pathSelectorStyles.innerContainer]}>
 		<TouchableRipple
-			onPress={selectDirectoryButtonPress}
+			onPress={showDirectoryPicker}
 			style={pathSelectorStyles.mainButton}
 			role='button'
 		>
@@ -119,6 +124,7 @@ const FileSystemPathSelector: FunctionComponent<Props> = props => {
 	</View>;
 
 	if (!supported) return null;
+
 	return <View style={containerStyles.outerContainer}>
 		{control}
 		{props.description}