diff options
Diffstat (limited to 'src/components/ContextMenu/index.tsx')
| -rw-r--r-- | src/components/ContextMenu/index.tsx | 591 |
1 files changed, 591 insertions, 0 deletions
diff --git a/src/components/ContextMenu/index.tsx b/src/components/ContextMenu/index.tsx new file mode 100644 index 000000000..d172935d6 --- /dev/null +++ b/src/components/ContextMenu/index.tsx @@ -0,0 +1,591 @@ +import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react' +import { + BackHandler, + Keyboard, + LayoutChangeEvent, + Pressable, + StyleProp, + View, + ViewStyle, +} from 'react-native' +import {Gesture, GestureDetector} from 'react-native-gesture-handler' +import Animated, { + clamp, + interpolate, + runOnJS, + SharedValue, + useAnimatedStyle, + useSharedValue, + withSpring, + WithSpringConfig, +} from 'react-native-reanimated' +import { + useSafeAreaFrame, + useSafeAreaInsets, +} from 'react-native-safe-area-context' +import {captureRef} from 'react-native-view-shot' +import {Image, ImageErrorEventData} from 'expo-image' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useIsFocused} from '@react-navigation/native' +import flattenReactChildren from 'react-keyed-flatten-children' + +import {HITSLOP_10} from '#/lib/constants' +import {useHaptics} from '#/lib/haptics' +import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' +import {logger} from '#/logger' +import {isAndroid, isIOS} from '#/platform/detection' +import {atoms as a, platform, useTheme} from '#/alf' +import { + Context, + ItemContext, + useContextMenuContext, + useContextMenuItemContext, +} from '#/components/ContextMenu/context' +import { + ContextType, + ItemIconProps, + ItemProps, + ItemTextProps, + Measurement, + TriggerProps, +} from '#/components/ContextMenu/types' +import {useInteractionState} from '#/components/hooks/useInteractionState' +import {createPortalGroup} from '#/components/Portal' +import {Text} from '#/components/Typography' +import {Backdrop} from './Backdrop' + +export { + type DialogControlProps as ContextMenuControlProps, + useDialogControl as useContextMenuControl, +} from '#/components/Dialog' + +const {Provider: PortalProvider, Outlet, Portal} = createPortalGroup() + +const SPRING: WithSpringConfig = { + mass: isIOS ? 1.25 : 0.75, + damping: 150, + stiffness: 1000, + restDisplacementThreshold: 0.01, +} + +/** + * Needs placing near the top of the provider stack, but BELOW the theme provider. + */ +export function Provider({children}: {children: React.ReactNode}) { + return ( + <PortalProvider> + {children} + <Outlet /> + </PortalProvider> + ) +} + +export function Root({children}: {children: React.ReactNode}) { + const [measurement, setMeasurement] = useState<Measurement | null>(null) + const animationSV = useSharedValue(0) + const translationSV = useSharedValue(0) + const isFocused = useIsFocused() + + const clearMeasurement = useCallback(() => setMeasurement(null), []) + + const context = useMemo<ContextType>( + () => ({ + isOpen: !!measurement && isFocused, + measurement, + animationSV, + translationSV, + open: (evt: Measurement) => { + setMeasurement(evt) + animationSV.set(withSpring(1, SPRING)) + }, + close: () => { + animationSV.set( + withSpring(0, SPRING, finished => { + if (finished) { + translationSV.set(0) + runOnJS(clearMeasurement)() + } + }), + ) + }, + }), + [ + measurement, + setMeasurement, + isFocused, + animationSV, + translationSV, + clearMeasurement, + ], + ) + + useEffect(() => { + if (isAndroid && context.isOpen) { + const listener = BackHandler.addEventListener('hardwareBackPress', () => { + context.close() + return true + }) + + return () => listener.remove() + } + }, [context]) + + return <Context.Provider value={context}>{children}</Context.Provider> +} + +export function Trigger({children, label, contentLabel, style}: TriggerProps) { + const context = useContextMenuContext() + const playHaptic = useHaptics() + const {top: topInset} = useSafeAreaInsets() + const ref = useRef<View>(null) + const isFocused = useIsFocused() + const [image, setImage] = useState<string | null>(null) + const [pendingMeasurement, setPendingMeasurement] = + useState<Measurement | null>(null) + + const open = useNonReactiveCallback(async () => { + playHaptic() + Keyboard.dismiss() + const [measurement, capture] = await Promise.all([ + new Promise<Measurement>(resolve => { + ref.current?.measureInWindow((x, y, width, height) => + resolve({ + x, + y: + y + + platform({ + default: 0, + android: topInset, // not included in measurement + }), + width, + height, + }), + ) + }), + captureRef(ref, {result: 'data-uri'}).catch(err => { + logger.error(err instanceof Error ? err : String(err), { + message: 'Failed to capture image of context menu trigger', + }) + // will cause the image to fail to load, but it will get handled gracefully + return '<failed capture>' + }), + ]) + setImage(capture) + setPendingMeasurement(measurement) + }) + + const doubleTapGesture = useMemo(() => { + return Gesture.Tap() + .numberOfTaps(2) + .hitSlop(HITSLOP_10) + .onEnd(open) + .runOnJS(true) + }, [open]) + + const pressAndHoldGesture = useMemo(() => { + return Gesture.LongPress() + .onStart(() => { + runOnJS(open)() + }) + .cancelsTouchesInView(false) + }, [open]) + + const composedGestures = Gesture.Exclusive( + doubleTapGesture, + pressAndHoldGesture, + ) + + const {translationSV, animationSV} = context + + const measurement = context.measurement || pendingMeasurement + + return ( + <> + <GestureDetector gesture={composedGestures}> + <View ref={ref} style={[{opacity: context.isOpen ? 0 : 1}, style]}> + {children({ + isNative: true, + control: {isOpen: context.isOpen, open}, + state: { + pressed: false, + hovered: false, + focused: false, + }, + props: { + ref: null, + onPress: null, + onFocus: null, + onBlur: null, + onPressIn: null, + onPressOut: null, + accessibilityHint: null, + accessibilityLabel: label, + accessibilityRole: null, + }, + })} + </View> + </GestureDetector> + {isFocused && image && measurement && ( + <Portal> + <TriggerClone + label={contentLabel} + translation={translationSV} + animation={animationSV} + image={image} + measurement={measurement} + onDisplay={() => { + if (pendingMeasurement) { + context.open(pendingMeasurement) + setPendingMeasurement(null) + } + }} + /> + </Portal> + )} + </> + ) +} + +/** + * an image of the underlying trigger with a grow animation + */ +function TriggerClone({ + translation, + animation, + image, + measurement, + onDisplay, + label, +}: { + translation: SharedValue<number> + animation: SharedValue<number> + image: string + measurement: Measurement + onDisplay: () => void + label: string +}) { + const {_} = useLingui() + + const animatedStyles = useAnimatedStyle(() => ({ + transform: [{translateY: translation.get() * animation.get()}], + })) + + const handleError = useCallback( + (evt: ImageErrorEventData) => { + logger.error('Context menu image load error', {message: evt.error}) + onDisplay() + }, + [onDisplay], + ) + + return ( + <Animated.View + style={[ + a.absolute, + { + top: measurement.y, + left: measurement.x, + width: measurement.width, + height: measurement.height, + }, + a.z_10, + a.pointer_events_none, + animatedStyles, + ]}> + <Image + onDisplay={onDisplay} + onError={handleError} + source={image} + style={{ + width: measurement.width, + height: measurement.height, + }} + accessibilityLabel={label} + accessibilityHint={_(msg`The subject of the context menu`)} + accessibilityIgnoresInvertColors={false} + /> + </Animated.View> + ) +} + +const MENU_WIDTH = 230 + +export function Outer({ + children, + style, + align = 'left', +}: { + children: React.ReactNode + style?: StyleProp<ViewStyle> + align?: 'left' | 'right' +}) { + const t = useTheme() + const context = useContextMenuContext() + const insets = useSafeAreaInsets() + const frame = useSafeAreaFrame() + + const {animationSV, translationSV} = context + + const animatedContainerStyle = useAnimatedStyle(() => ({ + transform: [{translateY: translationSV.get() * animationSV.get()}], + })) + + const animatedStyle = useAnimatedStyle(() => ({ + opacity: clamp(animationSV.get(), 0, 1), + transform: [{scale: interpolate(animationSV.get(), [0, 1], [0.2, 1])}], + })) + + const onLayout = useCallback( + (evt: LayoutChangeEvent) => { + if (!context.measurement) return // should not happen + let translation = 0 + + // pure vibes based + const TOP_INSET = insets.top + 80 + const BOTTOM_INSET_IOS = insets.bottom + 20 + const BOTTOM_INSET_ANDROID = 12 // TODO: revisit when edge-to-edge mode is enabled -sfn + + const {height} = evt.nativeEvent.layout + const topPosition = context.measurement.y + context.measurement.height + 4 + const bottomPosition = topPosition + height + const safeAreaBottomLimit = + frame.height - + platform({ + ios: BOTTOM_INSET_IOS, + android: BOTTOM_INSET_ANDROID, + default: 0, + }) + const diff = bottomPosition - safeAreaBottomLimit + if (diff > 0) { + translation = -diff + } else { + const distanceMessageFromTop = context.measurement.y - TOP_INSET + if (distanceMessageFromTop < 0) { + translation = -Math.max(distanceMessageFromTop, diff) + } + } + + if (translation !== 0) { + translationSV.set(translation) + } + }, + [context.measurement, frame.height, insets, translationSV], + ) + + if (!context.isOpen || !context.measurement) return null + + return ( + <Portal> + <Context.Provider value={context}> + <Backdrop animation={animationSV} onPress={context.close} /> + {/* containing element - stays the same size, so we measure it + to determine if a translation is necessary. also has the positioning */} + <Animated.View + onLayout={onLayout} + style={[ + a.absolute, + a.z_10, + a.mt_xs, + { + width: MENU_WIDTH, + top: context.measurement.y + context.measurement.height, + }, + align === 'left' + ? {left: context.measurement.x} + : { + right: + frame.x + + frame.width - + context.measurement.x - + context.measurement.width, + }, + animatedContainerStyle, + ]}> + {/* scaling element - has the scale/fade animation on it */} + <Animated.View + style={[ + a.rounded_md, + a.shadow_md, + t.atoms.bg_contrast_25, + a.w_full, + // @ts-ignore react-native-web expects string, and this file is platform-split -sfn + // note: above @ts-ignore cannot be a @ts-expect-error because this does not cause an error + // in the typecheck CI - presumably because of RNW overriding the types + { + transformOrigin: + align === 'left' ? [0, 0, 0] : [MENU_WIDTH, 0, 0], + }, + animatedStyle, + style, + ]}> + {/* innermost element - needs an overflow: hidden for children, but we also need a shadow, + so put the shadow on the scaling element and the overflow on the innermost element */} + <View + style={[ + a.flex_1, + a.rounded_md, + a.overflow_hidden, + a.border, + t.atoms.border_contrast_low, + ]}> + {flattenReactChildren(children).map((child, i) => { + return React.isValidElement(child) && + (child.type === Item || child.type === Divider) ? ( + <React.Fragment key={i}> + {i > 0 ? ( + <View style={[a.border_b, t.atoms.border_contrast_low]} /> + ) : null} + {React.cloneElement(child, { + // @ts-expect-error not typed + style: { + borderRadius: 0, + borderWidth: 0, + }, + })} + </React.Fragment> + ) : null + })} + </View> + </Animated.View> + </Animated.View> + </Context.Provider> + </Portal> + ) +} + +export function Item({children, label, style, onPress, ...rest}: ItemProps) { + const t = useTheme() + const context = useContextMenuContext() + const playHaptic = useHaptics() + const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState() + const { + state: pressed, + onIn: onPressIn, + onOut: onPressOut, + } = useInteractionState() + + return ( + <Pressable + {...rest} + accessibilityHint="" + accessibilityLabel={label} + onFocus={onFocus} + onBlur={onBlur} + onPress={e => { + context.close() + onPress?.(e) + }} + onPressIn={e => { + onPressIn() + rest.onPressIn?.(e) + playHaptic('Light') + }} + onPressOut={e => { + onPressOut() + rest.onPressOut?.(e) + }} + style={[ + a.flex_row, + a.align_center, + a.gap_sm, + a.py_sm, + a.px_md, + a.rounded_md, + a.border, + t.atoms.bg_contrast_25, + t.atoms.border_contrast_low, + {minHeight: 40}, + style, + (focused || pressed) && !rest.disabled && [t.atoms.bg_contrast_50], + ]}> + <ItemContext.Provider value={{disabled: Boolean(rest.disabled)}}> + {children} + </ItemContext.Provider> + </Pressable> + ) +} + +export function ItemText({children, style}: ItemTextProps) { + const t = useTheme() + const {disabled} = useContextMenuItemContext() + return ( + <Text + numberOfLines={2} + ellipsizeMode="middle" + style={[ + a.flex_1, + a.text_sm, + a.font_bold, + t.atoms.text_contrast_high, + {paddingTop: 3}, + style, + disabled && t.atoms.text_contrast_low, + ]}> + {children} + </Text> + ) +} + +export function ItemIcon({icon: Comp}: ItemIconProps) { + const t = useTheme() + const {disabled} = useContextMenuItemContext() + return ( + <Comp + size="md" + fill={ + disabled + ? t.atoms.text_contrast_low.color + : t.atoms.text_contrast_medium.color + } + /> + ) +} + +export function ItemRadio({selected}: {selected: boolean}) { + const t = useTheme() + return ( + <View + style={[ + a.justify_center, + a.align_center, + a.rounded_full, + t.atoms.border_contrast_high, + { + borderWidth: 1, + height: 20, + width: 20, + }, + ]}> + {selected ? ( + <View + style={[ + a.absolute, + a.rounded_full, + {height: 14, width: 14}, + selected ? {backgroundColor: t.palette.primary_500} : {}, + ]} + /> + ) : null} + </View> + ) +} + +export function LabelText({children}: {children: React.ReactNode}) { + const t = useTheme() + return ( + <Text + style={[a.font_bold, t.atoms.text_contrast_medium, {marginBottom: -8}]}> + {children} + </Text> + ) +} + +export function Divider() { + const t = useTheme() + return ( + <View + style={[t.atoms.border_contrast_low, a.flex_1, {borderTopWidth: 3}]} + /> + ) +} |