Controllers decorators
·
94 commits
to master
since this release
This release comes with an exciting new feature!
DECORATORS!
No need to wrap your fields with the <Field /> component or your forms with <FormControl /> component.
Now, simply decorate your field component:
let InputField = ({label, placeholder, name, type, required, onChange, onBlur, value}) => {
const getLabel = () => {
return required ? `${label}*` : label
}
return (
<div>
<label for={name}>{getLabel()}</label>
<input id={name} name={name}
type={type}
onChange={onChange}
onBlur={onBlur}
placeholder={placeholder || label}
value={value}
/>
</div>
);
}
InputField = controlledField()(InputField)And decorate your forms components:
let PersonForm = ({form, formCtrl, onSubmit, person = {}}) => (
<Form name={form} onSubmit={onSubmit}>
<div class="fieldset">
<div class="fields-container">
<InputField
form={form}
name="name"
label="Name"
initialValue={person.name}
required
/>
<InputField
form={form}
name="email"
type="email"
label="E-mail"
initialValue={person.email}
required
/>
</div>
<div class="buttons-container">
<button type="submit" disabled={formCtrl.invalid || formCtrl.unchanged}>Save</button>
<button type="reset" disabled={formCtrl.unchanged}>Reset</button>
</div>
</div>
</Form>
)
PersonForm = controlledForm()(PersonForm)This will reduce a lot of repeated code. Well, good bye Field and FormControl components! :)
Library changes
New features
- #40 Control forms and fields with decorators;
- Rewrited the README.md docs.
Fixes
- #39 Fixed inconsistent Validator and CustomValidator type definition.