Merge pull request #8 from qiqiboy/v4

feat: Ant Design 4.0!
qiqiboy · Mar 3, 2020 · b774a3a · b774a3a
2 parents 47adc65 + b8a474b
commit b774a3a
Show file tree

Hide file tree

Showing 25 changed files with 158 additions and 129 deletions.
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@
 
 [![react-antd-formutil](https://nodei.co/npm/react-antd-formutil.png?compact=true)](https://npm.im/react-antd-formutil)
 
-Happy to use react-formutil in the project based on ant-design ^\_^
+Happy to use react-formutil in the project based on ant-design@`3`&`4` ^\_^
 
 在 [ant-design](https://github.com/ant-design/ant-design) 项目，结合 [react-formutil](https://github.com/qiqiboy/react-formutil) 来快速构建表单。**支持所有的`ant-design`输入型（`data-entry`）组件。**
 
@@ -47,7 +47,7 @@ Happy to use react-formutil in the project based on ant-design ^\_^
         * [`DatePicker`](#datepicker)
         * [`InputNumber`](#inputnumber)
         * [`Input`](#input)
-        * [`Mention`](#mention)
+        * [`Mentions`](#mentions)
         * [`Pagination`](#pagination)
         * [`Rate`](#rate)
         * [`Radio`](#radio)
@@ -62,7 +62,6 @@ Happy to use react-formutil in the project based on ant-design ^\_^
 - [FAQ](#faq)
     + [`给组件设置的onChange、onFocus等方法无效、不执行`](#给组件设置的onchangeonfocus等方法无效不执行)
     + [`RangePicker 在safari下假死？`](#rangepicker-在safari下假死)
-    + [`Mention 为未非受控组件？`](#mention-为未非受控组件)
     + [`在生产环境(NODE_ENV==='production')部分组件调用有异常？`](#在生产环境node_envproduction部分组件调用有异常)
 
 <!-- vim-markdown-toc -->
@@ -71,6 +70,8 @@ Happy to use react-formutil in the project based on ant-design ^\_^
 
 [![react-antd-formutil](https://nodei.co/npm/react-antd-formutil.png?compact=true)](https://npm.im/react-antd-formutil)
 
+**`react-antd-formutil`从`1.0.0`版本开始，同时支持 Ant Design `3.x`和`4.x`版本**
+
 ```bash
 # npm
 npm install react-antd-formutil --save
@@ -142,22 +143,22 @@ class MyForm extends Component {
 
 ##### `$defaultValue`
 
-设置该表单项的默认值 _（同`react-formutil`的`Field`同名参数，可以参考[$defaultvalue](https://github.com/qiqiboy/react-formutil#defaultvalue)）_
+设置该表单项的默认值 _（同`react-formutil`的`Field`同名参数，可以参考[\$defaultvalue](https://github.com/qiqiboy/react-formutil#defaultvalue)）_
 
 ##### `$validators`
 
-设置校验方法 _（同`react-formutil`的`Field`同名参数, 可以参考 [$validators](https://github.com/qiqiboy/react-formutil#validators)）_
+设置校验方法 _（同`react-formutil`的`Field`同名参数, 可以参考 [\$validators](https://github.com/qiqiboy/react-formutil#validators)）_
 
 > 同 react-formutil 的 EasyField，FormItem 也内置了同样的校验规则：
 
-> *   `required` 必填 `required`
-> *   `maxLength` 。最大输入长度，有效输入时才会校验 `maxLength="100"`
-> *   `minLength` 最小输入长度，有效输入时才会校验 `minLength="10"`
-> *   `max` 最大输入数值，仅支持 Number 比较。有效输入时才会校验 `max="100"`
-> *   `min` 最小输入数值，仅支持 Number 比较。有效输入时才会校验 `min="10"`
-> *   `pattern` 正则匹配。有效输入时才会校验 `pattern={/^\d+$/}`
-> *   `enum` 枚举值检测。有效输入时才会校验 `enum={[1,2,3]}`
-> *   `checker` 自定义校验函数。`checker={value => value > 10 && value < 100 || '输入比如大于10小与100'}`
+> -   `required` 必填 `required`
+> -   `maxLength` 。最大输入长度，有效输入时才会校验 `maxLength="100"`
+> -   `minLength` 最小输入长度，有效输入时才会校验 `minLength="10"`
+> -   `max` 最大输入数值，仅支持 Number 比较。有效输入时才会校验 `max="100"`
+> -   `min` 最小输入数值，仅支持 Number 比较。有效输入时才会校验 `min="10"`
+> -   `pattern` 正则匹配。有效输入时才会校验 `pattern={/^\d+$/}`
+> -   `enum` 枚举值检测。有效输入时才会校验 `enum={[1,2,3]}`
+> -   `checker` 自定义校验函数。`checker={value => value > 10 && value < 100 || '输入比如大于10小与100'}`
 
 注：校验属性的值为 `null` 时表示不进行该校验
 
@@ -233,10 +234,10 @@ class MyForm extends Component {
 
 `setErrorLevel` 该方法可以用来全局设置错误信息何时出现，有三个级别可以设置：
 
-*   `0` 当`$dirty` `$touched` `$invalid` 都为 true 时
-*   `1` 当`$dirty` `$invalid` 都为 true 时
-*   `2` 当`$invalid` 为 true 时
-*   `off` 关闭错误显示
+-   `0` 当`$dirty` `$touched` `$invalid` 都为 true 时
+-   `1` 当`$dirty` `$invalid` 都为 true 时
+-   `2` 当`$invalid` 为 true 时
+-   `off` 关闭错误显示
 
 默认值为 `1`
 
@@ -294,9 +295,7 @@ setErrorLevel(0);
 
 ##### [`Input`](https://ant.design/components/input-cn/)
 
-##### [`Mention`](https://ant.design/components/mention-cn/)
-
-参考 [`Mention 为未非受控组件？`](#mention-为未非受控组件)
+##### [`Mentions`](https://ant.design/components/mentions-cn/)
 
 ##### [`Pagination`](https://ant.design/components/pagination-cn/)
 
@@ -340,7 +339,7 @@ setErrorLevel(0);
 
 ##### [`Upload`](https://ant.design/components/upload-cn/)
 
-`Upload` 组件会将 onChange 回调的对象同步到表单状态中，所以如果仅仅需要拿到上传成功后的服务端返回信息（比如上传后保存在服务器的 url），可以通过$parser 进行过滤：
+`Upload` 组件会将 onChange 回调的对象同步到表单状态中，所以如果仅仅需要拿到上传成功后的服务端返回信息（比如上传后保存在服务器的 url），可以通过\$parser 进行过滤：
 
 ```javascript
 <FormItem
@@ -395,10 +394,6 @@ setErrorLevel(0);
 </FormItem>
 ```
 
-#### `Mention 为未非受控组件？`
-
-由于`Mention`的 `onChange` 会异常触发（[issues 11619](https://github.com/ant-design/ant-design/issues/11619)、失去焦点也会触发等），所以为了性能考虑，针对该组件使用了非受控组件。即，只能在初次调用时传入 value，后期不可通过`react-formutil`提供的`$setValues`等方法去动态的设置该项的值。
-
 #### `在生产环境(NODE_ENV==='production')部分组件调用有异常？`
 
 如果在生产环境，发现例如`Checkbox` `Radio` `Switch`等组件无法正确捕获用户输入的值，这种情况一般是由于项目中使用了`babel-plugin-import`插件。

diff --git a/dist/react-antd-formutil.cjs.development.js b/dist/react-antd-formutil.cjs.development.js
@@ -37,8 +37,6 @@ var _Checkbox = isUglify ? antd.Checkbox : 'Checkbox';
 
 var _Radio = isUglify ? antd.Radio : 'Radio';
 
-var _Mention = isUglify ? antd.Mention : 'Mention';
-
 var _Transfer = isUglify ? antd.Transfer : 'Transfer';
 
 var _Pagination = isUglify ? antd.Pagination : 'Pagination';
@@ -164,19 +162,6 @@ var FormItem = /*#__PURE__*/function (_Component) {
               };
               break;
 
-            case _Mention:
-              childProps = {
-                defaultValue: antd.Mention.toContentState(value || ''),
-                onChange: function onChange(contentState) {
-                  var newValue = antd.Mention.toString(contentState);
-
-                  if (newValue !== value) {
-                    _onChange(newValue);
-                  }
-                }
-              };
-              break;
-
             case _Transfer:
               childProps = {
                 targetKeys: value,
@@ -251,7 +236,9 @@ var FormItem = /*#__PURE__*/function (_Component) {
             validateStatus: 'error',
             help: $getFirstError()
           } : {};
-          return React__default.createElement(antd.Form.Item, Object.assign({}, restProps, itemProps, validateResult), React.cloneElement(children, childProps));
+          return React__default.createElement(antd.Form.Item, Object.assign({
+            required: false
+          }, restProps, itemProps, validateResult), React.cloneElement(children, childProps));
         }
       }));
     }

diff --git a/dist/react-antd-formutil.cjs.production.js b/dist/react-antd-formutil.cjs.production.js
diff --git a/dist/react-antd-formutil.esm.development.js b/dist/react-antd-formutil.esm.development.js
@@ -11,7 +11,7 @@ import _inherits from '@babel/runtime/helpers/esm/inherits';
 import React, { Children, cloneElement, Component } from 'react';
 import { isValidElementType } from 'react-is';
 import PropTypes from 'prop-types';
-import { Switch, Mention, Form, Checkbox, Radio, Transfer, Pagination, Upload } from 'antd';
+import { Switch, Form, Checkbox, Radio, Transfer, Pagination, Upload } from 'antd';
 
 var errorLevelGlobal = 1;
 /**
@@ -31,8 +31,6 @@ var _Checkbox = isUglify ? Checkbox : 'Checkbox';
 
 var _Radio = isUglify ? Radio : 'Radio';
 
-var _Mention = isUglify ? Mention : 'Mention';
-
 var _Transfer = isUglify ? Transfer : 'Transfer';
 
 var _Pagination = isUglify ? Pagination : 'Pagination';
@@ -158,19 +156,6 @@ var FormItem = /*#__PURE__*/function (_Component) {
               };
               break;
 
-            case _Mention:
-              childProps = {
-                defaultValue: Mention.toContentState(value || ''),
-                onChange: function onChange(contentState) {
-                  var newValue = Mention.toString(contentState);
-
-                  if (newValue !== value) {
-                    _onChange(newValue);
-                  }
-                }
-              };
-              break;
-
             case _Transfer:
               childProps = {
                 targetKeys: value,
@@ -245,7 +230,9 @@ var FormItem = /*#__PURE__*/function (_Component) {
             validateStatus: 'error',
             help: $getFirstError()
           } : {};
-          return React.createElement(Form.Item, Object.assign({}, restProps, itemProps, validateResult), cloneElement(children, childProps));
+          return React.createElement(Form.Item, Object.assign({
+            required: false
+          }, restProps, itemProps, validateResult), cloneElement(children, childProps));
         }
       }));
     }