Support onPress/onLongPress in usePressableState

change/@fluentui-react-native-interactive-hooks-5aa661aa-5ff2-4627-b75a-ea5fff70e54b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Support onPress/onLongPress in usePressableState",
+  "packageName": "@fluentui-react-native/interactive-hooks",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/utils/interactive-hooks/src/useAsPressable.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PressableProps, Platform } from 'react-native';
+import { PressableProps } from 'react-native';
 import { PressableFocusProps, PressableHoverProps, PressablePressProps } from './Pressability/Pressability.types';
 import {
   IPressableHooks,
@@ -73,6 +73,16 @@ function useFocusHelper(props: PressableFocusProps): [PressableFocusProps, IFocu
 function usePressHelper(props: PressablePressProps): [PressablePressProps, IPressState] {
   const [pressState, setPressState] = React.useState({ pressed: false });
 
+  const onPress = React.useCallback(
+    (e) => {
+      setPressState({ pressed: true });
+      if (props.onPress) {
+        props.onPress(e);
+      }
+    },
+    [setPressState, props.onPress],
+  );
+
   const onPressIn = React.useCallback(
     (e) => {
       setPressState({ pressed: true });
@@ -92,27 +102,17 @@ function usePressHelper(props: PressablePressProps): [PressablePressProps, IPres
     },
     [setPressState, props.onPressOut],
   );
-  return [{ onPressIn, onPressOut }, pressState];
-}
-
-/**
- * useAsPressable wraps the usePressability hook that will be available in RN 0.63 and beyond.  Once this library is on a recent enough
- * version of react-native this implementation can switch to using the official version.
- *
- * The useAsPressable hook adds a simple state change function for listening to hover, press, and focus events on the base pressability implementation
- * @param props - input props for the component, mixed in with pressable and pressability options
- */
-// eslint-disable-next-line @typescript-eslint/ban-types
-export function useAsPressable<T extends object>(props: IWithPressableOptions<T>): IPressableHooks<T> {
-  const [hoverProps, hoverState] = useHoverHelper(props);
-  const [focusProps, focusState] = useFocusHelper(props);
-  const [pressProps, pressState] = usePressHelper(props);
-  const pressabilityProps = usePressability({ ...props, ...hoverProps, ...focusProps, ...pressProps });
 
-  return {
-    props: { ...props, ...pressabilityProps },
-    state: { ...hoverState, ...pressState, ...focusState },
-  };
+  const onLongPress = React.useCallback(
+    (e) => {
+      setPressState({ pressed: true });
+      if (props.onLongPress) {
+        props.onLongPress(e);
+      }
+    },
+    [setPressState, props.onLongPress],
+  );
+  return [{ onPress, onPressIn, onPressOut, onLongPress }, pressState];
 }
 
 /**
@@ -148,6 +148,26 @@ export function useHoverState<T extends object>(props: IWithPressableOptions<T>)
   return [{ ...props, ...usePressability({ ...props, ...hoverProps }) }, hoverState];
 }
 
+/**
+ * useAsPressable wraps the usePressability hook that will be available in RN 0.63 and beyond.  Once this library is on a recent enough
+ * version of react-native this implementation can switch to using the official version.
+ *
+ * The useAsPressable hook adds a simple state change function for listening to hover, press, and focus events on the base pressability implementation
+ * @param props - input props for the component, mixed in with pressable and pressability options
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function useAsPressable<T extends object>(props: IWithPressableOptions<T>): IPressableHooks<T> {
+  const [hoverProps, hoverState] = useHoverHelper(props);
+  const [focusProps, focusState] = useFocusHelper(props);
+  const [pressProps, pressState] = usePressHelper(props);
+  const pressabilityProps = usePressability({ ...props, ...hoverProps, ...focusProps, ...pressProps });
+
+  return {
+    props: { ...props, ...pressabilityProps },
+    state: { ...hoverState, ...focusState, ...pressState },
+  };
+}
+
 /**
  * This routine hooks the props to pass to a Pressable component to obtain the current state of the Pressable as well as generating
  * state change updates when those props change. This allows a parent component to control the render of the whole component rather than having
@@ -157,11 +177,10 @@ export function useHoverState<T extends object>(props: IWithPressableOptions<T>)
  * @returns - modified props to pass into the Pressable as well as the current state with regards to hover, focus, and press
  */
 export function usePressableState(props: PressablePropsExtended): { props: PressableProps; state: IPressableState } {
-  const { onPressIn, onPressOut, onHoverIn, onHoverOut, onFocus, onBlur, ...rest } = props;
+  const { onPress, onPressIn, onPressOut, onLongPress, onHoverIn, onHoverOut, onFocus, onBlur, ...rest } = props;
+  const [hoverProps, hoverState] = useHoverHelper({ onHoverIn, onHoverOut });
   const [focusProps, focusState] = useFocusHelper({ onFocus, onBlur });
-  const [pressProps, pressState] = usePressHelper({ onPressIn, onPressOut });
-  const platformSupportsHover = Platform.OS !== 'android' && Platform.OS !== 'ios';
-  const [hoverProps, hoverState] = platformSupportsHover ? useHoverHelper({ onHoverIn, onHoverOut }) : [{}, {}];
+  const [pressProps, pressState] = usePressHelper({ onPress, onPressIn, onPressOut, onLongPress });
 
-  return { props: { ...rest, ...focusProps, ...pressProps, ...hoverProps }, state: { ...focusState, ...pressState, ...hoverState } };
+  return { props: { ...hoverProps, ...focusProps, ...pressProps, ...rest }, state: { ...hoverState, ...focusState, ...pressState } };
 }