diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx index 47b2192293..c62c2097fa 100644 --- a/src/components/Checkbox/CheckboxItem.tsx +++ b/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} diff --git a/src/components/RadioButton/RadioButtonItem.tsx b/src/components/RadioButton/RadioButtonItem.tsx index bedb078550..741f55f366 100644 --- a/src/components/RadioButton/RadioButtonItem.tsx +++ b/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={{ diff --git a/src/components/__tests__/Checkbox/CheckboxItem.test.tsx b/src/components/__tests__/Checkbox/CheckboxItem.test.tsx index 6f5730d953..cfb6007b5c 100644 --- a/src/components/__tests__/Checkbox/CheckboxItem.test.tsx +++ b/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( + + ); + + act(() => { + fireEvent(getByTestId('checkbox-item'), 'longPress', { key: 'value' }); + }); + + expect(onLongPress).toHaveBeenCalledTimes(1); +}); diff --git a/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx b/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx index ed790d0256..84e7b52971 100644 --- a/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx +++ b/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( + + ); + + act(() => { + fireEvent(getByTestId('radio-button-item'), 'longPress', { key: 'value' }); + }); + + expect(onLongPress).toHaveBeenCalledTimes(1); +});