mirror of
https://github.com/zhigang1992/form-render.git
synced 2026-01-12 22:47:30 +08:00
docs(docs format):
This commit is contained in:
Tw93
@@ -1,6 +1,7 @@
|
||||
# pattern 自定义正则校验
|
||||
|
||||
### 概述
|
||||
|
||||
- 简单的长度校验推荐使用 <a href="http://groups.alidemo.cn/hive/form-render/#/docs/prop-schema?type=html" target="_blank">propSchema</a> 中的属性
|
||||
- pattern 是存在于 propSchema 中属性的一个字段，长用在当长度限制还不满足要求的场景，可通过正则的方式来对用户输入项进行校验
|
||||
- pattern 和 required、minLength、maxLength 等这一类显示为`&&`的关系，当有一个不满足时候，onValidate 回调中将会返回不符合的数组项
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# Proptypes to Json Schema [](https://www.npmjs.com/package/proptypes-to-json-schema?_blank)
|
||||
# Proptypes to Json Schema [](https://www.npmjs.com/package/proptypes-to-json-schema?_blank)
|
||||
|
||||
> Github：<a href="https://github.com/tw93/proptypes-to-json-schema" target="_blank">proptypes-to-json-schema</a>
|
||||
|
||||
@@ -24,29 +24,28 @@ fs.writeFileSync(path.join(__dirname, 'schema.json'), JSON.stringify(apiInfo, nu
|
||||
|
||||
## propToSchema(path,options) 说明
|
||||
|
||||
|名称|类型|默认值|备注|
|
||||
|:--:|:--:|:--:|:--:|
|
||||
|path|string|必填|需要转换的jsx目录地址|
|
||||
|options|object|`{}`|目前支持参数shouldAddUi,true会自动生成带 ui 配置的 schema|
|
||||
| 名称 | 类型 | 默认值 | 备注 |
|
||||
| :-----: | :----: | :----: | :-------------------------------------: |
|
||||
| path | string | 必填 | 需要转换的 jsx 目录地址 |
|
||||
| options | object | `{}` | 参数 shouldAddUi,true 会生成带 uiSchema |
|
||||
|
||||
## 目前支持如下
|
||||
|
||||
|类型|PropTypes|prop schema type |默认 ui setting |可选 ui setting|
|
||||
|:--:|:--:|:--:|:--:|:--:|
|
||||
|布尔值|bool|boolean|checkbox|无|
|
||||
|字符串|string|string|input[type=text]|textarea、password、color、date、date-time、image|
|
||||
|数字|number|number|input[type=text]|updown(步进器，搭配min、max、step使用)|
|
||||
|单选项|oneOf|enum|select box|无|
|
||||
|数组项|arrayOf|array|组展示(*1)|同左|
|
||||
|对象|shape|object|对象展示(*2)|同左|
|
||||
| 类型 | PropTypes | prop schema type | 默认 ui setting | 可选 ui setting |
|
||||
| :----: | :-------: | :--------------: | :--------------: | :-----------------------------------------------: |
|
||||
| 布尔值 | bool | boolean | checkbox | 无 |
|
||||
| 字符串 | string | string | input[type=text] | textarea、password、color、date、date-time、image |
|
||||
| 数字 | number | number | input[type=text] | updown(步进器，搭配 min、max、step 使用) |
|
||||
| 单选项 | oneOf | enum | select box | 无 |
|
||||
| 数组项 | arrayOf | array | 组展示(\*1) | 同左 |
|
||||
| 对象 | shape | object | 对象展示(\*2) | 同左 |
|
||||
|
||||
`*1`: 子元素展示依赖于 arrayOf 的设置，类似这样设置 `PropTypes.arrayOf(PropTypes.xxx)`,其实 xxx 为前 3 种基本类型,不设置默认是字符串形式
|
||||
|
||||
*1: 子元素展示依赖于arrayOf的设置，类似这样设置 `PropTypes.arrayOf(PropTypes.xxx)`,其实xxx为前3种基本类型,不设置默认是字符串形式
|
||||
|
||||
*2: 目前对象形式必须通过 PropTypes.shape 来指明类型，目前不支持嵌套对象，只支持嵌套基础类型！
|
||||
|
||||
`*2`: 目前对象形式必须通过 PropTypes.shape 来指明类型，目前不支持嵌套对象，只支持嵌套基础类型！
|
||||
|
||||
## 使用规范
|
||||
|
||||
1. 只有添加了注释的属性，才会去提出对应信息
|
||||
2. 从 defaultProps 中获取默认值
|
||||
3. 从 propTypes 中获取属性类型转换成 schema 属性名
|
||||
@@ -55,18 +54,19 @@ fs.writeFileSync(path.join(__dirname, 'schema.json'), JSON.stringify(apiInfo, nu
|
||||
- @description 参数的描述，对应 schema 中的 title 字段 description 字段，用于可视化中的输入提示
|
||||
- @format 特殊类型(不必须)，一般不填入，表单默认通过 input 进行输入，一般只有 string 类型才可以设置 format，目前支持 format 字段如下可见上表
|
||||
- @pattern 正则校验表达式(不必须)，主要用于字符串和数字类型的校验，假如长度限制不满足时候，可以使用和这个
|
||||
- @enumNames oneOf 场景中会渲染成一个选择的场景，可以通过enumNames数组字段来描述里key对应的title
|
||||
- @enumNames oneOf 场景中会渲染成一个选择的场景，可以通过 enumNames 数组字段来描述里 key 对应的 title
|
||||
5. 顶部可以设置 column 字段用来表示表单展示形式为 1 排 N
|
||||
|
||||
<img src="https://img.alicdn.com/tfs/TB1ZoBaPNjaK1RjSZFAXXbdLFXa-1472-622.png" width="300"/>
|
||||
|
||||
## 效果
|
||||
|
||||
<table><tr><td>React 输入</td><td>标准Json schema 输出</td><td>带 Ui 配置的 schema 输出</td></tr><tr><td><img src="https://img.alicdn.com/tfs/TB1jVQFtuuSBuNjy1XcXXcYjFXa-1004-1310.png" width="420"></td><td><img src="https://gw.alicdn.com/tfs/TB14I0Rzx1YBuNjy1zcXXbNcXXa-862-1538.png" width="310"></td><td><img src="https://gw.alicdn.com/tfs/TB1r9QFwXmWBuNjSspdXXbugXXa-898-1460.png" width="340"></td></tr></table>
|
||||
|
||||
可以参考 [Demo](http://github.com/tw93/proptypes-to-json-schema/tree/master/demo) 中的使用
|
||||
|
||||
## Changelog
|
||||
|
||||
#### 0.1.0
|
||||
|
||||
- [+] 第一个对外的版本，可用状态
|
||||
|
||||
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
# 使用场景
|
||||
|
||||
##### 1. 规范化表单视图的快速生成：写好对应的参数配置，快速生成一个标准表单，省去了使用类 Ant Design 表单的麻烦地方
|
||||
|
||||
<img src="https://qpluspicture.oss-cn-beijing.aliyuncs.com/ts-upload/1573547684-OCOmqe.png" width="400"/>
|
||||
|
||||
##### 2.可视化配置界面生成：并可以从代码层面 <a href="https://alibaba.github.io/form-render/#/docs/proptypes" target="_blank">自动生成</a> JSON Schema，来完成整体流程的打通
|
||||
|
||||
|
||||
<img src="https://qpluspicture.oss-cn-beijing.aliyuncs.com/ts-upload/1573546822-GWwTVd.png" width="700"/>
|
||||
|
||||
##### 3.服务能力配置界面生成：常用于后台字段系统中，接口同学通过吐 JSON Schema 字段给前端界面，渲染出他所想要的界面以及获取用户的输入进行提交给后端，可以起到无需发布就可无缝扩展各种类型的作用
|
||||
|
||||
|
||||
<img src="https://qpluspicture.oss-cn-beijing.aliyuncs.com/ts-upload/1573547420-S9s1eC.png" width="700"/>
|
||||
|
||||
##### 4.作为配置输入和搭建系统配合使用：FormRender 在正常展示的情况下，可以很简单的进行和原主题的适配使用
|
||||
|
||||
<img src="https://qpluspicture.oss-cn-beijing.aliyuncs.com/ts-upload/1573547974-EWh3OI.png" width="700"/>
|
||||
|
||||
<img src="https://qpluspicture.oss-cn-beijing.aliyuncs.com/ts-upload/1573548385-IFEy6t.png" width="700"/>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# 为什么"造轮子"？
|
||||
# 为什么造轮子
|
||||
|
||||
#### 为什么也用 JSON Schema？
|
||||
#### 为什么也用 JSON Schema
|
||||
|
||||
- 因为这是现有的一个标准规范，可以用它来描述 JSON 属性结构，所以其实现阶段来描述表单结构信息几乎都是这个，是一种关系表示协议，很像我们平时用 JSON 来表示我们的接口数据一样，后续有计划利用 JSON Schema 做其他场景的渲染引擎
|
||||
- FormRender 更多的是内部的 filed 处理和类型嵌套、无限遍历、支持跨组件体系这一块才是比较麻烦地方
|
||||
|
||||
Reference in New Issue
Block a user