Skip to content

Commit

Permalink
feat: Use cozy-ui fields (input and textarea)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cedricmessiant
cedricmessiant committed Mar 20, 2019
1 parent 4f4ae21 commit 5bc3650
Show file tree
Hide file tree
Showing 5 changed files with 164 additions and 30 deletions.
5 changes: 3 additions & 2 deletions src/components/ContactCard/ContactFieldInput.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@ import { Field } from 'react-final-form'
import classnames from 'classnames'

import HasValueCondition from '../Form/HasValueCondition'
import { AdaptedInput, AdaptedTextarea } from '../Form/fields'

const getInputComponent = inputType =>
inputType === 'textarea' ? 'textarea' : 'input'
inputType === 'textarea' ? AdaptedTextarea : AdaptedInput

class ContactFieldInput extends React.Component {
state = {
Expand Down Expand Up @@ -65,7 +66,7 @@ class ContactFieldInput extends React.Component {
<Field
name={`${name}Label`}
type="text"
component="input"
component={AdaptedInput}
className="contact-form__label-input"
placeholder={labelPlaceholder}
onFocus={this.onFocus}
Expand Down
84 changes: 56 additions & 28 deletions src/components/ContactCard/ContactForm/__snapshots__/index.spec.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="givenName"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -52,7 +53,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="familyName"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -97,7 +99,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="phone[0].phone"
onBlur={[Function]}
onChange={[Function]}
Expand All @@ -108,7 +111,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
value="+33 (2)0 90 00 54 04"
/>
<input
className="contact-form__label-input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__label-input"
data-valid={true}
name="phone[0].phoneLabel"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -146,7 +150,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="phone[1].phone"
onBlur={[Function]}
onChange={[Function]}
Expand All @@ -157,7 +162,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
value="+33 6 77 11 22 33"
/>
<input
className="contact-form__label-input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__label-input"
data-valid={true}
name="phone[1].phoneLabel"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -248,7 +254,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="email[0].email"
onBlur={[Function]}
onChange={[Function]}
Expand All @@ -259,7 +266,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
value="[email protected]"
/>
<input
className="contact-form__label-input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__label-input"
data-valid={true}
name="email[0].emailLabel"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -297,7 +305,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="email[1].email"
onBlur={[Function]}
onChange={[Function]}
Expand All @@ -308,7 +317,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
value="[email protected]"
/>
<input
className="contact-form__label-input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__label-input"
data-valid={true}
name="email[1].emailLabel"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -399,7 +409,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="address[0].address"
onBlur={[Function]}
onChange={[Function]}
Expand All @@ -410,7 +421,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
value="94 Hinton Road 05034 Fresno, Singapore"
/>
<input
className="contact-form__label-input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__label-input"
data-valid={true}
name="address[0].addressLabel"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -448,7 +460,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="address[1].address"
onBlur={[Function]}
onChange={[Function]}
Expand All @@ -459,7 +472,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
value="426 Runolfsson Knolls 84573 Port Easter Cocos (Keeling) Islands"
/>
<input
className="contact-form__label-input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__label-input"
data-valid={true}
name="address[1].addressLabel"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -547,7 +561,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="cozy"
onBlur={[Function]}
onChange={[Function]}
Expand All @@ -558,7 +573,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
value="https://johndoe.mycozy.cloud"
/>
<input
className="contact-form__label-input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__label-input"
data-valid={true}
name="cozyLabel"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -599,7 +615,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="company"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -641,7 +658,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="birthday"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -683,7 +701,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
className="contact-form__input-wrapper"
>
<textarea
className="contact-form__input"
className="styles__c-textarea___D7EEH contact-form__input"
data-valid={true}
name="note"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -758,7 +777,8 @@ exports[`ContactForm should match snapshot 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="givenName"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -786,7 +806,8 @@ exports[`ContactForm should match snapshot 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="familyName"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -831,7 +852,8 @@ exports[`ContactForm should match snapshot 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="phone[0].phone"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -903,7 +925,8 @@ exports[`ContactForm should match snapshot 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="email[0].email"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -975,7 +998,8 @@ exports[`ContactForm should match snapshot 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="address[0].address"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -1044,7 +1068,8 @@ exports[`ContactForm should match snapshot 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="cozy"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -1086,7 +1111,8 @@ exports[`ContactForm should match snapshot 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="company"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -1128,7 +1154,8 @@ exports[`ContactForm should match snapshot 1`] = `
className="contact-form__input-wrapper"
>
<input
className="contact-form__input"
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
data-valid={true}
name="birthday"
onBlur={[Function]}
onChange={[Function]}
Expand Down Expand Up @@ -1170,7 +1197,8 @@ exports[`ContactForm should match snapshot 1`] = `
className="contact-form__input-wrapper"
>
<textarea
className="contact-form__input"
className="styles__c-textarea___D7EEH contact-form__input"
data-valid={true}
name="note"
onBlur={[Function]}
onChange={[Function]}
Expand Down
35 changes: 35 additions & 0 deletions src/components/Form/__snapshots__/fields.spec.jsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`AdaptedInput should adapt cozy-ui input for react-final-form 1`] = `
<form
onSubmit={[Function]}
>
<input
className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR"
data-valid={true}
name="title"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="text"
value="Hello"
/>
</form>
`;

exports[`AdaptedTextarea should adapt cozy-ui input for react-final-form 1`] = `
<form
onSubmit={[Function]}
>
<textarea
className="styles__c-textarea___D7EEH"
data-valid={true}
name="description"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder=""
value="Nostrum expedita qui rerum non est asperiores ratione."
/>
</form>
`;
27 changes: 27 additions & 0 deletions src/components/Form/fields.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from 'react'
import Input from 'cozy-ui/transpiled/react/Input'
import Textarea from 'cozy-ui/transpiled/react/Textarea'

function adaptField(WrappedComponent) {
class AdaptField extends React.Component {
render() {
const {
input,
meta: { valid },
...rest
} = this.props
return <WrappedComponent {...input} {...rest} data-valid={valid} />
}
}
AdaptField.displayName = `adaptField(${getDisplayName(WrappedComponent)})`
return AdaptField
}

function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}

const AdaptedInput = adaptField(Input)
const AdaptedTextarea = adaptField(Textarea)

export { AdaptedInput, AdaptedTextarea }
Loading

0 comments on commit 5bc3650

Please sign in to comment.