20601 — migrate PressableWithDelayToggle

src/components/CopyTextToClipboard.js

@@ -1,7 +1,7 @@
 import React, {useCallback} from 'react';
 import PropTypes from 'prop-types';
 import * as Expensicons from './Icon/Expensicons';
-import PressableWithDelayToggle from './PressableWithDelayToggle';
+import PressableWithDelayToggle from './Pressable/PressableWithDelayToggle';
 import Clipboard from '../libs/Clipboard';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 

src/components/PressableWithDelayToggle.js → src/components/Pressable/PressableWithDelayToggle.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Pressable} from 'react-native';
-import * as Expensicons from './Icon/Expensicons';
-import compose from '../libs/compose';
-import Icon from './Icon';
-import Tooltip from './Tooltip';
-import Text from './Text';
-import styles from '../styles/styles';
-import variables from '../styles/variables';
-import getButtonState from '../libs/getButtonState';
-import * as StyleUtils from '../styles/StyleUtils';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import withDelayToggleButtonState, {withDelayToggleButtonStatePropTypes} from './withDelayToggleButtonState';
+import * as Expensicons from '../Icon/Expensicons';
+import compose from '../../libs/compose';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import Text from '../Text';
+import styles from '../../styles/styles';
+import variables from '../../styles/variables';
+import getButtonState from '../../libs/getButtonState';
+import * as StyleUtils from '../../styles/StyleUtils';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import withDelayToggleButtonState, {withDelayToggleButtonStatePropTypes} from '../withDelayToggleButtonState';
+import PressableWithoutFeedback from './PressableWithoutFeedback';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -84,16 +84,19 @@ function PressableWithDelayToggle(props) {
     // Due to limitations in RN regarding the vertical text alignment of non-Text elements,
     // for elements that are supposed to be inline, we need to use a Text element instead
     // of a Pressable
-    const PressableView = props.inline ? Text : Pressable;
+    const PressableView = props.inline ? Text : PressableWithoutFeedback;
+    const tooltipText = props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText;
 
     return (
         <PressableView
+            ref={props.innerRef}
             style={[styles.flexRow, ...props.styles]}
             onPress={updatePressState}
+            accessibilityLabel={tooltipText}
         >
             <Tooltip
                 containerStyles={[styles.flexRow]}
-                text={props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText}
+                text={tooltipText}
             >
                 <>
                     <Text
@@ -103,10 +106,9 @@ function PressableWithDelayToggle(props) {
                         {props.isDelayButtonStateComplete && props.textChecked ? props.textChecked : props.text}
                         &nbsp;
                     </Text>
-                    <Pressable
-                        ref={props.innerRef}
-                        focusable
-                        accessibilityLabel={props.isDelayButtonStateComplete ? props.tooltipTextChecked : props.tooltipText}
+                    <PressableWithoutFeedback
+                        focusable={false}
+                        accessible={false}
                         onPress={updatePressState}
                     >
                         {({hovered, pressed}) => (
@@ -122,7 +124,7 @@ function PressableWithDelayToggle(props) {
                                 )}
                             </>
                         )}
-                    </Pressable>
+                    </PressableWithoutFeedback>
                 </>
             </Tooltip>
         </PressableView>

src/components/Pressable/index.js

@@ -1,3 +1,4 @@
 export {default as GenericPressable} from './GenericPressable';
 export {default as PressableWithFeedback} from './PressableWithFeedback';
 export {default as PressableWithoutFeedback} from './PressableWithoutFeedback';
+export {default as PressableWithDelayToggle} from './PressableWithDelayToggle';

src/pages/settings/Security/TwoFactorAuth/CodesPage.js

@@ -17,7 +17,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../compo
 import styles from '../../../../styles/styles';
 import FixedFooter from '../../../../components/FixedFooter';
 import Button from '../../../../components/Button';
-import PressableWithDelayToggle from '../../../../components/PressableWithDelayToggle';
+import PressableWithDelayToggle from '../../../../components/Pressable/PressableWithDelayToggle';
 import Text from '../../../../components/Text';
 import Section from '../../../../components/Section';
 import ONYXKEYS from '../../../../ONYXKEYS';

src/pages/settings/Security/TwoFactorAuth/VerifyPage.js

@@ -18,7 +18,7 @@ import TextLink from '../../../../components/TextLink';
 import Clipboard from '../../../../libs/Clipboard';
 import FixedFooter from '../../../../components/FixedFooter';
 import * as Expensicons from '../../../../components/Icon/Expensicons';
-import PressableWithDelayToggle from '../../../../components/PressableWithDelayToggle';
+import PressableWithDelayToggle from '../../../../components/Pressable/PressableWithDelayToggle';
 import TwoFactorAuthForm from './TwoFactorAuthForm';
 import QRCode from '../../../../components/QRCode';
 import expensifyLogo from '../../../../../assets/images/expensify-logo-round-transparent.png';