Antd Form Json
Generate Json data with the controlled form based on "antd"、“lodash-es”、"immer"
Install
npm install antd-form-jsonyarn add antd-form-jsonPreview Storybook
Usage
import { useState } from 'react';
import { FormJson, ETypes } from 'antd-form-json';
import type { IFormItem } from 'antd-form-json';
const App = () => {
const [formStates, setFormStates] = useState<IFormItem[]>([
{
name: 'mikasa',
value: '',
id: '1',
type: ETypes.Object,
children: [
{
name: 'name',
value: 'Ackerman',
id: '2',
type: ETypes.String,
children: [],
},
{
name: 'height',
value: 170,
id: '4',
type: ETypes.Number,
children: [],
},
{
name: 'hobby',
value: 170,
id: '5',
type: ETypes.Array,
children: [
{
name: '',
value: 'kill Alen',
id: '6',
type: ETypes.String,
children: [],
},
],
},
],
},
{
name: 'isAlenSb',
value: true,
id: '3',
type: ETypes.Boolean,
children: [],
},
]);
return (
<div>
<FormJson formStates={formStates} setFormStates={setFormStates} />
</div>
)
}API
| Property | Description | Type | Default | Required |
|---|---|---|---|---|
| formStates | The initial state | IFormItem[] | ||
| setFormStates | Dispatch actions | Dispatch"<"SetStateAction"<"IFormItem[]">"">" | ||
| indent | Indent size in pixels of tree data | number | 16 | |
| spans | The span of grid between each element for every line | number[] | [8,5,8,3] | |
| containerClassName | The container class | string | ||
| itemClassName | The class for each line's container | string | ||
| onAddChildren | A callback function, can be executed when clicking to the plus children icon | OnStateCurd | ||
| onAddSibling | A callback function, can be executed when clicking to the plus icon | OnStateCurd | ||
| onDeleteItem | A callback function, can be executed when clicking to the delete icon | OnStateCurd | ||
| onStateChange | A callback function, can be executed when the input element's value has been changed | OnStateChange |
Hooks
useJsonStates
type useJsonStates = (formStates: IFormItem[]) => Objectreturn the memorized json object from formStates.
usage
import { useState } from 'react';
import { FormJson, useJsonStates } from 'antd-form-json';
import type { IFormItem, ETypes } from 'antd-form-json';
const App = () => {
const [formStates, setFormStates] = useState<IFormItem[]>([
{
name: 'mikasa',
value: '',
id: '1',
type: ETypes.Object,
children: [
{
name: 'name',
value: 'Ackerman',
id: '2',
type: ETypes.String,
children: [],
},
{
name: 'height',
value: 170,
id: '4',
type: ETypes.Number,
children: [],
},
{
name: 'hobby',
value: 170,
id: '5',
type: ETypes.Array,
children: [
{
name: '',
value: 'kill Alen',
id: '6',
type: ETypes.String,
children: [],
},
],
},
],
},
{
name: 'isAlenSb',
value: true,
id: '3',
type: ETypes.Boolean,
children: [],
},
]);
const jsonState = useJsonStates(formStates);
/**
* current jsonState:
* {
* mikasa: {
* name: "Ackerman",
* height: 170,
* hobby: ["kill Alen"]
* },
* isAlenSb: true
* }
* */
return (
<div>
<FormJson formStates={formStates} setFormStates={setFormStates} />
</div>
)
}useFormActions
type useFormActions = (props: IFormActions) => ReturnFormACtionsThe CURD actions for the form which has already been binded to the form element event, maybe you could use it in other place.
Interface
IFormItem
interface IFormItem {
name: string; // The Json Key
value: string | number | boolean; // The value to the current json key
id: string; // The unique key for each line
type: string; // ETypes
children: IFormItem[]; // The nested children when the type is 'array' or 'object'
}ETypes
enum ETypes {
String = 'string',
Number = 'number',
Array = 'array',
Object = 'object',
Boolean = 'boolean',
}TEditField
type TEditField = Exclude<keyof IFormItem, 'id' | 'children' | 'path'>;IFormActions
interface IFormActions extends ICallbacks {
setFormStates: Dispatch<SetStateAction<IFormItem[]>>;
}ICallbacks
interface ICallbacks {
onAddChildren?: OnStateCurd;
onAddSibling?: OnStateCurd;
onDeleteItem?: OnStateCurd;
onStateChange?: OnStateChange;
}OnStateCurd
type OnStateCurd = (path: number[]) => void;OnStateChange
type OnStateChange = (path: number[], field: TEditField, value: string | number | boolean) => void;