diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.js b/src/components/Pressable/GenericPressable/BaseGenericPressable.js index 56a9ba507a06..0c5b75b1bb13 100644 --- a/src/components/Pressable/GenericPressable/BaseGenericPressable.js +++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.js @@ -1,4 +1,4 @@ -import React, {useCallback, useEffect, useState, useMemo, forwardRef} from 'react'; +import React, {useCallback, useEffect, useMemo, forwardRef} from 'react'; // eslint-disable-next-line no-restricted-imports import {Pressable} from 'react-native'; import _ from 'underscore'; @@ -43,6 +43,7 @@ const GenericPressable = forwardRef((props, ref) => { keyboardShortcut, shouldUseAutoHitSlop, enableInScreenReaderStates, + isExecuting, onPressIn, onPressOut, ...rest @@ -64,7 +65,7 @@ const GenericPressable = forwardRef((props, ref) => { return props.disabled || shouldBeDisabledByScreenReader; }, [isScreenReaderActive, enableInScreenReaderStates, props.disabled]); - const [shouldUseDisabledCursor, setShouldUseDisabledCursor] = useState(isDisabled); + const shouldUseDisabledCursor = useMemo(() => isDisabled && !isExecuting, [isDisabled, isExecuting]); const onLongPressHandler = useCallback( (event) => { @@ -118,14 +119,6 @@ const GenericPressable = forwardRef((props, ref) => { [onPressHandler], ); - useEffect(() => { - if (isDisabled) { - const timer = setTimeout(() => setShouldUseDisabledCursor(true), 1000); - return () => clearTimeout(timer); - } - setShouldUseDisabledCursor(false); - }, [isDisabled]); - useEffect(() => { if (!keyboardShortcut) { return () => {}; diff --git a/src/components/Pressable/GenericPressable/PropTypes.js b/src/components/Pressable/GenericPressable/PropTypes.js index 3933b31d2d47..690e265b6552 100644 --- a/src/components/Pressable/GenericPressable/PropTypes.js +++ b/src/components/Pressable/GenericPressable/PropTypes.js @@ -45,6 +45,9 @@ 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 {} @@ -125,6 +128,7 @@ 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 5119bb0898cd..0f33a3685b1c 100644 --- a/src/components/Pressable/PressableWithFeedback.js +++ b/src/components/Pressable/PressableWithFeedback.js @@ -55,6 +55,7 @@ const PressableWithFeedback = forwardRef((props, ref) => { // eslint-disable-next-line react/jsx-props-no-spreading {...propsWithoutWrapperStyles} disabled={isDisabled} + isExecuting={isExecuting} onHoverIn={() => { setIsHovered(true); if (props.onHoverIn) props.onHoverIn();