文档更新

Author: bplok20010

README.md

@@ -24,7 +24,8 @@ type ValidateTriggerType = "change" | "blur" | "none";
 
 type Validator = (
     value: any,
-    formValue: {}
+    formValue: {},
+    triggerType: ValidateTriggerType
 ) => boolean | string | Error | Promise;
 
 type InvalidError = {

esm/Form.js

@@ -278,6 +278,8 @@ function (_React$Component) {
     this.fields.filter(function (field) {
       return field.props.name === name;
     }).forEach(function (field) {
+      var disableValidator = field.getProp("disableValidator");
+      if (disableValidator) return;
       var fieldProps = field.props;
 
       if (fieldProps.required) {
@@ -400,26 +402,26 @@ function (_React$Component) {
         formError = _this$state.formError,
         validatingFields = _this$state.validatingFields;
     this.fieldLocks[name] = this.fieldLocks[name] || 1;
-    var lockId = ++this.fieldLocks[name]; //是否异步探测
+    var lockId = ++this.fieldLocks[name]; //是否异步检测
 
     var asyncTimer = setTimeout(function () {
-      var _extends4;
+      var _extends4, _extends5;
 
       asyncTimer = null;
       if (lockId !== _this2.fieldLocks[name]) return;
 
       _this2.setState({
-        validatingFields: _extends({}, validatingFields, (_extends4 = {}, _extends4[name] = true, _extends4))
+        validatingFields: _extends({}, validatingFields, (_extends4 = {}, _extends4[name] = true, _extends4)),
+        formError: _extends({}, formError, (_extends5 = {}, _extends5[name] = null, _extends5))
       });
-    }, asyncTestDelay); // let isAsync = true;
+    }, asyncTestDelay);
 
     this._validateField(name, function (errors, value) {
-      var _extends5, _extends6;
+      var _extends6, _extends7;
 
       if (asyncTimer) {
         clearTimeout(asyncTimer);
-      } // isAsync = false;
-
+      }
 
       if (lockId !== _this2.fieldLocks[name]) {
         callback(errors, value, true
@@ -429,8 +431,8 @@ function (_React$Component) {
       }
 
       _this2.setState({
-        formError: _extends({}, formError, (_extends5 = {}, _extends5[name] = errors ? errors[0].message : null, _extends5)),
-        validatingFields: _extends({}, validatingFields, (_extends6 = {}, _extends6[name] = false, _extends6))
+        formError: _extends({}, formError, (_extends6 = {}, _extends6[name] = errors ? errors[0].message : null, _extends6)),
+        validatingFields: _extends({}, validatingFields, (_extends7 = {}, _extends7[name] = false, _extends7))
       }, function () {
         callback(errors, value);
       });
@@ -441,10 +443,11 @@ function (_React$Component) {
     var _this3 = this;
 
     callback = typeof callback === "function" ? callback : noop;
+    var formError = {};
+    var asyncUpdateTimer = null;
+    var hasRunComplete = false;
     var asyncTestDelay = this.props.asyncTestDelay;
-    var _this$state2 = this.state,
-        formValue = _this$state2.formValue,
-        formError = _this$state2.formError;
+    var formValue = this.state.formValue;
     this.fieldLocks = {}; //validate优先级高于validateField
 
     var lockId = ++this.formLockId;
@@ -471,16 +474,20 @@ function (_React$Component) {
       }
 
       if (validCounter <= 0) {
+        hasRunComplete = true;
+
+        if (asyncUpdateTimer) {
+          clearTimeout(asyncUpdateTimer);
+          asyncUpdateTimer = null;
+        }
+
         if (lockId !== _this3.formLockId) {
           callback(allErrors.length ? allErrors : null, formValue, true
           /* abort state */
           );
-          console.log("abort");
           return;
         }
 
-        console.log("validate");
-
         _this3.setState({
           formError: formError,
           validatingFields: {}
@@ -491,17 +498,13 @@ function (_React$Component) {
     };
 
     if (fields.length) {
-      //包含多个异步校验的情况下只执行一次
-      var hasUpdate = false; //校验初始化
-
+      //校验初始化
       fields.forEach(function (field) {
         var name = field.props.name;
         validCounter++;
-        validatingFields[name] = true;
-
-        if (!(name in formError)) {
-          formError[name] = null;
-        }
+        validatingFields[name] = true; // if (!(name in formError)) {
+        //     formError[name] = null;
+        // }
       }); //开始进行字段校验
 
       fields.forEach(function (field) {
@@ -511,9 +514,6 @@ function (_React$Component) {
         var asyncTimer = setTimeout(function () {
           isAsyncValidate = true;
           asyncTimer = null;
-          if (hasUpdate) return;
-          hasUpdate = true;
-          updateFormState();
         }, asyncTestDelay);
 
         _this3._validateField(name, function (errors) {
@@ -531,7 +531,14 @@ function (_React$Component) {
 
           complete(errors, name);
         }, triggerType);
-      });
+      }); //如果校验方法中存在异步校验则先显示同步校验的信息及异步状态
+
+      asyncUpdateTimer = setTimeout(function () {
+        asyncUpdateTimer = null; //如果不存在异步校验，hasRunComplete会为true
+
+        if (hasRunComplete) return;
+        updateFormState();
+      }, asyncTestDelay);
     } else {
       callback(null, formValue);
     }
@@ -599,6 +606,7 @@ Form.propTypes = process.env.NODE_ENV !== "production" ? {
   getDefaultFieldValue: PropTypes.func,
   renderControlExtra: PropTypes.func,
   formValue: PropTypes.object,
+  disableValidator: PropTypes.func,
   validators: PropTypes.object,
   validateDelay: PropTypes.number,
   validateTrigger: PropTypes.oneOfType([PropTypes.oneOf(["blur", "change", "none"]), PropTypes.array]),
@@ -623,10 +631,12 @@ Form.defaultProps = {
   prefixCls: "nex-form",
   className: "",
   style: {},
+  //实验性质，有序可能移除
+  disableValidator: false,
   validators: {},
   path2obj: true,
   component: "form",
-  asyncTestDelay: 100,
+  asyncTestDelay: 16,
   validateDelay: 0,
   validateTrigger: ["change"],
   //"blur",

esm/FormItem.js

@@ -8,6 +8,7 @@ import PropTypes from "prop-types";
 import classnames from "classnames";
 import FormContext from "./FormContext";
 import FormItemContext from "./FormItemContext";
+var fid = 1;
 
 var FormItem =
 /*#__PURE__*/
@@ -30,13 +31,6 @@ function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "_validateTimer", null);
 
     _defineProperty(_assertThisInitialized(_this), "handleChange", function (value, callback) {
-      var oldValue = _this.getValue(); //是否有必要检测？
-
-
-      if (value === oldValue) {
-        return;
-      }
-
       _this.setValue(value, function (formValue) {
         callback && callback();
 
@@ -66,8 +60,10 @@ function (_React$Component) {
       }
     });
 
-    var form = _this.getForm();
+    var form = _this.getForm(); //组件id
+
 
+    _this._fid = fid++;
     form.addField(_assertThisInitialized(_this));
     return _this;
   }
@@ -244,14 +240,14 @@ function (_React$Component) {
   _proto.getFormProp = function getFormProp(prop, defaultValue) {
     var form = this.getForm();
     var formProps = form.props;
-    return formProps[prop] || defaultValue;
+    return prop in formProps ? formProps[prop] : defaultValue;
   };
 
   _proto.getProp = function getProp(prop, defaultValue) {
     var form = this.getForm();
     var formProps = form.props;
     var props = this.props;
-    return prop in props ? props[prop] : formProps[prop] || defaultValue;
+    return prop in props ? props[prop] : prop in formProps ? formProps[prop] : defaultValue;
   };
 
   _proto.getFormItemContext = function getFormItemContext() {
@@ -274,7 +270,9 @@ function (_React$Component) {
         prefixCls = _this$props2.prefixCls,
         style = _this$props2.style,
         renderExtra = _this$props2.renderExtra,
-        children = _this$props2.children;
+        children = _this$props2.children; //实验性质，有序可能移除
+
+    var disableValidator = this.getProp("disableValidator");
     var inline = this.getProp("inline");
     var labelPosition = this.getProp("labelPosition");
     var labelAlign = this.getProp("labelAlign");
@@ -301,7 +299,7 @@ function (_React$Component) {
     }, React.createElement("div", {
       style: style,
       ref: this.saveDOM,
-      className: classnames(prefixCls, (_classnames = {}, _classnames[prefixCls + "-inline"] = inline, _classnames[prefixCls + "-" + labelPosition] = labelPosition, _classnames["has-error"] = hasError, _classnames["is-validating"] = isValidating, _classnames["is-required"] = required || showRequiredMark, _classnames["" + className] = className, _classnames))
+      className: classnames(prefixCls, (_classnames = {}, _classnames[prefixCls + "-inline"] = inline, _classnames[prefixCls + "-" + labelPosition] = labelPosition, _classnames["has-error"] = hasError, _classnames["is-validating"] = isValidating, _classnames["is-required"] = (required || showRequiredMark) && !disableValidator, _classnames["" + className] = className, _classnames))
     }, label && React.createElement("label", {
       htmlFor: this.getProp("labelFor"),
       className: classnames((_classnames2 = {}, _classnames2[prefixCls + "-label"] = true, _classnames2[prefixCls + "-label-left"] = labelAlign === "left" && labelPosition === "left", _classnames2), this.getProp("labelClassName")),

esm/index.d.ts

@@ -5,7 +5,8 @@ declare namespace ReactWidgetForm {
 
     type Validator = (
         value: any,
-        formValue: {}
+        formValue: {},
+        triggerType: ValidateTriggerType
     ) => boolean | string | Error | Promise;
 
     interface FormProps {

esm/index.js

@@ -6,9 +6,10 @@ import FormContext from "./FormContext";
 import FormItemContext from "./FormItemContext";
 import useForm from "./useForm";
 import useFormItem from "./useFormItem";
-export { Form, FormItem, NativeInput, FormContext, FormItemContext, useForm, useFormItem };
+export { Form, FormItem, NativeInput, NativeInput as NativeField, FormContext, FormItemContext, useForm, useFormItem };
 Form.Item = FormItem;
 Form.NativeInput = NativeInput;
+Form.NativeField = NativeInput;
 Form.Context = FormContext;
 Form.ItemContext = FormItemContext;
 export default Form;