antd-form-creator v1.0.3

antd-form-creator

基于 antd-form, 使用固定格式的配置文件, 快速生成 form 表单

📦 Install

yarn add antd-form-creator -S

npm install antd-form-creator -S

🔨 Usage

import formCreator from 'antd-form-creator';

API

主要参数

Array<NormalRow \| HiddenItemConfig> | 参数 | 说明 | 类型 | 默认值 | | :----------- | :----------------- | :------------------------------------: | ------ | | formConfig | 表单基本配置 | FormConfig | | | runtimeProps | 表单项运行时变量 | RuntimeProps | | | rowExtra | 表单行额外渲染占位 | rowExtra | | | listIndex | 行索引 | number | |

FormConfig

一个完整的配置文件由多个行配置组成, 其中可能包括隐藏字段 Array<NormalRow|HiddenItemConfig>

NormalRow

表单行配置

常规配置文件按行为一个大单元进行划分, 每行中含有 n 个 FormItem, 根据情况自定义, 可以在这里定义每个 FormItem 的栅格配置

HiddenItemConfig

通用的隐藏配置

因为可能存在 hidden 字段(功能与其他表单项相同, 只是不展示), 所以用一个通用的隐藏配置 隐藏 Item 无需配置 Row, Col 等, 会直接在 renderSingleRow 中特殊处理含有 hidden 的 Item

ColConfig

一个完整的配置文件由多个 Col 配置组成, 其中可能包括隐藏字段 Array<NormalCol|HiddenItemConfig>

NormalCol

一个 Col 一般指代一个 Form.Item, 所以配置文件可能包括 Col, Form.Item 和 Item 内部包括的实际控件

其中 __type 是字段控件, 因为要在 FromItem 中使用, 需要满足 antd 的自定义控件要求

RuntimeProps

有一些属性是需要运行时动态改变或获取的, 无法通过配置文件的方式固定, 所以这里提供一个给字段控件注入运行时属性的入口

其中 componentProps 和 itemProps 就是最终被动态合并的 hash 对象, 可以直接提供一个对象, 也可以提供一个函数, 在每个字段控件渲染是, 其字段名会作为参数传过来, 用于自定义判断

Demo

import formCreator from 'antd-form-creator';
import { Form } from 'antd';

// 配置文件示例
export const FORM_CONFG = [
  {
    gutter: 60,
    cols: [
      {
        span: 12,
        item: {
          name: 'field-1',
          label: '字段-1',
          rules: [
            { required: true, message: '必填项不能为空' },
            () => ({ validator: COMMON_BLANK_CHECK }),
            () => ({ validator: COMMON_FORMAT_CHECK_WITH_CHINESE }),
          ],
        },
        component: {
          __type: Input,
          placeholder: '请输入',
          maxLength: 20,
        },
      },
      {
        span: 12,
        item: {
          name: 'field-2',
          label: '字段-2',
          rules: [{ required: true, message: '必填项不能为空' }],
        },
        component: {
          __type: Input,
          placeholder: '请输入',
          maxLength: 20,
        },
      },
    ],
  },
  {
    gutter: 60,
    cols: [
      {
        span: 12,
        item: {
          name: 'field-3',
          label: '字段-3',
        },
        component: {
          __type: Select,
          mode: 'multiple',
          options: [],
          placeholder: '请选择',
        },
      },
    ],
  },
  {
    gutter: 0,
    cols: [
      {
        span: 24,
        item: {
          name: 'field-4',
          label: '字段-4',
        },
        component: {
          __type: Input,
          placeholder: '请输入这个这个玩意',
        },
      },
    ],
  },
  {
    gutter: 0,
    cols: [
      {
        span: 24,
        item: {
          name: 'field-5',
          label: '字段-5',
        },
        component: {
          __type: TextArea,
          rows: 3,
          placeholder: '请输入',
        },
      },
    ],
  },
  {
    gutter: 0,
    cols: [
      {
        span: 24,
        item: {
          name: 'tags',
          label: '标签',
        },
        component: {
          __type: Tags,
        },
      },
    ],
  },
  {
    hidden: true,
    name: 'id',
    __type: Input,
  },
];

// ... 一些逻辑代码
const [form] = useForm();

const content = (
  <Form layout="vertical" form={form} autoComplete="off" className="xxx-form">
    {formMaker({
      formConfig: FORM_CONFG,
      runtimeProps: {
        // 编辑模式下, CANNOT_EDIT_LIST 所包含的字段不可编辑, 由于这里的 '是否为编辑模式' 不可提前配置, 所以用动态注入的方式
        componentProps: (name: string) => ({
          disabled: !isCreateMode && !!~CANNOT_EDIT_LIST.indexOf(name),
        }),
      },
    })}
  </Form>
);

TODO

• 生产环境压缩,
• 去掉通用格式(暂时)
• 分离类型文件
• 更多例子, FormList