chore: pass gesture responder event in FAB.Group onLongPress (#3891)

Author: DimitarNestorov

src/components/FAB/AnimatedFAB.tsx

@@ -78,7 +78,7 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
   /**
    * Function to execute on long press.
    */
-  onLongPress?: () => void;
+  onLongPress?: (e: GestureResponderEvent) => void;
   /**
    * The number of milliseconds a user must touch the element before executing `onLongPress`.
    */

src/components/FAB/FAB.tsx

@@ -96,7 +96,7 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
   /**
    * Function to execute on long press.
    */
-  onLongPress?: () => void;
+  onLongPress?: (e: GestureResponderEvent) => void;
   /**
    * The number of milliseconds a user must touch the element before executing `onLongPress`.
    */

src/components/FAB/FABGroup.tsx

@@ -77,7 +77,7 @@ export type Props = {
   /**
    * Function to execute on long pressing the `FAB`.
    */
-  onLongPress?: () => void;
+  onLongPress?: (e: GestureResponderEvent) => void;
   /**
    * Makes actions stack appear on long press instead of on press.
    */
@@ -442,9 +442,9 @@ const FABGroup = ({
               toggle();
             }
           }}
-          onLongPress={() => {
+          onLongPress={(e) => {
             if (!open || enableLongPressWhenStackOpened) {
-              onLongPress?.();
+              onLongPress?.(e);
               if (toggleStackOnLongPress) {
                 toggle();
               }

src/components/__tests__/AnimatedFAB.test.tsx

@@ -3,7 +3,8 @@
 import * as React from 'react';
 import { Animated, StyleSheet } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import { fireEvent, render } from '@testing-library/react-native';
+import { act } from 'react-test-renderer';
 
 import { MD3Colors } from '../../styles/themes/v3/tokens';
 import AnimatedFAB from '../FAB/AnimatedFAB';
@@ -144,3 +145,36 @@ it('renders correct elevation value for shadow views', () => {
     elevation: 3,
   });
 });
+
+describe('AnimatedFAB events', () => {
+  it('onPress passes event', () => {
+    const onPress = jest.fn();
+    const { getByTestId } = render(
+      <AnimatedFAB extended icon="plus" onPress={onPress} label="Add items" />
+    );
+
+    act(() => {
+      fireEvent(getByTestId('animated-fab'), 'onPress', { key: 'value' });
+    });
+
+    expect(onPress).toHaveBeenCalledWith({ key: 'value' });
+  });
+
+  it('onLongPress passes event', () => {
+    const onLongPress = jest.fn();
+    const { getByTestId } = render(
+      <AnimatedFAB
+        extended
+        icon="plus"
+        onLongPress={onLongPress}
+        label="Add items"
+      />
+    );
+
+    act(() => {
+      fireEvent(getByTestId('animated-fab'), 'onLongPress', { key: 'value' });
+    });
+
+    expect(onLongPress).toHaveBeenCalledWith({ key: 'value' });
+  });
+});

src/components/__tests__/FAB.test.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { Animated, StyleSheet } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import { fireEvent, render } from '@testing-library/react-native';
 import color from 'color';
+import { act } from 'react-test-renderer';
 
 import { getTheme } from '../../core/theming';
 import { black, white } from '../../styles/themes/v2/colors';
@@ -418,3 +419,29 @@ it('animated value changes correctly', () => {
     transform: [{ scale: 1.5 }],
   });
 });
+
+describe('FAB events', () => {
+  it('onPress passes event', () => {
+    const onPress = jest.fn();
+    const { getByText } = render(<FAB onPress={onPress} label="Add items" />);
+
+    act(() => {
+      fireEvent(getByText('Add items'), 'onPress', { key: 'value' });
+    });
+
+    expect(onPress).toHaveBeenCalledWith({ key: 'value' });
+  });
+
+  it('onLongPress passes event', () => {
+    const onLongPress = jest.fn();
+    const { getByText } = render(
+      <FAB onLongPress={onLongPress} label="Add items" />
+    );
+
+    act(() => {
+      fireEvent(getByText('Add items'), 'onLongPress', { key: 'value' });
+    });
+
+    expect(onLongPress).toHaveBeenCalledWith({ key: 'value' });
+  });
+});

src/components/__tests__/FABGroup.test.tsx

@@ -221,6 +221,62 @@ it('animated value changes correctly', () => {
   });
 });
 
+describe('FAB.Group events', () => {
+  it('onPress passes event', () => {
+    const onPress = jest.fn();
+    const { getByText } = render(
+      <FAB.Group
+        visible
+        open={false}
+        label="Stack test"
+        icon=""
+        onStateChange={jest.fn()}
+        onPress={onPress}
+        actions={[
+          {
+            label: 'testing',
+            onPress() {},
+            icon: '',
+          },
+        ]}
+      />
+    );
+
+    act(() => {
+      fireEvent(getByText('Stack test'), 'onPress', { key: 'value' });
+    });
+
+    expect(onPress).toHaveBeenCalledWith({ key: 'value' });
+  });
+
+  it('onLongPress passes event', () => {
+    const onLongPress = jest.fn();
+    const { getByText } = render(
+      <FAB.Group
+        visible
+        open={false}
+        label="Stack test"
+        icon=""
+        onStateChange={jest.fn()}
+        onLongPress={onLongPress}
+        actions={[
+          {
+            label: 'testing',
+            onPress() {},
+            icon: '',
+          },
+        ]}
+      />
+    );
+
+    act(() => {
+      fireEvent(getByText('Stack test'), 'onLongPress', { key: 'value' });
+    });
+
+    expect(onLongPress).toHaveBeenCalledWith({ key: 'value' });
+  });
+});
+
 describe('Toggle Stack visibility', () => {
   it('toggles stack visibility on press', () => {
     const onStateChange = jest.fn();