From 10320c5462d090c929f30e5a1db94fb19172c97b Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Thu, 9 Nov 2023 17:29:12 +0100 Subject: [PATCH 1/7] Rename files --- .../{index.native.js => index.native.tsx} | 2 +- .../PressableWithSecondaryInteraction/{index.js => index.tsx} | 2 +- .../{pressableWithSecondaryInteractionPropTypes.js => types.ts} | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename src/components/PressableWithSecondaryInteraction/{index.native.js => index.native.tsx} (94%) rename src/components/PressableWithSecondaryInteraction/{index.js => index.tsx} (97%) rename src/components/PressableWithSecondaryInteraction/{pressableWithSecondaryInteractionPropTypes.js => types.ts} (100%) diff --git a/src/components/PressableWithSecondaryInteraction/index.native.js b/src/components/PressableWithSecondaryInteraction/index.native.tsx similarity index 94% rename from src/components/PressableWithSecondaryInteraction/index.native.js rename to src/components/PressableWithSecondaryInteraction/index.native.tsx index 039801bee3f2..a0f33140751c 100644 --- a/src/components/PressableWithSecondaryInteraction/index.native.js +++ b/src/components/PressableWithSecondaryInteraction/index.native.tsx @@ -2,7 +2,7 @@ import React, {forwardRef} from 'react'; import _ from 'underscore'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Text from '@components/Text'; -import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes'; +import * as pressableWithSecondaryInteractionPropTypes from './types'; /** * This is a special Pressable that calls onSecondaryInteraction when LongPressed. diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.tsx similarity index 97% rename from src/components/PressableWithSecondaryInteraction/index.js rename to src/components/PressableWithSecondaryInteraction/index.tsx index ec6127dbf1fa..059913ea4a81 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.tsx @@ -4,7 +4,7 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import styles from '@styles/styles'; import * as StyleUtils from '@styles/StyleUtils'; -import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes'; +import * as pressableWithSecondaryInteractionPropTypes from './types'; /** * This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked. diff --git a/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js b/src/components/PressableWithSecondaryInteraction/types.ts similarity index 100% rename from src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js rename to src/components/PressableWithSecondaryInteraction/types.ts From 75170ea4dabfb810147494cba95104b7e577a14d Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Thu, 9 Nov 2023 19:25:34 +0100 Subject: [PATCH 2/7] Initial changes --- .../Pressable/PressableWithFeedback.tsx | 1 + .../index.native.tsx | 71 ++++++------ .../index.tsx | 102 +++++++---------- .../types.ts | 105 +++++++++--------- .../Reactions/EmojiReactionBubble.js | 1 - 5 files changed, 127 insertions(+), 153 deletions(-) diff --git a/src/components/Pressable/PressableWithFeedback.tsx b/src/components/Pressable/PressableWithFeedback.tsx index 5d7f7c110ea7..dcfe0b41ff29 100644 --- a/src/components/Pressable/PressableWithFeedback.tsx +++ b/src/components/Pressable/PressableWithFeedback.tsx @@ -88,3 +88,4 @@ function PressableWithFeedback( PressableWithFeedback.displayName = 'PressableWithFeedback'; export default forwardRef(PressableWithFeedback); +export type {PressableWithFeedbackProps}; diff --git a/src/components/PressableWithSecondaryInteraction/index.native.tsx b/src/components/PressableWithSecondaryInteraction/index.native.tsx index a0f33140751c..228a2d8cd83f 100644 --- a/src/components/PressableWithSecondaryInteraction/index.native.tsx +++ b/src/components/PressableWithSecondaryInteraction/index.native.tsx @@ -1,51 +1,46 @@ -import React, {forwardRef} from 'react'; -import _ from 'underscore'; +import React, {ForwardedRef, forwardRef} from 'react'; +import {GestureResponderEvent, Text as RNText, TextProps, View} from 'react-native'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Text from '@components/Text'; -import * as pressableWithSecondaryInteractionPropTypes from './types'; +import PressableWithSecondaryInteractionProps, {PressableWithSecondaryInteractionRef} from './types'; -/** - * This is a special Pressable that calls onSecondaryInteraction when LongPressed. - * - * @param {Object} props - * @returns {React.Component} - */ -function PressableWithSecondaryInteraction(props) { - // Use Text node for inline mode to prevent content overflow. - const Node = props.inline ? Text : PressableWithFeedback; - const executeSecondaryInteraction = (e) => { - e.preventDefault(); - props.onSecondaryInteraction(e); +/** This is a special Pressable that calls onSecondaryInteraction when LongPressed. */ +function PressableWithSecondaryInteraction( + {children, onSecondaryInteraction, inline = false, needsOffscreenAlphaCompositing = false, ...rest}: PressableWithSecondaryInteractionProps, + ref: PressableWithSecondaryInteractionRef, +) { + const executeSecondaryInteraction = (event: GestureResponderEvent) => { + event.preventDefault(); + onSecondaryInteraction?.(event); }; + // Use Text node for inline mode to prevent content overflow. + if (inline) { + return ( + } + onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined} + > + {children} + + ); + } + return ( - } + onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined} + needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositing} > - {props.children} - + {children} + ); } -PressableWithSecondaryInteraction.propTypes = pressableWithSecondaryInteractionPropTypes.propTypes; -PressableWithSecondaryInteraction.defaultProps = pressableWithSecondaryInteractionPropTypes.defaultProps; PressableWithSecondaryInteraction.displayName = 'PressableWithSecondaryInteraction'; -const PressableWithSecondaryInteractionWithRef = forwardRef((props, ref) => ( - -)); - -PressableWithSecondaryInteractionWithRef.displayName = 'PressableWithSecondaryInteractionWithRef'; - -export default PressableWithSecondaryInteractionWithRef; +export default forwardRef(PressableWithSecondaryInteraction); diff --git a/src/components/PressableWithSecondaryInteraction/index.tsx b/src/components/PressableWithSecondaryInteraction/index.tsx index 059913ea4a81..09a9f3aa8c0a 100644 --- a/src/components/PressableWithSecondaryInteraction/index.tsx +++ b/src/components/PressableWithSecondaryInteraction/index.tsx @@ -1,43 +1,39 @@ -import React, {forwardRef, useEffect, useRef} from 'react'; -import _ from 'underscore'; +import React, {ForwardedRef, forwardRef, useEffect, useRef} from 'react'; +import {GestureResponderEvent, View} from 'react-native'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import styles from '@styles/styles'; import * as StyleUtils from '@styles/StyleUtils'; -import * as pressableWithSecondaryInteractionPropTypes from './types'; - -/** - * This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked. - */ - -function PressableWithSecondaryInteraction({ - children, - inline, - style, - enableLongPressWithHover, - withoutFocusOnSecondaryInteraction, - preventDefaultContextMenu, - onSecondaryInteraction, - onPressIn, - onPress, - onPressOut, - activeOpacity, - forwardedRef, - ...rest -}) { - const pressableRef = useRef(null); - - /** - * @param {Event} e - the secondary interaction event - */ - const executeSecondaryInteraction = (e) => { +import PressableWithSecondaryInteractionProps, {PressableWithSecondaryInteractionRef} from './types'; + +/** This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked. */ +function PressableWithSecondaryInteraction( + { + children, + onPress, + onPressOut, + inline = false, + style, + enableLongPressWithHover = false, + withoutFocusOnSecondaryInteraction = false, + needsOffscreenAlphaCompositing = false, + preventDefaultContextMenu = true, + onSecondaryInteraction, + activeOpacity = 1, + ...rest + }: PressableWithSecondaryInteractionProps, + ref: PressableWithSecondaryInteractionRef, +) { + const pressableRef = useRef(null); + + const executeSecondaryInteraction = (event: GestureResponderEvent) => { if (DeviceCapabilities.hasHoverSupport() && !enableLongPressWithHover) { return; } if (withoutFocusOnSecondaryInteraction && pressableRef.current) { pressableRef.current.blur(); } - onSecondaryInteraction(e); + onSecondaryInteraction?.(event); }; useEffect(() => { @@ -45,32 +41,32 @@ function PressableWithSecondaryInteraction({ return; } - if (forwardedRef) { - if (_.isFunction(forwardedRef)) { - forwardedRef(pressableRef.current); - } else if (_.isObject(forwardedRef)) { + if (ref) { + if (typeof ref === 'function') { + ref(pressableRef.current); + } else { // eslint-disable-next-line no-param-reassign - forwardedRef.current = pressableRef.current; + ref.current = pressableRef.current; } } const element = pressableRef.current; /** - * @param {contextmenu} e - A right-click MouseEvent. + * @param event - A right-click MouseEvent. * https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event */ - const executeSecondaryInteractionOnContextMenu = (e) => { + const executeSecondaryInteractionOnContextMenu = (event: MouseEvent) => { if (!onSecondaryInteraction) { return; } - e.stopPropagation(); + event.stopPropagation(); if (preventDefaultContextMenu) { - e.preventDefault(); + event.preventDefault(); } - onSecondaryInteraction(e); + onSecondaryInteraction(event); /** * This component prevents the tapped element from capturing focus. @@ -89,42 +85,28 @@ function PressableWithSecondaryInteraction({ return () => { element.removeEventListener('contextmenu', executeSecondaryInteractionOnContextMenu); }; - }, [forwardedRef, onSecondaryInteraction, preventDefaultContextMenu, withoutFocusOnSecondaryInteraction]); + }, [ref, onSecondaryInteraction, preventDefaultContextMenu, withoutFocusOnSecondaryInteraction]); - const defaultPressableProps = _.omit(rest, ['onLongPress']); const inlineStyle = inline ? styles.dInline : {}; // On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text. return ( } style={(state) => [StyleUtils.parseStyleFromFunction(style, state), inlineStyle]} + needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositing} > {children} ); } -PressableWithSecondaryInteraction.propTypes = pressableWithSecondaryInteractionPropTypes.propTypes; -PressableWithSecondaryInteraction.defaultProps = pressableWithSecondaryInteractionPropTypes.defaultProps; PressableWithSecondaryInteraction.displayName = 'PressableWithSecondaryInteraction'; -const PressableWithSecondaryInteractionWithRef = forwardRef((props, ref) => ( - -)); - -PressableWithSecondaryInteractionWithRef.displayName = 'PressableWithSecondaryInteractionWithRef'; - -export default PressableWithSecondaryInteractionWithRef; +export default forwardRef(PressableWithSecondaryInteraction); diff --git a/src/components/PressableWithSecondaryInteraction/types.ts b/src/components/PressableWithSecondaryInteraction/types.ts index 8e2fb5141091..0db28f3e6a61 100644 --- a/src/components/PressableWithSecondaryInteraction/types.ts +++ b/src/components/PressableWithSecondaryInteraction/types.ts @@ -1,68 +1,65 @@ -import PropTypes from 'prop-types'; -import refPropTypes from '@components/refPropTypes'; -import stylePropTypes from '@styles/stylePropTypes'; +import {ForwardedRef} from 'react'; +import {GestureResponderEvent, StyleProp, Text, TextStyle, View, ViewStyle} from 'react-native'; +import {PressableWithFeedbackProps} from '@components/Pressable/PressableWithFeedback'; +import ChildrenProps from '@src/types/utils/ChildrenProps'; -const propTypes = { - /** The function that should be called when this pressable is pressed */ - onPress: PropTypes.func, +type PressableWithSecondaryInteractionProps = PressableWithFeedbackProps & + ChildrenProps & { + /** The function that should be called when this pressable is pressed */ + onPress: (event?: GestureResponderEvent) => void; - /** The function that should be called when this pressable is pressedIn */ - onPressIn: PropTypes.func, + /** The function that should be called when this pressable is pressedIn */ + onPressIn?: (event?: GestureResponderEvent) => void; - /** The function that should be called when this pressable is pressedOut */ - onPressOut: PropTypes.func, + /** The function that should be called when this pressable is pressedOut */ + onPressOut?: (event?: GestureResponderEvent) => void; - /** - * The function that should be called when this pressable is LongPressed or right-clicked. - * - * This function should be stable, preferably wrapped in a `useCallback` so that it does not - * cause several re-renders. - */ - onSecondaryInteraction: PropTypes.func, + /** + * The function that should be called when this pressable is LongPressed or right-clicked. + * + * This function should be stable, preferably wrapped in a `useCallback` so that it does not + * cause several re-renders. + */ + onSecondaryInteraction?: (event: GestureResponderEvent | MouseEvent) => void; - /** The children which should be contained in this wrapper component. */ - children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired, + /** Prevent the default ContextMenu on web/Desktop */ + preventDefaultContextMenu?: boolean; - /** The ref to the search input (may be null on small screen widths) */ - forwardedRef: refPropTypes, + /** Use Text instead of Pressable to create inline layout. + * It has few limitations in comparison to Pressable. + * + * - No support for delayLongPress. + * - No support for pressIn and pressOut events. + * - No support for opacity + * + * Note: Web uses styling instead of Text due to no support of LongPress. Thus above pointers are not valid for web. + */ + inline?: boolean; - /** Prevent the default ContextMenu on web/Desktop */ - preventDefaultContextMenu: PropTypes.bool, + /** Disable focus trap for the element on secondary interaction */ + withoutFocusOnSecondaryInteraction?: boolean; - /** Use Text instead of Pressable to create inline layout. - * It has few limitations in comparison to Pressable. - * - * - No support for delayLongPress. - * - No support for pressIn and pressOut events. - * - No support for opacity - * - * Note: Web uses styling instead of Text due to no support of LongPress. Thus above pointers are not valid for web. - */ - inline: PropTypes.bool, + /** Opacity to reduce to when active */ + activeOpacity?: number; - /** Disable focus trap for the element on secondary interaction */ - withoutFocusOnSecondaryInteraction: PropTypes.bool, + /** Used to apply styles to the Pressable */ + style?: StyleProp; - /** Opacity to reduce to when active */ - activeOpacity: PropTypes.number, + /** Whether the view needs to be rendered offscreen (for Android only) */ + needsOffscreenAlphaCompositing?: boolean; - /** Used to apply styles to the Pressable */ - style: stylePropTypes, + /** Whether the long press with hover behavior is enabled */ + enableLongPressWithHover?: boolean; - /** Whether the view needs to be rendered offscreen (for Android only) */ - needsOffscreenAlphaCompositing: PropTypes.bool, -}; + /** + * Specifies the accessibility label for the component + * @example 'Search' + * @example 'Close' + */ + accessibilityLabel: string; + }; -const defaultProps = { - forwardedRef: () => {}, - onPressIn: () => {}, - onPressOut: () => {}, - preventDefaultContextMenu: true, - inline: false, - withoutFocusOnSecondaryInteraction: false, - activeOpacity: 1, - enableLongPressWithHover: false, - needsOffscreenAlphaCompositing: false, -}; +type PressableWithSecondaryInteractionRef = ForwardedRef; -export {propTypes, defaultProps}; +export default PressableWithSecondaryInteractionProps; +export type {PressableWithSecondaryInteractionRef}; diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js index 822b15711c50..03823d6185e2 100644 --- a/src/components/Reactions/EmojiReactionBubble.js +++ b/src/components/Reactions/EmojiReactionBubble.js @@ -69,7 +69,6 @@ function EmojiReactionBubble(props) { props.onPress(); }} - onLongPress={props.onReactionListOpen} onSecondaryInteraction={props.onReactionListOpen} ref={props.forwardedRef} enableLongPressWithHover={props.isSmallScreenWidth} From 9079bdc7955cd17491766a1f7bc5c625b8fa97d2 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Fri, 10 Nov 2023 11:16:19 +0100 Subject: [PATCH 3/7] Fix PRessable ref types --- .../Pressable/GenericPressable/BaseGenericPressable.tsx | 6 +++--- .../Pressable/GenericPressable/index.native.tsx | 7 +++---- src/components/Pressable/GenericPressable/index.tsx | 8 ++++---- src/components/Pressable/GenericPressable/types.ts | 7 +++++-- src/components/Pressable/PressableWithDelayToggle.tsx | 8 ++++---- src/components/Pressable/PressableWithFeedback.tsx | 8 ++++---- src/components/Pressable/PressableWithoutFeedback.tsx | 7 +++---- 7 files changed, 26 insertions(+), 25 deletions(-) diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx index 1576fe18da54..f0f481a5a06c 100644 --- a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx +++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx @@ -8,7 +8,7 @@ import KeyboardShortcut from '@libs/KeyboardShortcut'; import styles from '@styles/styles'; import * as StyleUtils from '@styles/StyleUtils'; import CONST from '@src/CONST'; -import PressableProps from './types'; +import PressableProps, {PressableRef} from './types'; /** * Returns the cursor style based on the state of Pressable @@ -49,7 +49,7 @@ function GenericPressable( accessible = true, ...rest }: PressableProps, - ref: ForwardedRef, + ref: PressableRef, ) { const {isExecuting, singleExecution} = useSingleExecution(); const isScreenReaderActive = Accessibility.useScreenReaderStatus(); @@ -125,7 +125,7 @@ function GenericPressable( } onPress={!isDisabled ? singleExecution(onPressHandler) : undefined} onLongPress={!isDisabled && onLongPress ? onLongPressHandler : undefined} onKeyDown={!isDisabled ? onKeyDown : undefined} diff --git a/src/components/Pressable/GenericPressable/index.native.tsx b/src/components/Pressable/GenericPressable/index.native.tsx index 5bed0f488063..968ee6063a95 100644 --- a/src/components/Pressable/GenericPressable/index.native.tsx +++ b/src/components/Pressable/GenericPressable/index.native.tsx @@ -1,9 +1,8 @@ -import React, {ForwardedRef, forwardRef} from 'react'; -import {View} from 'react-native'; +import React, {forwardRef} from 'react'; import GenericPressable from './BaseGenericPressable'; -import PressableProps from './types'; +import PressableProps, {PressableRef} from './types'; -function NativeGenericPressable(props: PressableProps, ref: ForwardedRef) { +function NativeGenericPressable(props: PressableProps, ref: PressableRef) { return ( ) { +function WebGenericPressable(props: PressableProps, ref: PressableRef) { return ( ; + export default PressableProps; +export type {PressableRef}; diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx index c402710d71bd..d12777f9965b 100644 --- a/src/components/Pressable/PressableWithDelayToggle.tsx +++ b/src/components/Pressable/PressableWithDelayToggle.tsx @@ -1,6 +1,6 @@ /* eslint-disable react-native-a11y/has-valid-accessibility-descriptors */ -import React, {ForwardedRef, forwardRef} from 'react'; -import {Text as RNText, StyleProp, TextStyle, View, ViewStyle} from 'react-native'; +import React, {forwardRef} from 'react'; +import {StyleProp, TextStyle, ViewStyle} from 'react-native'; import {SvgProps} from 'react-native-svg'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; @@ -11,7 +11,7 @@ import getButtonState from '@libs/getButtonState'; import styles from '@styles/styles'; import * as StyleUtils from '@styles/StyleUtils'; import variables from '@styles/variables'; -import PressableProps from './GenericPressable/types'; +import PressableProps, {PressableRef} from './GenericPressable/types'; import PressableWithoutFeedback from './PressableWithoutFeedback'; type PressableWithDelayToggleProps = PressableProps & { @@ -64,7 +64,7 @@ function PressableWithDelayToggle( iconStyles, icon, }: PressableWithDelayToggleProps, - ref: ForwardedRef, + ref: PressableRef, ) { const [isActive, temporarilyDisableInteractions] = useThrottledButtonState(); diff --git a/src/components/Pressable/PressableWithFeedback.tsx b/src/components/Pressable/PressableWithFeedback.tsx index dcfe0b41ff29..a4c439c4441c 100644 --- a/src/components/Pressable/PressableWithFeedback.tsx +++ b/src/components/Pressable/PressableWithFeedback.tsx @@ -1,10 +1,10 @@ -import React, {ForwardedRef, forwardRef, useState} from 'react'; -import {StyleProp, View, ViewStyle} from 'react-native'; +import React, {forwardRef, useState} from 'react'; +import {StyleProp, ViewStyle} from 'react-native'; import {AnimatedStyle} from 'react-native-reanimated'; import OpacityView from '@components/OpacityView'; import variables from '@styles/variables'; import GenericPressable from './GenericPressable'; -import PressableProps from './GenericPressable/types'; +import PressableProps, {PressableRef} from './GenericPressable/types'; type PressableWithFeedbackProps = PressableProps & { /** Style for the wrapper view */ @@ -37,7 +37,7 @@ function PressableWithFeedback( hoverDimmingValue = variables.hoverDimValue, ...rest }: PressableWithFeedbackProps, - ref: ForwardedRef, + ref: PressableRef, ) { const [isPressed, setIsPressed] = useState(false); const [isHovered, setIsHovered] = useState(false); diff --git a/src/components/Pressable/PressableWithoutFeedback.tsx b/src/components/Pressable/PressableWithoutFeedback.tsx index c3b780e63cfd..fd9d695cc2ed 100644 --- a/src/components/Pressable/PressableWithoutFeedback.tsx +++ b/src/components/Pressable/PressableWithoutFeedback.tsx @@ -1,11 +1,10 @@ -import React, {ForwardedRef} from 'react'; -import {View} from 'react-native'; +import React from 'react'; import GenericPressable from './GenericPressable'; -import PressableProps from './GenericPressable/types'; +import PressableProps, {PressableRef} from './GenericPressable/types'; function PressableWithoutFeedback( {pressStyle, hoverStyle, focusStyle, disabledStyle, screenReaderActiveStyle, shouldUseHapticsOnPress, shouldUseHapticsOnLongPress, ...rest}: PressableProps, - ref: ForwardedRef, + ref: PressableRef, ) { return ( Date: Fri, 10 Nov 2023 11:17:25 +0100 Subject: [PATCH 4/7] Improve the code, remove assertions, and test --- .../index.native.tsx | 25 +++++++++++++------ .../index.tsx | 11 ++++---- .../types.ts | 16 +----------- 3 files changed, 25 insertions(+), 27 deletions(-) diff --git a/src/components/PressableWithSecondaryInteraction/index.native.tsx b/src/components/PressableWithSecondaryInteraction/index.native.tsx index 228a2d8cd83f..78bdbe1c8037 100644 --- a/src/components/PressableWithSecondaryInteraction/index.native.tsx +++ b/src/components/PressableWithSecondaryInteraction/index.native.tsx @@ -1,13 +1,24 @@ -import React, {ForwardedRef, forwardRef} from 'react'; -import {GestureResponderEvent, Text as RNText, TextProps, View} from 'react-native'; +import React, {forwardRef} from 'react'; +import {GestureResponderEvent, TextProps} from 'react-native'; +import {PressableRef} from '@components/Pressable/GenericPressable/types'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Text from '@components/Text'; -import PressableWithSecondaryInteractionProps, {PressableWithSecondaryInteractionRef} from './types'; +import PressableWithSecondaryInteractionProps from './types'; /** This is a special Pressable that calls onSecondaryInteraction when LongPressed. */ function PressableWithSecondaryInteraction( - {children, onSecondaryInteraction, inline = false, needsOffscreenAlphaCompositing = false, ...rest}: PressableWithSecondaryInteractionProps, - ref: PressableWithSecondaryInteractionRef, + { + children, + onSecondaryInteraction, + inline = false, + needsOffscreenAlphaCompositing = false, + activeOpacity = 1, + preventDefaultContextMenu, + withoutFocusOnSecondaryInteraction, + enableLongPressWithHover, + ...rest + }: PressableWithSecondaryInteractionProps, + ref: PressableRef, ) { const executeSecondaryInteraction = (event: GestureResponderEvent) => { event.preventDefault(); @@ -20,7 +31,6 @@ function PressableWithSecondaryInteraction( } onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined} > {children} @@ -32,9 +42,10 @@ function PressableWithSecondaryInteraction( } + ref={ref} onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined} needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositing} + pressDimmingValue={activeOpacity} > {children} diff --git a/src/components/PressableWithSecondaryInteraction/index.tsx b/src/components/PressableWithSecondaryInteraction/index.tsx index 09a9f3aa8c0a..91fcdd89ed4b 100644 --- a/src/components/PressableWithSecondaryInteraction/index.tsx +++ b/src/components/PressableWithSecondaryInteraction/index.tsx @@ -1,10 +1,11 @@ -import React, {ForwardedRef, forwardRef, useEffect, useRef} from 'react'; -import {GestureResponderEvent, View} from 'react-native'; +import React, {forwardRef, useEffect, useRef} from 'react'; +import {GestureResponderEvent} from 'react-native'; +import {PressableRef} from '@components/Pressable/GenericPressable/types'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import styles from '@styles/styles'; import * as StyleUtils from '@styles/StyleUtils'; -import PressableWithSecondaryInteractionProps, {PressableWithSecondaryInteractionRef} from './types'; +import PressableWithSecondaryInteractionProps from './types'; /** This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked. */ function PressableWithSecondaryInteraction( @@ -22,7 +23,7 @@ function PressableWithSecondaryInteraction( activeOpacity = 1, ...rest }: PressableWithSecondaryInteractionProps, - ref: PressableWithSecondaryInteractionRef, + ref: PressableRef, ) { const pressableRef = useRef(null); @@ -98,7 +99,7 @@ function PressableWithSecondaryInteraction( onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined} pressDimmingValue={activeOpacity} onPress={onPress} - ref={pressableRef as ForwardedRef} + ref={pressableRef} style={(state) => [StyleUtils.parseStyleFromFunction(style, state), inlineStyle]} needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositing} > diff --git a/src/components/PressableWithSecondaryInteraction/types.ts b/src/components/PressableWithSecondaryInteraction/types.ts index 0db28f3e6a61..48fb7077180a 100644 --- a/src/components/PressableWithSecondaryInteraction/types.ts +++ b/src/components/PressableWithSecondaryInteraction/types.ts @@ -1,5 +1,4 @@ -import {ForwardedRef} from 'react'; -import {GestureResponderEvent, StyleProp, Text, TextStyle, View, ViewStyle} from 'react-native'; +import {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native'; import {PressableWithFeedbackProps} from '@components/Pressable/PressableWithFeedback'; import ChildrenProps from '@src/types/utils/ChildrenProps'; @@ -45,21 +44,8 @@ type PressableWithSecondaryInteractionProps = PressableWithFeedbackProps & /** Used to apply styles to the Pressable */ style?: StyleProp; - /** Whether the view needs to be rendered offscreen (for Android only) */ - needsOffscreenAlphaCompositing?: boolean; - /** Whether the long press with hover behavior is enabled */ enableLongPressWithHover?: boolean; - - /** - * Specifies the accessibility label for the component - * @example 'Search' - * @example 'Close' - */ - accessibilityLabel: string; }; -type PressableWithSecondaryInteractionRef = ForwardedRef; - export default PressableWithSecondaryInteractionProps; -export type {PressableWithSecondaryInteractionRef}; From 444eee785179131e3520a709cdb63de18e3d0b05 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Fri, 10 Nov 2023 11:21:18 +0100 Subject: [PATCH 5/7] restore old logic --- src/components/PressableWithSecondaryInteraction/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PressableWithSecondaryInteraction/index.tsx b/src/components/PressableWithSecondaryInteraction/index.tsx index 91fcdd89ed4b..12d1be1fc86f 100644 --- a/src/components/PressableWithSecondaryInteraction/index.tsx +++ b/src/components/PressableWithSecondaryInteraction/index.tsx @@ -45,7 +45,7 @@ function PressableWithSecondaryInteraction( if (ref) { if (typeof ref === 'function') { ref(pressableRef.current); - } else { + } else if (typeof ref === 'object') { // eslint-disable-next-line no-param-reassign ref.current = pressableRef.current; } From b8b4cd4c28daad2762ed20f2c5639a139c32550c Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Fri, 10 Nov 2023 14:02:08 +0100 Subject: [PATCH 6/7] Fix after review --- src/components/PressableWithSecondaryInteraction/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/PressableWithSecondaryInteraction/index.tsx b/src/components/PressableWithSecondaryInteraction/index.tsx index 12d1be1fc86f..739a77d8119c 100644 --- a/src/components/PressableWithSecondaryInteraction/index.tsx +++ b/src/components/PressableWithSecondaryInteraction/index.tsx @@ -11,8 +11,6 @@ import PressableWithSecondaryInteractionProps from './types'; function PressableWithSecondaryInteraction( { children, - onPress, - onPressOut, inline = false, style, enableLongPressWithHover = false, @@ -98,7 +96,6 @@ function PressableWithSecondaryInteraction( wrapperStyle={StyleUtils.combineStyles(DeviceCapabilities.canUseTouchScreen() ? [styles.userSelectNone, styles.noSelect] : [], inlineStyle)} onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined} pressDimmingValue={activeOpacity} - onPress={onPress} ref={pressableRef} style={(state) => [StyleUtils.parseStyleFromFunction(style, state), inlineStyle]} needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositing} From a6983e16a188707dee747bb3e7af15068e103df5 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Tue, 5 Dec 2023 10:38:13 +0100 Subject: [PATCH 7/7] Add comments with descriptions --- .../PressableWithSecondaryInteraction/index.native.tsx | 2 ++ src/components/PressableWithSecondaryInteraction/index.tsx | 1 + 2 files changed, 3 insertions(+) diff --git a/src/components/PressableWithSecondaryInteraction/index.native.tsx b/src/components/PressableWithSecondaryInteraction/index.native.tsx index 99a8301437ec..f3cef029aa65 100644 --- a/src/components/PressableWithSecondaryInteraction/index.native.tsx +++ b/src/components/PressableWithSecondaryInteraction/index.native.tsx @@ -30,6 +30,7 @@ function PressableWithSecondaryInteraction( if (inline) { return (