Reviewed vulnerability alerts

Unfortunately the v1.4.2 was published with some NPM error, and since we can't publish over anymore, that version was skipped.

Fixes

• #54 Reviewed vulnerability alerts

Quick fixes for 1.4.0 version

• #45 The "setFieldValue" function moved from "ControlledFormProps" to "FormStateController" interface;
• #52 The "ControlledFieldProps" interface was inconsistent when using decorators to control fields, this forced to keep onChange and onBlur props to internal control only (prop injection), and the extra handlers were renamed to afterChange, afterBlur and afterReset. This may be a breakin change for who was using the "onChange" of Field component for this purpose.
• #53 Besides it's a patch version release, there's a new feature, The reset function to programmatically reset all forms instances with the current form name.

v1.4.0

Library enhancements

• #44 allow to attach an onReset handler on Form component;
• #46 allow to attach extra control handlers to controlled fields (onChange, onBlur, onReset);
• #49 handle Date object and number (timestamp) "initialValue" for "date" and "datetime-local" type fields;
• #51 handle Date object and number (timestamp) on "setFieldValue" function.

Library bugfixes

• #45 fixed ControlledFormProps typescript definitions adding setFieldValue function;
• #48 fixed a leak on "match" validation when the confirmation field is filled before the "matched" field.

Postponed issues: #47, #50.

IE compatibility hotfix

Library fixes:

• #42 fixed IE bug to instantiate CustomEvent to provide components communication.

Controllers decorators

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.

Typescript compilation error fix

Library changelog

Fixes

#38 Fixed a Typescript compilation error on provider.d.ts.

v1.2.0 Redux flow and validation refacotring

This new release brings some major lib flow refactoring aiming future Redux integration and some improvements to increase the code testability and coverage.

Library changelog

Breaking changes

• #30 Major validation refactoring to improve code testability:

Before: to attach custom validations, you are required to provide an array of objects of a specific shape to the FormProvider component:

function App() {
    const customValidators = [{
        name: 'noadmin',
        validate: (value) => {
            if(value) return !(/^admin$/i.test(value))
            return true
        }
    }]
    return (
        <FormProvider customValidators={customValidators}>
            [...]
        </FormProvider>
    )
}

After: now you just need to extend the CustomValidator class, and provide it into an array to the FormProvider component.

import {CustomValidator} from 'react-formctrl'

class NoAdminValidator extends CustomValidator {
    
    constructor() {
        super('noadmin') // This constructor parameter defines the error message key
    }

    validate(formCtrl, props, value, files) {
        return !/^admin$/i.test(value)
    }

}

function App() {
    const customValidators = [
        new NoAdminValidator()
    ]
    return (
        <FormProvider customValidators={customValidators}>
            [...]
        </FormProvider>
    )
}

Fixes

• #34 Field "validate" property PropType

Enhancements

• #26 Increased code test coverage to 97%!

Postponed changes

• #21 The last missing major feature of the library, the dynamic fields, was postponed due some difficulties with the flow, refactor, testability and coverage. This feature may be available in 1.3.0 version. Until then, use this approach:

function App() {
    const handleSubmit = person => yourApi.save(person)
    return (
        <div>
            <FormProvider>
                <FormControl name="personForm">
                    <PersonForm onSubmit={handleSubmit} />
                </FormControl>
            </FormProvider>
        </div>
    )
}

class PersonForm extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            relationships: []
        }

        this.handleAddRelationship = this.handleAddRelationship.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleAddRelationship(relationship) {
        this.setState(state => ({
            relationships: state.relationships.push(relationship)
        }))
    }

    handleSubmit(person) {
        person.relationships = this.state.relationships
        this.props.onSubmit(person)
    }

    render() {
        const { formCtrl: { formName, invalid }, onSubmit } = this.props
        const { relationships } = this.state
        return (
            <Form name={formName} onSubmit={onSubmit}>
                <div>
                    <div className="col-6">
                        <h3>Person data</h3>
                        <InputField form={formName} name="name" required />
                        <InputField form={formName} name="age" type="number" />
                    </div>
                    <div className="col-6">
                        <h3>Person's relationships</h3>
                        <RelationshipTable relationships={relationships} />
                        <hr />
                        <FormControl formName="personRelationshipForm">
                            <RelationshipForm onSubmit={this.handleAddRelationship} />
                        </FormControl>
                    </div>
                    <hr />
                    <button disabled={invalid || !relationships.length} type="submit">Save person</button>
                </div>
            </Form>
        )
    }
}

function RelationshipForm({ formCtrl: { formName, invalid }, onSubmit }) {
    return (
        <Form name={formName} onSubmit={onSubmit}>
            <InputField form={formName} name="relation" required />
            <InputField form={formName} name="name" required />
            <InputField form={formName} name="age" type="number" />
            <button disabled={invalid} type="submit">Add relationship</button>
        </Form>
    )
}

function RelationshipTable({ relationships }) {
    return (
        <table>
            <thead>
                <tr>
                    <th>Relation</th>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                {relationships.map((relationship, index) => (
                    <tr key={index}>
                        <td>{relationship.relation}</td>
                        <td>{relationship.name}</td>
                        <td>{relationship.age || ''}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    )
}

Live demo changelog

Fixes

• #27 User form example responsivity

Enhancements

• #31 Bundle size tracker badge on README page.

Documentation improvement

No new feature or changes were made in this version. Just a documentation optimization for NPM repository and the Live demo.

Custom validations and input file handling

Finally, the 1.1.1 version is released with some with a renewed library core events controlling.

Library

The "react-formctrl" library changes.

Improvements

• #10 allow register custom validations
• #12 Input file handling and validation

Fixes

• #16 validation fails to min number field type if it is zero.

Live demo

The live demo changes.

Improvements

• #13 Markdown component to render de GitHub README.md file from master branch.
• #14 Major layout refactoring and menu reorganization.
• #15 New syntax highlight component.

Fixes

• #11 Mobile menu not opening.

Validation messages improvement

Breaking changes

• #7 Improved validation error messages.

Fixes

• #5 Added Field component missing properties Typescript definitions.
• #6 Added Field component missing PropTypes definitions.

Improvements

• #8 Live demo redesigned to Bootstrap 4.0.0-beta.