feat: Initial clean release of CHM

packages/app-mobile/components/buttons/FloatingActionButton.tsx

@@ -0,0 +1,164 @@
+import * as React from 'react';
+import { useState, useCallback, useMemo, useRef, RefObject, useLayoutEffect } from 'react';
+import { FAB } from 'react-native-paper';
+import { _ } from '@joplin/lib/locale';
+import { Dispatch } from 'redux';
+import { AccessibilityActionEvent, AccessibilityActionInfo, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { connect } from 'react-redux';
+import { MenuAlignment, MenuType } from '../BottomDrawer';
+import { Ionicons as Icon } from '@react-native-vector-icons/ionicons';
+import BottomDrawerMenu, { MenuOption } from '../BottomDrawerMenu';
+import { AppState } from '../../utils/types';
+import { themeStyle } from '../global-style';
+
+type OnButtonPress = ()=> void;
+interface ButtonSpec {
+	icon: string;
+	label: string;
+	color?: string;
+	onPress?: OnButtonPress;
+}
+
+interface ActionButtonProps {
+	themeId: number;
+
+	// If not given, an "add" button will be used.
+	mainButton: ButtonSpec;
+	dispatch: Dispatch;
+
+	menuContent?: MenuOption[];
+	onMenuShow?: ()=> void;
+
+	accessibilityActions?: readonly AccessibilityActionInfo[];
+	// Can return a Promise to simplify unit testing
+	onAccessibilityAction?: (event: AccessibilityActionEvent)=> void|Promise<void>;
+	accessibilityHint?: string;
+}
+
+// Returns a render function compatible with React Native Paper.
+const getIconRenderFunction = (iconName: string) => {
+	type NameProp = React.ComponentProps<typeof Icon>['name'];
+	return (props: Omit<React.ComponentProps<typeof Icon>, 'name'>) => <Icon name={iconName as NameProp} {...props} />;
+};
+
+const useIcon = (iconName: string) => {
+	return useMemo(() => {
+		return getIconRenderFunction(iconName);
+	}, [iconName]);
+};
+
+const useMenuMarginBottom = (buttonContainerRef: RefObject<View>, themeId: number) => {
+	const { height: windowHeight } = useWindowDimensions();
+	const [menuMarginBottom, setMenuMarginBottom] = useState(0);
+
+	const recomputeMargin = useCallback(() => {
+		const theme = themeStyle(themeId);
+
+		buttonContainerRef.current?.measure((_x, _y, _width, _height, _pageX, pageY) => {
+			const extraMargin = theme.marginBottom;
+			setMenuMarginBottom(windowHeight - pageY + extraMargin);
+		});
+	}, [windowHeight, buttonContainerRef, themeId]);
+
+	useLayoutEffect(() => {
+		recomputeMargin();
+	}, [recomputeMargin]);
+
+	const recomputeMarginRef = useRef(recomputeMargin);
+	recomputeMarginRef.current = recomputeMargin;
+
+	const onMenuContainerLayout = useCallback(() => {
+		recomputeMarginRef.current();
+	}, []);
+
+	return { onMenuContainerLayout, menuMarginBottom };
+};
+
+
+interface StylesProps {
+	menuMarginBottom: number;
+}
+
+const useStyles = ({ menuMarginBottom }: StylesProps) => {
+	return useMemo(() => {
+		return StyleSheet.create({
+			menu: {
+				marginBottom: menuMarginBottom,
+				// Always float right:
+				alignSelf: 'flex-end',
+			},
+			buttonContainer: {
+				position: 'absolute',
+				bottom: 10,
+				right: 10,
+			},
+			button: {
+				alignSelf: 'flex-end',
+			},
+		});
+	}, [menuMarginBottom]);
+};
+
+const FloatingActionButton = (props: ActionButtonProps) => {
+	const [open, setOpen] = useState(false);
+	const onMenuToggled = useCallback(() => {
+		const newOpen = !open;
+		if (newOpen) {
+			props.dispatch({
+				type: 'SIDE_MENU_CLOSE',
+			});
+		}
+		setOpen(newOpen);
+	}, [setOpen, open, props.dispatch]);
+
+	const onDismiss = useCallback(() => {
+		if (open) onMenuToggled();
+	}, [open, onMenuToggled]);
+
+	const mainButtonRef = useRef<View>(null);
+
+	const closedIcon = useIcon(props.mainButton?.icon ?? 'add');
+	const openIcon = useIcon('close');
+
+	const label = props.mainButton?.label ?? _('Add new');
+
+	const buttonContainerRef = useRef<View|null>(null);
+
+	const { menuMarginBottom, onMenuContainerLayout } = useMenuMarginBottom(buttonContainerRef, props.themeId);
+	const styles = useStyles({ menuMarginBottom });
+
+	const menuButton = <FAB
+		ref={mainButtonRef}
+		icon={open ? openIcon : closedIcon}
+		accessibilityLabel={label}
+		onPress={props.mainButton?.onPress ?? onMenuToggled}
+		style={styles.button}
+		accessibilityActions={props.accessibilityActions}
+		onAccessibilityAction={props.onAccessibilityAction}
+	/>;
+
+	return <>
+		<View
+			style={styles.buttonContainer}
+			ref={buttonContainerRef}
+			onLayout={onMenuContainerLayout}
+		>
+			{menuButton}
+		</View>
+		{ props.menuContent && <BottomDrawerMenu
+			visible={open}
+			onDismiss={onDismiss}
+			alignment={MenuAlignment.Right}
+			style={styles.menu}
+			menuType={MenuType.Floating}
+			themeId={props.themeId}
+			options={props.menuContent}
+			autoScrollToEnd
+		/> }
+	</>;
+};
+
+const ConnectedComponent: React.FC<Omit<ActionButtonProps, 'themeId'|'dispatch'>> = (
+	connect((state: AppState) => ({ themeId: state.settings.theme }))(FloatingActionButton)
+);
+export default ConnectedComponent;