Antd-pc-form-package NPM

Coding......

antd-pc-form-package

Through the strategy pattern, the form encapsulation is designed to simplify the development difficulty of antd-design on PC.

Target Plan

Form Type Plan	Progress	Version
Input	done	v1.0.0
Number Input	done	v1.0.0
Radio	done	v1.0.0
Checkbox	done	v1.0.0
Select	done	v1.0.0
Switch	done	v1.0.0
Date Picker	done	v1.0.0
Tree Select	coding
...

Dependency

$ npm install antd --save-dev

Usage

$ npm install antd-pc-form-package

import {FormPackage} from "antd-pc-form-package";

<FormPackage dataSource={dataSource} getFormValues={this.getFormValues}/>

dataSource

{ 
    key: 1,
    type: 1,
    name: 'name',
    label: 'name', 
    value: '', 
    placeholder: 'input name', 
    rules: [
        {required: true, message: 'input name'},
    ], 
    icon: <Icon type="user" style={{ color: 'red' }} />,
},

Property	Description	Type	Default	Required
key	Unique identification number	Number		True
type	Form type	String	INPUT	False
name	Name	String		True
label		String		False
value		Number \| string \| Boolean		False
placeholder		String	FormItem._placeholder	False
rules		Object	{required: true, message:FormItem._placeholder}	False
icon		Component		False
trigger	Validate trigger	String	'onBlur'	False
source	radio, checkbox, select etc must be need	Array[]		False

'type' enumerations

Type	Description
INPUT	文本输入框
NUMBER_INPUT	数字输入框
RADIO	单选框
CHECKBOX	多选框
SELECT	下拉框
SWITCH	开关
DATE_PICKER	日期选择框
TREE_SELECT	树选择器