diff --git a/src/components/CopyTextToClipboard.js b/src/components/CopyTextToClipboard.js deleted file mode 100644 index 678537c6a3d7..000000000000 --- a/src/components/CopyTextToClipboard.js +++ /dev/null @@ -1,48 +0,0 @@ -import PropTypes from 'prop-types'; -import React, {useCallback} from 'react'; -import Clipboard from '@libs/Clipboard'; -import * as Expensicons from './Icon/Expensicons'; -import PressableWithDelayToggle from './Pressable/PressableWithDelayToggle'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; - -const propTypes = { - /** The text to display and copy to the clipboard */ - text: PropTypes.string.isRequired, - - /** Styles to apply to the text */ - // eslint-disable-next-line react/forbid-prop-types - textStyles: PropTypes.arrayOf(PropTypes.object), - urlToCopy: PropTypes.string, - accessibilityRole: PropTypes.string, - ...withLocalizePropTypes, -}; - -const defaultProps = { - textStyles: [], - urlToCopy: null, - accessibilityRole: undefined, -}; - -function CopyTextToClipboard(props) { - const copyToClipboard = useCallback(() => { - Clipboard.setString(props.urlToCopy || props.text); - }, [props.text, props.urlToCopy]); - - return ( - - ); -} - -CopyTextToClipboard.propTypes = propTypes; -CopyTextToClipboard.defaultProps = defaultProps; -CopyTextToClipboard.displayName = 'CopyTextToClipboard'; - -export default withLocalize(CopyTextToClipboard); diff --git a/src/components/CopyTextToClipboard.tsx b/src/components/CopyTextToClipboard.tsx new file mode 100644 index 000000000000..6f3b42e88fee --- /dev/null +++ b/src/components/CopyTextToClipboard.tsx @@ -0,0 +1,45 @@ +import React, {useCallback} from 'react'; +import {AccessibilityRole, StyleProp, TextStyle} from 'react-native'; +import useLocalize from '@hooks/useLocalize'; +import Clipboard from '@libs/Clipboard'; +import * as Expensicons from './Icon/Expensicons'; +import PressableWithDelayToggle from './Pressable/PressableWithDelayToggle'; + +type CopyTextToClipboardProps = { + /** The text to display and copy to the clipboard */ + text: string; + + /** Styles to apply to the text */ + textStyles?: StyleProp; + + urlToCopy?: string; + + accessibilityRole?: AccessibilityRole; +}; + +function CopyTextToClipboard({text, textStyles, urlToCopy, accessibilityRole}: CopyTextToClipboardProps) { + const {translate} = useLocalize(); + + const copyToClipboard = useCallback(() => { + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- nullish coalescing doesn't achieve the same result in this case + Clipboard.setString(urlToCopy || text); + }, [text, urlToCopy]); + + return ( + + ); +} + +CopyTextToClipboard.displayName = 'CopyTextToClipboard'; + +export default CopyTextToClipboard; diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx index 5e072dc6b1a1..ec9e54c83b7e 100644 --- a/src/components/Pressable/PressableWithDelayToggle.tsx +++ b/src/components/Pressable/PressableWithDelayToggle.tsx @@ -19,7 +19,7 @@ type PressableWithDelayToggleProps = PressableProps & { text: string; /** The text to display once the pressable is pressed */ - textChecked: string; + textChecked?: string; /** The tooltip text to display */ tooltipText: string;