feat: Initial clean release of CHM

packages/app-mobile/components/IconButton.tsx

@@ -0,0 +1,247 @@
+//
+// A button with a long-press action. Long-pressing the button displays a tooltip
+//
+
+import * as React from 'react';
+import { themeStyle } from '@joplin/lib/theme';
+import { useState, useMemo, useCallback, useRef, Ref } from 'react';
+import { Text, Pressable, ViewStyle, StyleSheet, LayoutChangeEvent, LayoutRectangle, Animated, AccessibilityState, AccessibilityRole, TextStyle, GestureResponderEvent, Platform, Role, StyleProp, View } from 'react-native';
+import { Menu, MenuOptions, MenuTrigger, renderers } from 'react-native-popup-menu';
+import Icon from './Icon';
+import AccessibleView from './accessibility/AccessibleView';
+
+type ButtonClickListener = ()=> void;
+interface ButtonProps {
+	onPress: ButtonClickListener;
+
+	pressableRef?: Ref<View>;
+
+	// Accessibility label and text shown in a tooltip
+	description: string;
+
+	iconName: string;
+	iconStyle: StyleProp<TextStyle>;
+
+	themeId: number;
+
+	// (web only) On web, touching buttons can cause the on-screen keyboard to be dismissed.
+	// Setting preventKeyboardDismiss overrides this behavior.
+	preventKeyboardDismiss?: boolean;
+
+	containerStyle?: ViewStyle;
+	contentWrapperStyle?: ViewStyle;
+
+	// Additional accessibility information. See View.accessibilityHint
+	accessibilityHint?: string;
+
+	// Role of the button. Defaults to 'button'.
+	accessibilityRole?: AccessibilityRole;
+	accessibilityState?: AccessibilityState;
+	'aria-pressed'?: boolean;
+	role?: Role;
+
+	disabled?: boolean;
+}
+
+const IconButton = (props: ButtonProps) => {
+	const [tooltipVisible, setTooltipVisible] = useState(false);
+	const [buttonLayout, setButtonLayout] = useState<LayoutRectangle|null>(null);
+	const { styles, fadeAnimation } = useStyles(props.themeId, props.contentWrapperStyle);
+
+
+	const animationDuration = 100; // ms
+	const onPressIn = useCallback(() => {
+		// Fade out.
+		Animated.timing(fadeAnimation.current, {
+			toValue: 0.5,
+			duration: animationDuration,
+			useNativeDriver: true,
+		}).start();
+	}, [fadeAnimation]);
+	const onPressOut = useCallback(() => {
+		// Fade in.
+		Animated.timing(fadeAnimation.current, {
+			toValue: 1,
+			duration: animationDuration,
+			useNativeDriver: true,
+		}).start();
+
+		setTooltipVisible(false);
+	}, [fadeAnimation]);
+	const onLongPress = useCallback(() => {
+		setTooltipVisible(true);
+	}, []);
+
+	const onButtonLayout = useCallback((event: LayoutChangeEvent) => {
+		const layoutEvt = event.nativeEvent.layout;
+
+		// Copy the layout event
+		setButtonLayout({ ...layoutEvt });
+	}, []);
+
+	const { onTouchStart, onTouchMove, onTouchEnd } = usePreventKeyboardDismissTouchListeners(
+		props.preventKeyboardDismiss, props.onPress, props.disabled,
+	);
+
+	let icon = <Icon
+		name={props.iconName}
+		style={props.iconStyle}
+		accessibilityLabel={null}
+	/>;
+	// Include browser-provided tooltips on web.
+	icon = Platform.OS === 'web' ? <span title={props.description}>{icon}</span> : icon;
+
+	const button = (
+		<Pressable
+			ref={props.pressableRef}
+			onPress={props.onPress}
+			onLongPress={onLongPress}
+			onPressIn={onPressIn}
+			onPressOut={onPressOut}
+
+			onTouchStart={onTouchStart}
+			onTouchMove={onTouchMove}
+			onTouchEnd={onTouchEnd}
+
+			style={[styles.pressable, props.containerStyle]}
+
+			disabled={ props.disabled ?? false }
+			onLayout={ onButtonLayout }
+
+			accessibilityLabel={props.description}
+			accessibilityHint={props.accessibilityHint}
+			accessibilityRole={props.accessibilityRole ?? 'button'}
+			role={props.role}
+			accessibilityState={props.accessibilityState}
+			aria-pressed={props['aria-pressed']}
+		>
+			<Animated.View style={[props.contentWrapperStyle, styles.animatedContentWrapper]}>
+				{icon}
+			</Animated.View>
+		</Pressable>
+	);
+
+	const renderTooltip = () => {
+		if (!props.description) return null;
+
+		return (
+			<AccessibleView
+				// Any information given by the tooltip should also be provided via
+				// [accessibilityLabel]/[accessibilityHint]. As such, we can hide the tooltip
+				// from the screen reader.
+				inert={true}
+
+				// Position the menu beneath the button so the tooltip appears in the
+				// correct location.
+				style={{
+					left: buttonLayout?.x,
+					top: buttonLayout?.y,
+					position: 'absolute',
+					zIndex: -1,
+				}}
+			>
+				<Menu
+					opened={tooltipVisible}
+					renderer={renderers.Popover}
+					rendererProps={{
+						preferredPlacement: 'bottom',
+						anchorStyle: styles.tooltipAnchor,
+					}}>
+					<MenuTrigger
+						// Don't show/hide when pressed (let the Pressable handle opening/closing)
+						disabled={true}
+						style={{
+							// Ensure that the trigger region has the same size as the button.
+							width: buttonLayout?.width ?? 0,
+							height: buttonLayout?.height ?? 0,
+						}}
+					/>
+					<MenuOptions
+						customStyles={{ optionsContainer: styles.tooltipOptionsContainer }}
+					>
+						<Text style={styles.tooltipText}>
+							{props.description}
+						</Text>
+					</MenuOptions>
+				</Menu>
+			</AccessibleView>
+		);
+	};
+
+	return (
+		<>
+			{renderTooltip()}
+			{button}
+		</>
+	);
+};
+
+const useStyles = (themeId: number, contentWrapperStyle: ViewStyle|null) => {
+	const theme = themeStyle(themeId);
+
+	// See https://blog.logrocket.com/react-native-touchable-vs-pressable-components/
+	// for more about animating Pressable buttons.
+	const fadeAnimation = useRef(new Animated.Value(1));
+
+	const buttonOpacity = contentWrapperStyle?.opacity ?? 1;
+
+	const styles = useMemo(() => {
+		return StyleSheet.create({
+			// Apply the contentWrapperOpacity to the pressable to avoid conflicts
+			// with the fade animation.
+			pressable: { opacity: buttonOpacity },
+			animatedContentWrapper: { opacity: fadeAnimation.current },
+
+			tooltipText: {
+				color: theme.raisedColor,
+				padding: 4,
+			},
+			tooltipAnchor: {
+				backgroundColor: theme.raisedBackgroundColor,
+			},
+			tooltipOptionsContainer: {
+				backgroundColor: theme.raisedBackgroundColor,
+			},
+		});
+	}, [theme, buttonOpacity]);
+
+	return { styles, fadeAnimation };
+};
+
+// On web, by default, pressing buttons defocuses the active edit control, dismissing the
+// virtual keyboard. This hook creates listeners that optionally prevent the keyboard from dismissing.
+const usePreventKeyboardDismissTouchListeners = (preventKeyboardDismiss: boolean, onPress: ()=> void, disabled: boolean) => {
+	const touchStartPointRef = useRef<[number, number]>([-1, -1]);
+	const isTapRef = useRef<boolean>(false);
+	const onTouchStart = useCallback((event: GestureResponderEvent) => {
+		if (Platform.OS === 'web' && preventKeyboardDismiss) {
+			const touch = event.nativeEvent.touches[0];
+			touchStartPointRef.current = [touch?.pageX, touch?.pageY];
+			isTapRef.current = true;
+		}
+	}, [preventKeyboardDismiss]);
+
+	const onTouchMove = useCallback((event: GestureResponderEvent) => {
+		if (Platform.OS === 'web' && preventKeyboardDismiss && isTapRef.current) {
+			// Update isTapRef onTouchMove, rather than onTouchEnd -- the final
+			// touch position is unavailable in onTouchEnd on some devices.
+			const touch = event.nativeEvent.touches[0];
+			const dx = touch?.pageX - touchStartPointRef.current[0];
+			const dy = touch?.pageY - touchStartPointRef.current[1];
+			isTapRef.current = Math.hypot(dx, dy) < 15;
+		}
+	}, [preventKeyboardDismiss]);
+
+	const onTouchEnd = useCallback((event: GestureResponderEvent) => {
+		if (Platform.OS === 'web' && preventKeyboardDismiss) {
+			if (isTapRef.current && !disabled) {
+				event.preventDefault();
+				onPress();
+			}
+		}
+	}, [onPress, disabled, preventKeyboardDismiss]);
+
+	return { onTouchStart, onTouchMove, onTouchEnd };
+};
+
+export default IconButton;