Mobile: Settings screen: Create separate pages for each screen

.eslintignore

@@ -423,6 +423,7 @@ packages/app-mobile/components/Dropdown.test.js
 packages/app-mobile/components/Dropdown.js
 packages/app-mobile/components/ExtendedWebView.js
 packages/app-mobile/components/FolderPicker.js
+packages/app-mobile/components/Icon.js
 packages/app-mobile/components/Modal.js
 packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.js
 packages/app-mobile/components/NoteBodyViewer/hooks/useEditPopup.test.js
@@ -463,17 +464,29 @@ packages/app-mobile/components/SelectDateTimeDialog.js
 packages/app-mobile/components/SideMenu.js
 packages/app-mobile/components/TextInput.js
 packages/app-mobile/components/app-nav.js
+packages/app-mobile/components/base-screen.js
 packages/app-mobile/components/biometrics/BiometricPopup.js
 packages/app-mobile/components/biometrics/biometricAuthenticate.js
 packages/app-mobile/components/biometrics/sensorInfo.js
 packages/app-mobile/components/getResponsiveValue.test.js
 packages/app-mobile/components/getResponsiveValue.js
 packages/app-mobile/components/screens/ConfigScreen/ConfigScreen.js
-packages/app-mobile/components/screens/ConfigScreen/ConfigScreenButton.js
+packages/app-mobile/components/screens/ConfigScreen/FileSystemPathSelector.js
+packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/ExportDebugReportButton.js
+packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/ExportProfileButton.js
 packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/NoteExportButton.test.js
 packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/NoteExportButton.js
-packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/exportAllFolders.js
+packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/utils/exportAllFolders.js
+packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/utils/exportDebugReport.js
+packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/utils/exportProfile.js
+packages/app-mobile/components/screens/ConfigScreen/SectionHeader.js
+packages/app-mobile/components/screens/ConfigScreen/SectionSelector.js
+packages/app-mobile/components/screens/ConfigScreen/SettingComponent.js
+packages/app-mobile/components/screens/ConfigScreen/SettingItem.js
+packages/app-mobile/components/screens/ConfigScreen/SettingsButton.js
+packages/app-mobile/components/screens/ConfigScreen/SettingsToggle.js
 packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.js
+packages/app-mobile/components/screens/ConfigScreen/types.js
 packages/app-mobile/components/screens/LogScreen.js
 packages/app-mobile/components/screens/Note.js
 packages/app-mobile/components/screens/Notes.js
@@ -596,6 +609,7 @@ packages/lib/commands/index.js
 packages/lib/commands/openMasterPasswordDialog.js
 packages/lib/commands/synchronize.js
 packages/lib/components/EncryptionConfigScreen/utils.js
+packages/lib/components/shared/config/config-shared.js
 packages/lib/components/shared/config/shouldShowMissingPasswordWarning.test.js
 packages/lib/components/shared/config/shouldShowMissingPasswordWarning.js
 packages/lib/components/shared/note-screen-shared.js

.gitignore

@@ -405,6 +405,7 @@ packages/app-mobile/components/Dropdown.test.js
 packages/app-mobile/components/Dropdown.js
 packages/app-mobile/components/ExtendedWebView.js
 packages/app-mobile/components/FolderPicker.js
+packages/app-mobile/components/Icon.js
 packages/app-mobile/components/Modal.js
 packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.js
 packages/app-mobile/components/NoteBodyViewer/hooks/useEditPopup.test.js
@@ -445,17 +446,29 @@ packages/app-mobile/components/SelectDateTimeDialog.js
 packages/app-mobile/components/SideMenu.js
 packages/app-mobile/components/TextInput.js
 packages/app-mobile/components/app-nav.js
+packages/app-mobile/components/base-screen.js
 packages/app-mobile/components/biometrics/BiometricPopup.js
 packages/app-mobile/components/biometrics/biometricAuthenticate.js
 packages/app-mobile/components/biometrics/sensorInfo.js
 packages/app-mobile/components/getResponsiveValue.test.js
 packages/app-mobile/components/getResponsiveValue.js
 packages/app-mobile/components/screens/ConfigScreen/ConfigScreen.js
-packages/app-mobile/components/screens/ConfigScreen/ConfigScreenButton.js
+packages/app-mobile/components/screens/ConfigScreen/FileSystemPathSelector.js
+packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/ExportDebugReportButton.js
+packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/ExportProfileButton.js
 packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/NoteExportButton.test.js
 packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/NoteExportButton.js
-packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/exportAllFolders.js
+packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/utils/exportAllFolders.js
+packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/utils/exportDebugReport.js
+packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/utils/exportProfile.js
+packages/app-mobile/components/screens/ConfigScreen/SectionHeader.js
+packages/app-mobile/components/screens/ConfigScreen/SectionSelector.js
+packages/app-mobile/components/screens/ConfigScreen/SettingComponent.js
+packages/app-mobile/components/screens/ConfigScreen/SettingItem.js
+packages/app-mobile/components/screens/ConfigScreen/SettingsButton.js
+packages/app-mobile/components/screens/ConfigScreen/SettingsToggle.js
 packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.js
+packages/app-mobile/components/screens/ConfigScreen/types.js
 packages/app-mobile/components/screens/LogScreen.js
 packages/app-mobile/components/screens/Note.js
 packages/app-mobile/components/screens/Notes.js
@@ -578,6 +591,7 @@ packages/lib/commands/index.js
 packages/lib/commands/openMasterPasswordDialog.js
 packages/lib/commands/synchronize.js
 packages/lib/components/EncryptionConfigScreen/utils.js
+packages/lib/components/shared/config/config-shared.js
 packages/lib/components/shared/config/shouldShowMissingPasswordWarning.test.js
 packages/lib/components/shared/config/shouldShowMissingPasswordWarning.js
 packages/lib/components/shared/note-screen-shared.js

packages/app-desktop/gui/ConfigScreen/ConfigScreen.tsx

@@ -12,7 +12,7 @@ const { connect } = require('react-redux');
 const { themeStyle } = require('@joplin/lib/theme');
 const pathUtils = require('@joplin/lib/path-utils');
 import SyncTargetRegistry from '@joplin/lib/SyncTargetRegistry';
-const shared = require('@joplin/lib/components/shared/config/config-shared.js');
+import * as shared from '@joplin/lib/components/shared/config/config-shared.js';
 import ClipperConfigScreen from '../ClipperConfigScreen';
 import restart from '../../services/restart';
 import PluginService from '@joplin/lib/services/plugins/PluginService';
@@ -35,9 +35,10 @@ class ConfigScreenComponent extends React.Component<any, any> {
 	public constructor(props: any) {
 		super(props);
 
-		shared.init(this, reg);
+		shared.init(reg);
 
 		this.state = {
+			...shared.defaultScreenState,
 			selectedSectionName: 'general',
 			screenName: '',
 			changedSettingKeys: [],
@@ -98,7 +99,7 @@ class ConfigScreenComponent extends React.Component<any, any> {
 	}
 
 	public sectionByName(name: string) {
-		const sections = shared.settingsSections({ device: 'desktop', settings: this.state.settings });
+		const sections = shared.settingsSections({ device: AppType.Desktop, settings: this.state.settings });
 		for (const section of sections) {
 			if (section.name === name) return section;
 		}
@@ -699,7 +700,7 @@ class ConfigScreenComponent extends React.Component<any, any> {
 
 		const hasChanges = this.hasChanges();
 
-		const settingComps = shared.settingsToComponents2(this, 'desktop', settings, this.state.selectedSectionName);
+		const settingComps = shared.settingsToComponents2(this, AppType.Desktop, settings, this.state.selectedSectionName);
 
 		// screenComp is a custom config screen, such as the encryption config screen or keymap config screen.
 		// These screens handle their own loading/saving of settings and have bespoke rendering.
@@ -708,7 +709,7 @@ class ConfigScreenComponent extends React.Component<any, any> {
 
 		if (screenComp) containerStyle.display = 'none';
 
-		const sections = shared.settingsSections({ device: 'desktop', settings });
+		const sections = shared.settingsSections({ device: AppType.Desktop, settings });
 
 		const needRestartComp: any = this.state.needRestart ? (
 			<div style={{ ...theme.textStyle, padding: 10, paddingLeft: 24, backgroundColor: theme.warningBackgroundColor, color: theme.color }}>

packages/app-desktop/gui/ConfigScreen/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { SettingSectionSource } from '@joplin/lib/models/Setting';
+import { AppType, SettingSectionSource } from '@joplin/lib/models/Setting';
 import * as React from 'react';
 import { useMemo } from 'react';
 import Setting from '@joplin/lib/models/Setting';
@@ -93,7 +93,9 @@ export default function Sidebar(props: Props) {
 		const selected = props.selection === section.name;
 		return (
 			<StyledListItem key={section.name} isSubSection={Setting.isSubSection(section.name)} selected={selected} onClick={() => { props.onSelectionChange({ section: section }); }}>
-				<StyledListItemIcon className={Setting.sectionNameToIcon(section.name)} />
+				<StyledListItemIcon
+					className={Setting.sectionNameToIcon(section.name, AppType.Desktop)}
+				/>
 				<StyledListItemLabel>
 					{Setting.sectionNameToLabel(section.name)}
 				</StyledListItemLabel>

packages/app-mobile/components/Icon.tsx

@@ -0,0 +1,44 @@
+
+import * as React from 'react';
+import { TextStyle } from 'react-native';
+const FontAwesomeIcon = require('react-native-vector-icons/FontAwesome5').default;
+
+interface Props {
+	name: string;
+	style: TextStyle;
+
+	// If `null` is given, the content must be labeled elsewhere.
+	accessibilityLabel: string|null;
+}
+
+const Icon: React.FC<Props> = props => {
+	// Matches:
+	//  1. A prefix of word characters (\w+)
+	//  2. A suffix of non-spaces (\S+)
+	// An "fa-" at the beginning of the suffix is ignored.
+	const nameMatch = props.name.match(/^(\w+)\s+(?:fa-)?(\S+)$/);
+
+	const namePrefix = nameMatch ? nameMatch[1] : '';
+	const nameSuffix = nameMatch ? nameMatch[2] : props.name;
+
+	// If there's no label, make sure that the screen reader doesn't try
+	// to read the characters from the icon font (they don't make sense
+	// without the icon font applied).
+	const accessibilityHidden = props.accessibilityLabel === null;
+
+	return (
+		<FontAwesomeIcon
+			brand={namePrefix.startsWith('fab')}
+			solid={namePrefix.startsWith('fas')}
+			accessibilityLabel={props.accessibilityLabel}
+			aria-hidden={accessibilityHidden}
+			importantForAccessibility={
+				accessibilityHidden ? 'no-hide-descendants' : 'yes'
+			}
+			name={nameSuffix}
+			style={props.style}
+		/>
+	);
+};
+
+export default Icon;

packages/app-mobile/components/base-screen.js → packages/app-mobile/components/base-screen.ts

@@ -1,12 +1,12 @@
-const React = require('react');
-const { StyleSheet } = require('react-native');
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
 const { themeStyle } = require('./global-style.js');
 
-const rootStyles_ = {};
+const rootStyles_: Record<number, any> = {};
 
-class BaseScreenComponent extends React.Component {
+class BaseScreenComponent<Props, State> extends React.Component<Props, State> {
 
-	rootStyle(themeId) {
+	protected rootStyle(themeId: number) {
 		const theme = themeStyle(themeId);
 		if (rootStyles_[themeId]) return rootStyles_[themeId];
 		rootStyles_[themeId] = StyleSheet.create({
@@ -19,4 +19,5 @@ class BaseScreenComponent extends React.Component {
 	}
 }
 
-module.exports = { BaseScreenComponent };
+export { BaseScreenComponent };
+export default BaseScreenComponent;