pass custom value to displayField copy (#49)

* pass custom value to displayField copy * fix tests
centrifuge · Oct 10, 2019 · ad2f246 · ad2f246
1 parent 183f9f2
commit ad2f246
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 22 deletions.
diff --git a/.storybook/src/3.components/display-field.tsx b/.storybook/src/3.components/display-field.tsx
@@ -27,7 +27,7 @@ storiesOf("Components | Display Field", module)
 
       return (
         <AxisTheme>
-          <Box gap={'medium'}  pad={'medium'}>
+          <Box gap={'medium'} pad={'medium'}>
             <Box width={'200px'}>
               <DisplayField value="Some text in a fixed container that is to long and it does not fit"/>
             </Box>
@@ -36,7 +36,6 @@ storiesOf("Components | Display Field", module)
           </Box>
 
 
-
         </AxisTheme>
       );
     }
@@ -91,20 +90,31 @@ storiesOf("Components | Display Field", module)
 
       return (
         <AxisTheme>
-          <Box gap={'medium'} width={'200px'} pad={'medium'}>
-            <DisplayField
-              copy={true}
-              link={{
-                href: 'http://google.com',
-                target: '_blank'
-              }}
-              value="Link as Anchor props where you define the target"/>
-            <DisplayField
-              copy={true}
-              label={'Some label'}
-              value="Some Value that is to long and it does not fit"/>
-          </Box>
+          <Box gap={'medium'} pad={'medium'}>
+            <Box width={'200px'}>
+              <DisplayField
+                copy={true}
+                link={{
+                  href: 'http://google.com',
+                  target: '_blank'
+                }}
+                value="Link as Anchor props where you define the target"/>
+              <DisplayField
+                copy={true}
+                label={'Some label'}
+                value="Some Value that is to long and it does not fit"/>
 
+
+            </Box>
+
+            <Box width={'300px'}>
+              <DisplayField
+                copy={true}
+                valueToCopy={'Random Custom value'}
+                label={'Some label'}
+                value="Copies custom value"/>
+            </Box>
+          </Box>
         </AxisTheme>
       );
     }

diff --git a/packages/display-field/src/DisplayField.test.tsx b/packages/display-field/src/DisplayField.test.tsx
@@ -70,5 +70,22 @@ describe("Display field", () => {
       expect(await window.navigator.clipboard.readText()).toEqual(value);
 
     })
+
+    it('should copy custom value to clipboard', async () => {
+      wrapper.setProps({
+        valueToCopy:'Custom Value',
+        copy:true,
+        link: {
+          href:"http://example.com",
+          target:'_blank'
+        }
+      })
+      const anchor = wrapper.find(Anchor);
+      expect(anchor.length).toEqual(2);
+      const copy = anchor.at(1);
+      copy.simulate('click');
+      expect(await window.navigator.clipboard.readText()).toEqual('Custom Value');
+
+    })
   });
 });
diff --git a/packages/display-field/src/DisplayField.tsx b/packages/display-field/src/DisplayField.tsx
@@ -26,6 +26,7 @@ interface Props extends StyledThemeProps<ThemeProps> {
   as?: PolymorphicType;
   link?: string | AnchorProps,
   copy?: boolean,
+  valueToCopy?: string,
   label?: string,
 }
 
@@ -68,6 +69,7 @@ const LabelBox = styled(Box)`
 export const DisplayField: React.FunctionComponent<Props> = (
   {
     value,
+    valueToCopy,
     link,
     label,
     as = 'p',
@@ -87,9 +89,10 @@ export const DisplayField: React.FunctionComponent<Props> = (
   } = theme;
 
   const WithLink = ({link, children}) => {
-    return link ? <Anchor className={'display_field_anchor'} {...anchor} {...(typeof link === 'string' ? {href: link} : link)} >
-      {children}
-    </Anchor> : children;
+    return link ?
+      <Anchor className={'display_field_anchor'} {...anchor} {...(typeof link === 'string' ? {href: link} : link)} >
+        {children}
+      </Anchor> : children;
   }
 
   const WithLabel = ({label, children}) => {
@@ -102,7 +105,12 @@ export const DisplayField: React.FunctionComponent<Props> = (
   const WithCopyIcon = ({children}) => {
     return copy ? <Box direction={'row'} align={'center'} gap={'xsmall'}>
       {children}
-      <Anchor className={'icon_anchor'} onClick={() => copyToClipboard(value)} title={'Copy to clipboard'}>
+      <Anchor
+        className={'icon_anchor'}
+        onClick={() => {
+          copyToClipboard(valueToCopy || value)
+        }}
+        title={'Copy to clipboard'}>
         <icons.copy size={icons.size}/>
       </Anchor>
     </Box> : children
@@ -114,9 +122,7 @@ export const DisplayField: React.FunctionComponent<Props> = (
       <WithLabel label={label}>
         <WithCopyIcon>
           <WithLink link={link}>
-            <Text as={as} className={'display_field_text'} onClick={() => {
-              copyToClipboard(value)
-            }}>
+            <Text as={as} className={'display_field_text'}>
               {value}
             </Text>