kp-form

介绍

kp-form 是基于 rc-field-form （by Antd）的表单组件。在性能优先的前提下，可以与多个 ui 框架（Tea/Taro/Antd...）快速集成。并拥有根据 JSON Schema 来生成表单的能力 🥳

为什么使用？

-> 除了 Antd 以外，Tea / Taro 等 ui 组件表单能力十分有限，通常需要搭配三方表单库来使用；

-> 出于易用性、流行度、一致性等方面考虑。团队需要一致的表单能力。React Antd 属于行业使用率与认可度最高的一款；

-> 其他 UI 库很难与 Antd Form 集成，本组件可以做到无需安装 Antd，在全局定义一次 renderProps，即可在原有 UI 库 api 的基础上，使用 Antd Form 的 api 与 FormInstance 能力。

-> 需要通过 json 数据驱动表单渲染？还在自己写 case map 么？来试试 kp-form 吧

JSON Schema 结构

[
  {                                      // 表单项的 props，通常会透传给对应 UI Form.Item
    type: string                         // 字段类型
    name: string                         // 字段 id
    label?: string                       // 字段标签
    fieldProps?: Record<string, any>     // 字段组件属性，会透传给 <Select> <Input> 等组件的 props
    innerProps?: Record<string, any>     // 字段与渲染无关的其他属性
    value?: any                          // 默认值，与 initialValue 作用相同。区分在于 value 会经过值转换，initialValue 会原封不动传递
    // ... 其他属性参照对应 UI Form.Item props
  }
]

整体为数组结构 ItemProps[]，便于排序。对象内主要有两个关键层级点：

ItemProps 表单项的 props，除了 JSON 表单扩展的一些属性外，其他与 Form.Item props 一致。属性会透传

fieldProps` 字段的 props，会直接透传给字段，type 不同 props 不同，如 `type='select'` 时，通常会有 `fieldProps: { options: [] }

快速开始

安装

npm i kp-form

目前使用 babel cjs 与 esm 两种格式构建打包，组件已默认值支持 webpack 的 tree-shaking

使用

<KpForm
  onFinish={(values) => {
    console.log('submit: ', values);
  }}
>
  <KpForm.Item name="title" label="title">
    <Input />
  </KpForm.Item>

  <KpForm.Item name="content" label="content">
    <Input />
  </KpForm.Item>
</KpForm>

源码开发

安装

npm i --registry https://mirrors.tencent.com/npm/

运行

npm start

构建文档网站

npm run docs:build

本地打包

npm run build