@nutui/nutui-react 3.0.1 → 3.0.3-beta.0

package/dist/cjs/packages/form/useform.js

@@ -14,336 +14,380 @@ _export(exports, {
     },
     useForm: function() {
         return useForm;
+    },
+    useWatch: function() {
+        return useWatch;
     }
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
 var _class_call_check = require("@swc/helpers/_/_class_call_check");
+var _create_class = require("@swc/helpers/_/_create_class");
 var _define_property = require("@swc/helpers/_/_define_property");
 var _object_spread = require("@swc/helpers/_/_object_spread");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
 var _ts_generator = require("@swc/helpers/_/_ts_generator");
-var _ts_values = require("@swc/helpers/_/_ts_values");
 var _react = require("react");
 var _asyncvalidator = /*#__PURE__*/ _interop_require_default._(require("async-validator"));
+var _merge = require("../../utils/merge");
 var SECRET = 'NUT_FORM_INTERNAL';
 /**
  * 用于存储表单的数据
- */ var FormStore = function FormStore() {
+ */ var FormStore = /*#__PURE__*/ function() {
     "use strict";
-    var _this = this;
-    var _this1 = this;
-    (0, _class_call_check._)(this, FormStore);
-    var _this2 = this;
-    // 初始化数据
-    (0, _define_property._)(this, "initialValues", {});
-    (0, _define_property._)(this, "updateList", []);
-    // 存放表单中所有的数据 eg. {password: "ddd",username: "123"}
-    (0, _define_property._)(this, "store", {});
-    // 所有的组件实例
-    (0, _define_property._)(this, "fieldEntities", []);
-    // 校验成功或失败的回调，onFinish、onFinishFailed
-    (0, _define_property._)(this, "callbacks", {});
-    (0, _define_property._)(this, "errors", {});
-    /**
+    function FormStore() {
+        var _this = this;
+        var _this1 = this;
+        (0, _class_call_check._)(this, FormStore);
+        var _this2 = this;
+        // 初始化数据
+        (0, _define_property._)(this, "initialValues", {});
+        (0, _define_property._)(this, "updateList", []);
+        // 存放表单中所有的数据 eg. {password: "ddd",username: "123"}
+        (0, _define_property._)(this, "store", {});
+        // 所有的组件实例
+        (0, _define_property._)(this, "fieldEntities", []);
+        // 校验成功或失败的回调，onFinish、onFinishFailed
+        (0, _define_property._)(this, "callbacks", {});
+        (0, _define_property._)(this, "errors", {});
+        /**
    * 注册组件实例
    * @param field
    */ (0, _define_property._)(this, "registerField", function(field) {
-        _this.fieldEntities.push(field);
-        return function() {
-            _this.fieldEntities = _this.fieldEntities.filter(function(item) {
-                return item !== field;
-            });
-            if (_this.store) {
-                delete _this.store[field.props.name];
-            }
-        };
-    });
-    /**
+            _this.fieldEntities.push(field);
+            return function() {
+                _this.fieldEntities = _this.fieldEntities.filter(function(item) {
+                    return item !== field;
+                });
+            };
+        });
+        /**
    * 获取 formItem 的值
    * @param name
    */ (0, _define_property._)(this, "getFieldValue", function(name) {
-        var _this_store;
-        return (_this_store = _this.store) === null || _this_store === void 0 ? void 0 : _this_store[name];
-    });
-    /**
+            var _this_store;
+            return (_this_store = _this.store) === null || _this_store === void 0 ? void 0 : _this_store[name];
+        });
+        /**
    * 获取全部字段
    */ (0, _define_property._)(this, "getFieldsValue", function(nameList) {
-        if (typeof nameList === 'boolean') {
-            return JSON.parse(JSON.stringify(_this.store));
-        }
-        var fieldsValue = {};
-        nameList.forEach(function(field) {
-            fieldsValue[field] = _this.getFieldValue(field);
+            if (typeof nameList === 'boolean') {
+                return JSON.parse(JSON.stringify(_this.store));
+            }
+            var fieldsValue = {};
+            nameList.forEach(function(field) {
+                fieldsValue[field] = _this.getFieldValue(field);
+            });
+            return fieldsValue;
         });
-        return fieldsValue;
-    });
-    /**
+        /**
    * 设置 form 的初始值，之后在 reset 的时候使用
    * @param values
    * @param init
-   */ (0, _define_property._)(this, "setInitialValues", function(values, init) {
-        if (init) {
-            _this.initialValues = values;
-            _this.store = values;
-        }
-    });
-    /**
+   */ (0, _define_property._)(this, "setInitialValues", function(initialValues, init) {
+            _this.initialValues = initialValues || {};
+            if (init) {
+                var nextStore = (0, _merge.merge)(initialValues, _this.store);
+                _this.updateStore(nextStore);
+                _this.notifyWatch();
+            }
+        });
+        /**
    * 存储组件数据
    * @param newStore { [name]: newValue }
    */ (0, _define_property._)(this, "setFieldsValue", function(newStore) {
-        var needValidate = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true;
-        _this1.store = (0, _object_spread._)({}, _this1.store, newStore);
-        _this1.fieldEntities.forEach(function(entity) {
-            var name = entity.props.name;
-            Object.keys(newStore).forEach(function(key) {
-                if (key === name) {
-                    entity.onStoreChange('update');
+            var nextStore = (0, _merge.recursive)(true, _this.store, newStore);
+            _this.updateStore(nextStore);
+            _this.fieldEntities.forEach(function(entity) {
+                var name = entity.props.name;
+                Object.keys(newStore).forEach(function(key) {
+                    if (key === name) {
+                        entity.onStoreChange('update');
+                    }
+                });
+            });
+            _this.updateList.forEach(function(item) {
+                var shouldUpdate = item.condition;
+                if (typeof item.condition === 'function') {
+                    shouldUpdate = item.condition();
+                }
+                if (shouldUpdate) {
+                    item.entity.onStoreChange('update');
                 }
             });
+            _this.notifyWatch();
         });
-        _this1.updateList.forEach(function(item) {
-            var shouldUpdate = item.condition;
-            if (typeof item.condition === 'function') {
-                shouldUpdate = item.condition();
-            }
-            if (shouldUpdate) {
-                item.entity.onStoreChange('update');
-            }
+        (0, _define_property._)(this, "setFieldValue", function(name, value) {
+            var store = (0, _define_property._)({}, name, value);
+            _this.setFieldsValue(store);
+            _this.notifyWatch([
+                name
+            ]);
         });
-        needValidate && _this1.validateFields();
-    });
-    (0, _define_property._)(this, "setCallback", function(callback) {
-        _this.callbacks = (0, _object_spread._)({}, _this.callbacks, callback);
-    });
-    (0, _define_property._)(this, "validateFields", /*#__PURE__*/ function() {
-        var _ref = (0, _async_to_generator._)(function(nameList) {
-            var filterEntitys, errs, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _loop, _iterator, _step, err;
+        (0, _define_property._)(this, "setCallback", function(callback) {
+            _this.callbacks = (0, _object_spread._)({}, _this.callbacks, callback);
+        });
+        (0, _define_property._)(this, "validateEntities", /*#__PURE__*/ function() {
+            var _ref = (0, _async_to_generator._)(function(entity, errs) {
+                var _entity_props, name, _entity_props_rules, rules, descriptor, validator, _this_store, param, errors, _errs;
+                return (0, _ts_generator._)(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            _entity_props = entity.props, name = _entity_props.name, _entity_props_rules = _entity_props.rules, rules = _entity_props_rules === void 0 ? [] : _entity_props_rules;
+                            if (!name) {
+                                console.warn('Form field missing name property');
+                                return [
+                                    2
+                                ];
+                            }
+                            descriptor = {};
+                            if (rules.length) {
+                                // 多条校验规则
+                                if (rules.length > 1) {
+                                    descriptor[name] = [];
+                                    rules.forEach(function(v) {
+                                        descriptor[name].push(v);
+                                    });
+                                } else {
+                                    descriptor[name] = rules[0];
+                                }
+                            }
+                            validator = new _asyncvalidator.default(descriptor);
+                            _state.label = 1;
+                        case 1:
+                            _state.trys.push([
+                                1,
+                                3,
+                                4,
+                                5
+                            ]);
+                            return [
+                                4,
+                                validator.validate((0, _define_property._)({}, name, (_this_store = _this2.store) === null || _this_store === void 0 ? void 0 : _this_store[name]))
+                            ];
+                        case 2:
+                            _state.sent();
+                            return [
+                                3,
+                                5
+                            ];
+                        case 3:
+                            param = _state.sent();
+                            errors = param.errors;
+                            if (errors) {
+                                ;
+                                (_errs = errs).push.apply(_errs, (0, _to_consumable_array._)(errors));
+                                _this2.errors[name] = errors;
+                            }
+                            return [
+                                3,
+                                5
+                            ];
+                        case 4:
+                            if (!errs || errs.length === 0) {
+                                _this2.errors[name] = [];
+                            }
+                            return [
+                                7
+                            ];
+                        case 5:
+                            entity.onStoreChange('validate');
+                            return [
+                                2
+                            ];
+                    }
+                });
+            });
+            return function(entity, errs) {
+                return _ref.apply(this, arguments);
+            };
+        }());
+        (0, _define_property._)(this, "validateFields", /*#__PURE__*/ function() {
+            var _ref = (0, _async_to_generator._)(function(nameList) {
+                var filterEntities, errs;
+                return (0, _ts_generator._)(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            filterEntities = [];
+                            // this.errors.length = 0
+                            if (!nameList || nameList.length === 0) {
+                                filterEntities = _this2.fieldEntities;
+                            } else {
+                                filterEntities = _this2.fieldEntities.filter(function(param) {
+                                    var name = param.props.name;
+                                    return nameList.includes(name);
+                                });
+                            }
+                            errs = [];
+                            return [
+                                4,
+                                Promise.all(filterEntities.map(/*#__PURE__*/ function() {
+                                    var _ref = (0, _async_to_generator._)(function(entity) {
+                                        return (0, _ts_generator._)(this, function(_state) {
+                                            switch(_state.label){
+                                                case 0:
+                                                    return [
+                                                        4,
+                                                        _this2.validateEntities(entity, errs)
+                                                    ];
+                                                case 1:
+                                                    _state.sent();
+                                                    return [
+                                                        2
+                                                    ];
+                                            }
+                                        });
+                                    });
+                                    return function(entity) {
+                                        return _ref.apply(this, arguments);
+                                    };
+                                }()))
+                            ];
+                        case 1:
+                            _state.sent();
+                            return [
+                                2,
+                                errs
+                            ];
+                    }
+                });
+            });
+            return function(nameList) {
+                return _ref.apply(this, arguments);
+            };
+        }());
+        (0, _define_property._)(this, "submit", /*#__PURE__*/ (0, _async_to_generator._)(function() {
+            var errors, _this_callbacks_onFinish, _this_callbacks, _this_callbacks_onFinishFailed, _this_callbacks1;
             return (0, _ts_generator._)(this, function(_state) {
                 switch(_state.label){
                     case 0:
-                        filterEntitys = [];
-                        errs = [];
-                        _this2.errors.length = 0;
-                        if (!nameList || nameList.length === 0) {
-                            filterEntitys = _this2.fieldEntities;
-                        } else {
-                            filterEntitys = _this2.fieldEntities.filter(function(param) {
-                                var name = param.props.name;
-                                return nameList.includes(name);
-                            });
-                        }
-                        _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
-                        _state.label = 1;
-                    case 1:
-                        _state.trys.push([
-                            1,
-                            6,
-                            7,
-                            8
-                        ]);
-                        _loop = function _loop() {
-                            var entity, _entity_props, name, _entity_props_rules, rules, descriptor, validator, _this_store, param, errors, _errs;
-                            return (0, _ts_generator._)(this, function(_state) {
-                                switch(_state.label){
-                                    case 0:
-                                        entity = _step.value;
-                                        _entity_props = entity.props, name = _entity_props.name, _entity_props_rules = _entity_props.rules, rules = _entity_props_rules === void 0 ? [] : _entity_props_rules;
-                                        descriptor = {};
-                                        if (rules.length) {
-                                            // 多条校验规则
-                                            if (rules.length > 1) {
-                                                descriptor[name] = [];
-                                                rules.forEach(function(v) {
-                                                    descriptor[name].push(v);
-                                                });
-                                            } else {
-                                                descriptor[name] = rules[0];
-                                            }
-                                        }
-                                        validator = new _asyncvalidator.default(descriptor);
-                                        _state.label = 1;
-                                    case 1:
-                                        _state.trys.push([
-                                            1,
-                                            3,
-                                            4,
-                                            5
-                                        ]);
-                                        return [
-                                            4,
-                                            validator.validate((0, _define_property._)({}, name, (_this_store = _this2.store) === null || _this_store === void 0 ? void 0 : _this_store[name]))
-                                        ];
-                                    case 2:
-                                        _state.sent();
-                                        return [
-                                            3,
-                                            5
-                                        ];
-                                    case 3:
-                                        param = _state.sent();
-                                        errors = param.errors;
-                                        if (errors) {
-                                            ;
-                                            (_errs = errs).push.apply(_errs, (0, _to_consumable_array._)(errors));
-                                            _this2.errors[name] = errors;
-                                        }
-                                        return [
-                                            3,
-                                            5
-                                        ];
-                                    case 4:
-                                        if (!errs || errs.length === 0) {
-                                            _this2.errors[name] = [];
-                                        }
-                                        return [
-                                            7
-                                        ];
-                                    case 5:
-                                        entity.onStoreChange('validate');
-                                        return [
-                                            2
-                                        ];
-                                }
-                            });
-                        };
-                        _iterator = filterEntitys[Symbol.iterator]();
-                        _state.label = 2;
-                    case 2:
-                        if (!!(_iteratorNormalCompletion = (_step = _iterator.next()).done)) return [
-                            3,
-                            5
-                        ];
                         return [
-                            5,
-                            (0, _ts_values._)(_loop())
+                            4,
+                            _this2.validateFields()
                         ];
-                    case 3:
-                        _state.sent();
-                        _state.label = 4;
-                    case 4:
-                        _iteratorNormalCompletion = true;
+                    case 1:
+                        errors = _state.sent();
+                        if (errors.length === 0) {
+                            ;
+                            (_this_callbacks_onFinish = (_this_callbacks = _this2.callbacks).onFinish) === null || _this_callbacks_onFinish === void 0 ? void 0 : _this_callbacks_onFinish.call(_this_callbacks, _this2.store);
+                        } else if (errors.length > 0) {
+                            ;
+                            (_this_callbacks_onFinishFailed = (_this_callbacks1 = _this2.callbacks).onFinishFailed) === null || _this_callbacks_onFinishFailed === void 0 ? void 0 : _this_callbacks_onFinishFailed.call(_this_callbacks1, _this2.store, errors);
+                        }
                         return [
-                            3,
                             2
                         ];
-                    case 5:
-                        return [
-                            3,
-                            8
-                        ];
-                    case 6:
-                        err = _state.sent();
-                        _didIteratorError = true;
-                        _iteratorError = err;
-                        return [
-                            3,
-                            8
-                        ];
-                    case 7:
-                        try {
-                            if (!_iteratorNormalCompletion && _iterator.return != null) {
-                                _iterator.return();
-                            }
-                        } finally{
-                            if (_didIteratorError) {
-                                throw _iteratorError;
+                }
+            });
+        }));
+        (0, _define_property._)(this, "resetFields", function(namePaths) {
+            if (namePaths && namePaths.length) {
+                namePaths.forEach(function(path) {
+                    _this.errors[path] = null;
+                    _this.fieldEntities.forEach(function(entity) {
+                        var name = entity.props.name;
+                        if (name === path) {
+                            if (path in _this.initialValues) {
+                                _this.updateStore((0, _define_property._)({}, path, _this.initialValues[path]));
+                            } else {
+                                delete _this.store[path];
                             }
+                            entity.onStoreChange('reset');
                         }
-                        return [
-                            7
-                        ];
-                    case 8:
-                        return [
-                            2,
-                            errs
-                        ];
-                }
+                    });
+                });
+            } else {
+                var nextStore = (0, _merge.merge)({}, _this.initialValues);
+                _this.updateStore(nextStore);
+                _this.fieldEntities.forEach(function(entity) {
+                    entity.onStoreChange('reset');
+                });
+            }
+        });
+        // 监听事件
+        (0, _define_property._)(this, "registerUpdate", function(field, shouldUpdate) {
+            _this.updateList.push({
+                entity: field,
+                condition: shouldUpdate
             });
+            return function() {
+                _this.updateList = _this.updateList.filter(function(i) {
+                    return i.entity !== field;
+                });
+            };
         });
-        return function(nameList) {
-            return _ref.apply(this, arguments);
-        };
-    }());
-    (0, _define_property._)(this, "submit", /*#__PURE__*/ (0, _async_to_generator._)(function() {
-        var errors, _this_callbacks_onFinish, _this_callbacks, _this_callbacks_onFinishFailed, _this_callbacks1;
-        return (0, _ts_generator._)(this, function(_state) {
-            switch(_state.label){
-                case 0:
-                    return [
-                        4,
-                        _this2.validateFields()
-                    ];
-                case 1:
-                    errors = _state.sent();
-                    if (errors.length === 0) {
-                        ;
-                        (_this_callbacks_onFinish = (_this_callbacks = _this2.callbacks).onFinish) === null || _this_callbacks_onFinish === void 0 ? void 0 : _this_callbacks_onFinish.call(_this_callbacks, _this2.store);
-                    } else if (errors.length > 0) {
-                        ;
-                        (_this_callbacks_onFinishFailed = (_this_callbacks1 = _this2.callbacks).onFinishFailed) === null || _this_callbacks_onFinishFailed === void 0 ? void 0 : _this_callbacks_onFinishFailed.call(_this_callbacks1, _this2.store, errors);
-                    }
-                    return [
-                        2
-                    ];
+        (0, _define_property._)(this, "dispatch", function(param) {
+            var name = param.name;
+            _this.validateFields([
+                name
+            ]);
+        });
+        (0, _define_property._)(this, "getInternal", function(key) {
+            if (key === SECRET) {
+                return {
+                    registerField: _this.registerField,
+                    setCallback: _this.setCallback,
+                    setInitialValues: _this.setInitialValues,
+                    dispatch: _this.dispatch,
+                    store: _this.store,
+                    fieldEntities: _this.fieldEntities,
+                    registerUpdate: _this.registerUpdate,
+                    registerWatch: _this.registerWatch
+                };
             }
         });
-    }));
-    (0, _define_property._)(this, "resetFields", function() {
-        _this.errors.length = 0;
-        _this.store = _this.initialValues;
-        _this.fieldEntities.forEach(function(entity) {
-            entity.onStoreChange('reset');
+        (0, _define_property._)(this, "getForm", function() {
+            return {
+                getFieldValue: _this.getFieldValue,
+                getFieldsValue: _this.getFieldsValue,
+                setFieldsValue: _this.setFieldsValue,
+                setFieldValue: _this.setFieldValue,
+                resetFields: _this.resetFields,
+                validateFields: _this.validateFields,
+                submit: _this.submit,
+                errors: _this.errors,
+                getInternal: _this.getInternal
+            };
+        });
+        (0, _define_property._)(this, "watchList", []);
+        (0, _define_property._)(this, "registerWatch", function(callback) {
+            _this.watchList.push(callback);
+            return function() {
+                _this.watchList = _this.watchList.filter(function(fn) {
+                    return fn !== callback;
+                });
+            };
         });
-    });
-    // 监听事件
-    (0, _define_property._)(this, "registerUpdate", function(field, shouldUpdate) {
-        _this.updateList.push({
-            entity: field,
-            condition: shouldUpdate
+        (0, _define_property._)(this, "notifyWatch", function() {
+            var namePath = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+            if (_this1.watchList.length) {
+                var allValues;
+                if (!namePath || namePath.length === 0) {
+                    allValues = _this1.getFieldsValue(true);
+                } else {
+                    allValues = _this1.getFieldsValue(namePath);
+                }
+                _this1.watchList.forEach(function(callback) {
+                    callback(allValues, namePath);
+                });
+            }
         });
-        return function() {
-            _this.updateList = _this.updateList.filter(function(i) {
-                return i.entity !== field;
-            });
+        this.callbacks = {
+            onFinish: function onFinish() {},
+            onFinishFailed: function onFinishFailed() {}
         };
-    });
-    (0, _define_property._)(this, "dispatch", function(param) {
-        var name = param.name;
-        _this.validateFields([
-            name
-        ]);
-    });
-    (0, _define_property._)(this, "getInternal", function(key) {
-        if (key === SECRET) {
-            return {
-                registerField: _this.registerField,
-                setCallback: _this.setCallback,
-                setInitialValues: _this.setInitialValues,
-                dispatch: _this.dispatch,
-                store: _this.store,
-                fieldEntities: _this.fieldEntities,
-                registerUpdate: _this.registerUpdate
-            };
+    }
+    (0, _create_class._)(FormStore, [
+        {
+            key: "updateStore",
+            value: function updateStore(nextStore) {
+                this.store = nextStore;
+            }
         }
-    });
-    (0, _define_property._)(this, "getForm", function() {
-        return {
-            getFieldValue: _this.getFieldValue,
-            getFieldsValue: _this.getFieldsValue,
-            setFieldsValue: _this.setFieldsValue,
-            resetFields: _this.resetFields,
-            validateFields: _this.validateFields,
-            submit: _this.submit,
-            errors: _this.errors,
-            getInternal: _this.getInternal
-        };
-    });
-    this.callbacks = {
-        onFinish: function onFinish() {},
-        onFinishFailed: function onFinishFailed() {}
-    };
-};
+    ]);
+    return FormStore;
+}();
 var useForm = function useForm(form) {
     var formRef = (0, _react.useRef)();
     if (!formRef.current) {
@@ -358,3 +402,23 @@ var useForm = function useForm(form) {
         formRef.current
     ];
 };
+var useWatch = function useWatch(path, form) {
+    var formInstance = form.getInternal(SECRET);
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)(), 2), value = _useState[0], setValue = _useState[1];
+    (0, _react.useEffect)(function() {
+        var unsubscribe = formInstance.registerWatch(function(data, namePath) {
+            var value = data[path];
+            setValue(value);
+        });
+        var initialValue = form.getFieldsValue(true);
+        if (value !== initialValue[path]) {
+            setValue(initialValue[path]);
+        }
+        return function() {
+            return unsubscribe();
+        };
+    }, [
+        form
+    ]);
+    return value;
+};