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