feat: Initial clean release of CHM

packages/app-mobile/components/BottomDrawerMenu.tsx

@@ -0,0 +1,210 @@
+import * as React from 'react';
+import { useCallback, useMemo, useRef } from 'react';
+import { Platform, StyleSheet, View, useWindowDimensions, TextStyle, StyleProp, ViewStyle } from 'react-native';
+import { themeStyle } from './global-style';
+import BottomDrawer, { MenuAlignment, MenuType } from './BottomDrawer';
+import { TouchableRipple, Text } from 'react-native-paper';
+import Icon from './Icon';
+import focusView from '../utils/focusView';
+import debounce from '../utils/debounce';
+
+interface MenuOptionDivider {
+	isDivider: true;
+}
+
+export enum MenuOptionStyle {
+	Normal = 'normal',
+	Destructive = 'destructive',
+}
+
+export interface MenuOptionButton {
+	key?: string;
+	isDivider?: false|undefined;
+	disabled?: boolean;
+	style?: MenuOptionStyle;
+	onPress: ()=> void;
+	icon?: string;
+	title: string;
+
+	accessibilityHint?: string;
+	autoFocus?: boolean;
+}
+
+export type MenuOption = MenuOptionDivider|MenuOptionButton;
+
+interface Props {
+	themeId: number;
+	visible: boolean;
+	style?: StyleProp<ViewStyle>;
+	menuType?: MenuType;
+	alignment: MenuAlignment;
+	autoScrollToEnd?: boolean;
+	title?: string;
+	onDismiss: ()=> void;
+	options: MenuOption[];
+}
+
+const useStyles = (themeId: number) => {
+	const windowWidth = useWindowDimensions().width;
+	return useMemo(() => {
+		const theme = themeStyle(themeId);
+		const dividerMargin = theme.marginSmall;
+
+		return StyleSheet.create({
+			title: {
+				paddingLeft: theme.marginLeft,
+				paddingRight: theme.marginRight,
+				// Match the space from button text to a neighbouring divider:
+				paddingVertical: theme.marginMedium + dividerMargin,
+				marginBottom: theme.marginSmall,
+
+				lineHeight: theme.fontSizeLarger,
+				fontSize: theme.fontSizeLarger,
+
+				borderColor: theme.dividerColor,
+				borderBottomWidth: 1,
+			},
+			menu: {
+				paddingHorizontal: 0,
+				width: 350,
+				maxWidth: windowWidth,
+			},
+			menuContent: { flexDirection: 'column', width: '100%' },
+			menuItem: {
+				alignItems: 'flex-start',
+				padding: theme.marginMedium,
+				paddingLeft: theme.marginLeft,
+				paddingRight: theme.marginRight,
+			},
+			menuItemContent: {
+				flexDirection: 'row',
+				gap: theme.marginSmall,
+				alignItems: 'center',
+			},
+			menuItemText: {
+				color: theme.color,
+				fontSize: theme.fontSize,
+			},
+			menuItemTextDisabled: {
+				opacity: theme.disabledOpacity,
+			},
+			menuItemTextDestructive: {
+				color: theme.destructiveColor,
+			},
+			divider: {
+				height: 0,
+				borderBottomWidth: 1,
+				borderColor: theme.dividerColor,
+				marginVertical: dividerMargin,
+				marginHorizontal: theme.margin,
+			},
+		});
+	}, [themeId, windowWidth]);
+};
+
+const useFocusView = (visible: boolean) => {
+	const visibleRef = useRef(visible);
+	visibleRef.current = visible;
+
+	const autoFocusView = useMemo(() => {
+		// Debounce: Auto-focus seems to need to occur after a delay
+		return debounce((view: View|null) => {
+			if (!view || !visibleRef.current) return;
+			focusView('BottomDrawerMenu', view);
+		}, 100);
+	}, []);
+
+	return autoFocusView;
+};
+
+const BottomDrawerMenu: React.FC<Props> = props => {
+	const styles = useStyles(props.themeId);
+
+	const autoFocusView = useFocusView(props.visible);
+
+	const pendingActionRef = useRef<(()=> void)|null>(null);
+	const onDismissed = useCallback(() => {
+		const action = pendingActionRef.current;
+		pendingActionRef.current = null;
+		action?.();
+	}, []);
+
+	const menuOptionComponents: React.ReactNode[] = [];
+
+	let keyCounter = 0;
+	for (const option of props.options) {
+		if (option.isDivider === true) {
+			menuOptionComponents.push(
+				<View key={`menuOption_divider_${keyCounter++}`} style={styles.divider} />,
+			);
+		} else {
+			const key = `menuOption_${option.key ?? keyCounter++}`;
+			const textStyles: TextStyle[] = [styles.menuItemText];
+			if (option.disabled) {
+				textStyles.push(styles.menuItemTextDisabled);
+			}
+			if (option.style === MenuOptionStyle.Destructive) {
+				textStyles.push(styles.menuItemTextDestructive);
+			}
+
+			menuOptionComponents.push(
+				<TouchableRipple
+					borderless={true}
+					role='button'
+					style={styles.menuItem}
+					onPress={() => {
+						if (Platform.OS === 'ios') {
+							// Wait for the menu to close because iOS cannot show other native views while it's closing.
+							// See https://github.com/laurent22/joplin/issues/16551
+							pendingActionRef.current = option.onPress;
+						} else {
+							option.onPress();
+						}
+						props.onDismiss();
+					}}
+					accessibilityHint={option.accessibilityHint}
+					ref={(option.autoFocus && props.visible) ? autoFocusView : undefined}
+					key={key}
+					disabled={!!option.disabled}
+				>
+					<View style={styles.menuItemContent}>
+						{option.icon && <Icon name={option.icon} style={textStyles} accessibilityLabel={null} />}
+						<Text
+							style={textStyles}
+							disabled={option.disabled}
+						>{option.title}</Text>
+					</View>
+				</TouchableRipple>,
+			);
+		}
+	}
+
+	const titleComponent = props.title ? <>
+		<Text
+			role='heading'
+			variant='titleMedium'
+			style={styles.title}
+		>{props.title}</Text>
+	</> : null;
+	return <BottomDrawer
+		visible={props.visible}
+		onDismiss={props.onDismiss}
+		onDismissed={onDismissed}
+		alignment={props.alignment}
+		autoScrollToEnd={props.autoScrollToEnd}
+		draggable={true}
+		menuType={props.menuType}
+		contentStyle={styles.menu}
+		style={props.style}
+	>
+		<View
+			style={styles.menuContent}
+			testID={`menu-content-${props.visible ? 'open' : 'closed'}`}
+		>
+			{titleComponent}
+			{menuOptionComponents}
+		</View>
+	</BottomDrawer>;
+};
+
+export default BottomDrawerMenu;