Merge pull request Expensify#31152 from software-mansion-labs/ts/Pres…

…sableWithSecondaryInteraction

[TS migration] Migrate 'PressableWithSecondaryInteraction' component to TypeScript

src/components/Pressable/GenericPressable/BaseGenericPressable.tsx

@@ -8,7 +8,7 @@ import KeyboardShortcut from '@libs/KeyboardShortcut';
 import * as StyleUtils from '@styles/StyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
-import PressableProps from './types';
+import PressableProps, {PressableRef} from './types';
 
 function GenericPressable(
     {
@@ -34,7 +34,7 @@ function GenericPressable(
         accessible = true,
         ...rest
     }: PressableProps,
-    ref: ForwardedRef<View>,
+    ref: PressableRef,
 ) {
     const styles = useThemeStyles();
     const {isExecuting, singleExecution} = useSingleExecution();
@@ -124,7 +124,7 @@ function GenericPressable(
         <Pressable
             hitSlop={shouldUseAutoHitSlop ? hitSlop : undefined}
             onLayout={shouldUseAutoHitSlop ? onLayout : undefined}
-            ref={ref}
+            ref={ref as ForwardedRef<View>}
             onPress={!isDisabled ? singleExecution(onPressHandler) : undefined}
             onLongPress={!isDisabled && onLongPress ? onLongPressHandler : undefined}
             onKeyDown={!isDisabled ? onKeyDown : undefined}

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<View>) {
+function NativeGenericPressable(props: PressableProps, ref: PressableRef) {
     return (
         <GenericPressable
             focusable

src/components/Pressable/GenericPressable/index.tsx

@@ -1,9 +1,9 @@
-import React, {ForwardedRef, forwardRef} from 'react';
-import {Role, View} from 'react-native';
+import React, {forwardRef} from 'react';
+import {Role} from 'react-native';
 import GenericPressable from './BaseGenericPressable';
-import PressableProps from './types';
+import PressableProps, {PressableRef} from './types';
 
-function WebGenericPressable({focusable = true, ...props}: PressableProps, ref: ForwardedRef<View>) {
+function WebGenericPressable({focusable = true, ...props}: PressableProps, ref: PressableRef) {
     const accessible = props.accessible ?? props.accessible === undefined ? true : props.accessible;
 
     return (

src/components/Pressable/GenericPressable/types.ts

@@ -1,5 +1,5 @@
-import {ElementRef, RefObject} from 'react';
-import {GestureResponderEvent, HostComponent, PressableStateCallbackType, PressableProps as RNPressableProps, StyleProp, ViewStyle} from 'react-native';
+import {ElementRef, ForwardedRef, RefObject} from 'react';
+import {GestureResponderEvent, HostComponent, PressableStateCallbackType, PressableProps as RNPressableProps, StyleProp, View, ViewStyle} from 'react-native';
 import {ValueOf} from 'type-fest';
 import {Shortcut} from '@libs/KeyboardShortcut';
 import CONST from '@src/CONST';
@@ -138,4 +138,7 @@ type PressableProps = RNPressableProps &
         noDragArea?: boolean;
     };
 
+type PressableRef = ForwardedRef<HTMLDivElement | View>;
+
 export default PressableProps;
+export type {PressableRef};

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';
@@ -12,7 +12,7 @@ import * as StyleUtils from '@styles/StyleUtils';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
-import PressableProps from './GenericPressable/types';
+import PressableProps, {PressableRef} from './GenericPressable/types';
 import PressableWithoutFeedback from './PressableWithoutFeedback';
 
 type PressableWithDelayToggleProps = PressableProps & {
@@ -65,7 +65,7 @@ function PressableWithDelayToggle(
         iconStyles,
         icon,
     }: PressableWithDelayToggleProps,
-    ref: ForwardedRef<RNText | View>,
+    ref: PressableRef,
 ) {
     const styles = useThemeStyles();
     const theme = useTheme();

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<View>,
+    ref: PressableRef,
 ) {
     const [isPressed, setIsPressed] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
@@ -88,3 +88,4 @@ function PressableWithFeedback(
 PressableWithFeedback.displayName = 'PressableWithFeedback';
 
 export default forwardRef(PressableWithFeedback);
+export type {PressableWithFeedbackProps};

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<View>,
+    ref: PressableRef,
 ) {
     return (
         <GenericPressable

src/components/PressableWithSecondaryInteraction/index.native.tsx

@@ -0,0 +1,61 @@
+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 from './types';
+
+/** This is a special Pressable that calls onSecondaryInteraction when LongPressed. */
+function PressableWithSecondaryInteraction(
+    {
+        children,
+        onSecondaryInteraction,
+        inline = false,
+        needsOffscreenAlphaCompositing = false,
+        suppressHighlighting = false,
+        activeOpacity = 1,
+        preventDefaultContextMenu,
+        withoutFocusOnSecondaryInteraction,
+        enableLongPressWithHover,
+        ...rest
+    }: PressableWithSecondaryInteractionProps,
+    ref: PressableRef,
+) {
+    const executeSecondaryInteraction = (event: GestureResponderEvent) => {
+        event.preventDefault();
+        onSecondaryInteraction?.(event);
+    };
+
+    // Use Text node for inline mode to prevent content overflow.
+    if (inline) {
+        return (
+            <Text
+                // ESLint is disabled here to propagate all the props, enhancing PressableWithSecondaryInteraction's versatility across different use cases.
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...(rest as TextProps)}
+                suppressHighlighting={suppressHighlighting}
+                onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined}
+            >
+                {children}
+            </Text>
+        );
+    }
+
+    return (
+        <PressableWithFeedback
+            // ESLint is disabled here to propagate all the props, enhancing PressableWithSecondaryInteraction's versatility across different use cases.
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...rest}
+            ref={ref}
+            onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined}
+            needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositing}
+            pressDimmingValue={activeOpacity}
+        >
+            {children}
+        </PressableWithFeedback>
+    );
+}
+
+PressableWithSecondaryInteraction.displayName = 'PressableWithSecondaryInteraction';
+
+export default forwardRef(PressableWithSecondaryInteraction);