@hi-ui/form 4.1.2 → 4.1.4

package/lib/cjs/use-form.js

@@ -10,103 +10,81 @@
 'use strict';
 
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
-
 var tslib = require('tslib');
-
 var index = require('./utils/index.js');
-
 var React = require('react');
-
 var useLatest = require('@hi-ui/use-latest');
-
 var typeAssertion = require('@hi-ui/type-assertion');
-
 var funcUtils = require('@hi-ui/func-utils');
-
 var objectUtils = require('@hi-ui/object-utils');
-
 var domUtils = require('@hi-ui/dom-utils');
-
-function _interopDefaultLegacy(e) {
+function _interopDefaultCompat(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
   };
 }
-
-var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
+var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultCompat(_regeneratorRuntime);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var EMPTY_RULES = {};
 var EMPTY_ERRORS = {};
 var EMPTY_TOUCHED = {};
 var DEFAULT_VALIDATE_TRIGGER = ['onChange', 'onBlur'];
-
 var EMPTY_FUNC = function EMPTY_FUNC() {};
-
 var useForm = function useForm(_a) {
   var initialValues = _a.initialValues,
-      _a$initialErrors = _a.initialErrors,
-      initialErrors = _a$initialErrors === void 0 ? EMPTY_ERRORS : _a$initialErrors,
-      _a$initialTouched = _a.initialTouched,
-      initialTouched = _a$initialTouched === void 0 ? EMPTY_TOUCHED : _a$initialTouched,
-      _a$lazyValidate = _a.lazyValidate,
-      lazyValidate = _a$lazyValidate === void 0 ? false : _a$lazyValidate,
-      onValuesChange = _a.onValuesChange,
-      onReset = _a.onReset,
-      onSubmit = _a.onSubmit,
-      _a$rules = _a.rules,
-      rules = _a$rules === void 0 ? EMPTY_RULES : _a$rules,
-      _a$validateAfterTouch = _a.validateAfterTouched,
-      validateAfterTouched = _a$validateAfterTouch === void 0 ? false : _a$validateAfterTouch,
-      _a$validateTrigger = _a.validateTrigger,
-      validateTriggerProp = _a$validateTrigger === void 0 ? DEFAULT_VALIDATE_TRIGGER : _a$validateTrigger,
-      rest = tslib.__rest(_a, ["initialValues", "initialErrors", "initialTouched", "lazyValidate", "onValuesChange", "onReset", "onSubmit", "rules", "validateAfterTouched", "validateTrigger"]);
+    _a$initialErrors = _a.initialErrors,
+    initialErrors = _a$initialErrors === void 0 ? EMPTY_ERRORS : _a$initialErrors,
+    _a$initialTouched = _a.initialTouched,
+    initialTouched = _a$initialTouched === void 0 ? EMPTY_TOUCHED : _a$initialTouched,
+    _a$lazyValidate = _a.lazyValidate,
+    lazyValidate = _a$lazyValidate === void 0 ? false : _a$lazyValidate,
+    onValuesChange = _a.onValuesChange,
+    onReset = _a.onReset,
+    onSubmit = _a.onSubmit,
+    _a$rules = _a.rules,
+    rules = _a$rules === void 0 ? EMPTY_RULES : _a$rules,
+    _a$validateAfterTouch = _a.validateAfterTouched,
+    validateAfterTouched = _a$validateAfterTouch === void 0 ? false : _a$validateAfterTouch,
+    _a$validateTrigger = _a.validateTrigger,
+    validateTriggerProp = _a$validateTrigger === void 0 ? DEFAULT_VALIDATE_TRIGGER : _a$validateTrigger,
+    rest = tslib.__rest(_a, ["initialValues", "initialErrors", "initialTouched", "lazyValidate", "onValuesChange", "onReset", "onSubmit", "rules", "validateAfterTouched", "validateTrigger"]);
   /**
    * 处理校验触发器，保证 memo 依赖的是数组每个项，避免无效重渲染
    */
-
-
-  var validateTrigger = typeAssertion.isArray(validateTriggerProp) ? validateTriggerProp : [validateTriggerProp]; // eslint-disable-next-line react-hooks/exhaustive-deps
-
+  var validateTrigger = typeAssertion.isArray(validateTriggerProp) ? validateTriggerProp : [validateTriggerProp];
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   var validateTriggersMemo = React.useMemo(function () {
     return validateTrigger;
   }, validateTrigger);
   /**
    * 收集 Field 的校验器注册表
    */
-
   var _useCollection = useCollection(),
-      getValidation = _useCollection[0],
-      registerField = _useCollection[1],
-      unregisterField = _useCollection[2],
-      getRegisteredKeys = _useCollection[3];
+    getValidation = _useCollection[0],
+    registerField = _useCollection[1],
+    unregisterField = _useCollection[2],
+    getRegisteredKeys = _useCollection[3];
   /**
    * form 数据管理中心
    */
-
-
   var _useReducer = React.useReducer(formReducer, {
-    values: initialValues,
-    errors: initialErrors,
-    touched: initialTouched,
-    validating: false,
-    submitting: false
-  }),
-      formState = _useReducer[0],
-      formDispatch = _useReducer[1]; // 使用 latest ref 维护，保证每次主动拿取的 formState 都是最新的
-
-
-  var formStateRef = useLatest.useLatestRef(formState); // const getFieldNames = useCallback(() => Object.keys(formStateRef.current.values as any), [
+      values: initialValues,
+      errors: initialErrors,
+      touched: initialTouched,
+      validating: false,
+      submitting: false
+    }),
+    formState = _useReducer[0],
+    formDispatch = _useReducer[1];
+  // 使用 latest ref 维护，保证每次主动拿取的 formState 都是最新的
+  var formStateRef = useLatest.useLatestRef(formState);
+  // const getFieldNames = useCallback(() => Object.keys(formStateRef.current.values as any), [
   //   formStateRef,
   // ])
-
   var getFieldValue = React.useCallback(function (fieldName) {
     return objectUtils.getNested(formStateRef.current.values, fieldName);
   }, [formStateRef]);
@@ -133,7 +111,6 @@ var useForm = function useForm(_a) {
     if (touched === void 0) {
       touched = false;
     }
-
     formDispatch({
       type: 'SET_FIELD_TOUCHED',
       // @ts-ignore
@@ -146,7 +123,6 @@ var useForm = function useForm(_a) {
   /**
    * 使用单个 Field 规则对给定值进行校验
    */
-
   var validateField = React.useCallback(function (field, value) {
     return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee() {
       var fieldValidation, errorResultAsPromise;
@@ -155,14 +131,11 @@ var useForm = function useForm(_a) {
           switch (_context.prev = _context.next) {
             case 0:
               fieldValidation = getValidation(field);
-
               if (fieldValidation) {
                 _context.next = 3;
                 break;
               }
-
               return _context.abrupt("return");
-
             case 3:
               formDispatch({
                 type: 'SET_VALIDATING',
@@ -178,16 +151,14 @@ var useForm = function useForm(_a) {
                 return objectUtils.setNested({}, field, value);
               }, function (errorMsg) {
                 var _a, _b, _c;
-
                 formDispatch({
                   type: 'SET_VALIDATING',
                   payload: false
-                }); // @ts-ignore
-
+                });
+                // @ts-ignore
                 setFieldError(field, (_c = (_b = (_a = errorMsg.fields[index.stringify(field)]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : '');
                 throw errorMsg;
               }));
-
             case 6:
             case "end":
               return _context.stop();
@@ -199,7 +170,6 @@ var useForm = function useForm(_a) {
   /**
    * 校验单个 Field 及其当前值
    */
-
   var validateFieldState = React.useCallback(function (field) {
     var value = getFieldValue(field);
     return validateField(field, value);
@@ -207,7 +177,6 @@ var useForm = function useForm(_a) {
   /**
    * 检验所有字段
    */
-
   var validateAll = React.useCallback(function () {
     var fieldNames = getRegisteredKeys();
     formDispatch({
@@ -217,37 +186,30 @@ var useForm = function useForm(_a) {
     return Promise.all(fieldNames.map(function (fieldName) {
       var value = getFieldValue(fieldName);
       var fieldValidation = getValidation(fieldName);
-
       if (!fieldValidation) {
         return Promise.resolve(null);
-      } // catch 错误，保证检验所有表单项
-
-
+      }
+      // catch 错误，保证检验所有表单项
       return fieldValidation.validate(value)["catch"](function (error) {
         // 第一个出错，即退出校验
         if (lazyValidate) {
           throw error;
         }
-
         return error;
       });
     })).then(function (result) {
       // 合并错误，批量更新并返回
       var combinedError = result.reduce(function (prev, cur, index$1) {
         var _a, _b;
-
         var fieldName = fieldNames[index$1];
         var errorMsg;
-
         if (cur instanceof Error) {
           // @ts-ignore
           errorMsg = ((_b = (_a = cur.fields[index.stringify(fieldName)]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.message) || '';
-
           if (typeof errorMsg === 'string' && !!errorMsg) {
             return objectUtils.setNested(prev, fieldName, errorMsg);
           }
         }
-
         return prev;
       }, {});
       formDispatch({
@@ -261,16 +223,14 @@ var useForm = function useForm(_a) {
       return combinedError;
     })["catch"](function (error) {
       var _a, _b;
-
       var fieldNameStrings = fieldNames.map(function (item) {
         return index.stringify(item);
-      }); // @ts-ignore
-
+      });
+      // @ts-ignore
       var fieldNameString = Object.keys(error.fields).find(function (item) {
         return fieldNameStrings.includes(item);
       });
       var combinedError = {};
-
       if (!fieldNameString) {
         formDispatch({
           type: 'SET_VALIDATING',
@@ -278,20 +238,15 @@ var useForm = function useForm(_a) {
         });
         return error;
       }
-
       var errorMsg;
-
       if (error instanceof Error) {
         // @ts-ignore
         errorMsg = ((_b = (_a = error.fields[fieldNameString]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.message) || '';
       }
-
       var fieldName = index.parse(fieldNameString);
-
       if (typeof errorMsg === 'string' && !!errorMsg) {
         combinedError = objectUtils.setNested(combinedError, fieldName, errorMsg);
       }
-
       formDispatch({
         type: 'SET_VALIDATING',
         payload: false
@@ -306,7 +261,6 @@ var useForm = function useForm(_a) {
   /**
    * 控件值更新策略
    */
-
   var setFieldValue = React.useCallback(function (field, value, shouldValidate) {
     formDispatch({
       type: 'SET_FIELD_VALUE',
@@ -314,10 +268,9 @@ var useForm = function useForm(_a) {
         field: field,
         value: value
       }
-    }); // touched 给外部控制展示，而不是当做参数暴露
-
+    });
+    // touched 给外部控制展示，而不是当做参数暴露
     var shouldValidateField = validateAfterTouched ? objectUtils.getNested(formState.touched, field) && shouldValidate : shouldValidate;
-
     if (shouldValidateField) {
       validateField(field, value)["catch"](EMPTY_FUNC);
     }
@@ -332,26 +285,23 @@ var useForm = function useForm(_a) {
   }, []);
   var normalizeValueFromChange = React.useCallback(function (eventOrValue, valuePropName) {
     var nextValue = eventOrValue;
-
     if (typeAssertion.isObjectLike(eventOrValue) && eventOrValue.target) {
-      var event = eventOrValue; // @see https://reactjs.org/docs/events.html#event-pooling
-
+      var event = eventOrValue;
+      // @see https://reactjs.org/docs/events.html#event-pooling
       if (typeAssertion.isFunction(event.persist)) {
         event.persist();
       }
-
-      var target = event.target || event.currentTarget; // if (hasOwnProp(target, valuePropName)) {
+      var target = event.target || event.currentTarget;
+      // if (hasOwnProp(target, valuePropName)) {
       //   nextValue = target[valuePropName]
       // }
       // TODO: support all native html field
-
       if (/checkbox/.test(target.type)) {
         nextValue = target.checked;
       } else {
         nextValue = target.value;
       }
     }
-
     return nextValue;
   }, []);
   var handleFieldChange = React.useCallback(function (fieldName, valuePropName, valueDispatchTransform, shouldValidate) {
@@ -359,7 +309,6 @@ var useForm = function useForm(_a) {
       for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
         args[_key - 1] = arguments[_key];
       }
-
       var nextValue = typeAssertion.isFunction(valueDispatchTransform) ? valueDispatchTransform.apply(void 0, [evt].concat(args)) : normalizeValueFromChange(evt, valuePropName);
       setFieldValue(fieldName, nextValue, shouldValidate);
       var changedValues = objectUtils.setNested({}, fieldName, nextValue);
@@ -370,13 +319,11 @@ var useForm = function useForm(_a) {
   /**
    * 控件失焦策略
    */
-
   var handleFieldBlur = React.useCallback(function (fieldName, shouldValidate) {
     return function (evt) {
       if (shouldValidate) {
         validateFieldState(fieldName)["catch"](EMPTY_FUNC);
       }
-
       setFieldTouched(fieldName, true);
     };
   }, [setFieldTouched, validateFieldState]);
@@ -388,7 +335,6 @@ var useForm = function useForm(_a) {
   /**
    * 表单重置，永远使用第一次的初始值
    */
-
   var initialValuesRef = React.useRef(initialValues);
   var initialErrorsRef = React.useRef(initialErrors);
   var initialTouchedRef = React.useRef(initialTouched);
@@ -403,13 +349,12 @@ var useForm = function useForm(_a) {
               values = nextState && nextState.values ? nextState.values : initialValuesRef.current;
               errors = nextState && nextState.errors ? nextState.errors : initialErrorsRef.current;
               touched = nextState && nextState.touched ? nextState.touched : initialTouchedRef.current;
-              initialValuesRef.current = values; // @ts-ignore
-
+              initialValuesRef.current = values;
+              // @ts-ignore
               initialErrorsRef.current = errors;
               initialTouchedRef.current = touched;
               submitting = !!(nextState && nextState.submitting);
               validating = !!(nextState && nextState.validating);
-
               dispatchFn = function dispatchFn() {
                 formDispatch({
                   type: 'SET_FORM',
@@ -422,23 +367,18 @@ var useForm = function useForm(_a) {
                   }
                 });
               };
-
               if (!onResetLatestRef.current) {
                 _context2.next = 15;
                 break;
               }
-
               _context2.next = 12;
               return onResetLatestRef.current(formState.values);
-
             case 12:
               dispatchFn();
               _context2.next = 16;
               break;
-
             case 15:
               dispatchFn();
-
             case 16:
             case "end":
               return _context2.stop();
@@ -450,7 +390,6 @@ var useForm = function useForm(_a) {
   /**
    * 表单提交
    */
-
   var submitForm = React.useCallback(function () {
     return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee3() {
       return _regeneratorRuntime__default["default"].wrap(function _callee3$(_context3) {
@@ -463,10 +402,8 @@ var useForm = function useForm(_a) {
               return _context3.abrupt("return", validateAll().then(function (combinedErrors) {
                 var isInstanceOfError = combinedErrors instanceof Error;
                 var isActuallyValid = !!combinedErrors && !isInstanceOfError && Object.keys(combinedErrors).length === 0;
-
                 if (isActuallyValid) {
                   var promiseOrUndefined;
-
                   try {
                     // @ts-ignore
                     promiseOrUndefined = onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formState.values);
@@ -476,21 +413,19 @@ var useForm = function useForm(_a) {
                     });
                     throw error;
                   }
-
                   if (promiseOrUndefined === undefined) {
                     formDispatch({
                       type: 'SUBMIT_DONE'
-                    }); // return combinedErrors
-
+                    });
+                    // return combinedErrors
                     return formState.values;
                   }
-
                   return Promise.resolve(promiseOrUndefined).then(function (result) {
                     formDispatch({
                       type: 'SUBMIT_DONE'
-                    }); // return result
+                    });
+                    // return result
                     // TODO: 满足promise 如果既给到values 又给到 errors
-
                     return formState.values;
                   })["catch"](function (_errors) {
                     formDispatch({
@@ -502,7 +437,6 @@ var useForm = function useForm(_a) {
                   formDispatch({
                     type: 'SUBMIT_DONE'
                   });
-
                   if (isInstanceOfError) {
                     throw combinedErrors;
                   } else {
@@ -515,7 +449,6 @@ var useForm = function useForm(_a) {
                 });
                 throw error;
               }));
-
             case 2:
             case "end":
               return _context3.stop();
@@ -556,25 +489,23 @@ var useForm = function useForm(_a) {
   });
   var getFieldProps = React.useCallback(function (props) {
     var _returnProps;
-
     if (props === void 0) {
       props = {};
     }
-
     var _props = props,
-        field = _props.field,
-        _props$valuePropName = _props.valuePropName,
-        valuePropName = _props$valuePropName === void 0 ? 'value' : _props$valuePropName,
-        _props$valueChangeFun = _props.valueChangeFuncPropName,
-        valueChangeFuncPropName = _props$valueChangeFun === void 0 ? 'onChange' : _props$valueChangeFun,
-        valueDispatchTransform = _props.valueDispatchTransform,
-        valueConnectTransform = _props.valueConnectTransform,
-        _props$validateTrigge = _props.validateTrigger,
-        validateTriggerProp = _props$validateTrigge === void 0 ? validateTriggersMemo : _props$validateTrigge,
-        children = _props.children; // field 未设置，不进行收集管理
-
-    if (!index.isValidField(field)) return {}; // 控件的 props
-
+      field = _props.field,
+      _props$valuePropName = _props.valuePropName,
+      valuePropName = _props$valuePropName === void 0 ? 'value' : _props$valuePropName,
+      _props$valueChangeFun = _props.valueChangeFuncPropName,
+      valueChangeFuncPropName = _props$valueChangeFun === void 0 ? 'onChange' : _props$valueChangeFun,
+      valueDispatchTransform = _props.valueDispatchTransform,
+      valueConnectTransform = _props.valueConnectTransform,
+      _props$validateTrigge = _props.validateTrigger,
+      validateTriggerProp = _props$validateTrigge === void 0 ? validateTriggersMemo : _props$validateTrigge,
+      children = _props.children;
+    // field 未设置，不进行收集管理
+    if (!index.isValidField(field)) return {};
+    // 控件的 props
     var controlProps = children && children.props || {};
     var validateTrigger = typeAssertion.isArray(validateTriggerProp) ? validateTriggerProp : [validateTriggerProp];
     var validateOnCollect = validateTrigger.includes(valueChangeFuncPropName);
@@ -614,62 +545,50 @@ var useForm = function useForm(_a) {
     getFieldsError: getFieldsError
   });
 };
-
 function formReducer(state, action) {
   switch (action.type) {
     case 'SET_STATE':
       var nextState = typeAssertion.isFunction(action.payload) ? action.payload(state) : action.payload;
       return Object.assign(Object.assign({}, state), nextState);
-
     case 'SET_VALUES':
       var nextValues = typeAssertion.isFunction(action.payload) ? action.payload(state.values) : action.payload;
       return Object.assign(Object.assign({}, state), {
         values: nextValues
       });
-
     case 'SET_ERRORS':
       return Object.assign(Object.assign({}, state), {
         errors: action.payload
       });
-
     case 'SET_TOUCHED':
       return Object.assign(Object.assign({}, state), {
         touched: action.payload
       });
-
     case 'SET_SUBMITTING':
       return Object.assign(Object.assign({}, state), {
         submitting: action.payload
       });
-
     case 'SET_VALIDATING':
       return Object.assign(Object.assign({}, state), {
         validating: action.payload
       });
-
     case 'SET_FIELD_VALUE':
       return Object.assign(Object.assign({}, state), {
         values: objectUtils.setNested(state.values, action.payload.field, action.payload.value)
       });
-
     case 'SET_FIELD_TOUCHED':
       return Object.assign(Object.assign({}, state), {
         touched: objectUtils.setNested(state.touched, action.payload.field, action.payload.value)
       });
-
     case 'SET_FIELD_ERROR':
       return Object.assign(Object.assign({}, state), {
         errors: objectUtils.setNested(state.errors, action.payload.field, action.payload.value)
       });
-
     case 'SET_FORM':
       return Object.assign(Object.assign({}, state), action.payload);
-
     case 'SUBMIT_DONE':
       return Object.assign(Object.assign({}, state), {
         submitting: false
       });
-
     default:
       return state;
   }
@@ -677,8 +596,6 @@ function formReducer(state, action) {
 /**
  * 一个注册表的收集器
  */
-
-
 var useCollection = function useCollection() {
   var collectionMp = React.useMemo(function () {
     return new Map();
@@ -692,11 +609,9 @@ var useCollection = function useCollection() {
   }, []);
   var getCollection = React.useCallback(function (keyOrKeys) {
     var key = index.stringify(keyOrKeys);
-
     if (collectionRef.current.has(key)) {
       return collectionRef.current.get(key);
     }
-
     return null;
   }, []);
   var getRegisteredKeys = React.useCallback(function () {
@@ -708,5 +623,4 @@ var useCollection = function useCollection() {
   }, []);
   return [getCollection, register, unregister, getRegisteredKeys];
 };
-
 exports.useForm = useForm;

package/lib/cjs/utils/index.js

@@ -12,19 +12,16 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-
 var typeAssertion = require('@hi-ui/type-assertion');
-
 var objectUtils = require('@hi-ui/object-utils');
 
+// TODO: 支持 数字字符串持久化 唯一化
 var stringify = function stringify(field) {
   return JSON.stringify(field);
 };
-
 var parse = function parse(fieldStr) {
   return JSON.parse(fieldStr);
 };
-
 var isValidField = function isValidField(field) {
   if (typeAssertion.isNullish(field) || field === '') return false;
   if (typeAssertion.isArray(field) && field.every(function (item) {
@@ -32,21 +29,17 @@ var isValidField = function isValidField(field) {
   })) return false;
   return true;
 };
-
 var mergeValues = function mergeValues(source, override) {
   if (!override) return source;
   if (!source) return objectUtils.clone(override);
   var target = objectUtils.clone(source);
-
   for (var key in override) {
     if (objectUtils.hasOwnProp(override, key)) {
       target[key] = override[key];
     }
   }
-
   return target;
 };
-
 exports.isValidField = isValidField;
 exports.mergeValues = mergeValues;
 exports.parse = parse;