1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-21 09:38:01 +02:00

Chore: Mobile: Use stronger types in side-menu and support FontAwesome icons (#11247)

This commit is contained in:
Henry Heino 2024-10-26 13:10:01 -07:00 committed by GitHub
parent c2844470c5
commit 3732a57af3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,13 +1,15 @@
const React = require('react'); import * as React from 'react';
import { useMemo, useEffect, useCallback, useContext } from 'react'; import { useMemo, useEffect, useCallback, useContext } from 'react';
const { Easing, Animated, TouchableOpacity, Text, StyleSheet, ScrollView, View, Image } = require('react-native'); import { Easing, Animated, TouchableOpacity, Text, StyleSheet, ScrollView, View, Image, ImageStyle } from 'react-native';
const { connect } = require('react-redux'); import { Dispatch } from 'redux';
const Icon = require('react-native-vector-icons/Ionicons').default; import { connect } from 'react-redux';
const IonIcon = require('react-native-vector-icons/Ionicons').default;
import Icon from './Icon';
import Folder from '@joplin/lib/models/Folder'; import Folder from '@joplin/lib/models/Folder';
import Synchronizer from '@joplin/lib/Synchronizer'; import Synchronizer from '@joplin/lib/Synchronizer';
import NavService from '@joplin/lib/services/NavService'; import NavService from '@joplin/lib/services/NavService';
import { _ } from '@joplin/lib/locale'; import { _ } from '@joplin/lib/locale';
import { ThemeStyle, themeStyle } from './global-style'; import { themeStyle } from './global-style';
import { buildFolderTree, isFolderSelected, renderFolders } from '@joplin/lib/components/shared/side-menu-shared'; import { buildFolderTree, isFolderSelected, renderFolders } from '@joplin/lib/components/shared/side-menu-shared';
import { FolderEntity, FolderIcon, FolderIconType } from '@joplin/lib/services/database/types'; import { FolderEntity, FolderIcon, FolderIconType } from '@joplin/lib/services/database/types';
import { AppState } from '../utils/types'; import { AppState } from '../utils/types';
@ -19,26 +21,24 @@ import restoreItems from '@joplin/lib/services/trash/restoreItems';
import emptyTrash from '@joplin/lib/services/trash/emptyTrash'; import emptyTrash from '@joplin/lib/services/trash/emptyTrash';
import { ModelType } from '@joplin/lib/BaseModel'; import { ModelType } from '@joplin/lib/BaseModel';
import { DialogContext } from './DialogManager'; import { DialogContext } from './DialogManager';
import { TextStyle, ViewStyle } from 'react-native';
import { StateDecryptionWorker, StateResourceFetcher } from '@joplin/lib/reducer';
const { TouchableRipple } = require('react-native-paper'); const { TouchableRipple } = require('react-native-paper');
const { substrWithEllipsis } = require('@joplin/lib/string-utils'); const { substrWithEllipsis } = require('@joplin/lib/string-utils');
interface Props { interface Props {
syncStarted: boolean; syncStarted: boolean;
themeId: number; themeId: number;
// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied dispatch: Dispatch;
dispatch: Function;
collapsedFolderIds: string[]; collapsedFolderIds: string[];
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
syncReport: any; syncReport: any;
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied decryptionWorker: StateDecryptionWorker;
decryptionWorker: any; resourceFetcher: StateResourceFetcher;
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
resourceFetcher: any;
syncOnlyOverWifi: boolean; syncOnlyOverWifi: boolean;
isOnMobileData: boolean; isOnMobileData: boolean;
notesParentType: string; notesParentType: string;
folders: FolderEntity[]; folders: FolderEntity[];
opacity: number;
profileConfig: ProfileConfig; profileConfig: ProfileConfig;
inboxJopId: string; inboxJopId: string;
selectedFolderId: string; selectedFolderId: string;
@ -54,8 +54,7 @@ const syncIconRotation = syncIconRotationValue.interpolate({
const folderIconRightMargin = 10; const folderIconRightMargin = 10;
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied let syncIconAnimation: Animated.CompositeAnimation|null = null;
let syncIconAnimation: any;
const SideMenuContentComponent = (props: Props) => { const SideMenuContentComponent = (props: Props) => {
const alwaysShowFolderIcons = useMemo(() => Folder.shouldShowFolderIcons(props.folders), [props.folders]); const alwaysShowFolderIcons = useMemo(() => Folder.shouldShowFolderIcons(props.folders), [props.folders]);
@ -63,27 +62,48 @@ const SideMenuContentComponent = (props: Props) => {
const styles_ = useMemo(() => { const styles_ = useMemo(() => {
const theme = themeStyle(props.themeId); const theme = themeStyle(props.themeId);
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied const buttonStyle: ViewStyle = {
const styles: any = { flex: 1,
flexDirection: 'row',
flexBasis: 'auto',
height: 36,
alignItems: 'center',
paddingLeft: theme.marginLeft,
paddingRight: theme.marginRight,
};
const buttonTextStyle: TextStyle = {
flex: 1,
color: theme.color,
paddingLeft: 10,
fontSize: theme.fontSize,
};
const sidebarIconStyle: TextStyle = {
fontSize: 22,
color: theme.color,
width: 26,
textAlign: 'center',
textAlignVertical: 'center',
};
const folderIconBase: ViewStyle&ImageStyle = {
marginRight: folderIconRightMargin,
width: 27,
};
const folderButtonStyle: ViewStyle = {
...buttonStyle,
paddingLeft: 0,
};
const sideButtonStyle: ViewStyle = {
...buttonStyle,
flex: 0,
};
const styles = StyleSheet.create({
menu: { menu: {
flex: 1, flex: 1,
backgroundColor: theme.backgroundColor, backgroundColor: theme.backgroundColor,
}, },
button: { button: buttonStyle,
flex: 1, buttonText: buttonTextStyle,
flexDirection: 'row',
flexBasis: 'auto',
height: 36,
alignItems: 'center',
paddingLeft: theme.marginLeft,
paddingRight: theme.marginRight,
},
buttonText: {
flex: 1,
color: theme.color,
paddingLeft: 10,
fontSize: theme.fontSize,
},
syncStatus: { syncStatus: {
paddingLeft: theme.marginLeft, paddingLeft: theme.marginLeft,
paddingRight: theme.marginRight, paddingRight: theme.marginRight,
@ -91,31 +111,46 @@ const SideMenuContentComponent = (props: Props) => {
fontSize: theme.fontSizeSmaller, fontSize: theme.fontSizeSmaller,
flex: 0, flex: 0,
}, },
sidebarIcon: { sidebarIcon: sidebarIconStyle,
fontSize: 22, folderButton: folderButtonStyle,
color: theme.color, folderButtonText: {
width: 26, ...buttonTextStyle,
textAlign: 'center', paddingLeft: 0,
textAlignVertical: 'center',
}, },
}; folderButtonSelected: {
...folderButtonStyle,
backgroundColor: theme.selectedColor,
},
folderToggleIcon: {
...theme.icon,
color: theme.colorFaded,
paddingTop: 3,
},
sideButton: sideButtonStyle,
sideButtonSelected: {
...sideButtonStyle,
},
sideButtonText: {
...buttonTextStyle,
},
folderBaseIcon: {
...sidebarIconStyle,
...folderIconBase,
},
folderEmojiIcon: {
...sidebarIconStyle,
...folderIconBase,
textAlign: undefined,
fontSize: theme.fontSize,
},
folderImageIcon: {
...folderIconBase,
height: 20,
resizeMode: 'contain',
},
});
styles.folderButton = { ...styles.button }; return styles;
styles.folderButton.paddingLeft = 0;
styles.folderButtonText = { ...styles.buttonText, paddingLeft: 0 };
styles.folderButtonSelected = { ...styles.folderButton };
styles.folderButtonSelected.backgroundColor = theme.selectedColor;
styles.folderIcon = { ...theme.icon };
styles.folderIcon.color = theme.colorFaded; // '#0072d5';
styles.folderIcon.paddingTop = 3;
styles.sideButton = { ...styles.button, flex: 0 };
styles.sideButtonSelected = { ...styles.sideButton, backgroundColor: theme.selectedColor };
styles.sideButtonText = { ...styles.buttonText };
styles.emptyFolderIcon = { ...styles.sidebarIcon, marginRight: folderIconRightMargin, width: 26 };
return StyleSheet.create(styles);
}, [props.themeId]); }, [props.themeId]);
useEffect(() => { useEffect(() => {
@ -374,21 +409,23 @@ const SideMenuContentComponent = (props: Props) => {
if (actionDone === 'auth') props.dispatch({ type: 'SIDE_MENU_CLOSE' }); if (actionDone === 'auth') props.dispatch({ type: 'SIDE_MENU_CLOSE' });
}, [performSync, props.dispatch]); }, [performSync, props.dispatch]);
const renderFolderIcon = (folderId: string, theme: ThemeStyle, folderIcon: FolderIcon) => { const renderFolderIcon = (folderId: string, folderIcon: FolderIcon) => {
if (!folderIcon) { if (!folderIcon) {
if (folderId === getTrashFolderId()) { if (folderId === getTrashFolderId()) {
folderIcon = getTrashFolderIcon(FolderIconType.Emoji); folderIcon = getTrashFolderIcon(FolderIconType.Emoji);
} else if (alwaysShowFolderIcons) { } else if (alwaysShowFolderIcons) {
return <Icon name="folder-outline" style={styles_.emptyFolderIcon} />; return <IonIcon name="folder-outline" style={styles_.folderBaseIcon} />;
} else { } else {
return null; return null;
} }
} }
if (folderIcon.type === 1) { // FolderIconType.Emoji if (folderIcon.type === FolderIconType.Emoji) {
return <Text style={{ fontSize: theme.fontSize, marginRight: folderIconRightMargin, width: 27 }}>{folderIcon.emoji}</Text>; return <Text style={styles_.folderEmojiIcon}>{folderIcon.emoji}</Text>;
} else if (folderIcon.type === 2) { // FolderIconType.DataUrl } else if (folderIcon.type === FolderIconType.DataUrl) {
return <Image style={{ width: 27, height: 20, marginRight: folderIconRightMargin, resizeMode: 'contain' }} source={{ uri: folderIcon.dataUrl }}/>; return <Image style={styles_.folderImageIcon} source={{ uri: folderIcon.dataUrl }}/>;
} else if (folderIcon.type === FolderIconType.FontAwesome) {
return <Icon style={styles_.folderBaseIcon} name={folderIcon.name} accessibilityLabel={''}/>;
} else { } else {
throw new Error(`Unsupported folder icon type: ${folderIcon.type}`); throw new Error(`Unsupported folder icon type: ${folderIcon.type}`);
} }
@ -397,8 +434,7 @@ const SideMenuContentComponent = (props: Props) => {
const renderFolderItem = (folder: FolderEntity, hasChildren: boolean, depth: number) => { const renderFolderItem = (folder: FolderEntity, hasChildren: boolean, depth: number) => {
const theme = themeStyle(props.themeId); const theme = themeStyle(props.themeId);
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied const folderButtonStyle: ViewStyle = {
const folderButtonStyle: any = {
flex: 1, flex: 1,
flexDirection: 'row', flexDirection: 'row',
flexBasis: 'auto', flexBasis: 'auto',
@ -411,20 +447,18 @@ const SideMenuContentComponent = (props: Props) => {
if (selected) folderButtonStyle.backgroundColor = theme.selectedColor; if (selected) folderButtonStyle.backgroundColor = theme.selectedColor;
folderButtonStyle.paddingLeft = depth * 10 + theme.marginLeft; folderButtonStyle.paddingLeft = depth * 10 + theme.marginLeft;
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied const iconWrapperStyle: ViewStyle = { paddingLeft: 10, paddingRight: 10 };
const iconWrapperStyle: any = { paddingLeft: 10, paddingRight: 10 };
if (selected) iconWrapperStyle.backgroundColor = theme.selectedColor; if (selected) iconWrapperStyle.backgroundColor = theme.selectedColor;
let iconWrapper = null; let iconWrapper = null;
const collapsed = props.collapsedFolderIds.indexOf(folder.id) >= 0; const collapsed = props.collapsedFolderIds.indexOf(folder.id) >= 0;
const iconName = collapsed ? 'chevron-down' : 'chevron-up'; const iconName = collapsed ? 'chevron-down' : 'chevron-up';
const iconComp = <Icon name={iconName} style={styles_.folderIcon} />; const iconComp = <IonIcon name={iconName} style={styles_.folderToggleIcon} />;
iconWrapper = !hasChildren ? null : ( iconWrapper = !hasChildren ? null : (
<TouchableOpacity <TouchableOpacity
style={iconWrapperStyle} style={iconWrapperStyle}
folderid={folder.id}
onPress={() => { onPress={() => {
if (hasChildren) folder_togglePress(folder); if (hasChildren) folder_togglePress(folder);
}} }}
@ -455,7 +489,7 @@ const SideMenuContentComponent = (props: Props) => {
role='button' role='button'
> >
<View style={folderButtonStyle}> <View style={folderButtonStyle}>
{renderFolderIcon(folder.id, theme, folderIcon)} {renderFolderIcon(folder.id, folderIcon)}
<Text numberOfLines={1} style={styles_.folderButtonText}> <Text numberOfLines={1} style={styles_.folderButtonText}>
{Folder.displayTitle(folder)} {Folder.displayTitle(folder)}
</Text> </Text>
@ -466,9 +500,8 @@ const SideMenuContentComponent = (props: Props) => {
); );
}; };
// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied const renderSidebarButton = (key: string, title: string, iconName: string, onPressHandler: ()=> void = null, selected = false) => {
const renderSidebarButton = (key: string, title: string, iconName: string, onPressHandler: Function = null, selected = false) => { let icon = <IonIcon name={iconName} style={styles_.sidebarIcon} aria-hidden={true} />;
let icon = <Icon name={iconName} style={styles_.sidebarIcon} aria-hidden={true} />;
if (key === 'synchronize_button') { if (key === 'synchronize_button') {
icon = <Animated.View style={{ transform: [{ rotate: syncIconRotation }] }}>{icon}</Animated.View>; icon = <Animated.View style={{ transform: [{ rotate: syncIconRotation }] }}>{icon}</Animated.View>;
@ -590,7 +623,7 @@ const SideMenuContentComponent = (props: Props) => {
return ( return (
<View style={style}> <View style={style}>
<View style={{ flex: 1, opacity: props.opacity }}> <View style={{ flex: 1 }}>
<ScrollView scrollsToTop={false} style={styles_.menu}> <ScrollView scrollsToTop={false} style={styles_.menu}>
{items} {items}
</ScrollView> </ScrollView>