Final Form Generator MUI

Final Form Generator MUI is an implementation of @kyump/final-form-generator with Material UI v4.

Installation

You need some dependencies in order to use this package:

• @kyump/final-form-generator
• @material-ui/core
• @material-ui/icons
• @material-ui/styles

Usage

Here a small example

API

MuiForm

The main component of the package.

• fields - $ReadOnlyArray<FieldType> (required) : Fields of the forms
• onSubmit - (values: Object) => any (required) : Submit callback of the form
• initialValues - Object : Initial values of the form
• columns - number : columns number of the form grid
• rows - number : rows number of the form grid
• renderSubmit - (params: RenderSubmitParamsType) => React$Element : custom render for submit button
• preValidate - (values: Object) => {[string]: string} : Function than can be called before yup validation
• devMode - boolean: true to display erros and values of the form
• children - React$Element: Children of the form
• customValidationSchema - Object: Yup base schema is you want to use noSortEdges for example.

const customValidationSchema = Yup.object().shape({
    customer: Yup.object().shape({}, ['phone', 'email']),
});

Here, if you put validation on field customer.email or customer.phone it will be add to this shape.

• preValidate - (values: Object) => Object: Function than can be called before yup validation. It has the form values as param and should return an object with error message ({[string]: string})

useMuiFormGenerator

This hook is used to extends MuiForm in association with FormComponent.

• customDefaultValidation - (name: string) => ?Object (required): Function used to extend or override the validation
• fields - $ReadOnlyArray (required): The fields of the form
• customValidationSchema : cf MuiForm
• preValidate : cf MuiForm
• customRenderInput - (params: { field: T, children?: Array<React$Node>, index: number, }) => ?React$Node : Function used to extend or override MUI renderInput

FormComponent

This component is used to extends MuiForm in association with FormComponent.

• decorators: Decorators for decorators props of react-final-form component
• dom: Inputs of the form (React$Node[])
• validate: Validation function for validate props of react-final-form component
• onSubmit : cf MuiForm
• initialValues : cf MuiForm
• columns : cf MuiForm
• rows : cf MuiForm
• renderSubmit : cf MuiForm
• devMode : cf MuiForm
• children : cf MuiForm

Fields

MuiForm have inputs already implemented.

License

MIT