# kp-form

## 介绍

`kp-form` 是基于 [rc-field-form](https://github.com/react-component/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 结构

```typescript
[
  {                                      // 表单项的 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: [] }
```

## 快速开始

### 安装

```bash
npm i kp-form
```

目前使用 babel cjs 与 esm 两种格式构建打包，组件已默认值支持 webpack 的 [tree-shaking](https://webpack.js.org/guides/tree-shaking/)

### 使用

```jsx
<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>
```

## 源码开发

安装

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

运行

```bash
npm start
```

构建文档网站

```bash
npm run docs:build
```

本地打包

```bash
npm run build
```