From a7f5672435030483a9854b7c1118d5bf82a5ac67 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 17 Nov 2023 13:34:28 +0100 Subject: [PATCH 1/4] migrate CopyTextToClipboard.js to TypeScript --- ...ToClipboard.js => CopyTextToClipboard.tsx} | 30 ++++++++----------- .../Pressable/PressableWithDelayToggle.tsx | 2 +- 2 files changed, 14 insertions(+), 18 deletions(-) rename src/components/{CopyTextToClipboard.js => CopyTextToClipboard.tsx} (50%) diff --git a/src/components/CopyTextToClipboard.js b/src/components/CopyTextToClipboard.tsx similarity index 50% rename from src/components/CopyTextToClipboard.js rename to src/components/CopyTextToClipboard.tsx index ac396c6cedf4..2f2466918ac1 100644 --- a/src/components/CopyTextToClipboard.js +++ b/src/components/CopyTextToClipboard.tsx @@ -1,26 +1,22 @@ -import PropTypes from 'prop-types'; import React, {useCallback} from 'react'; +import {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'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import {WithLocalizeProps} from './withLocalize'; -const propTypes = { +type CopyTextToClipboardProps = WithLocalizeProps & { /** The text to display and copy to the clipboard */ - text: PropTypes.string.isRequired, + text: string; /** Styles to apply to the text */ - // eslint-disable-next-line react/forbid-prop-types - textStyles: PropTypes.arrayOf(PropTypes.object), - - ...withLocalizePropTypes, + textStyles?: StyleProp; }; -const defaultProps = { - textStyles: [], -}; +function CopyTextToClipboard(props: CopyTextToClipboardProps) { + const {translate} = useLocalize(); -function CopyTextToClipboard(props) { const copyToClipboard = useCallback(() => { Clipboard.setString(props.text); }, [props.text]); @@ -28,17 +24,17 @@ function CopyTextToClipboard(props) { return ( ); } -CopyTextToClipboard.propTypes = propTypes; -CopyTextToClipboard.defaultProps = defaultProps; CopyTextToClipboard.displayName = 'CopyTextToClipboard'; -export default withLocalize(CopyTextToClipboard); +export default CopyTextToClipboard; diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx index 7ded9320b802..612c23ceda4c 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; From 7fd35bcb2b0c8c9aaed2b5f655cf312d007d96f2 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 20 Nov 2023 08:39:53 +0100 Subject: [PATCH 2/4] remove WithLocalizeProps from CopyTextTOClipboardProps --- src/components/CopyTextToClipboard.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/CopyTextToClipboard.tsx b/src/components/CopyTextToClipboard.tsx index 2f2466918ac1..4b3b3fa4f845 100644 --- a/src/components/CopyTextToClipboard.tsx +++ b/src/components/CopyTextToClipboard.tsx @@ -4,9 +4,8 @@ import useLocalize from '@hooks/useLocalize'; import Clipboard from '@libs/Clipboard'; import * as Expensicons from './Icon/Expensicons'; import PressableWithDelayToggle from './Pressable/PressableWithDelayToggle'; -import {WithLocalizeProps} from './withLocalize'; -type CopyTextToClipboardProps = WithLocalizeProps & { +type CopyTextToClipboardProps = { /** The text to display and copy to the clipboard */ text: string; From abf847ee91500065bebc01151daee0cc0d057209 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 20 Nov 2023 10:14:26 +0100 Subject: [PATCH 3/4] destructure props, add coment to eslint disable --- src/components/CopyTextToClipboard.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/CopyTextToClipboard.tsx b/src/components/CopyTextToClipboard.tsx index 4eab05e76817..e77864e13121 100644 --- a/src/components/CopyTextToClipboard.tsx +++ b/src/components/CopyTextToClipboard.tsx @@ -15,21 +15,21 @@ type CopyTextToClipboardProps = { urlToCopy?: string; }; -function CopyTextToClipboard(props: CopyTextToClipboardProps) { +function CopyTextToClipboard({text, textStyles, urlToCopy}: CopyTextToClipboardProps) { const {translate} = useLocalize(); const copyToClipboard = useCallback(() => { - // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - Clipboard.setString(props.urlToCopy || props.text); - }, [props.text, props.urlToCopy]); + // 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 ( Date: Tue, 12 Dec 2023 14:40:20 +0100 Subject: [PATCH 4/4] change accessibility label --- src/components/CopyTextToClipboard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CopyTextToClipboard.tsx b/src/components/CopyTextToClipboard.tsx index 201228c47f2c..6f3b42e88fee 100644 --- a/src/components/CopyTextToClipboard.tsx +++ b/src/components/CopyTextToClipboard.tsx @@ -34,7 +34,7 @@ function CopyTextToClipboard({text, textStyles, urlToCopy, accessibilityRole}: C textStyles={textStyles} onPress={copyToClipboard} accessible - accessibilityLabel={translate('reportActionContextMenu.copyEmailToClipboard')} + accessibilityLabel={translate('reportActionContextMenu.copyToClipboard')} accessibilityRole={accessibilityRole} /> );