react-easy-form-state v1.0.1

With react-easy-form-state you can easily create a form with everything you need:

• input components (text, select, datepicker, checkbox)
• field validation
• internationalization
• server submission with response handling and errors handling

• loading overlay

Example with Spring Boot server in https://github.com/radmonteiro/ReactEasyFormStateExample

Simple form example in https://codesandbox.io/s/react-easy-form-state-example-br5gj

Container

FormStateProvider

<FormStateProvider validations={validations} 
                   catalogs={catalogs} 
                   messages={messages} 
                   locale={'en'} 
                   dateFormat={'dd/MM/yyyy'} 
>

    ...

</FormStateProvider>

Properties messages and locale are optional. You don't need to use these if you do not want internationalization, then when you call Input components from this lib you need to use labelText and tooltipText. If you want internationalization use label and tooltip.

The default handleServerErrors function can read the errors in server response if the data object has the following structure:

{
    errors: {
        errorMessage : <STRING>, 
        fields : { 
            <FIELD_NAME>: <STRING>, 
            ...
        }
    }
}

For example:

{
    errors: {
        errorMessage : 'Please correct field errors', 
        fields : { 
            email: 'Invalid email'
            password: 'Password is not strong'
        }
    }
}

Submission default handler functions

handleServerErrors:

handleServerErrorsDefault = data => {

    /**
     * Handle server validation errors
     */
    if(Object.keys(data.errors).length > 0) {

        let focusOnField = true;

        let validationErrors = {};
        Object.keys(data.errors.fields).forEach(el => {
            let val = {
                invalid: true,
                focus: focusOnField,
                errorMessage: data.errors.fields[el]
            }
            focusOnField = false;

            validationErrors[el] = val;
        })


        delete data.errors;

        return {
            message: data.errors.message,
            fields: validationErrors
        }
    }

    return {
        message: '',
        fields: {}
    };

}

####handleResponseData:

handleResponseDataDefault = ( {setState, setValidationErrors, afterHandleResponse, handleServerErrors} ) => data => {

    handleServerErrors = handleServerErrors ?? handleServerErrorsDefault;

    if (data.urlRedirect) {
        window.location.href = data.urlRedirect;
        return;
    }

    let serverErrors = handleServerErrors(data);

    setValidationErrors(serverErrors);

    /**
     * Replace state with values sent from server
     */
    setState(prevState => {
        let newState = {
            ...prevState,
            ...data
        }

        afterHandleResponse(newState);

        return newState;

    });

};

Components

ButtonSubmit

<ButtonSubmit labelText={'Submit'} />

Required properties:

• label or labelText

TextInput

<TextInput labelText={'Name'}
           name={'name'}
/>

Required properties:

• name
• label or labelText

SelectInput

<SelectInput labelText={'Type'}
             name={'type'}
/>

Required properties:

• name
• label or labelText
• catalog: required if it was not passed in the catalogs property of the FormStateProvider

SelectRadioInput

<SelectRadioInput labelText={'Gender'}
                  name={'gender'}
/>

Required properties:

• name
• label or labelText
• catalog: required if it was not passed in the catalogs property of the FormStateProvider

DatePickerInput

<DatePickerInput labelText={'Birthday'}
                 name={'birthday'}
/>

Required properties:

• name
• label or labelText

HiddenInput

<HiddenInput name={'some'}
             value={'someValue'}
/>

Required properties:

• name
• value

Field Validation

For validation it is used the 'validator' dependency, so you can use 'validator' methods like 'isEmpty', or you can implement your own methods. See the example below.

Example

export const SimpleExampleApp = () => {


    const urlSubmit = 'example-url'

    const validateLength = (value) => {
        return value.length > 3;
    };

    const validations =
        [
            {
                field: 'name',
                method: 'isEmpty',
                validWhen: false,
                errorMessage: 'Required'
            },
            {
                field: 'name',
                method: validateLength,
                validWhen: true,
                errorMessage: 'Invalid length'
            }
        ];

    const [isAdmin, setIsAdmin] = React.useState(false);

    const onChangeType = value => {
        setIsAdmin(value === 'admin');
    }

    const catalogs = {
        type: [
            {id: 'admin', text: 'Administrator'},
            {id: 'normal', text: 'Normal user'}
        ],
        gender: [
            {id: 'M', text: 'Male'},
            {id: 'F', text: 'Female'}
        ]
    }

    return (

        <>

            <FormStateProvider urlSubmit={urlSubmit} validations={validations} catalogs={catalogs} messages={messages} locale={'en'} dateFormat={'dd/MM/yyyy'}>

                <TextInput label={'input.name'}
                                name={'name'}
                           tooltip={'tooltip.name'}
                />

                <TextInput labelText={'Email'}
                                name={'email'}
                />

                <SelectInput labelText={'Type'}
                                  name={'type'}
                                  onChange={onChangeType}
                />

                <TextInput labelText={'Password'}
                                name={'password'}
                                visible={isAdmin}
                />


                <SelectRadioInput labelText={'Gender'}
                             name={'gender'}

                />


                <DatePickerInput labelText={'Birthday'}
                                 name={'birthday'}

                />

                <HiddenInput name={'birthday'}
                             value={'some hidden value'}
                />



                <CheckboxInput labelText={'Accept conditions'}
                               name={'acceptConditions'}
                />

                <ButtonSubmit labelText={'Submit'} />



            </FormStateProvider>
        </>
    )
};