Merge pull request #153 from IMS-IIITH/add_copybutton

Contacts: add a copy button in detail page
IMS-IIITH · Sep 18, 2024 · cf1e254 · cf1e254
2 parents 7b6dcbb + db6103a
commit cf1e254
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@kolking/react-native-avatar": "^2.1.1",
     "@notifee/react-native": "^9.0.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
+    "@react-native-clipboard/clipboard": "^1.14.1",
     "@react-native-community/datetimepicker": "^8.2.0",
     "@react-native-community/netinfo": "^11.3.2",
     "@react-native-cookies/cookies": "^6.2.1",

diff --git a/src/screens/Contacts/DetailedContact.tsx b/src/screens/Contacts/DetailedContact.tsx
@@ -6,10 +6,12 @@ import {
   StyleSheet,
   TouchableOpacity,
   Linking,
+  ToastAndroid,
 } from "react-native";
+import Clipboard from "@react-native-clipboard/clipboard";
 
 import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
-import { faEnvelope, faPhone } from "@fortawesome/free-solid-svg-icons";
+import { faEnvelope, faPhone, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { faTelephoneIcon } from "../../constants/Icons";
 import { DetailInfoProps } from "../../custom-types";
 
@@ -59,6 +61,10 @@ const styles = StyleSheet.create({
     flexShrink: 1,
     color: "black",
   },
+  copyButton: {
+    marginLeft: "auto",
+    justifyContent: "flex-end",
+  },
   iconContainer: {
     flexDirection: "row",
     alignItems: "center",
@@ -70,6 +76,15 @@ const styles = StyleSheet.create({
 function DetailContact({ route }: DetailInfoProps): React.JSX.Element {
   const { user } = route.params;
 
+  const copyToClipboard = (text: string, type: string) => {
+    ToastAndroid.showWithGravity(
+      `${type} copied to clipboard`,
+      0.5,
+      ToastAndroid.CENTER,
+    );
+    Clipboard.setString(text);
+  };
+
   return (
     <SafeAreaView style={styles.container}>
       <View style={styles.infoContainer}>
@@ -86,14 +101,53 @@ function DetailContact({ route }: DetailInfoProps): React.JSX.Element {
         <View style={styles.detailPair}>
           <Text style={styles.label}>Email:</Text>
           <Text style={styles.value}>{user.email || "Not available"}</Text>
+          {user.email ? (
+            <TouchableOpacity
+              onPress={() => copyToClipboard(user.email, "Email")}
+              style={styles.copyButton}
+            >
+              <FontAwesomeIcon
+                icon={faCopy}
+                size={20}
+                color={"darkblue"}
+                style={{ margin: 7 }}
+              />
+            </TouchableOpacity>
+          ) : null}
         </View>
         <View style={styles.detailPair}>
           <Text style={styles.label}>Extension:</Text>
           <Text style={styles.value}>{user.extension || "Not available"}</Text>
+          {user.extension ? (
+            <TouchableOpacity
+              onPress={() => copyToClipboard(user.extension, "Extension")}
+              style={styles.copyButton}
+            >
+              <FontAwesomeIcon
+                icon={faCopy}
+                size={20}
+                color={"darkblue"}
+                style={{ margin: 7 }}
+              />
+            </TouchableOpacity>
+          ) : null}
         </View>
         <View style={styles.detailPair}>
           <Text style={styles.label}>Phone Number:</Text>
           <Text style={styles.value}>{user.mobile || "Not available"}</Text>
+          {user.mobile ? (
+            <TouchableOpacity
+              onPress={() => copyToClipboard(user.mobile, "Phone Number")}
+              style={styles.copyButton}
+            >
+              <FontAwesomeIcon
+                icon={faCopy}
+                size={20}
+                color={"darkblue"}
+                style={{ margin: 7 }}
+              />
+            </TouchableOpacity>
+          ) : null}
         </View>
       </View>
       <View style={styles.iconContainer}>