From 770badbf2fe1a24994c5e4a3dd85e15223fe9786 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 10 Oct 2023 16:24:11 +0800 Subject: [PATCH 1/3] move singleExecution to BaseGenericPressable --- .../Pressable/GenericPressable/BaseGenericPressable.js | 7 ++++--- src/components/Pressable/GenericPressable/PropTypes.js | 4 ---- src/components/Pressable/PressableWithFeedback.js | 10 ++-------- 3 files changed, 6 insertions(+), 15 deletions(-) diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.js b/src/components/Pressable/GenericPressable/BaseGenericPressable.js index 9bb221b2de1e..7d346b5effc1 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(); @@ -64,7 +65,7 @@ const GenericPressable = forwardRef((props, ref) => { } return props.disabled || shouldBeDisabledByScreenReader; - }, [isScreenReaderActive, enableInScreenReaderStates, props.disabled]); + }, [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..7ed173bbabac 100644 --- a/src/components/Pressable/PressableWithFeedback.js +++ b/src/components/Pressable/PressableWithFeedback.js @@ -43,14 +43,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 +82,6 @@ const PressableWithFeedback = forwardRef((props, ref) => { props.onPressOut(); } }} - onPress={(e) => { - singleExecution(() => props.onPress(e))(); - }} > {(state) => (_.isFunction(props.children) ? props.children(state) : props.children)} From 24265cdd7a06c2bb2f04209abf7e001b331aba31 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 10 Oct 2023 16:29:25 +0800 Subject: [PATCH 2/3] remove unused import --- src/components/Pressable/PressableWithFeedback.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js index 7ed173bbabac..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']; From dd12f75c72bc303b7e0b5db5301d8a85d67aed88 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 10 Oct 2023 16:31:10 +0800 Subject: [PATCH 3/3] add isExecuting to isDisabled --- .../Pressable/GenericPressable/BaseGenericPressable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.js b/src/components/Pressable/GenericPressable/BaseGenericPressable.js index 7d346b5effc1..79ce5629c9e9 100644 --- a/src/components/Pressable/GenericPressable/BaseGenericPressable.js +++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.js @@ -64,7 +64,7 @@ const GenericPressable = forwardRef((props, ref) => { shouldBeDisabledByScreenReader = isScreenReaderActive; } - return props.disabled || shouldBeDisabledByScreenReader; + return props.disabled || shouldBeDisabledByScreenReader || isExecuting; }, [isScreenReaderActive, enableInScreenReaderStates, props.disabled, isExecuting]); const shouldUseDisabledCursor = useMemo(() => isDisabled && !isExecuting, [isDisabled, isExecuting]);