diff --git a/docs/pattern.md b/docs/pattern.md index b175356..6de4094 100644 --- a/docs/pattern.md +++ b/docs/pattern.md @@ -1,6 +1,7 @@ # pattern 自定义正则校验 ### 概述 + - 简单的长度校验推荐使用 propSchema 中的属性 - pattern 是存在于 propSchema 中属性的一个字段,长用在当长度限制还不满足要求的场景,可通过正则的方式来对用户输入项进行校验 - pattern 和 required、minLength、maxLength 等这一类显示为`&&`的关系,当有一个不满足时候,onValidate 回调中将会返回不符合的数组项 diff --git a/docs/proptypes.md b/docs/proptypes.md index df8f78b..53b7dd2 100644 --- a/docs/proptypes.md +++ b/docs/proptypes.md @@ -1,4 +1,4 @@ -# Proptypes to Json Schema   [![npm](https://img.shields.io/npm/v/proptypes-to-json-schema.svg?maxAge=3600&style=flat-square)](https://www.npmjs.com/package/proptypes-to-json-schema?_blank) +# Proptypes to Json Schema   [![npm](https://img.shields.io/npm/v/proptypes-to-json-schema.svg?maxAge=3600&style=flat-square)](https://www.npmjs.com/package/proptypes-to-json-schema?_blank) > Github:proptypes-to-json-schema @@ -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 ## 效果 +
React 输入标准Json schema 输出带 Ui 配置的 schema 输出
可以参考 [Demo](http://github.com/tw93/proptypes-to-json-schema/tree/master/demo) 中的使用 ## Changelog + #### 0.1.0 + - [+] 第一个对外的版本,可用状态 - - diff --git a/docs/used.md b/docs/used.md index 5e787e0..e8ddd43 100644 --- a/docs/used.md +++ b/docs/used.md @@ -1,18 +1,18 @@ # 使用场景 ##### 1. 规范化表单视图的快速生成:写好对应的参数配置,快速生成一个标准表单,省去了使用类 Ant Design 表单的麻烦地方 + ##### 2.可视化配置界面生成:并可以从代码层面 自动生成 JSON Schema,来完成整体流程的打通 - + ##### 3.服务能力配置界面生成:常用于后台字段系统中,接口同学通过吐 JSON Schema 字段给前端界面,渲染出他所想要的界面以及获取用户的输入进行提交给后端,可以起到无需发布就可无缝扩展各种类型的作用 - + ##### 4.作为配置输入和搭建系统配合使用:FormRender 在正常展示的情况下,可以很简单的进行和原主题的适配使用 - diff --git a/docs/why.md b/docs/why.md index 7a7e1ec..46629c3 100644 --- a/docs/why.md +++ b/docs/why.md @@ -1,6 +1,6 @@ -# 为什么"造轮子"? +# 为什么造轮子 -#### 为什么也用 JSON Schema? +#### 为什么也用 JSON Schema - 因为这是现有的一个标准规范,可以用它来描述 JSON 属性结构,所以其实现阶段来描述表单结构信息几乎都是这个,是一种关系表示协议,很像我们平时用 JSON 来表示我们的接口数据一样,后续有计划利用 JSON Schema 做其他场景的渲染引擎 - FormRender 更多的是内部的 filed 处理和类型嵌套、无限遍历、支持跨组件体系这一块才是比较麻烦地方