react-component-form

Install

• Available on npm : npm i --save @wasable/react-component-form

• Import : import { Form, CheckboxField } from '@wasable/react-component-form';

Components

Form Component

<Form /> component depends on our internal HOC (High Order Component) react-form. You can find this dependency on npm : @wasable/react-form
React-form will give us some functions to prepare our React Context. This function will be given to all children you will provide to Form. Don't be afraid of magic. It's everywhere.

Props

List of Form's props. Bold properties is required by HOC beable-form.

| Property | Type | Required | Default | Description | | ----------------- | ---------- | -------- | ------- | -------------------------------------------------------------------------- | | id | integer | no | null | Form's id. Allows you to differentiate multiple form | | className | string | no | null | Form's style className | | apiErrors | array | no | [] | Array of messages shown if global http error on the form | | title | string | no | | Title for this form | | titleClassName | string | no | | ClassName for title | | bodyClassName | string | no | | ClassName for body | | initialData | object | yes | | See InitialData Props | | validator | object | no | {} | See Validator Props | | actionForm | func | yes | | Function called when submit. Will receive FormData from HOC react-form | | onSubmitError | func | yes | | Function called when data doesn't respect rules |

initialData Props

initialData must contain an object which are your model's representation. Each key is an attribute and each value must be valued or initialize with ''.

Examples

For Create :

{
    first_name : '',
    last_name : ''
}

For Update :

{
    first_name : 'Antonin',
    last_name : 'Zampieri'
}

Here, react-form will instantiate his state with two keys : first_name and last_name.
That will allow our Form component to update state for this couple of keys only.

Validation Props

Each validation props must have an object with two keys :

{
    rules: // custom object where you will define for each attribute the rule which will be applied to
    rulesTypes: // custom rules you want to add
}

Examples

rules structure :

{
    phone: {
        rule: 'phone', //rule you will apply to phone (see React-Form docs to see which rules are available)
        fields: 'phone', //fields you target for this rule
        message: 'phone.invalid' //slug sent when rule validation failed. Allow you to react to it =P
    },
    zip_code: {
        rule: 'validate_zip_code', // custom rule see below.
        fields: 'zip_code', //fields you target for this rule
        message: 'zip_code.invalid'
    }
}

rulesTypes structure :

{
    validate_zip_code: validateZipCode // validateZipCode is a function which accept a value and must return a boolean
}

Nowadays, we luckily use for 90% required rules. Our react-form library give us a function which will make easier our life :

import { generateRequiredRules } from '@wasable/react-form';

generateRequiredRules will accept an array of key and return rules objects.

Example :

const required = [
    'first_name',
    'last_name'
];

const rules = {
    ...generateRequiredRules(required),
    phone: { rule: 'phone', fields: 'phone', message: 'phone.invalid'}
};

generateRequiredRules will return key like this one : {your_string}_required

Featured Components

Before, we saw how create our data form and our form structure. Now we will see how to handle each form item.

Each line on your form must be added into Form children. You can take one of our fields component or create one on your own.

In Form Component, we create a React Context. This one will allow us to have access to this props in each child components :

| Property | Type | Default | Description | | -------------------- | ------ | ----------- | --------------------------------- | | formData | object | initialData | Form state | | handleChange | func | | Allow you to change a state value | | handleMultipleChange | func | | Multiple handleChange | | getValidationStatus | func | | return keys validation | | submit | func | | Submit function |

In addition to Context props, all our featured components will have this props:

| Property | Type | Required | Default | Description | | --------------------- | ------------- | -------- | ------- | ------------------------------------------------------------------------- | | name | string | yes | | Name of attribute. Allow us to change state of current form for this name | | label | string | no | '' | Label for this featured Component | | placeholder | string | no | null | Placeholder for this featured Component | | validationErrors | array | no | [] | Array of validation rules key applied in this component | | errorStyles | object | no | See doc | See errorStyles Props | | fieldWrapperClassName | string | no | '' | ClassName for parent div of component | | wrapperClassName | string | no | '' | ClassName for input and errors div | | className | string | no | '' | ClassName for child of component | | | fieldAttributes | object | no | {} | Optionals props you want to add |

errorStyles Props

Props

{
    className : 'string' // className for each error messages,
    itemClassName: 'string' // className for parent div
}

Featured Component List

• CheckboxField
• SelectField
• MultiSelectField
• SelectCountryField
• SubmitField
• TextField
• TextareaField

CheckboxField

Default component for boolean type parameter. This component hasn't its own particular properties.

SelectField

This component is a wrapper for react-select component. It has its own properties, in addition to default properties shown above :

| Property | Type | Required | Default | Description | | -------------- | ------ | -------- | ------------------------- | ----------------------------------------------------------- | | value | number | no | null | Value allows us to use as value a sub property of an object | | getOptionLabel | func | no | ({label})=>{return label} | Get option label | | options | array | no | [] | List of all options we need to show |

MultiSelectField

This component is a wrapper for react-select component with isMulti = true. It has its own properties, in addition to default properties shown above :

| Property | Type | Required | Default | Description | | -------------- | ----- | -------- | ------------------------- | ------------------------------------------------------------ | | value | array | no | [] | Values allows us to use as value a sub property of an object | | getOptionLabel | func | no | ({label})=>{return label} | Get option label | | options | array | no | [] | List of all options we need to show |

SelectCountryField

This component is a wrapper for react-select-country-list component. It list the countries and return the right label.

SubmitField

This component is a bit different. It has the unique role to make the call to action submit component.

It has this props (it isn't sharing properties with other components) :

| Property | Type | Required | Default | Description | | ---------------- | ------ | -------- | -------- | ------------------------------------- | | label | string | no | 'Submit' | Label for this submit button | | wrappedClassName | string | no | '' | ClassName for parent div of component | | className | string | no | '' | ClassName for child of component | | fieldAttributes | object | no | {} | Optionals props you want to add |

TextField

Default component of all type components =D. It's the light in the shadow. Use it for string parameters. It's a simple input.

It has one unique property (in addition to default properties shown above) :

| Property | Type | Required | Default | Description | | -------- | ------ | -------- | ------- | ----------------------------------------------------------- | | type | string | no | 'text' | Input's type | | value | any | no | null | Value allows us to use as value a sub property of an object |

TextareaField

Default component for text area

It has one property (in addition to default properties shown above) :

| Property | Type | Required | Default | Description | | -------- | ---- | -------- | ------- | ----------------------------------------------------------- | | value | any | no | null | Value allows us to use as value a sub property of an object |