chore: pass gesture responder event in FAB.Group onLongPress (calls…

…tack#3891)

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();