feat: add delay long press support (#3536)

src/components/Button/Button.tsx

@@ -97,6 +97,10 @@ export type Props = React.ComponentProps<typeof Surface> & {
    * Function to execute on long press.
    */
   onLongPress?: (e: GestureResponderEvent) => void;
+  /**
+   * The number of milliseconds a user must touch the element before executing `onLongPress`.
+   */
+  delayLongPress?: number;
   /**
    * Style of button's inner content.
    * Use this prop to apply custom height and width and to set the icon on the right with `flexDirection: 'row-reverse'`.
@@ -173,6 +177,7 @@ const Button = ({
   onPressIn,
   onPressOut,
   onLongPress,
+  delayLongPress,
   style,
   theme,
   uppercase = !theme.isV3,
@@ -298,6 +303,7 @@ const Button = ({
         onLongPress={onLongPress}
         onPressIn={handlePressIn}
         onPressOut={handlePressOut}
+        delayLongPress={delayLongPress}
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
         accessibilityRole="button"

src/components/Card/Card.tsx

@@ -41,9 +41,16 @@ type Mode = 'elevated' | 'outlined' | 'contained';
 
 export type Props = React.ComponentProps<typeof Surface> & {
   /**
-   * Changes Card shadow and background on iOS and Android.
+   * Mode of the Card.
+   * - `elevated` - Card with elevation.
+   * - `contained` - Card with without outline and elevation @supported Available in v5.x with theme version 3
+   * - `outlined` - Card with an outline.
    */
-  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+  mode?: Mode;
+  /**
+   * Content of the `Card`.
+   */
+  children: React.ReactNode;
   /**
    * Function to execute on long press.
    */
@@ -53,16 +60,13 @@ export type Props = React.ComponentProps<typeof Surface> & {
    */
   onPress?: (e: GestureResponderEvent) => void;
   /**
-   * Mode of the Card.
-   * - `elevated` - Card with elevation.
-   * - `contained` - Card with without outline and elevation @supported Available in v5.x with theme version 3
-   * - `outlined` - Card with an outline.
+   * The number of milliseconds a user must touch the element before executing `onLongPress`.
    */
-  mode?: Mode;
+  delayLongPress?: number;
   /**
-   * Content of the `Card`.
+   * Changes Card shadow and background on iOS and Android.
    */
-  children: React.ReactNode;
+  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
   style?: StyleProp<ViewStyle>;
   /**
    * @optional
@@ -124,6 +128,7 @@ export type Props = React.ComponentProps<typeof Surface> & {
 const Card = ({
   elevation: cardElevation = 1,
   onLongPress,
+  delayLongPress,
   onPress,
   mode: cardMode = 'elevated',
   children,
@@ -256,6 +261,7 @@ const Card = ({
       <TouchableWithoutFeedback
         delayPressIn={0}
         disabled={!(onPress || onLongPress)}
+        delayLongPress={delayLongPress}
         onLongPress={onLongPress}
         onPress={onPress}
         onPressIn={onPress || onLongPress ? handlePressIn : undefined}

src/components/Chip/Chip.tsx

@@ -89,6 +89,10 @@ export type Props = React.ComponentProps<typeof Surface> & {
    * Function to execute on long press.
    */
   onLongPress?: () => void;
+  /**
+   * The number of milliseconds a user must touch the element before executing `onLongPress`.
+   */
+  delayLongPress?: number;
   /**
    * Function to execute on close button press. The close button appears only when this prop is specified.
    */
@@ -150,6 +154,7 @@ const Chip = ({
   closeIconAccessibilityLabel = 'Close',
   onPress,
   onLongPress,
+  delayLongPress,
   onClose,
   closeIcon,
   textStyle,
@@ -259,9 +264,10 @@ const Chip = ({
         borderless
         style={[{ borderRadius }, styles.touchable]}
         onPress={onPress}
-        onLongPress={onLongPress}
         onPressIn={handlePressIn}
         onPressOut={handlePressOut}
+        onLongPress={onLongPress}
+        delayLongPress={delayLongPress}
         underlayColor={underlayColor}
         disabled={disabled}
         accessibilityLabel={accessibilityLabel}

src/components/FAB/AnimatedFAB.tsx

@@ -74,6 +74,10 @@ export type Props = $RemoveChildren<typeof Surface> & {
    * Function to execute on long press.
    */
   onLongPress?: () => void;
+  /**
+   * The number of milliseconds a user must touch the element before executing `onLongPress`.
+   */
+  delayLongPress?: number;
   /**
    * Whether icon should be translated to the end of extended `FAB` or be static and stay in the same place. The default value is `dynamic`.
    */
@@ -192,6 +196,7 @@ const AnimatedFAB = ({
   disabled,
   onPress,
   onLongPress,
+  delayLongPress,
   theme,
   style,
   visible = true,
@@ -403,6 +408,7 @@ const AnimatedFAB = ({
               borderless
               onPress={onPress}
               onLongPress={onLongPress}
+              delayLongPress={delayLongPress}
               rippleColor={rippleColor}
               disabled={disabled}
               accessibilityLabel={accessibilityLabel}

src/components/FAB/FAB.tsx

@@ -79,6 +79,10 @@ export type Props = $RemoveChildren<typeof Surface> & {
    * Function to execute on long press.
    */
   onLongPress?: () => void;
+  /**
+   * The number of milliseconds a user must touch the element before executing `onLongPress`.
+   */
+  delayLongPress?: number;
   /**
    * @supported Available in v5.x with theme version 3
    *
@@ -162,6 +166,7 @@ const FAB = React.forwardRef<View, Props>(
       disabled,
       onPress,
       onLongPress,
+      delayLongPress,
       theme,
       style,
       visible = true,
@@ -259,6 +264,7 @@ const FAB = React.forwardRef<View, Props>(
           borderless
           onPress={onPress}
           onLongPress={onLongPress}
+          delayLongPress={delayLongPress}
           rippleColor={rippleColor}
           disabled={disabled}
           accessibilityLabel={accessibilityLabel}

src/components/List/ListAccordion.tsx

@@ -49,6 +49,10 @@ export type Props = {
    * Function to execute on long press.
    */
   onLongPress?: (e: GestureResponderEvent) => void;
+  /**
+   * The number of milliseconds a user must touch the element before executing `onLongPress`.
+   */
+  delayLongPress?: number;
   /**
    * Content of the section.
    */
@@ -156,6 +160,7 @@ const ListAccordion = ({
   testID,
   onPress,
   onLongPress,
+  delayLongPress,
   expanded: expandedProp,
   accessibilityLabel,
   pointerEvents = 'none',
@@ -203,6 +208,7 @@ const ListAccordion = ({
           style={[styles.container, style]}
           onPress={handlePress}
           onLongPress={onLongPress}
+          delayLongPress={delayLongPress}
           rippleColor={rippleColor}
           accessibilityRole="button"
           accessibilityState={{ expanded: isExpanded }}