feat: added onLongPress to RadioButton.Item and Checkbox.Item (#4215

)

src/components/Checkbox/CheckboxItem.tsx

@@ -34,6 +34,10 @@ export type Props = {
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute on long press.
+   */
+  onLongPress?: (e: GestureResponderEvent) => void;
   /**
    * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
    */
@@ -122,6 +126,7 @@ const CheckboxItem = ({
   status,
   label,
   onPress,
+  onLongPress,
   labelStyle,
   theme: themeOverrides,
   testID,
@@ -167,6 +172,7 @@ const CheckboxItem = ({
         disabled,
       }}
       onPress={onPress}
+      onLongPress={onLongPress}
       testID={testID}
       disabled={disabled}
       rippleColor={rippleColor}

src/components/RadioButton/RadioButtonItem.tsx

@@ -36,6 +36,10 @@ export type Props = {
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute on long press.
+   */
+  onLongPress?: (e: GestureResponderEvent) => void;
   /**
    * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
    */
@@ -132,6 +136,7 @@ const RadioButtonItem = ({
   style,
   labelStyle,
   onPress,
+  onLongPress,
   disabled,
   color,
   uncheckedColor,
@@ -195,6 +200,7 @@ const RadioButtonItem = ({
                 event,
               })
             }
+            onLongPress={onLongPress}
             accessibilityLabel={accessibilityLabel}
             accessibilityRole="radio"
             accessibilityState={{

src/components/__tests__/Checkbox/CheckboxItem.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import { act, fireEvent, render } from '@testing-library/react-native';
 
 import Checkbox from '../../Checkbox';
 
@@ -95,3 +95,22 @@ it('should have maxFontSizeMultiplier set to 1.5 by default', () => {
   const checkboxItemText = getByTestId('checkbox-item-text');
   expect(checkboxItemText.props.maxFontSizeMultiplier).toBe(1.5);
 });
+
+it('should execute onLongPress', () => {
+  const onLongPress = jest.fn();
+
+  const { getByTestId } = render(
+    <Checkbox.Item
+      label="Item"
+      status="unchecked"
+      testID="checkbox-item"
+      onLongPress={onLongPress}
+    />
+  );
+
+  act(() => {
+    fireEvent(getByTestId('checkbox-item'), 'longPress', { key: 'value' });
+  });
+
+  expect(onLongPress).toHaveBeenCalledTimes(1);
+});

src/components/__tests__/RadioButton/RadioButtonItem.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import { act, fireEvent, render } from '@testing-library/react-native';
 
 import RadioButton from '../../RadioButton';
 
@@ -58,3 +58,22 @@ it('can render leading radio button control', () => {
 
   expect(tree).toMatchSnapshot();
 });
+
+it('should execute onLongPress', () => {
+  const onLongPress = jest.fn();
+
+  const { getByTestId } = render(
+    <RadioButton.Item
+      label="Item"
+      value="android"
+      testID="radio-button-item"
+      onLongPress={onLongPress}
+    />
+  );
+
+  act(() => {
+    fireEvent(getByTestId('radio-button-item'), 'longPress', { key: 'value' });
+  });
+
+  expect(onLongPress).toHaveBeenCalledTimes(1);
+});