From a81c1ff663c803466b97803b7254def6ced8e85e Mon Sep 17 00:00:00 2001 From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com> Date: Sat, 21 Sep 2024 04:57:08 -0700 Subject: [PATCH] Chore: Mobile: Convert `side-menu-content-note.js` to a TypeScript function component (#11095) --- .eslintignore | 1 + .gitignore | 1 + .../components/SideMenuContentNote.tsx | 127 ++++++++++++++++++ .../components/side-menu-content-note.js | 115 ---------------- packages/app-mobile/root.tsx | 2 +- 5 files changed, 130 insertions(+), 116 deletions(-) create mode 100644 packages/app-mobile/components/SideMenuContentNote.tsx delete mode 100644 packages/app-mobile/components/side-menu-content-note.js diff --git a/.eslintignore b/.eslintignore index 90665843e..321a38956 100644 --- a/.eslintignore +++ b/.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 diff --git a/.gitignore b/.gitignore index 800df5ace..e424df4be 100644 --- a/.gitignore +++ b/.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 diff --git a/packages/app-mobile/components/SideMenuContentNote.tsx b/packages/app-mobile/components/SideMenuContentNote.tsx new file mode 100644 index 000000000..d26a099bb --- /dev/null +++ b/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 => { + const styles = useStyles(props.themeId); + + const renderDivider = (key: string) => { + return ; + }; + + const renderSidebarButton = (key: string, title: string, iconName: string, onPressHandler: ()=> void) => { + const content = ( + + {!iconName ? null : } + {title} + + ); + + if (!onPressHandler) return content; + + return ( + + {content} + + ); + }; + + + 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 ( + + + {items} + + + ); +}; + +export default connect((state: AppState) => { + return { + themeId: state.settings.theme, + }; +})(SideMenuContentNoteComponent); diff --git a/packages/app-mobile/components/side-menu-content-note.js b/packages/app-mobile/components/side-menu-content-note.js deleted file mode 100644 index 64d3ae1e8..000000000 --- a/packages/app-mobile/components/side-menu-content-note.js +++ /dev/null @@ -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 ; - } - - renderSidebarButton(key, title, iconName, onPressHandler) { - const content = ( - - {!iconName ? null : } - {title} - - ); - - if (!onPressHandler) return content; - - return ( - - {content} - - ); - } - - 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 ( - - - - {items} - - - - ); - } -} - -const SideMenuContentNote = connect(state => { - return { - themeId: state.settings.theme, - }; -})(SideMenuContentNoteComponent); - -module.exports = { SideMenuContentNote }; diff --git a/packages/app-mobile/root.tsx b/packages/app-mobile/root.tsx index f0cf843de..4bc9530be 100644 --- a/packages/app-mobile/root.tsx +++ b/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';