Contacts: Add a button to copy fields to clipboard

Fixes #39

src/components/Contact.tsx

@@ -7,10 +7,12 @@ import IconDate from '@material-ui/icons/DateRange';
 import CommunicationCall from '@material-ui/icons/Call';
 import CommunicationChatBubble from '@material-ui/icons/ChatBubble';
 import CommunicationEmail from '@material-ui/icons/Email';
+import AssignmentIcon from '@material-ui/icons/Assignment';
 
 import PimItemHeader from './PimItemHeader';
 
 import { ContactType } from '../pim-types';
+import { IconButton } from '@material-ui/core';
 
 class Contact extends React.PureComponent {
   public props: {
@@ -40,15 +42,30 @@ class Contact extends React.PureComponent {
 
       return contact.comp.getAllProperties(propName).map((prop, idx) => {
         const type = prop.toJSON()[1].type;
-        const values = prop.getValues().map((val) => (
+        const values = prop.getValues().map((val) => {
+          const primaryText = primaryTransform ? primaryTransform(val, type) : val;
+          const clipboardButton = (
+            <IconButton
+              onClick={(e) => {
+                e.preventDefault();
+                (window as any).navigator.clipboard.writeText(primaryText);
+              }}
+            >
+              <AssignmentIcon />
+            </IconButton>
+          );
+
+          return (
             <ListItem
               key={idx}
               href={valueToHref ? valueToHref(val, type) : undefined}
-            primaryText={primaryTransform ? primaryTransform(val, type) : val}
+              primaryText={primaryText}
+              rightIcon={clipboardButton}
               secondaryText={secondaryTransform ? secondaryTransform(val, type) : type}
               {...props}
             />
-        ));
+          );
+        });
         return values;
       });
     }
@@ -57,7 +74,6 @@ class Contact extends React.PureComponent {
       'tel',
       {
         leftIcon: <CommunicationCall />,
-        rightIcon: <CommunicationChatBubble />,
       },
       (x) => ('tel:' + x)
     ));
@@ -147,7 +163,7 @@ class Contact extends React.PureComponent {
       <div>
         <PimItemHeader text={name}>
           {lastModified && (
-            <span style={{fontSize: '90%'}}>{lastModified}</span>
+            <span style={{ fontSize: '90%' }}>{lastModified}</span>
           )}
         </PimItemHeader>
         {lists.map((list, idx) => (