From c4785ef96e13d02b217dce4e777269c0e895507d Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Fri, 21 Mar 2025 18:29:14 +0200 Subject: New `ContextMenu` menu type for DM messages (#8014) * get context menu somewhat working ish * take screenshot rather than double rendering * get animations somewhat working * get transform animation working * rm log * upwards safe area * get working on android * get android working once and for all * fix positioning on both platforms * use dark blur on ios always, fix dark mode * allow closing with hardware back press * try and fix type error * add note about ts-ignore * round post * add image capture error handling * extract magic numbers * set explicit embed width, rm top margin * Message embed width tweaks * Format * fix position of embeds * same as above for web --------- Co-authored-by: Eric Bailey --- src/components/ContextMenu/types.ts | 97 +++++++++++++++++++++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 src/components/ContextMenu/types.ts (limited to 'src/components/ContextMenu/types.ts') diff --git a/src/components/ContextMenu/types.ts b/src/components/ContextMenu/types.ts new file mode 100644 index 000000000..0b3fedc55 --- /dev/null +++ b/src/components/ContextMenu/types.ts @@ -0,0 +1,97 @@ +import React from 'react' +import {AccessibilityRole, StyleProp, ViewStyle} from 'react-native' +import {SharedValue} from 'react-native-reanimated' + +import * as Dialog from '#/components/Dialog' +import {RadixPassThroughTriggerProps} from '#/components/Menu/types' + +export type { + GroupProps, + ItemIconProps, + ItemProps, + ItemTextProps, +} from '#/components/Menu/types' + +export type Measurement = { + x: number + y: number + width: number + height: number +} + +export type ContextType = { + isOpen: boolean + measurement: Measurement | null + /* Spring animation between 0 and 1 */ + animationSV: SharedValue + /* Translation in Y axis to ensure everything's onscreen */ + translationSV: SharedValue + open: (evt: Measurement) => void + close: () => void +} + +export type ItemContextType = { + disabled: boolean +} + +export type TriggerProps = { + children(props: TriggerChildProps): React.ReactNode + label: string + /** + * When activated, this is the accessibility label for the entire thing that has been triggered. + * For example, if the trigger is a message bubble, use the message content. + * + * @platform ios, android + */ + contentLabel: string + hint?: string + role?: AccessibilityRole + style?: StyleProp +} +export type TriggerChildProps = + | { + isNative: true + control: {isOpen: boolean; open: () => void} + state: { + hovered: false + focused: false + pressed: false + } + /** + * We don't necessarily know what these will be spread on to, so we + * should add props one-by-one. + * + * On web, these properties are applied to a parent `Pressable`, so this + * object is empty. + */ + props: { + ref: null + onPress: null + onFocus: null + onBlur: null + onPressIn: null + onPressOut: null + accessibilityHint: null + accessibilityLabel: string + accessibilityRole: null + } + } + | { + isNative: false + control: Dialog.DialogOuterProps['control'] + state: { + hovered: false + focused: false + pressed: false + } + props: RadixPassThroughTriggerProps & { + onPress: () => void + onFocus: () => void + onBlur: () => void + onMouseEnter: () => void + onMouseLeave: () => void + accessibilityHint?: string + accessibilityLabel: string + accessibilityRole: AccessibilityRole + } + } -- cgit 1.4.1