add iconOnly mode to CopyButton

ZeusLN · Jan 12, 2025 · f1eb3f6 · f1eb3f6
1 parent 556280d
commit f1eb3f6
Showing 1 changed file with 32 additions and 2 deletions.
diff --git a/components/CopyButton.tsx b/components/CopyButton.tsx
@@ -1,14 +1,19 @@
 import * as React from 'react';
-import { Platform } from 'react-native';
+import { Platform, TouchableOpacity, ViewStyle } from 'react-native';
+import { Icon } from 'react-native-elements';
 import Clipboard from '@react-native-clipboard/clipboard';
 import Button from './../components/Button';
 import { localeString } from './../utils/LocaleUtils';
+import { themeColor } from './../utils/ThemeUtils';
 
 interface CopyButtonProps {
     title?: string;
     copyValue: string;
     icon?: any;
     noUppercase?: boolean;
+    iconOnly?: boolean;
+    iconSize?: number;
+    copyIconContainerStyle?: ViewStyle;
 }
 
 interface CopyButtonState {
@@ -52,12 +57,37 @@ export default class CopyButton extends React.Component<
 
     render() {
         const { copied } = this.state;
-        const { title, icon, noUppercase } = this.props;
+        const {
+            title,
+            icon,
+            noUppercase,
+            iconOnly,
+            iconSize,
+            copyIconContainerStyle
+        } = this.props;
 
         const buttonTitle = copied
             ? localeString('components.CopyButton.copied')
             : title || localeString('components.CopyButton.copy');
 
+        if (iconOnly) {
+            return (
+                <TouchableOpacity
+                    // "padding: 5" leads to a larger area where users can click on
+                    // "copyIconContainerStyle" allows contextual spacing (marginRight)
+                    // when used alongside ShareButton
+                    style={[{ padding: 5 }, copyIconContainerStyle]}
+                    onPress={() => this.copyToClipboard()}
+                >
+                    <Icon
+                        name={copied ? 'check' : 'content-copy'}
+                        size={iconSize ?? 27}
+                        color={themeColor('secondaryText')}
+                    />
+                </TouchableOpacity>
+            );
+        }
+
         return (
             <Button
                 title={buttonTitle}