Skip to content

kingforever/form-json

 
 

Repository files navigation

Antd Form Json

Generate Json data with the controlled form based on "antd"、“lodash-es”、"immer"

Install

npm install antd-form-json
yarn add antd-form-json

Usage

import { useState } from 'react';
import { FormJson } 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: [],
    },
  ]);
  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[]) => Object

return 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) => ReturnFormACtions

The CURD actions for the form which has already been binded to the form element event, maybe you could use it in other place.

Interface

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;
}
type OnStateCurd = (path: number[]) => void;
type OnStateChange = (path: number[], field: TEditField, value: string | number | boolean) => void;

About

Generate Json data with the controlled forms

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 91.9%
  • JavaScript 7.3%
  • Other 0.8%