Skip to content

Controllers decorators

Choose a tag to compare

@leandrohsilveira leandrohsilveira released this 06 Nov 22:24
· 94 commits to master since this release
32e5c40

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.