Skip to content

Util that creates formik form from basic object definition.

Notifications You must be signed in to change notification settings

qest-cz/form-generator

Repository files navigation

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

About

Util that creates formik form from basic object definition.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published