rc-field-form - npm Package Compare versions

Comparing version 0.0.0-alpha.8 to 0.0.0-alpha.9

es/Field.d.ts

@@ -47,4 +47,4 @@ import * as React from 'react';
     private validatePromise;
-    private prevErrors;
     private prevValidating;
+    private errors;
     componentDidMount(): void;
@@ -58,5 +58,6 @@ componentWillUnmount(): void;
     onStoreChange: (prevStore: Store, namePathList: (string | number)[][], info: NotifyInfo) => void;
-    isFieldTouched: () => boolean;
     validateRules: (options?: ValidateOptions) => Promise<string[]>;
     isFieldValidating: () => boolean;
+    isFieldTouched: () => boolean;
+    getErrors: () => string[];
     getMeta: () => Meta;
@@ -63,0 +64,0 @@ getOnlyChild: (children: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((control: ChildProps, meta: Meta, context: FormInstance) => React.ReactNode)) => {

es/Field.js

@@ -36,3 +36,3 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 import { validateRules } from './utils/validateUtil';
-import { containsNamePath, defaultGetValueFromEvent, getNamePath, getValue, isSimilar } from './utils/valueUtil'; // We use Class instead of Hooks here since it will cost much code by using Hooks.
+import { containsNamePath, defaultGetValueFromEvent, getNamePath, getValue } from './utils/valueUtil'; // We use Class instead of Hooks here since it will cost much code by using Hooks.
 
@@ -62,2 +62,3 @@ var Field =
     _this.validatePromise = null;
+    _this.errors = [];
 
@@ -116,5 +117,3 @@ _this.cancelRegister = function () {
           onReset = _this$props.onReset;
-      var _this$context = _this.context,
-          getFieldsValue = _this$context.getFieldsValue,
-          getFieldError = _this$context.getFieldError;
+      var getFieldsValue = _this.context.getFieldsValue;
       var values = getFieldsValue();
@@ -134,2 +133,3 @@
             _this.validatePromise = null;
+            _this.errors = [];
 
@@ -160,2 +160,6 @@ if (onReset) {
 
+              if ('errors' in data) {
+                _this.errors = data.errors || [];
+              }
+
               _this.refresh();
@@ -169,17 +173,2 @@
 
-        case 'errorUpdate':
-          {
-            var errors = getFieldError(namePath);
-
-            var validating = _this.isFieldValidating();
-
-            if (_this.prevValidating !== validating || !isSimilar(_this.prevErrors, errors)) {
-              _this.reRender();
-
-              return;
-            }
-
-            break;
-          }
-
         case 'dependenciesUpdate':
@@ -226,6 +215,2 @@ {
 
-    _this.isFieldTouched = function () {
-      return _this.touched;
-    };
-
     _this.validateRules = function (options) {
@@ -254,7 +239,13 @@ var _ref = options || {},
       _this.validatePromise = promise;
+      _this.errors = [];
       promise.catch(function (e) {
         return e;
       }).then(function () {
+        var errors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
         if (_this.validatePromise === promise) {
           _this.validatePromise = null;
+          _this.errors = errors;
+
+          _this.reRender();
         }
@@ -267,2 +258,10 @@ });
       return !!_this.validatePromise;
+    };
+
+    _this.isFieldTouched = function () {
+      return _this.touched;
+    };
+
+    _this.getErrors = function () {
+      return _this.errors;
     }; // ============================= Child Component =============================
@@ -272,10 +271,8 @@
     _this.getMeta = function () {
-      var getFieldError = _this.context.getFieldError; // Make error & validating in cache to save perf
-
+      // Make error & validating in cache to save perf
       _this.prevValidating = _this.isFieldValidating();
-      _this.prevErrors = getFieldError(_this.getNamePath());
       var meta = {
         touched: _this.isFieldTouched(),
         validating: _this.prevValidating,
-        errors: _this.prevErrors
+        errors: _this.errors
       };
@@ -332,5 +329,5 @@ return meta;
 
-      var _this$context2 = _this.context,
-          getInternalHooks = _this$context2.getInternalHooks,
-          getFieldsValue = _this$context2.getFieldsValue;
+      var _this$context = _this.context,
+          getInternalHooks = _this$context.getInternalHooks,
+          getFieldsValue = _this$context.getFieldsValue;
 
@@ -337,0 +334,0 @@ var _getInternalHooks = getInternalHooks(HOOK_MARK),

es/Form.js

@@ -21,2 +21,3 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 import FormContext from './FormContext';
+import { isSimilar } from './utils/valueUtil';
 
@@ -94,9 +95,10 @@ var Form = function Form(_ref, ref) {
   var prevFieldsRef = React.useRef();
+  React.useEffect(function () {
+    if (!isSimilar(prevFieldsRef.current || [], fields || [])) {
+      formInstance.setFields(fields || []);
+    }
 
-  if (prevFieldsRef.current !== fields) {
-    formInstance.setFields(fields || []);
-  }
+    prevFieldsRef.current = fields;
+  }, [fields, formInstance]);
 
-  prevFieldsRef.current = fields;
-
   if (__COMPATIBILITY_USAGE_OR_YOU_WILL_BE_FIRED__ && __COMPATIBILITY_USAGE_OR_YOU_WILL_BE_FIRED__.NOT_CONTAIN_FORM && __COMPATIBILITY_USAGE_OR_YOU_WILL_BE_FIRED__.HOOK_MARK === 'asdihasiodhaohdioahfoihsoefhisihifhsiofhiosfd') {
@@ -103,0 +105,0 @@ return React.createElement(FieldContext.Provider, {

es/interface.d.ts

@@ -61,2 +61,3 @@ import { ReactElement } from 'react';
     getNamePath: () => InternalNamePath;
+    getErrors: () => string[];
     props: {
@@ -79,3 +80,3 @@ name?: NamePath;
 export declare type NotifyInfo = {
-    type: 'valueUpdate' | 'errorUpdate' | 'reset';
+    type: 'valueUpdate' | 'validateFinish' | 'reset';
     source?: 'internal' | 'external';
@@ -82,0 +83,0 @@ } | {

es/List.js

@@ -15,5 +15,5 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 import warning from 'warning';
-import FieldContext, { HOOK_MARK } from './FieldContext';
+import FieldContext from './FieldContext';
 import Field from './Field';
-import { getNamePath, setValue } from './utils/valueUtil';
+import { getNamePath } from './utils/valueUtil';
 
@@ -23,4 +23,9 @@ var List = function List(_ref) {
       children = _ref.children;
+  var context = React.useContext(FieldContext);
+  var keyRef = React.useRef({
+    keys: [],
+    id: 0
+  });
+  var keyManager = keyRef.current; // User should not pass `children` as other type.
 
-  // User should not pass `children` as other type.
   if (typeof children !== 'function') {
@@ -31,77 +36,78 @@ warning(false, 'Form.List only accepts function as children.');
 
-  return React.createElement(FieldContext.Consumer, null, function (context) {
-    var parentPrefixName = getNamePath(context.prefixName) || [];
-    var prefixName = [].concat(_toConsumableArray(parentPrefixName), _toConsumableArray(getNamePath(name)));
+  var parentPrefixName = getNamePath(context.prefixName) || [];
+  var prefixName = [].concat(_toConsumableArray(parentPrefixName), _toConsumableArray(getNamePath(name)));
 
-    var shouldUpdate = function shouldUpdate(prevValue, nextValue, _ref2) {
-      var source = _ref2.source;
+  var shouldUpdate = function shouldUpdate(prevValue, nextValue, _ref2) {
+    var source = _ref2.source;
 
-      if (source === 'internal') {
-        return false;
-      }
+    if (source === 'internal') {
+      return false;
+    }
 
-      return prevValue !== nextValue;
-    };
+    return prevValue !== nextValue;
+  };
 
-    return React.createElement(FieldContext.Provider, {
-      value: _objectSpread({}, context, {
-        prefixName: prefixName
-      })
-    }, React.createElement(Field, {
-      name: [],
-      shouldUpdate: shouldUpdate
-    }, function (_ref3) {
-      var _ref3$value = _ref3.value,
-          value = _ref3$value === void 0 ? [] : _ref3$value,
-          onChange = _ref3.onChange;
-      var getInternalHooks = context.getInternalHooks,
-          getFieldValue = context.getFieldValue,
-          setFieldsValue = context.setFieldsValue,
-          setFields = context.setFields;
-      /**
-       * Always get latest value in case user update fields by `form` api.
-       */
+  return React.createElement(FieldContext.Provider, {
+    value: _objectSpread({}, context, {
+      prefixName: prefixName
+    })
+  }, React.createElement(Field, {
+    name: [],
+    shouldUpdate: shouldUpdate
+  }, function (_ref3) {
+    var _ref3$value = _ref3.value,
+        value = _ref3$value === void 0 ? [] : _ref3$value,
+        onChange = _ref3.onChange;
+    var getFieldValue = context.getFieldValue;
+    /**
+     * Always get latest value in case user update fields by `form` api.
+     */
 
-      var operations = {
-        add: function add() {
-          var newValue = getFieldValue(prefixName) || [];
-          onChange([].concat(_toConsumableArray(newValue), [undefined]));
-        },
-        remove: function remove(index) {
-          var _getInternalHooks = getInternalHooks(HOOK_MARK),
-              getFields = _getInternalHooks.getFields;
+    var operations = {
+      add: function add() {
+        // Mapping keys
+        keyManager.keys = [].concat(_toConsumableArray(keyManager.keys), [keyManager.id]);
+        keyManager.id += 1;
+        var newValue = getFieldValue(prefixName) || [];
+        onChange([].concat(_toConsumableArray(newValue), [undefined]));
+      },
+      remove: function remove(index) {
+        var newValue = getFieldValue(prefixName) || []; // Do not handle out of range
 
-          var newValue = getFieldValue(prefixName) || [];
-          var namePathList = newValue.map(function (__, i) {
-            return [].concat(_toConsumableArray(prefixName), [i]);
-          });
-          var fields = getFields(namePathList).filter(function (__, i) {
-            return i !== index;
-          }).map(function (fieldData, i) {
-            return _objectSpread({}, fieldData, {
-              name: [].concat(_toConsumableArray(prefixName), [i])
-            });
-          });
+        if (index < 0 || index >= newValue.length) {
+          return;
+        } // Update key mapping
 
-          var nextValue = _toConsumableArray(newValue);
 
-          nextValue.splice(index, 1);
-          setFieldsValue(setValue({}, prefixName, [])); // Set value back.
-          // We should add current list name also to let it re-render
+        var newKeys = keyManager.keys.map(function (key, id) {
+          if (id < index) {
+            return key;
+          }
 
-          setFields([].concat(_toConsumableArray(fields), [{
-            name: prefixName
-          }]));
-        }
+          return keyManager.keys[id + 1];
+        });
+        keyManager.keys = newKeys.slice(0, -1); // Trigger store change
+
+        onChange(newValue.filter(function (_, id) {
+          return id !== index;
+        }));
+      }
+    };
+    return children(value.map(function (__, index) {
+      var key = keyManager.keys[index];
+
+      if (key === undefined) {
+        keyManager.keys[index] = keyManager.id;
+        key = keyManager.keys[index];
+        keyManager.id += 1;
+      }
+
+      return {
+        name: index,
+        key: key
       };
-      return children(value.map(function (__, index) {
-        return {
-          name: index,
-          key: index
-        };
-      }), operations);
-    }));
-  });
+    }), operations);
+  }));
 };
 
 export default List;

es/useForm.d.ts

@@ -18,3 +18,2 @@ import { InternalNamePath, FormInstance, InternalFormInstance, StoreValue } from './interface';
     private fieldEntities;
-    private errorCache;
     private initialValues;
@@ -40,2 +39,3 @@ private callbacks;
     private getFieldEntities;
+    private getFieldsMap;
     private getFieldsValue;
@@ -42,0 +42,0 @@ private getFieldValue;

es/useForm.js

@@ -32,3 +32,2 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
 import NameMap from './utils/NameMap';
-import { ErrorCache } from './utils/validateUtil';
 import { defaultValidateMessages } from './utils/messages';
@@ -44,3 +43,2 @@ import { cloneByNamePathList, containsNamePath, getNamePath, getValue, setValue, setValues } from './utils/valueUtil';
   this.fieldEntities = [];
-  this.errorCache = new ErrorCache();
   this.initialValues = {};
@@ -133,2 +131,14 @@ this.callbacks = {};
 
+  this.getFieldsMap = function () {
+    var pure = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var cache = new NameMap();
+
+    _this.getFieldEntities(pure).forEach(function (field) {
+      var namePath = field.getNamePath();
+      cache.set(namePath, field);
+    });
+
+    return cache;
+  };
+
   this.getFieldsValue = function (nameList) {
@@ -148,8 +158,26 @@ if (!nameList) {
   this.getFieldsError = function (nameList) {
-    if (!nameList) {
-      return _this.errorCache.getFieldsError();
+    var fieldEntities = _this.getFieldEntities(true);
+
+    if (nameList) {
+      var cache = _this.getFieldsMap(true);
+
+      fieldEntities = nameList.map(function (name) {
+        var namePath = getNamePath(name);
+        return cache.get(namePath);
+      });
     }
 
-    var namePathList = nameList.map(getNamePath);
-    return _this.errorCache.getFieldsError(namePathList);
+    return fieldEntities.map(function (entity, index) {
+      if (entity) {
+        return {
+          name: entity.getNamePath(),
+          errors: entity.getErrors()
+        };
+      }
+
+      return {
+        name: getNamePath(nameList[index]),
+        errors: []
+      };
+    });
   };
@@ -162,7 +190,3 @@
 
-    if (fieldError) {
-      return fieldError.errors;
-    }
-
-    return [];
+    return fieldError.errors;
   };
@@ -242,3 +266,2 @@
       _this.store = setValues({}, _this.initialValues);
-      _this.errorCache = new ErrorCache();
 
@@ -255,4 +278,2 @@ _this.notifyObservers(prevStore, null, {
     namePathList.forEach(function (namePath) {
-      _this.errorCache.resetField(namePath);
-
       var initialValue = _this.getInitialValue(namePath);
@@ -279,10 +300,2 @@
         _this.store = setValue(_this.store, namePath, data.value);
-      } // Error
-
-
-      if (errors) {
-        _this.errorCache.updateError([{
-          name: namePath,
-          errors: errors
-        }]);
       }
@@ -297,33 +310,11 @@
 
-  this.getFields = function (namePathList) {
-    var fields;
-
-    if (!namePathList) {
-      fields = _this.getFieldEntities(true).map(function (field) {
-        var namePath = field.getNamePath();
-        var meta = field.getMeta();
-        return _objectSpread({}, meta, {
-          name: namePath,
-          value: _this.getFieldValue(namePath)
-        });
+  this.getFields = function () {
+    return _this.getFieldEntities(true).map(function (field) {
+      var namePath = field.getNamePath();
+      var meta = field.getMeta();
+      return _objectSpread({}, meta, {
+        name: namePath,
+        value: _this.getFieldValue(namePath)
       });
-    } else {
-      var cache = new NameMap();
-
-      _this.getFieldEntities().forEach(function (field) {
-        var namePath = field.getNamePath();
-        cache.set(namePath, field);
-      });
-
-      fields = namePathList.map(function (namePath) {
-        var field = cache.get(namePath);
-        return _objectSpread({
-          name: namePath
-        }, field.getMeta(), {
-          value: _this.getFieldValue(namePath)
-        });
-      });
-    }
-
-    return fields;
+    });
   }; // =========================== Observer ===========================
@@ -482,16 +473,4 @@
   this.validateFields = function (nameList, options) {
-    var namePathList = nameList && nameList.map(getNamePath); // Clean up origin errors
+    var namePathList = nameList && nameList.map(getNamePath); // Collect result in promise list
 
-    if (namePathList) {
-      _this.errorCache.updateError(namePathList.map(function (name) {
-        return {
-          name: name,
-          errors: []
-        };
-      }));
-    } else {
-      _this.errorCache = new ErrorCache();
-    } // Collect result in promise list
-
-
     var promiseList = [];
@@ -536,6 +515,4 @@
 
-      _this.errorCache.updateError(results);
-
       _this.notifyObservers(_this.store, resultNamePathList, {
-        type: 'errorUpdate'
+        type: 'validateFinish'
       });
@@ -542,0 +519,0 @@

es/utils/NameMap.d.ts

@@ -11,3 +11,2 @@ import { InternalNamePath } from '../interface';
     private list;
-    clone(): NameMap<T>;
     set(key: InternalNamePath, value: T): void;
@@ -14,0 +13,0 @@ get(key: InternalNamePath): T;

es/utils/NameMap.js

@@ -22,9 +22,2 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
   _createClass(NameMap, [{
-    key: "clone",
-    value: function clone() {
-      var clone = new NameMap();
-      clone.list = this.list.concat();
-      return clone;
-    }
-  }, {
     key: "set",
@@ -31,0 +24,0 @@ value: function set(key, value) {

es/utils/validateUtil.d.ts

@@ -1,2 +0,2 @@
-import { FieldError, InternalNamePath, ValidateOptions, RuleObject, StoreValue } from '../interface';
+import { InternalNamePath, ValidateOptions, RuleObject, StoreValue } from '../interface';
 /**
@@ -7,7 +7,1 @@ * We use `async-validator` to validate the value.
 export declare function validateRules(namePath: InternalNamePath, value: StoreValue, rules: RuleObject[], options: ValidateOptions): Promise<string[]>;
-export declare class ErrorCache {
-    private cache;
-    updateError: (fieldErrors: FieldError[]) => void;
-    getFieldsError: (namePathList?: (string | number)[][]) => FieldError[];
-    resetField: (namePath: (string | number)[]) => void;
-}

es/utils/validateUtil.js

@@ -1,3 +0,1 @@
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
@@ -24,4 +22,3 @@
 import warning from 'warning';
-import NameMap from './NameMap';
-import { containsNamePath, getNamePath, setValues } from './valueUtil';
+import { setValues } from './valueUtil';
 import { defaultValidateMessages } from './messages';
@@ -124,4 +121,4 @@ /**
             if (_context.t0.errors) {
-              result = _context.t0.errors.map(function (_ref6, index) {
-                var message = _ref6.message;
+              result = _context.t0.errors.map(function (_ref3, index) {
+                var message = _ref3.message;
                 return (// Wrap ReactNode with `key`
@@ -234,47 +231,2 @@ React.isValidElement(message) ? React.cloneElement(message, {
   return summaryPromise;
-}
-/**
- * Convert `NameMap<string[]>` into `[{ name, errors }]` format.
- */
-
-function nameMapToErrorList(nameMap) {
-  return nameMap.map(function (_ref2) {
-    var key = _ref2.key,
-        value = _ref2.value;
-    return {
-      name: key,
-      errors: value
-    };
-  });
-}
-
-export var ErrorCache = function ErrorCache() {
-  var _this = this;
-
-  _classCallCheck(this, ErrorCache);
-
-  this.cache = new NameMap();
-
-  this.updateError = function (fieldErrors) {
-    _this.cache = _this.cache.clone();
-    fieldErrors.forEach(function (_ref3) {
-      var name = _ref3.name,
-          errors = _ref3.errors;
-
-      _this.cache.set(name, errors);
-    });
-  };
-
-  this.getFieldsError = function (namePathList) {
-    var fullErrors = nameMapToErrorList(_this.cache);
-    return !namePathList ? fullErrors : fullErrors.filter(function (_ref4) {
-      var name = _ref4.name;
-      var errorNamePath = getNamePath(name);
-      return containsNamePath(namePathList, errorNamePath);
-    });
-  };
-
-  this.resetField = function (namePath) {
-    _this.cache.delete(namePath);
-  };
-};
+}

lib/Field.d.ts

@@ -47,4 +47,4 @@ import * as React from 'react';
     private validatePromise;
-    private prevErrors;
     private prevValidating;
+    private errors;
     componentDidMount(): void;
@@ -58,5 +58,6 @@ componentWillUnmount(): void;
     onStoreChange: (prevStore: Store, namePathList: (string | number)[][], info: NotifyInfo) => void;
-    isFieldTouched: () => boolean;
     validateRules: (options?: ValidateOptions) => Promise<string[]>;
     isFieldValidating: () => boolean;
+    isFieldTouched: () => boolean;
+    getErrors: () => string[];
     getMeta: () => Meta;
@@ -63,0 +64,0 @@ getOnlyChild: (children: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((control: ChildProps, meta: Meta, context: FormInstance) => React.ReactNode)) => {

lib/Field.js

@@ -78,2 +78,3 @@ "use strict";
     _this.validatePromise = null;
+    _this.errors = [];
 
@@ -132,5 +133,3 @@ _this.cancelRegister = function () {
           onReset = _this$props.onReset;
-      var _this$context = _this.context,
-          getFieldsValue = _this$context.getFieldsValue,
-          getFieldError = _this$context.getFieldError;
+      var getFieldsValue = _this.context.getFieldsValue;
       var values = getFieldsValue();
@@ -150,2 +149,3 @@
             _this.validatePromise = null;
+            _this.errors = [];
 
@@ -176,2 +176,6 @@ if (onReset) {
 
+              if ('errors' in data) {
+                _this.errors = data.errors || [];
+              }
+
               _this.refresh();
@@ -185,17 +189,2 @@
 
-        case 'errorUpdate':
-          {
-            var errors = getFieldError(namePath);
-
-            var validating = _this.isFieldValidating();
-
-            if (_this.prevValidating !== validating || !(0, _valueUtil.isSimilar)(_this.prevErrors, errors)) {
-              _this.reRender();
-
-              return;
-            }
-
-            break;
-          }
-
         case 'dependenciesUpdate':
@@ -242,6 +231,2 @@ {
 
-    _this.isFieldTouched = function () {
-      return _this.touched;
-    };
-
     _this.validateRules = function (options) {
@@ -270,7 +255,13 @@ var _ref = options || {},
       _this.validatePromise = promise;
+      _this.errors = [];
       promise.catch(function (e) {
         return e;
       }).then(function () {
+        var errors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
         if (_this.validatePromise === promise) {
           _this.validatePromise = null;
+          _this.errors = errors;
+
+          _this.reRender();
         }
@@ -283,2 +274,10 @@ });
       return !!_this.validatePromise;
+    };
+
+    _this.isFieldTouched = function () {
+      return _this.touched;
+    };
+
+    _this.getErrors = function () {
+      return _this.errors;
     }; // ============================= Child Component =============================
@@ -288,10 +287,8 @@
     _this.getMeta = function () {
-      var getFieldError = _this.context.getFieldError; // Make error & validating in cache to save perf
-
+      // Make error & validating in cache to save perf
       _this.prevValidating = _this.isFieldValidating();
-      _this.prevErrors = getFieldError(_this.getNamePath());
       var meta = {
         touched: _this.isFieldTouched(),
         validating: _this.prevValidating,
-        errors: _this.prevErrors
+        errors: _this.errors
       };
@@ -348,5 +345,5 @@ return meta;
 
-      var _this$context2 = _this.context,
-          getInternalHooks = _this$context2.getInternalHooks,
-          getFieldsValue = _this$context2.getFieldsValue;
+      var _this$context = _this.context,
+          getInternalHooks = _this$context.getInternalHooks,
+          getFieldsValue = _this$context.getFieldsValue;
 
@@ -353,0 +350,0 @@ var _getInternalHooks = getInternalHooks(_FieldContext.HOOK_MARK),

lib/Form.js

@@ -16,2 +16,4 @@ "use strict";
 
+var _valueUtil = require("./utils/valueUtil");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -108,9 +110,10 @@
   var prevFieldsRef = React.useRef();
+  React.useEffect(function () {
+    if (!(0, _valueUtil.isSimilar)(prevFieldsRef.current || [], fields || [])) {
+      formInstance.setFields(fields || []);
+    }
 
-  if (prevFieldsRef.current !== fields) {
-    formInstance.setFields(fields || []);
-  }
+    prevFieldsRef.current = fields;
+  }, [fields, formInstance]);
 
-  prevFieldsRef.current = fields;
-
   if (__COMPATIBILITY_USAGE_OR_YOU_WILL_BE_FIRED__ && __COMPATIBILITY_USAGE_OR_YOU_WILL_BE_FIRED__.NOT_CONTAIN_FORM && __COMPATIBILITY_USAGE_OR_YOU_WILL_BE_FIRED__.HOOK_MARK === 'asdihasiodhaohdioahfoihsoefhisihifhsiofhiosfd') {
@@ -117,0 +120,0 @@ return React.createElement(_FieldContext.default.Provider, {

lib/interface.d.ts

@@ -61,2 +61,3 @@ import { ReactElement } from 'react';
     getNamePath: () => InternalNamePath;
+    getErrors: () => string[];
     props: {
@@ -79,3 +80,3 @@ name?: NamePath;
 export declare type NotifyInfo = {
-    type: 'valueUpdate' | 'errorUpdate' | 'reset';
+    type: 'valueUpdate' | 'validateFinish' | 'reset';
     source?: 'internal' | 'external';
@@ -82,0 +83,0 @@ } | {

lib/List.js

@@ -12,3 +12,3 @@ "use strict";
 
-var _FieldContext = _interopRequireWildcard(require("./FieldContext"));
+var _FieldContext = _interopRequireDefault(require("./FieldContext"));
 
@@ -38,4 +38,9 @@ var _Field = _interopRequireDefault(require("./Field"));
       children = _ref.children;
+  var context = React.useContext(_FieldContext.default);
+  var keyRef = React.useRef({
+    keys: [],
+    id: 0
+  });
+  var keyManager = keyRef.current; // User should not pass `children` as other type.
 
-  // User should not pass `children` as other type.
   if (typeof children !== 'function') {
@@ -46,75 +51,76 @@ (0, _warning.default)(false, 'Form.List only accepts function as children.');
 
-  return React.createElement(_FieldContext.default.Consumer, null, function (context) {
-    var parentPrefixName = (0, _valueUtil.getNamePath)(context.prefixName) || [];
-    var prefixName = [].concat(_toConsumableArray(parentPrefixName), _toConsumableArray((0, _valueUtil.getNamePath)(name)));
+  var parentPrefixName = (0, _valueUtil.getNamePath)(context.prefixName) || [];
+  var prefixName = [].concat(_toConsumableArray(parentPrefixName), _toConsumableArray((0, _valueUtil.getNamePath)(name)));
 
-    var shouldUpdate = function shouldUpdate(prevValue, nextValue, _ref2) {
-      var source = _ref2.source;
+  var shouldUpdate = function shouldUpdate(prevValue, nextValue, _ref2) {
+    var source = _ref2.source;
 
-      if (source === 'internal') {
-        return false;
-      }
+    if (source === 'internal') {
+      return false;
+    }
 
-      return prevValue !== nextValue;
-    };
+    return prevValue !== nextValue;
+  };
 
-    return React.createElement(_FieldContext.default.Provider, {
-      value: _objectSpread({}, context, {
-        prefixName: prefixName
-      })
-    }, React.createElement(_Field.default, {
-      name: [],
-      shouldUpdate: shouldUpdate
-    }, function (_ref3) {
-      var _ref3$value = _ref3.value,
-          value = _ref3$value === void 0 ? [] : _ref3$value,
-          onChange = _ref3.onChange;
-      var getInternalHooks = context.getInternalHooks,
-          getFieldValue = context.getFieldValue,
-          setFieldsValue = context.setFieldsValue,
-          setFields = context.setFields;
-      /**
-       * Always get latest value in case user update fields by `form` api.
-       */
+  return React.createElement(_FieldContext.default.Provider, {
+    value: _objectSpread({}, context, {
+      prefixName: prefixName
+    })
+  }, React.createElement(_Field.default, {
+    name: [],
+    shouldUpdate: shouldUpdate
+  }, function (_ref3) {
+    var _ref3$value = _ref3.value,
+        value = _ref3$value === void 0 ? [] : _ref3$value,
+        onChange = _ref3.onChange;
+    var getFieldValue = context.getFieldValue;
+    /**
+     * Always get latest value in case user update fields by `form` api.
+     */
 
-      var operations = {
-        add: function add() {
-          var newValue = getFieldValue(prefixName) || [];
-          onChange([].concat(_toConsumableArray(newValue), [undefined]));
-        },
-        remove: function remove(index) {
-          var _getInternalHooks = getInternalHooks(_FieldContext.HOOK_MARK),
-              getFields = _getInternalHooks.getFields;
+    var operations = {
+      add: function add() {
+        // Mapping keys
+        keyManager.keys = [].concat(_toConsumableArray(keyManager.keys), [keyManager.id]);
+        keyManager.id += 1;
+        var newValue = getFieldValue(prefixName) || [];
+        onChange([].concat(_toConsumableArray(newValue), [undefined]));
+      },
+      remove: function remove(index) {
+        var newValue = getFieldValue(prefixName) || []; // Do not handle out of range
 
-          var newValue = getFieldValue(prefixName) || [];
-          var namePathList = newValue.map(function (__, i) {
-            return [].concat(_toConsumableArray(prefixName), [i]);
-          });
-          var fields = getFields(namePathList).filter(function (__, i) {
-            return i !== index;
-          }).map(function (fieldData, i) {
-            return _objectSpread({}, fieldData, {
-              name: [].concat(_toConsumableArray(prefixName), [i])
-            });
-          });
+        if (index < 0 || index >= newValue.length) {
+          return;
+        } // Update key mapping
 
-          var nextValue = _toConsumableArray(newValue);
 
-          nextValue.splice(index, 1);
-          setFieldsValue((0, _valueUtil.setValue)({}, prefixName, [])); // Set value back.
-          // We should add current list name also to let it re-render
+        var newKeys = keyManager.keys.map(function (key, id) {
+          if (id < index) {
+            return key;
+          }
 
-          setFields([].concat(_toConsumableArray(fields), [{
-            name: prefixName
-          }]));
-        }
+          return keyManager.keys[id + 1];
+        });
+        keyManager.keys = newKeys.slice(0, -1); // Trigger store change
+
+        onChange(newValue.filter(function (_, id) {
+          return id !== index;
+        }));
+      }
+    };
+    return children(value.map(function (__, index) {
+      var key = keyManager.keys[index];
+
+      if (key === undefined) {
+        keyManager.keys[index] = keyManager.id;
+        key = keyManager.keys[index];
+        keyManager.id += 1;
+      }
+
+      return {
+        name: index,
+        key: key
       };
-      return children(value.map(function (__, index) {
-        return {
-          name: index,
-          key: index
-        };
-      }), operations);
-    }));
-  });
+    }), operations);
+  }));
 };
@@ -121,0 +127,0 @@

lib/useForm.d.ts

@@ -18,3 +18,2 @@ import { InternalNamePath, FormInstance, InternalFormInstance, StoreValue } from './interface';
     private fieldEntities;
-    private errorCache;
     private initialValues;
@@ -40,2 +39,3 @@ private callbacks;
     private getFieldEntities;
+    private getFieldsMap;
     private getFieldsValue;
@@ -42,0 +42,0 @@ private getFieldValue;

lib/useForm.js

@@ -18,4 +18,2 @@ "use strict";
 
-var _validateUtil = require("./utils/validateUtil");
-
 var _messages = require("./utils/messages");
@@ -63,3 +61,2 @@
   this.fieldEntities = [];
-  this.errorCache = new _validateUtil.ErrorCache();
   this.initialValues = {};
@@ -152,2 +149,14 @@ this.callbacks = {};
 
+  this.getFieldsMap = function () {
+    var pure = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var cache = new _NameMap.default();
+
+    _this.getFieldEntities(pure).forEach(function (field) {
+      var namePath = field.getNamePath();
+      cache.set(namePath, field);
+    });
+
+    return cache;
+  };
+
   this.getFieldsValue = function (nameList) {
@@ -167,8 +176,26 @@ if (!nameList) {
   this.getFieldsError = function (nameList) {
-    if (!nameList) {
-      return _this.errorCache.getFieldsError();
+    var fieldEntities = _this.getFieldEntities(true);
+
+    if (nameList) {
+      var cache = _this.getFieldsMap(true);
+
+      fieldEntities = nameList.map(function (name) {
+        var namePath = (0, _valueUtil.getNamePath)(name);
+        return cache.get(namePath);
+      });
     }
 
-    var namePathList = nameList.map(_valueUtil.getNamePath);
-    return _this.errorCache.getFieldsError(namePathList);
+    return fieldEntities.map(function (entity, index) {
+      if (entity) {
+        return {
+          name: entity.getNamePath(),
+          errors: entity.getErrors()
+        };
+      }
+
+      return {
+        name: (0, _valueUtil.getNamePath)(nameList[index]),
+        errors: []
+      };
+    });
   };
@@ -181,7 +208,3 @@
 
-    if (fieldError) {
-      return fieldError.errors;
-    }
-
-    return [];
+    return fieldError.errors;
   };
@@ -261,3 +284,2 @@
       _this.store = (0, _valueUtil.setValues)({}, _this.initialValues);
-      _this.errorCache = new _validateUtil.ErrorCache();
 
@@ -274,4 +296,2 @@ _this.notifyObservers(prevStore, null, {
     namePathList.forEach(function (namePath) {
-      _this.errorCache.resetField(namePath);
-
       var initialValue = _this.getInitialValue(namePath);
@@ -298,10 +318,2 @@
         _this.store = (0, _valueUtil.setValue)(_this.store, namePath, data.value);
-      } // Error
-
-
-      if (errors) {
-        _this.errorCache.updateError([{
-          name: namePath,
-          errors: errors
-        }]);
       }
@@ -316,33 +328,11 @@
 
-  this.getFields = function (namePathList) {
-    var fields;
-
-    if (!namePathList) {
-      fields = _this.getFieldEntities(true).map(function (field) {
-        var namePath = field.getNamePath();
-        var meta = field.getMeta();
-        return _objectSpread({}, meta, {
-          name: namePath,
-          value: _this.getFieldValue(namePath)
-        });
+  this.getFields = function () {
+    return _this.getFieldEntities(true).map(function (field) {
+      var namePath = field.getNamePath();
+      var meta = field.getMeta();
+      return _objectSpread({}, meta, {
+        name: namePath,
+        value: _this.getFieldValue(namePath)
       });
-    } else {
-      var cache = new _NameMap.default();
-
-      _this.getFieldEntities().forEach(function (field) {
-        var namePath = field.getNamePath();
-        cache.set(namePath, field);
-      });
-
-      fields = namePathList.map(function (namePath) {
-        var field = cache.get(namePath);
-        return _objectSpread({
-          name: namePath
-        }, field.getMeta(), {
-          value: _this.getFieldValue(namePath)
-        });
-      });
-    }
-
-    return fields;
+    });
   }; // =========================== Observer ===========================
@@ -501,16 +491,4 @@
   this.validateFields = function (nameList, options) {
-    var namePathList = nameList && nameList.map(_valueUtil.getNamePath); // Clean up origin errors
+    var namePathList = nameList && nameList.map(_valueUtil.getNamePath); // Collect result in promise list
 
-    if (namePathList) {
-      _this.errorCache.updateError(namePathList.map(function (name) {
-        return {
-          name: name,
-          errors: []
-        };
-      }));
-    } else {
-      _this.errorCache = new _validateUtil.ErrorCache();
-    } // Collect result in promise list
-
-
     var promiseList = [];
@@ -555,6 +533,4 @@
 
-      _this.errorCache.updateError(results);
-
       _this.notifyObservers(_this.store, resultNamePathList, {
-        type: 'errorUpdate'
+        type: 'validateFinish'
       });
@@ -561,0 +537,0 @@

lib/utils/NameMap.d.ts

@@ -11,3 +11,2 @@ import { InternalNamePath } from '../interface';
     private list;
-    clone(): NameMap<T>;
     set(key: InternalNamePath, value: T): void;
@@ -14,0 +13,0 @@ get(key: InternalNamePath): T;

lib/utils/NameMap.js

@@ -29,9 +29,2 @@ "use strict";
   _createClass(NameMap, [{
-    key: "clone",
-    value: function clone() {
-      var clone = new NameMap();
-      clone.list = this.list.concat();
-      return clone;
-    }
-  }, {
     key: "set",
@@ -38,0 +31,0 @@ value: function set(key, value) {

lib/utils/validateUtil.d.ts

@@ -1,2 +0,2 @@
-import { FieldError, InternalNamePath, ValidateOptions, RuleObject, StoreValue } from '../interface';
+import { InternalNamePath, ValidateOptions, RuleObject, StoreValue } from '../interface';
 /**
@@ -7,7 +7,1 @@ * We use `async-validator` to validate the value.
 export declare function validateRules(namePath: InternalNamePath, value: StoreValue, rules: RuleObject[], options: ValidateOptions): Promise<string[]>;
-export declare class ErrorCache {
-    private cache;
-    updateError: (fieldErrors: FieldError[]) => void;
-    getFieldsError: (namePathList?: (string | number)[][]) => FieldError[];
-    resetField: (namePath: (string | number)[]) => void;
-}

lib/utils/validateUtil.js

@@ -7,3 +7,2 @@ "use strict";
 exports.validateRules = validateRules;
-exports.ErrorCache = void 0;
 
@@ -16,4 +15,2 @@ var _asyncValidator = _interopRequireDefault(require("async-validator"));
 
-var _NameMap = _interopRequireDefault(require("./NameMap"));
-
 var _valueUtil = require("./valueUtil");
@@ -27,4 +24,2 @@
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
@@ -143,4 +138,4 @@
             if (_context.t0.errors) {
-              result = _context.t0.errors.map(function (_ref6, index) {
-                var message = _ref6.message;
+              result = _context.t0.errors.map(function (_ref3, index) {
+                var message = _ref3.message;
                 return (// Wrap ReactNode with `key`
@@ -253,50 +248,2 @@ React.isValidElement(message) ? React.cloneElement(message, {
   return summaryPromise;
-}
-/**
- * Convert `NameMap<string[]>` into `[{ name, errors }]` format.
- */
-
-
-function nameMapToErrorList(nameMap) {
-  return nameMap.map(function (_ref2) {
-    var key = _ref2.key,
-        value = _ref2.value;
-    return {
-      name: key,
-      errors: value
-    };
-  });
-}
-
-var ErrorCache = function ErrorCache() {
-  var _this = this;
-
-  _classCallCheck(this, ErrorCache);
-
-  this.cache = new _NameMap.default();
-
-  this.updateError = function (fieldErrors) {
-    _this.cache = _this.cache.clone();
-    fieldErrors.forEach(function (_ref3) {
-      var name = _ref3.name,
-          errors = _ref3.errors;
-
-      _this.cache.set(name, errors);
-    });
-  };
-
-  this.getFieldsError = function (namePathList) {
-    var fullErrors = nameMapToErrorList(_this.cache);
-    return !namePathList ? fullErrors : fullErrors.filter(function (_ref4) {
-      var name = _ref4.name;
-      var errorNamePath = (0, _valueUtil.getNamePath)(name);
-      return (0, _valueUtil.containsNamePath)(namePathList, errorNamePath);
-    });
-  };
-
-  this.resetField = function (namePath) {
-    _this.cache.delete(namePath);
-  };
-};
-
-exports.ErrorCache = ErrorCache;
+}

package.json

 {
   "name": "rc-field-form",
-  "version": "0.0.0-alpha.8",
+  "version": "0.0.0-alpha.9",
   "description": "React Form Component",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

192716

decreased by-2.56%

Lines of code

4126

decreased by-3.05%

No dependency changes