Chore: Mobile: Convert side-menu-content-note.js to a TypeScript function component (#11095)

.eslintignore

@@ -623,6 +623,7 @@ packages/app-mobile/components/ScreenHeader/WebBetaButton.js
 packages/app-mobile/components/ScreenHeader/index.js
 packages/app-mobile/components/SelectDateTimeDialog.js
 packages/app-mobile/components/SideMenu.js
+packages/app-mobile/components/SideMenuContentNote.js
 packages/app-mobile/components/TextInput.js
 packages/app-mobile/components/accessibility/AccessibleModalMenu.js
 packages/app-mobile/components/accessibility/AccessibleView.js

.gitignore

@@ -600,6 +600,7 @@ packages/app-mobile/components/ScreenHeader/WebBetaButton.js
 packages/app-mobile/components/ScreenHeader/index.js
 packages/app-mobile/components/SelectDateTimeDialog.js
 packages/app-mobile/components/SideMenu.js
+packages/app-mobile/components/SideMenuContentNote.js
 packages/app-mobile/components/TextInput.js
 packages/app-mobile/components/accessibility/AccessibleModalMenu.js
 packages/app-mobile/components/accessibility/AccessibleView.js

packages/app-mobile/components/SideMenuContentNote.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { useMemo } from 'react';
+import { TouchableOpacity, Text, StyleSheet, ScrollView, View, ViewStyle } from 'react-native';
+import { connect } from 'react-redux';
+const Icon = require('react-native-vector-icons/Ionicons').default;
+import { themeStyle } from './global-style';
+import { AppState } from '../utils/types';
+
+type Option = {
+	title: string;
+	onPress: ()=> void;
+	isDivider?: false;
+} | {
+	title?: string;
+	isDivider: true;
+};
+
+interface Props {
+	themeId: number;
+	options: Option[];
+}
+
+const useStyles = (themeId: number) => {
+	return useMemo(() => {
+		const theme = themeStyle(themeId);
+		const buttonStyle: ViewStyle = {
+			flex: 1,
+			flexBasis: 'auto',
+			flexDirection: 'row',
+			height: 36,
+			alignItems: 'center',
+			paddingLeft: theme.marginLeft,
+			paddingRight: theme.marginRight,
+		};
+		const sideButtonStyle = {
+			...buttonStyle,
+			flex: 0,
+		};
+
+		return StyleSheet.create({
+			container: {
+				flex: 1,
+				borderRightWidth: 1,
+				borderRightColor: theme.dividerColor,
+				backgroundColor: theme.backgroundColor,
+				paddingTop: 10,
+			},
+			menu: {
+				flex: 1,
+				backgroundColor: theme.backgroundColor,
+			},
+			button: buttonStyle,
+			sidebarIcon: {
+				fontSize: 22,
+				color: theme.color,
+			},
+			sideButtonText: {
+				color: theme.color,
+			},
+			sideButton: sideButtonStyle,
+			sideButtonDisabled: {
+				...sideButtonStyle,
+				opacity: 0.6,
+			},
+			divider: {
+				marginTop: 15,
+				marginBottom: 15,
+				flex: -1,
+				borderBottomWidth: 1,
+				borderBottomColor: theme.dividerColor,
+			},
+		});
+	}, [themeId]);
+};
+
+const SideMenuContentNoteComponent: React.FC<Props> = props => {
+	const styles = useStyles(props.themeId);
+
+	const renderDivider = (key: string) => {
+		return <View style={styles.divider} key={key}/>;
+	};
+
+	const renderSidebarButton = (key: string, title: string, iconName: string, onPressHandler: ()=> void) => {
+		const content = (
+			<View key={key} style={onPressHandler ? styles.sideButton : styles.sideButtonDisabled}>
+				{!iconName ? null : <Icon name={iconName} style={styles.sidebarIcon} />}
+				<Text style={styles.sideButtonText}>{title}</Text>
+			</View>
+		);
+
+		if (!onPressHandler) return content;
+
+		return (
+			<TouchableOpacity key={key} onPress={onPressHandler}>
+				{content}
+			</TouchableOpacity>
+		);
+	};
+
+
+	const items = [];
+
+	const options = props.options ? props.options : [];
+	let dividerIndex = 0;
+
+	for (const option of options) {
+		if (option.isDivider === true) {
+			items.push(renderDivider(`divider_${dividerIndex++}`));
+		} else {
+			items.push(renderSidebarButton(option.title, option.title, null, option.onPress));
+		}
+	}
+
+	return (
+		<View style={styles.container}>
+			<ScrollView scrollsToTop={false} style={styles.menu}>
+				{items}
+			</ScrollView>
+		</View>
+	);
+};
+
+export default connect((state: AppState) => {
+	return {
+		themeId: state.settings.theme,
+	};
+})(SideMenuContentNoteComponent);

packages/app-mobile/components/side-menu-content-note.js

@@ -1,115 +0,0 @@
-const React = require('react');
-const Component = React.Component;
-const { TouchableOpacity, Text, StyleSheet, ScrollView, View } = require('react-native');
-const { connect } = require('react-redux');
-const Icon = require('react-native-vector-icons/Ionicons').default;
-const { themeStyle } = require('./global-style');
-
-class SideMenuContentNoteComponent extends Component {
-	constructor() {
-		super();
-
-		this.styles_ = {};
-	}
-
-	styles() {
-		const theme = themeStyle(this.props.themeId);
-
-		if (this.styles_[this.props.themeId]) return this.styles_[this.props.themeId];
-		this.styles_ = {};
-
-		const styles = {
-			menu: {
-				flex: 1,
-				backgroundColor: theme.backgroundColor,
-			},
-			button: {
-				flex: 1,
-				flexBasis: 'auto',
-				flexDirection: 'row',
-				height: 36,
-				alignItems: 'center',
-				paddingLeft: theme.marginLeft,
-				paddingRight: theme.marginRight,
-			},
-			sidebarIcon: {
-				fontSize: 22,
-				color: theme.color,
-			},
-			sideButtonText: {
-				color: theme.color,
-			},
-		};
-
-		styles.sideButton = { ...styles.button, flex: 0 };
-		styles.sideButtonDisabled = { ...styles.sideButton, opacity: 0.6 };
-
-		this.styles_[this.props.themeId] = StyleSheet.create(styles);
-		return this.styles_[this.props.themeId];
-	}
-
-	renderDivider(key) {
-		const theme = themeStyle(this.props.themeId);
-		return <View style={{ marginTop: 15, marginBottom: 15, flex: -1, borderBottomWidth: 1, borderBottomColor: theme.dividerColor }} key={key}></View>;
-	}
-
-	renderSidebarButton(key, title, iconName, onPressHandler) {
-		const content = (
-			<View key={key} style={onPressHandler ? this.styles().sideButton : this.styles().sideButtonDisabled}>
-				{!iconName ? null : <Icon name={iconName} style={this.styles().sidebarIcon} />}
-				<Text style={this.styles().sideButtonText}>{title}</Text>
-			</View>
-		);
-
-		if (!onPressHandler) return content;
-
-		return (
-			<TouchableOpacity key={key} onPress={onPressHandler}>
-				{content}
-			</TouchableOpacity>
-		);
-	}
-
-	render() {
-		const theme = themeStyle(this.props.themeId);
-
-		const items = [];
-
-		const options = this.props.options ? this.props.options : [];
-		let dividerIndex = 0;
-
-		for (const option of options) {
-			if (option.isDivider) {
-				items.push(this.renderDivider(`divider_${dividerIndex++}`));
-			} else {
-				items.push(this.renderSidebarButton(option.title, option.title, null, option.onPress));
-			}
-		}
-
-		const style = {
-			flex: 1,
-			borderRightWidth: 1,
-			borderRightColor: theme.dividerColor,
-			backgroundColor: theme.backgroundColor,
-			paddingTop: 10,
-		};
-
-		return (
-			<View style={style}>
-				<View style={{ flex: 1, opacity: this.props.opacity }}>
-					<ScrollView scrollsToTop={false} style={this.styles().menu}>
-						{items}
-					</ScrollView>
-				</View>
-			</View>
-		);
-	}
-}
-
-const SideMenuContentNote = connect(state => {
-	return {
-		themeId: state.settings.theme,
-	};
-})(SideMenuContentNoteComponent);
-
-module.exports = { SideMenuContentNote };

packages/app-mobile/root.tsx

@@ -68,7 +68,7 @@ const { DropboxLoginScreen } = require('./components/screens/dropbox-login.js');
 import { MenuProvider } from 'react-native-popup-menu';
 import SideMenu, { SideMenuPosition } from './components/SideMenu';
 import SideMenuContent from './components/side-menu-content';
-const { SideMenuContentNote } = require('./components/side-menu-content-note.js');
+import SideMenuContentNote from './components/SideMenuContentNote';
 import { reg } from '@joplin/lib/registry';
 const { defaultState } = require('@joplin/lib/reducer');
 import FileApiDriverLocal from '@joplin/lib/file-api-driver-local';