self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-10-31 00:07:48 +02:00
Code Issues Releases Activity

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

Browse Source
This commit is contained in:
Henry Heino
2024-09-21 04:57:08 -07:00
committed by GitHub
parent c909d85acc
commit a81c1ff663
5 changed files with 130 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@@ -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

1
.gitignore vendored
View File

@@ -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

127
packages/app-mobile/components/SideMenuContentNote.tsx Normal file
View File

@@ -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);

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

@@ -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 };

2
packages/app-mobile/root.tsx
View File

@@ -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';