formGenerator

Util that creates formik form from basic object definition.

Install

npm install @qest/form-generator

yarn add @qest/form-generator

Basic form definition

import formGenerator from '@qest/form-generator';
import { FormDefinition } from '@qest/form-generator/types';
import React from 'react';
import * as yup from 'yup';

const SignInForm = () => {
    const formDefinition: FormDefinition = {
        onSubmit: (values, { setSubmitting }) => {
            console.log(values);
            setSubmitting(false);
        },
        gutter: 16,
        fields: [
            {
                name: 'username',
                label: t('forms.SignInForm.username'),
                validation: yup.string().required(t('forms.validation.required')),
                rowStart: true,
                col: { span: 12 },
            },
            {
                name: 'password',
                type: 'password',
                label: t('forms.SignInForm.password'),
                validation: yup.string().required(t('forms.validation.required')),
                rowEnd: true,
                col: { span: 12 },
            },
        ]
    };

    return formGenerator(formDefinition);
};

export default SignInForm;

Overloading current components or declaring new ones, per project

in root of application:

formComponentMapping.projectSpecialSelect = (props: CombinedComponentProps) => {
    return <div>{JSON.stringify(props, null, 2)}</div>;
};

Prop custom mapping

in form definition you can, map props
(for instance, disable and toggle loading on button when submitting form):

{
    component: 'button',
    children: 'Submit',
    htmlType: 'submit',
    propMapping: (fieldProps) => ({
        disabled: fieldProps.formProps.isSubmitting,
        loading: fieldProps.formProps.isSubmitting,
    }),
}

Custom components in form definition

if you pass "custom" to component field, you can render anything trough "custom" prop:

{
    name: 'custom',
    component: 'custom',
    custom: (props) => <div>{JSON.stringify(props, null, 2)}</div>,
}

Validation and cross fieldValidation

validation accepts yup schema, and it supports crossField validation:

{
    name: 'input',
    label: 'input',
    component: 'input',
    validation: Yup.string().when('autocomplete', {
        is: (autocomplete) => !!autocomplete,
        then: Yup.string().required('required'),
    }),
    placeholder: 'placeholder',
}

From default it supports most of antd components:

| Component | Link to doc | | ------------- | --------------------------------------------------------------------- | | AutoComplete | AutoCompleteProps | | Button | ButtonProps | | Cascader | CascaderProps | | Checkbox | CheckboxProps | | CheckboxGroup | CheckboxProps | | DatePicker | DatePickerProps | | Input | InputProps | | InputNumber | InputNumberProps | | Radio | RadioGroupProps | | Rate | RateProps | | Select | SelectProps | | Slider | SliderProps | | Switch | SwitchProps | | TimePicker | TimePickerProps | | Transfer | TransferProps | | TreeSelect | TreeSelectProps |