migrate CopyTextToClipboard to functional component

Expensify · Jun 2, 2023 · 99bbff8 · 99bbff8
1 parent fc30ddc
commit 99bbff8
Showing 1 changed file with 34 additions and 43 deletions.
diff --git a/src/components/CopyTextToClipboard.js b/src/components/CopyTextToClipboard.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import {Pressable} from 'react-native';
+import React, { useCallback } from 'react';
+import { Pressable } from 'react-native';
 import PropTypes from 'prop-types';
 import Text from './Text';
 import * as Expensicons from './Icon/Expensicons';
@@ -11,15 +11,14 @@ import Tooltip from './Tooltip';
 import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
 import variables from '../styles/variables';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import withDelayToggleButtonState, {withDelayToggleButtonStatePropTypes} from './withDelayToggleButtonState';
+import withLocalize, { withLocalizePropTypes } from './withLocalize';
+import withDelayToggleButtonState, { withDelayToggleButtonStatePropTypes } from './withDelayToggleButtonState';
 
 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),
 
     ...withLocalizePropTypes,
@@ -31,48 +30,40 @@ const defaultProps = {
     textStyles: [],
 };
 
-class CopyTextToClipboard extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.copyToClipboard = this.copyToClipboard.bind(this);
-    }
+CopyTextToClipboard.propTypes = propTypes;
+CopyTextToClipboard.defaultProps = defaultProps;
 
-    copyToClipboard() {
-        if (this.props.isDelayButtonStateComplete) {
+const CopyTextToClipboard = ({ text, textStyles, translate, isDelayButtonStateComplete, toggleDelayButtonState }) => {
+    const copyToClipboard = useCallback(() => {
+        if (isDelayButtonStateComplete) {
             return;
         }
-        Clipboard.setString(this.props.text);
-        this.props.toggleDelayButtonState(true);
-    }
+        Clipboard.setString(text);
+        toggleDelayButtonState(true);
+    }, [isDelayButtonStateComplete, text, toggleDelayButtonState]);
 
-    render() {
-        return (
-            <Text
-                onPress={this.copyToClipboard}
-                style={[styles.flexRow, styles.cursorPointer]}
-                suppressHighlighting
-            >
-                <Text style={this.props.textStyles}>{`${this.props.text} `}</Text>
-                <Tooltip text={this.props.translate(`reportActionContextMenu.${this.props.isDelayButtonStateComplete ? 'copied' : 'copyToClipboard'}`)}>
-                    <Pressable onPress={this.copyToClipboard}>
-                        {({hovered, pressed}) => (
-                            <Icon
-                                src={this.props.isDelayButtonStateComplete ? Expensicons.Checkmark : Expensicons.Copy}
-                                fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, this.props.isDelayButtonStateComplete))}
-                                width={variables.iconSizeSmall}
-                                height={variables.iconSizeSmall}
-                                inline
-                            />
-                        )}
-                    </Pressable>
-                </Tooltip>
-            </Text>
-        );
-    }
+    return (
+        <Text
+            onPress={copyToClipboard}
+            style={[styles.flexRow, styles.cursorPointer]}
+            suppressHighlighting
+        >
+            <Text style={textStyles}>{`${text} `}</Text>
+            <Tooltip text={translate(`reportActionContextMenu.${isDelayButtonStateComplete ? 'copied' : 'copyToClipboard'}`)}>
+                <Pressable onPress={copyToClipboard}>
+                    {({ hovered, pressed }) => (
+                        <Icon
+                            src={isDelayButtonStateComplete ? Expensicons.Checkmark : Expensicons.Copy}
+                            fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, isDelayButtonStateComplete))}
+                            width={variables.iconSizeSmall}
+                            height={variables.iconSizeSmall}
+                            inline
+                        />
+                    )}
+                </Pressable>
+            </Tooltip>
+        </Text>
+    );
 }
 
-CopyTextToClipboard.propTypes = propTypes;
-CopyTextToClipboard.defaultProps = defaultProps;
-
 export default compose(withLocalize, withDelayToggleButtonState)(CopyTextToClipboard);