diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.js b/src/components/Pressable/GenericPressable/BaseGenericPressable.js index 9bb221b2de1e..79ce5629c9e9 100644 --- a/src/components/Pressable/GenericPressable/BaseGenericPressable.js +++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.js @@ -10,6 +10,7 @@ import styles from '../../../styles/styles'; import genericPressablePropTypes from './PropTypes'; import CONST from '../../../CONST'; import * as StyleUtils from '../../../styles/StyleUtils'; +import useSingleExecution from '../../../hooks/useSingleExecution'; /** * Returns the cursor style based on the state of Pressable @@ -44,12 +45,12 @@ const GenericPressable = forwardRef((props, ref) => { keyboardShortcut, shouldUseAutoHitSlop, enableInScreenReaderStates, - isExecuting, onPressIn, onPressOut, ...rest } = props; + const {isExecuting, singleExecution} = useSingleExecution(); const isScreenReaderActive = Accessibility.useScreenReaderStatus(); const [hitSlop, onLayout] = Accessibility.useAutoHitSlop(); @@ -63,8 +64,8 @@ const GenericPressable = forwardRef((props, ref) => { shouldBeDisabledByScreenReader = isScreenReaderActive; } - return props.disabled || shouldBeDisabledByScreenReader; - }, [isScreenReaderActive, enableInScreenReaderStates, props.disabled]); + return props.disabled || shouldBeDisabledByScreenReader || isExecuting; + }, [isScreenReaderActive, enableInScreenReaderStates, props.disabled, isExecuting]); const shouldUseDisabledCursor = useMemo(() => isDisabled && !isExecuting, [isDisabled, isExecuting]); @@ -134,7 +135,7 @@ const GenericPressable = forwardRef((props, ref) => { hitSlop={shouldUseAutoHitSlop ? hitSlop : undefined} onLayout={shouldUseAutoHitSlop ? onLayout : undefined} ref={ref} - onPress={!isDisabled ? onPressHandler : undefined} + onPress={!isDisabled ? singleExecution(onPressHandler) : undefined} // In order to prevent haptic feedback, pass empty callback as onLongPress props. Please refer https://github.com/necolas/react-native-web/issues/2349#issuecomment-1195564240 onLongPress={!isDisabled && onLongPress ? onLongPressHandler : defaultLongPressHandler} onKeyPress={!isDisabled ? onKeyPressHandler : undefined} diff --git a/src/components/Pressable/GenericPressable/PropTypes.js b/src/components/Pressable/GenericPressable/PropTypes.js index 690e265b6552..3933b31d2d47 100644 --- a/src/components/Pressable/GenericPressable/PropTypes.js +++ b/src/components/Pressable/GenericPressable/PropTypes.js @@ -45,9 +45,6 @@ const pressablePropTypes = { */ shouldUseHapticsOnLongPress: PropTypes.bool, - /** Whether the button is executing */ - isExecuting: PropTypes.bool, - /** * style for when the component is disabled. Can be a function that receives the component's state (active, disabled, hover, focus, pressed, isScreenReaderActive) * @default {} @@ -128,7 +125,6 @@ const defaultProps = { keyboardShortcut: undefined, shouldUseHapticsOnPress: false, shouldUseHapticsOnLongPress: false, - isExecuting: false, disabledStyle: {}, hoverStyle: {}, focusStyle: {}, diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js index a80e2109ebd7..07601ed35789 100644 --- a/src/components/Pressable/PressableWithFeedback.js +++ b/src/components/Pressable/PressableWithFeedback.js @@ -5,7 +5,6 @@ import GenericPressable from './GenericPressable'; import GenericPressablePropTypes from './GenericPressable/PropTypes'; import OpacityView from '../OpacityView'; import variables from '../../styles/variables'; -import useSingleExecution from '../../hooks/useSingleExecution'; const omittedProps = ['wrapperStyle', 'needsOffscreenAlphaCompositing']; @@ -43,14 +42,12 @@ const PressableWithFeedbackDefaultProps = { const PressableWithFeedback = forwardRef((props, ref) => { const propsWithoutWrapperProps = _.omit(props, omittedProps); - const {isExecuting, singleExecution} = useSingleExecution(); const [isPressed, setIsPressed] = useState(false); const [isHovered, setIsHovered] = useState(false); - const isDisabled = props.disabled || isExecuting; return ( { ref={ref} // eslint-disable-next-line react/jsx-props-no-spreading {...propsWithoutWrapperProps} - disabled={isDisabled} - isExecuting={isExecuting} + disabled={props.disabled} onHoverIn={() => { setIsHovered(true); if (props.onHoverIn) { @@ -85,9 +81,6 @@ const PressableWithFeedback = forwardRef((props, ref) => { props.onPressOut(); } }} - onPress={(e) => { - singleExecution(() => props.onPress(e))(); - }} > {(state) => (_.isFunction(props.children) ? props.children(state) : props.children)}