refactor(Field): Extract FieldContainer to use it in CollectionField

By extracting this component, we can share it between Field and CollectionField, so the later has the variant feature for free
cozy · Nov 29, 2019 · 09e1862 · 09e1862
1 parent b3b5e7f
commit 09e1862
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 13 deletions.
diff --git a/react/Field/index.jsx b/react/Field/index.jsx
@@ -85,6 +85,21 @@ InputPassword.defaultProps = {
   ...Input.defaultProps
 }
 
+const FieldContainer = props => {
+  const { className, variant, ...rest } = props
+
+  return (
+    <div
+      className={cx(
+        styles['o-field'],
+        { [styles['o-field--inline']]: variant === 'inline' },
+        className
+      )}
+      {...rest}
+    />
+  )
+}
+
 const Field = props => {
   const {
     autoComplete,
@@ -205,13 +220,7 @@ const Field = props => {
   }
 
   return (
-    <div
-      className={cx(
-        styles['o-field'],
-        { [styles['o-field--inline']]: variant === 'inline' },
-        className
-      )}
-    >
+    <FieldContainer className={className} variant={variant}>
       <Label htmlFor={id} {...labelProps}>
         {label}
       </Label>
@@ -225,7 +234,7 @@ const Field = props => {
         </div>
       )}
       {inputType(type)}
-    </div>
+    </FieldContainer>
   )
 }
 
@@ -297,3 +306,4 @@ Field.defaultProps = {
 }
 
 export default Field
+export { FieldContainer }
diff --git a/react/Field/styles.styl b/react/Field/styles.styl
@@ -16,6 +16,9 @@
         +small-screen()
             flex-basis auto
 
+    > *
+        flex-grow 1
+
 .o-field-input
     position relative
     max-width rem(512)

diff --git a/react/Labs/CollectionField/Readme.md b/react/Labs/CollectionField/Readme.md
@@ -17,3 +17,24 @@ initialState = { contacts: [contacts[0]] };
   />
 </DemoProvider>
 ```
+
+```jsx
+import CollectionField from 'cozy-ui/transpiled/react/Labs/CollectionField';
+import ContactPicker from 'cozy-ui/transpiled/react/ContactPicker';
+import DemoProvider from '../../ContactsListModal/DemoProvider';
+import contacts from '../../ContactsList/data.json';
+initialState = { contacts: [contacts[0]] };
+
+<DemoProvider>
+  <CollectionField
+    values={state.contacts}
+    component={ContactPicker}
+    onChange={contacts => setState({ contacts })}
+    label="Contacts"
+    addButtonLabel="Add a contact"
+    removeButtonLabel="Remove this contact"
+    placeholder="Select a contact"
+    variant="inline"
+  />
+</DemoProvider>
+```
diff --git a/react/Labs/CollectionField/index.jsx b/react/Labs/CollectionField/index.jsx
@@ -1,11 +1,10 @@
 import React from 'react'
 import Button from '../../Button'
-import cx from 'classnames'
-import fieldStyles from '../../Field/styles.styl'
 import Label from '../../Label'
 import styles from './styles.styl'
 import Stack from '../../Stack'
 import Icon from '../../Icon'
+import { FieldContainer } from '../../Field'
 
 /**
  * Handles a collection of form fields.
@@ -21,7 +20,6 @@ const CollectionField = props => {
     addButtonLabel,
     removeButtonLabel,
     onChange,
-    className,
     ...rest
   } = props
 
@@ -43,7 +41,7 @@ const CollectionField = props => {
   }
 
   return (
-    <div className={cx(fieldStyles['o-field'], className)} {...rest}>
+    <FieldContainer {...rest}>
       <Label>{label}</Label>
       <Stack>
         <Stack spacing="s">
@@ -79,7 +77,7 @@ const CollectionField = props => {
           className={styles.CollectionField__addBtn}
         />
       </Stack>
-    </div>
+    </FieldContainer>
   )
 }
 

diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
@@ -5086,6 +5086,18 @@ exports[`Labs/CollectionField should render examples: Labs/CollectionField 1`] =
 </div>"
 `;
 
+exports[`Labs/CollectionField should render examples: Labs/CollectionField 2`] = `
+"<div>
+  <div class=\\"styles__o-field___3n5HM styles__o-field--inline___7JWZ8\\"><label class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">Contacts</label>
+    <div class=\\"styles__Stack--m___1tSpV\\">
+      <div class=\\"styles__Stack--s___22WMg\\">
+        <div class=\\"styles__CollectionField__row___Z7bbf\\"><button type=\\"button\\" class=\\"styles__SelectControl___2OxoO\\">Baramax</button><button type=\\"button\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--center___16_Xh styles__c-btn--round___1Lkyl\\" title=\\"Remove this contact\\"><span><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"16\\" height=\\"16\\"><use xlink:href=\\"#cross-small\\"></use></svg><span class=\\"u-visuallyhidden\\">Remove this contact</span></span></button></div>
+      </div><button type=\\"button\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--text___2Vp-2 styles__c-btn--center___16_Xh styles__CollectionField__addBtn___Z0FO-\\"><span><svg class=\\"styles__CollectionField__addBtnIcon___1hA5b styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><use xlink:href=\\"#plus\\"></use></svg><span>Add a contact</span></span></button>
+    </div>
+  </div>
+</div>"
+`;
+
 exports[`ListItemText should render examples: ListItemText 1`] = `
 "<div>
   <div class=\\"styles__c-list-text___3kc3E\\">