json-to-antd-forms
Version:
This Package converts json schema to antd forms.
205 lines (189 loc) • 5.89 kB
JavaScript
import React from 'react'
import { Form, Input, Switch, DatePicker, Upload, Checkbox, Radio, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
const AntDesignFormComponent = ({ config, onFinish }) => {
const { Item } = Form;
const renderFormItem = (field) => {
const {
type,
label,
name,
initialValue,
required,
requiredMark,
customValidation,
minLength,
maxLength,
min,
max,
options,
} = field;
switch (type) {
case 'string':
return (
<Item
label={label}
name={name}
initialValue={initialValue}
rules={[
{ required, message: `${label} is required` },
{ min: minLength, message: `Minimum length is ${minLength}` },
{ max: maxLength, message: `Maximum length is ${maxLength}` },
{ validator: customValidation },
]}
required={required}
requiredMark={requiredMark}
>
<Input />
</Item>
);
case 'textarea':
return (
<Item
label={label}
name={name}
initialValue={initialValue}
rules={[
{ required, message: `${label} is required` },
{ min: minLength, message: `Minimum length is ${minLength}` },
{ max: maxLength, message: `Maximum length is ${maxLength}` },
{ validator: customValidation },
]}
required={required}
requiredMark={requiredMark}
>
<TextArea />
</Item>
);
case 'number':
return (
<Item
label={label}
name={name}
initialValue={initialValue}
rules={[
{ required, message: `${label} is required` },
{ type: 'number', message: 'Invalid number' },
{ min, message: `Minimum value is ${min}` },
{ max, message: `Maximum value is ${max}` },
]}
required={required}
requiredMark={requiredMark}
>
<Input type="number" />
</Item>
);
case 'switch':
return (
<Item
label={label}
name={name}
initialValue={initialValue}
valuePropName="checked"
required={required}
requiredMark={requiredMark}
>
<Switch />
</Item>
);
case 'date':
return (
<Item
label={label}
name={name}
initialValue={initialValue}
rules={[{ required, message: `${label} is required` }]}
required={required}
requiredMark={requiredMark}
>
<DatePicker />
</Item>
);
case 'daterange':
return (
<Item
label={label}
name={name}
initialValue={initialValue}
rules={[{ required, message: `${label} is required` }]}
required={required}
requiredMark={requiredMark}
>
<DatePicker.RangePicker />
</Item>
);
case 'file':
return (
<Item
label={label}
name={name}
initialValue={initialValue}
rules={[{ required, message: `${label} is required` }]}
required={required}
requiredMark={requiredMark}
>
<Upload>
<Button icon={<UploadOutlined />}>Click to upload</Button>
</Upload>
</Item>
);
case 'email':
return (
<Item
label={label}
name={name}
initialValue={initialValue}
rules={[
{ required, message: `${label} is required` },
{ type: 'email', message: 'Invalid email' },
{ validator: customValidation },
]}
required={required}
requiredMark={requiredMark}
>
<Input type="email" />
</Item>
);
case 'checkbox':
return (
<Item
label={label}
name={name}
initialValue={initialValue}
valuePropName="checked"
required={required}
requiredMark={requiredMark}
>
<Checkbox.Group options={options} />
</Item>
);
case 'radio':
return (
<Item
label={label}
name={name}
initialValue={initialValue}
required={required}
requiredMark={requiredMark}
>
<Radio.Group options={options} />
</Item>
);
default:
return null;
}
};
return (
<Form onFinish={onFinish}>
{config.map((field, index) => (
<React.Fragment key={index}>{renderFormItem(field)}</React.Fragment>
))}
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
export default AntDesignFormComponent;