Merge pull request #309 from alibaba/dev

form-render 1.0.2 -> 1.0.5

README.md

@@ -32,7 +32,7 @@
 
 ## 变化
 
-- FormRender 已升级到 XRender 1.0 版本，并提供开箱即用的 Form/Table/Chart 解决方案，原版本可见<a href="http://x-components.gitee.io/form-render/" target="_blank_"> **旧文档** </a>。
+- FormRender 已升级到 XRender 1.0 版本，并提供开箱即用的 Form/Table/Chart 解决方案，原版本可见<a style="font-weight: 500;" href="http://x-components.gitee.io/form-render/" target="_blank_">旧文档</a>。
 - FormRender 0.x 版本直接升级到 1.0 需修改 API 才能正常运行，可见 [0.x 到 1.x](https://x-render.gitee.io/form-render/migrate)，很推荐升级。
 
 ## 谁在使用？
@@ -125,7 +125,7 @@
 
 ## 贡献
 
-想贡献代码、解 BUG 或者提高文档可读性？非常欢迎一起参与进来，在提交 MR 前阅读一下 [Contributing Guide](https://github.com/alibaba/form-render/blob/master/CONTRIBUTING.md)。
+想贡献代码、解 BUG 或者提高文档可读性？非常欢迎一起参与进来，在提交 PR 前阅读一下 [Contributing Guide](https://github.com/alibaba/form-render/blob/master/CONTRIBUTING.md)。
 
 感谢给 XRender 贡献代码的你们：
 

docs/form-render/.test/test-1.0.5.md

@@ -0,0 +1,105 @@
+```jsx
+import React, { useEffect } from 'react';
+import { Button } from 'antd';
+import FormRender, { useForm } from 'form-render';
+
+const schema = {
+  displayType: 'row',
+  type: 'object',
+  properties: {
+    input1: {
+      title: '简单输入框简单输入框',
+      description: 'sdfdsgfshfghfgdh',
+      type: 'string',
+      required: true,
+      rules: [
+        {
+          required: true,
+          message: 'ete',
+        },
+      ],
+    },
+    input2: {
+      title: '简单输入框2',
+      type: 'boolean',
+    },
+    input3: {
+      title: '简单输入框3',
+      type: 'string',
+      required: true,
+    },
+    image: {
+      title: '图片展示',
+      type: 'string',
+      format: 'image',
+    },
+    checkboxes: {
+      title: '多选',
+      description: '下拉多选',
+      type: 'array',
+      items: {
+        type: 'string',
+      },
+      enum: ['A', 'B', 'C', 'D'],
+      enumNames: ['杭州', '武汉', '湖州', '贵阳'],
+      widget: 'checkboxes',
+      default: null,
+    },
+    multiSelect: {
+      title: '多选',
+      description: '下拉多选',
+      type: 'array',
+      items: {
+        type: 'string',
+      },
+      enum: ['A', 'B', 'C', 'D'],
+      enumNames: ['杭州', '武汉', '湖州', '贵阳'],
+      widget: 'multiSelect',
+      default: null,
+    },
+  },
+};
+
+const Demo = () => {
+  const form = useForm();
+  useEffect(() => {
+    form.setValues({ a: 1, b: 2, c: { x: { y: [{ z: 'sdf' }] } } });
+  }, []);
+  const onFinish = (formData, errorFields) => {
+    if (errorFields.length > 0) {
+      alert(
+        'errorFields:' +
+          JSON.stringify(errorFields) +
+          '\nformData:' +
+          JSON.stringify(formData, null, 2)
+      );
+    } else {
+      alert('formData:' + JSON.stringify(formData, null, 2));
+    }
+  };
+
+  return (
+    <div>
+      <FormRender
+        // debugCss
+        validateMessages={{ required: '213' }}
+        form={form}
+        schema={schema}
+        onFinish={onFinish}
+      />
+      <Button type="primary" onClick={form.submit}>
+        提交
+      </Button>
+    </div>
+  );
+};
+
+export default Demo;
+```
+
+label, descIcon
+入参
+随便传入什么值，都会透传，不会被 schema 截取
+null 值在多选里的展示
+
+title 的布局需要重新写一下

docs/form-render/.test/test-bind.md

@@ -0,0 +1,69 @@
+```jsx
+import React, { useEffect } from 'react';
+import { Button, Modal } from 'antd';
+import FormRender, { useForm } from 'form-render';
+
+const delay = ms => new Promise(res => setTimeout(res, ms));
+
+const schema = {
+  type: 'object',
+  properties: {
+    inputName: {
+      bind: 'ttt',
+      title: '简单输入框',
+      type: 'string',
+      format: 'image',
+    },
+    listName: {
+      bind: 'a.x',
+      title: '对象数组',
+      description: '对象数组嵌套功能',
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          inputName2: {
+            title: '复杂输入框',
+            description: '英文或数字组合',
+            type: 'string',
+          },
+          selectName: {
+            title: '单选',
+            type: 'string',
+            enum: ['a', 'b', 'c'],
+            enumNames: ['早', '中', '晚'],
+            widget: 'radio',
+          },
+        },
+      },
+    },
+  },
+};
+
+const Demo = () => {
+  const form = useForm();
+
+  useEffect(() => {
+    form.setValues({ ttt: '234', a: { x: [{ inputName2: 'hello' }] } });
+  }, []);
+
+  const onFinish = (formData, errorFields) => {
+    if (errorFields.length > 0) {
+      alert('errorFields:' + JSON.stringify(errorFields));
+    } else {
+      alert('formData:' + JSON.stringify(formData, null, 2));
+    }
+  };
+
+  return (
+    <div>
+      <FormRender form={form} schema={schema} onFinish={onFinish} />
+      <Button type="primary" onClick={form.submit}>
+        提交
+      </Button>
+    </div>
+  );
+};
+
+export default Demo;
+```

docs/form-render/.test/test-time.md

@@ -0,0 +1,87 @@
+```jsx
+import React from 'react';
+import { Button } from 'antd';
+import FormRender, { useForm } from 'form-render';
+
+const schema = {
+  displayType: 'row',
+  labelWidth: 120,
+  type: 'object',
+  properties: {
+    input1: {
+      title: '简单输入框',
+      description:
+        'sdfasdgdsgfdsgfsdfgssdgdsgfdsgfsdfgssdgdsgfdsgfsdfgsdfgsdfgfghfghfghfgh',
+      type: 'string',
+      required: true,
+    },
+    input2: {
+      title: '简单输入框2',
+      type: 'boolean',
+    },
+    daaa: {
+      title: 'daa',
+      type: 'string',
+      format: 'date',
+      props: {
+        showTime: true,
+        format: 'dateTime',
+      },
+    },
+    daaa2: {
+      title: 'daa2',
+      type: 'string',
+      format: 'time',
+    },
+    daaa3: {
+      title: 'daa3',
+      type: 'range',
+      format: 'date',
+    },
+    input3: {
+      title: '图片',
+      type: 'string',
+      format: 'image',
+      required: true,
+    },
+    input4: {
+      title: 'url',
+      type: 'string',
+      format: 'url',
+      required: true,
+    },
+  },
+};
+
+const Demo = () => {
+  const form = useForm();
+  const onFinish = (formData, errorFields) => {
+    if (errorFields.length > 0) {
+      alert(
+        'errorFields:' +
+          JSON.stringify(errorFields) +
+          '\nformData:' +
+          JSON.stringify(formData, null, 2)
+      );
+    } else {
+      alert('formData:' + JSON.stringify(formData, null, 2));
+    }
+  };
+
+  return (
+    <div>
+      <FormRender
+        debugCss={false}
+        form={form}
+        schema={schema}
+        onFinish={onFinish}
+      />
+      <Button type="primary" onClick={form.submit}>
+        提交
+      </Button>
+    </div>
+  );
+};
+
+export default Demo;
+```

docs/form-render/.test/validation.md

@@ -0,0 +1,9 @@
+---
+order: 5
+group:
+  order: 3
+  title: 高级用法
+toc: false
+---
+
+# 表单校验

docs/form-render/advanced/widget.md

@@ -174,14 +174,14 @@ export const mapping = {
   object: 'map',
   html: 'html',
   'string:upload': 'upload',
-  'string:date': 'date',
   'string:url': 'url',
   'string:dateTime': 'date',
-  'string:time': 'date',
+  'string:date': 'date',
+  'string:time': 'time',
   'string:textarea': 'textarea',
   'string:color': 'color',
   'string:image': 'imageInput',
-  'range:time': 'dateRange',
+  'range:time': 'timeRange',
   'range:date': 'dateRange',
   'range:dateTime': 'dateRange',
   '*?enum': 'radio',

docs/form-render/index.md

@@ -196,7 +196,7 @@ export default Demo;
 import Form, { useForm, connectForm } from 'form-render';
 ```
 
-#### \<Form \/> (常用 props)
+### \<Form \/> (常用 props)
 
 | 参数         | 描述                                                           | 类型                                                               | 是否必填 | 默认值     |
 | ------------ | -------------------------------------------------------------- | ------------------------------------------------------------------ | -------- | ---------- |
@@ -207,18 +207,35 @@ import Form, { useForm, connectForm } from 'form-render';
 | displayType  | 表单元素与 label 同行 or 分两行展示, inline 则整个展示自然顺排 | `string('column' / 'row' / 'inline')`                              | 否       | 'column'   |
 | widgets      | 自定义组件，当内置组件无法满足时使用                           | `object`                                                           | 否       | {}         |
 
-#### \<Form \/> (不常用 props)
+### \<Form \/> (不常用 props)
 
-| 参数           | 描述                                                             | 类型                | 默认值 |
-| -------------- | ---------------------------------------------------------------- | ------------------- | ------ |
-| column         | 一行展示多少列                                                   | `number`            | 1      |
-| mapping        | schema 与组件的映射关系表，当内置的表不满足时使用                | `object`            | {}     |
-| debug          | 开启 debug 模式，提供更多信息                                    | `boolean`           | false  |
-| locale         | 展示语言，目前只支持中文、英文                                   | `string('cn'/'en')` | 'cn'   |
-| configProvider | antd 的 configProvider，配置透传                                 | `object`            | -      |
-| debounceInput  | 是否开启输入时使用快照模式。仅建议在表单巨大且表达式非常多时开启 | `boolean`           | false  |
+| 参数             | 描述                                                             | 类型                | 默认值 |
+| ---------------- | ---------------------------------------------------------------- | ------------------- | ------ |
+| column           | 一行展示多少列                                                   | `number`            | 1      |
+| mapping          | schema 与组件的映射关系表，当内置的表不满足时使用                | `object`            | {}     |
+| debug            | 开启 debug 模式，时时显示表单内部状态                            | `boolean`           | false  |
+| debugCss         | 用于 css 问题的调整，显示 css 布局提示线                         | `boolean`           | false  |
+| locale           | 展示语言，目前只支持中文、英文                                   | `string('cn'/'en')` | 'cn'   |
+| configProvider   | antd 的 configProvider，配置透传                                 | `object`            | -      |
+| debounceInput    | 是否开启输入时使用快照模式。仅建议在表单巨大且表达式非常多时开启 | `boolean`           | false  |
+| validateMessages | 修改默认的校验提示信息。详见下                                   | `object`            | {}     |
 
-#### useForm / connectForm
+#### validateMessages
+
+`Form` 为验证提供了[默认的错误提示信息](https://github.com/alibaba/x-render/blob/master/packages/form-render/src/validateMessageCN.js)，你可以通过配置 `validateMessages` 属性，修改对应的提示模板。一种常见的使用方式，是配置国际化提示信息：
+
+```js
+const validateMessages = {
+  required: '${title}是必选字段',
+  // ...
+};
+
+<Form validateMessages={validateMessages} />;
+```
+
+目前可以用的转义字段为 `${title}`/`${min}`/`${max}`/`${len}`/`${pattern}`, 如果有更多需求请提 [issue](https://github.com/alibaba/x-render/issues/new/choose)
+
+### useForm / connectForm
 
 `useForm` / `connectForm` 用于创建表单实例，所有对表单的外部操作和回调函数全挂在其生产的实例上,例如表单提交是 `form.submit`。注意 `useForm` 是 hooks，而 `connectForm` 是高阶组件，所以前者只能在函数组件使用，后者可用于 class 组件。两者无其他区别。使用时需要创建实例，并通过 props 挂钩到与其对应的表单上：
 

docs/form-render/schema.md

@@ -208,6 +208,7 @@ export default () => <FR schema={basic} />;
 
 1. 当服务端接口获取的字段与你希望的表单展示结构不同时，可以通过 bind 字段绑定的方式指明表单的某个字段对应的是外部数据的另一个字段。详细例子见 [“表单与外界的交互”](/form-render/advanced/form-methods) 的例 3
 2. 用户并不希望纯展示的字段也出现在表单中，此时，使用 bind: `false` 可避免字段在提交时出现
+3. 注意：请不要 bind 一个数组结构下面的字段，目前没有对此进行处理，所以会无效（在未来这个限制会解除）
 
 #### min
 

docs/index.md

@@ -19,9 +19,12 @@ features:
     title: ChartRender
     desc: 傻瓜式的图表绘制库
 footer: Please feel free to use and contribute to the development.
-translateHelp: FormRender 已升级到 XRender 1.0 版本，并提供开箱即用的 Form/Table/Chart 解决方案，原版本可见<a href="http://x-components.gitee.io/form-render/" target="_blank_"> 旧文档</a>。
 ---
 
+<Alert>
+  <span>FormRender 已升级到 v1.x 版本，并对外提供中后台开箱即用 XRender 表单 / 表格 / 图表方案，如需使用老版本(v0.x)，请点击右上角 <a href="http://x-components.gitee.io/form-render/" target="_blank_"> 旧文档 </a></span>
+</Alert>
+
 ## 谁在使用？
 
 <table>
@@ -104,7 +107,7 @@ translateHelp: FormRender 已升级到 XRender 1.0 版本，并提供开箱即
 
 ## 贡献
 
-想贡献代码、解 BUG 或者提高文档可读性？非常欢迎一起参与进来，在提交 MR 前阅读一下 [Contributing Guide](https://github.com/alibaba/form-render/blob/master/CONTRIBUTING.md)。
+想贡献代码、解 BUG 或者提高文档可读性？非常欢迎一起参与进来，在提交 PR 前阅读一下 [Contributing Guide](https://github.com/alibaba/form-render/blob/master/CONTRIBUTING.md)。
 
 感谢给 XRender 贡献代码的你们：