@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/Form/FormItem.js

@@ -1,45 +1,43 @@
-var _excluded = ["name", "rules"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["name", "rules"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useMount, useUnmount } from 'ahooks';
 import classNames from 'classnames';
 import head from 'lodash/head';
-import React, { Children, cloneElement, createRef, isValidElement, memo, useContext } from 'react';
+import React, { Children, cloneElement, isValidElement, memo, useCallback, useContext, useMemo, useRef, useState } from 'react';
 import Icon from "../Icon/Icon";
 import Tooltip from "../Tooltip/Tooltip";
 import Transition from "../Transition/Transition";
-import { addUnit, isNotEmpty, warning } from "../Util";
-import FieldContext, { HOOK_MARK } from "./FieldContext";
+import { addUnit, isNotEmpty, mergeDefaultProps, warning } from "../Util";
+import useClassNames from "../hooks/useClassNames";
+import { useForceUpdate } from "../hooks/useForceUpdate";
+import FormContext from "./FormContext";
 import { FormItemContext } from "./FormItemContext";
-import { b, e, m } from "./utils/classUtil";
+import FormLabelWrap from "./FormLabelWrap";
+import FieldContext, { HOOK_MARK } from "./InternalFormContext";
 import get from "./utils/get";
 import { toArray } from "./utils/typeUtil";
 import { validateRules } from "./utils/validateUtil";
-import { containsNamePath, defaultGetValueFromEvent, getNamePath, getValue } from "./utils/valueUtil";
+import { containsNamePath, defaultGetValueFromEvent, getNamePath as getNameArray, getValue as getValueFromName } from "./utils/valueUtil";
 var EMPTY_ERRORS = [];
 function requireUpdate(shouldUpdate, prev, next, prevValue, nextValue, info) {
   if (typeof shouldUpdate === 'function') {
@@ -49,664 +47,651 @@ function requireUpdate(shouldUpdate, prev, next, prevValue, nextValue, info) {
   }
   return prevValue !== nextValue;
 }
-
-// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
-// We use Class instead of Hooks here since it will cost much code by using Hooks.
-var Field = /*#__PURE__*/function (_React$Component) {
-  _inherits(Field, _React$Component);
-  var _super = _createSuper(Field);
-  // ============================== Subscriptions ==============================
-  function Field(props) {
-    var _this;
-    _classCallCheck(this, Field);
-    _this = _super.call(this, props);
-
-    // Register on init
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      resetCount: 0
-    });
-    _defineProperty(_assertThisInitialized(_this), "cancelRegisterFunc", null);
-    _defineProperty(_assertThisInitialized(_this), "mounted", false);
-    /**
-     * Follow state should not management in State since it will async update by
-     * This makes first render of form can not get correct state value.
-     */
-    _defineProperty(_assertThisInitialized(_this), "touched", false);
-    /**
-     * Mark when touched & validated. Currently only used for `dependencies`.
-     * Note that we do not think field with `initialValue` is dirty
-     * but this will be by `isFieldDirty` func.
-     */
-    _defineProperty(_assertThisInitialized(_this), "dirty", false);
-    _defineProperty(_assertThisInitialized(_this), "validatePromise", null);
-    _defineProperty(_assertThisInitialized(_this), "prevValidating", void 0);
-    _defineProperty(_assertThisInitialized(_this), "errors", EMPTY_ERRORS);
-    _defineProperty(_assertThisInitialized(_this), "warnings", EMPTY_ERRORS);
-    _defineProperty(_assertThisInitialized(_this), "warningRef", void 0);
-    _defineProperty(_assertThisInitialized(_this), "errorRef", void 0);
-    _defineProperty(_assertThisInitialized(_this), "containerRef", void 0);
-    _defineProperty(_assertThisInitialized(_this), "cancelRegister", function () {
-      var _this$props = _this.props,
-        preserve = _this$props.preserve,
-        isListField = _this$props.isListField,
-        name = _this$props.name;
-      if (_this.cancelRegisterFunc) {
-        _this.cancelRegisterFunc(isListField, preserve, getNamePath(name));
+function Field(props) {
+  var _this = this;
+  props = mergeDefaultProps({
+    dependencies: [],
+    rules: [],
+    validateFirst: false,
+    colon: false,
+    trigger: 'onChange',
+    valuePropName: 'value',
+    labelStyle: {}
+  }, props);
+  var _props = props,
+    shouldUpdate = _props.shouldUpdate,
+    dependencies = _props.dependencies,
+    onReset = _props.onReset,
+    onMetaChange = _props.onMetaChange,
+    preserve = _props.preserve,
+    isListField = _props.isListField,
+    isList = _props.isList,
+    validateFirst = _props.validateFirst,
+    messageVariables = _props.messageVariables,
+    trigger = _props.trigger,
+    validateTrigger = _props.validateTrigger,
+    getValueFromEvent = _props.getValueFromEvent,
+    normalize = _props.normalize,
+    valuePropName = _props.valuePropName,
+    getValueProps = _props.getValueProps,
+    children = _props.children,
+    label = _props.label,
+    className = _props.className,
+    style = _props.style,
+    noStyle = _props.noStyle,
+    labelStyle = _props.labelStyle,
+    colon = _props.colon,
+    size = _props.size,
+    help = _props.help,
+    pure = _props.pure,
+    validateState = _props.validateState,
+    errorStyle = _props.errorStyle,
+    warningStyle = _props.warningStyle;
+  var fieldContext = useContext(FieldContext);
+  var name = useMemo(function () {
+    return props.name !== undefined ? getNameArray(props.name) : undefined;
+  }, [props.name]);
+  var _useClassNames = useClassNames('form-item'),
+    b = _useClassNames.b,
+    e = _useClassNames.e,
+    m = _useClassNames.m,
+    is = _useClassNames.is;
+  var key = 'keep';
+  if (!isListField) {
+    key = "_".concat((name || []).join('_'));
+  }
+  if (process.env.NODE_ENV !== 'production' && preserve === false && isListField && name.length <= 1) {
+    warning(false, '`preserve` should not apply on ElFormList fields.');
+  }
+  var formRules = useMemo(function () {
+    var _fieldContext$rules;
+    return (name === null || name === void 0 ? void 0 : name.length) > 0 ? get((_fieldContext$rules = fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.rules) !== null && _fieldContext$rules !== void 0 ? _fieldContext$rules : {}, name) : undefined;
+  }, [name, fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.rules]);
+  var rules = useMemo(function () {
+    return [].concat(_toConsumableArray(formRules || []), _toConsumableArray(props.rules || []));
+  }, [formRules, props.rules]);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    resetCount = _useState2[0],
+    setResetCount = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    computedWidth = _useState4[0],
+    setComputedWidth = _useState4[1];
+  var oldWidthRef = useRef(0);
+  var mountedRef = useRef(false);
+  /**
+   * Follow state should not management in State since it will async update by
+   * This makes first render of form can not get correct state value.
+   */
+  var touchedRef = useRef(false);
+  /**
+   * Mark when touched & validated. Currently only used for `dependencies`.
+   * Note that we do not think field with `initialValue` is dirty
+   * but this will be by `isFieldDirty` func.
+   */
+  var dirtyRef = useRef(false);
+  var validatePromiseRef = useRef(null);
+  var errorsRef = useRef(EMPTY_ERRORS);
+  var warningsRef = useRef(EMPTY_ERRORS);
+  var cancelRegisterFuncRef = useRef(null);
+  var warningRef = useRef(null);
+  var errorRef = useRef(null);
+  var containerRef = useRef(null);
+  var _useForceUpdate = useForceUpdate(),
+    forceUpdate = _useForceUpdate.forceUpdate;
+  var reRender = useCallback(function () {
+    if (!mountedRef.current) {
+      return;
+    }
+    forceUpdate();
+  }, [forceUpdate]);
+  var getNamePath = useCallback(function () {
+    var _fieldContext$prefixN = fieldContext.prefixName,
+      prefixName = _fieldContext$prefixN === void 0 ? [] : _fieldContext$prefixN;
+    return name !== undefined ? [].concat(_toConsumableArray(prefixName), _toConsumableArray(name)) : [];
+  }, [fieldContext, name]);
+  var getRules = useCallback(function () {
+    return rules.map(function (rule) {
+      if (typeof rule === 'function') {
+        return rule(fieldContext);
       }
-      _this.cancelRegisterFunc = null;
+      return rule;
     });
-    // ================================== Utils ==================================
-    _defineProperty(_assertThisInitialized(_this), "getNamePath", function () {
-      var _this$props2 = _this.props,
-        name = _this$props2.name,
-        fieldContext = _this$props2.fieldContext;
-      var _fieldContext$prefixN = fieldContext.prefixName,
-        prefixName = _fieldContext$prefixN === void 0 ? [] : _fieldContext$prefixN;
-      return name !== undefined ? [].concat(_toConsumableArray(prefixName), _toConsumableArray(name)) : [];
+  }, [rules, fieldContext]);
+  var refresh = useCallback(function () {
+    if (!mountedRef.current) {
+      return;
+    }
+    setResetCount(function (prev) {
+      return prev + 1;
     });
-    _defineProperty(_assertThisInitialized(_this), "getRules", function () {
-      var _this$props3 = _this.props,
-        _this$props3$rules = _this$props3.rules,
-        rules = _this$props3$rules === void 0 ? [] : _this$props3$rules,
-        fieldContext = _this$props3.fieldContext;
-      return rules.map(function (rule) {
-        if (typeof rule === 'function') {
-          return rule(fieldContext);
-        }
-        return rule;
-      });
+  }, []);
+  var triggerMetaEvent = useCallback(function (destroy) {
+    onMetaChange === null || onMetaChange === void 0 || onMetaChange(_objectSpread(_objectSpread({}, _this.getMeta()), {}, {
+      destroy: destroy
+    }));
+  }, [onMetaChange]);
+  var cancelRegister = useCallback(function () {
+    if (cancelRegisterFuncRef.current) {
+      cancelRegisterFuncRef.current(isListField, preserve, getNameArray(name));
+    }
+    cancelRegisterFuncRef.current = null;
+  }, [isListField, preserve, name]);
+  var getValue = useCallback(function (store) {
+    var getFieldsValue = fieldContext.getFieldsValue;
+    return getValueFromName(store || getFieldsValue(true), getNamePath());
+  }, [fieldContext, getNamePath]);
+  var isFieldValidating = useCallback(function () {
+    return !!validatePromiseRef.current;
+  }, []);
+  var isFieldTouched = useCallback(function () {
+    return touchedRef.current;
+  }, []);
+  var isFieldDirty = useCallback(function () {
+    if (dirtyRef.current || props.initialValue !== undefined) {
+      return true;
+    }
+    var _fieldContext$getInte = fieldContext.getInternalHooks(HOOK_MARK),
+      getInitialValue = _fieldContext$getInte.getInitialValue;
+    if (getInitialValue(getNamePath()) !== undefined) {
+      return true;
+    }
+    return false;
+  }, [fieldContext, getNamePath, props.initialValue]);
+  var getErrors = useCallback(function () {
+    return errorsRef.current;
+  }, []);
+  var getWarnings = useCallback(function () {
+    return warningsRef.current;
+  }, []);
+  var getMeta = useCallback(function () {
+    return {
+      touched: touchedRef.current,
+      validating: isFieldValidating(),
+      errors: errorsRef.current,
+      warnings: warningsRef.current,
+      name: getNamePath()
+    };
+  }, [isFieldValidating, getNamePath]);
+  var onClear = useCallback(function () {
+    var _children$props, _children$props$onCle;
+    touchedRef.current = true;
+    var _fieldContext$getInte2 = fieldContext.getInternalHooks(HOOK_MARK),
+      dispatch = _fieldContext$getInte2.dispatch;
+    dispatch({
+      type: 'updateValue',
+      namePath: getNamePath(),
+      value: ''
     });
-    _defineProperty(_assertThisInitialized(_this), "refresh", function () {
-      if (!_this.mounted) {
-        return;
-      }
+    // @ts-ignore
+    children === null || children === void 0 || (_children$props = children.props) === null || _children$props === void 0 || (_children$props$onCle = _children$props.onClear) === null || _children$props$onCle === void 0 || _children$props$onCle.call(_children$props);
+  }, [fieldContext, getNamePath, children]);
+  var getControlled = useCallback(function () {
+    var childProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var mergedValidateTrigger = validateTrigger !== undefined ? validateTrigger : fieldContext.validateTrigger;
+    var namePath = getNamePath();
+    var _fieldContext$getInte3 = fieldContext.getInternalHooks(HOOK_MARK),
+      dispatch = _fieldContext$getInte3.dispatch;
+    var value = getValue();
+    var mergedGetValueProps = getValueProps || function (val) {
+      return _defineProperty({}, valuePropName, val);
+    };
 
-      /**
-       * Clean up current node.
-       */
-      _this.setState(function (_ref) {
-        var resetCount = _ref.resetCount;
-        return {
-          resetCount: resetCount + 1
-        };
-      });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var originTriggerFunc = childProps[trigger];
+    var control = _objectSpread(_objectSpread(_objectSpread({}, childProps), mergedGetValueProps(value)), {}, {
+      error: errorsRef.current.length > 0,
+      warning: warningsRef.current.length > 0,
+      onClear: onClear
     });
-    _defineProperty(_assertThisInitialized(_this), "triggerMetaEvent", function (destroy) {
-      var onMetaChange = _this.props.onMetaChange;
-      onMetaChange === null || onMetaChange === void 0 || onMetaChange(_objectSpread(_objectSpread({}, _this.getMeta()), {}, {
-        destroy: destroy
-      }));
-    });
-    // ========================= Field Entity Interfaces =========================
-    // Trigger by store update. Check if need update the component
-    _defineProperty(_assertThisInitialized(_this), "onStoreChange", function (prevStore, namePathList, info) {
-      var _this$props4 = _this.props,
-        shouldUpdate = _this$props4.shouldUpdate,
-        _this$props4$dependen = _this$props4.dependencies,
-        dependencies = _this$props4$dependen === void 0 ? [] : _this$props4$dependen,
-        onReset = _this$props4.onReset;
-      var store = info.store;
-      var namePath = _this.getNamePath();
-      var prevValue = _this.getValue(prevStore);
-      var curValue = _this.getValue(store);
-      var namePathMatch = namePathList && containsNamePath(namePathList, namePath);
-
-      // `setFieldsValue` is a quick access to update related status
-      if (info.type === 'valueUpdate' && info.source === 'external' && prevValue !== curValue) {
-        _this.touched = true;
-        _this.dirty = true;
-        _this.validatePromise = null;
-        _this.errors = EMPTY_ERRORS;
-        _this.warnings = EMPTY_ERRORS;
-        _this.triggerMetaEvent();
+    control[trigger] = function () {
+      touchedRef.current = true;
+      dirtyRef.current = true;
+      triggerMetaEvent();
+      var newValue;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
       }
-      switch (info.type) {
-        case 'reset':
-          if (!namePathList || namePathMatch) {
-            // Clean up state
-            _this.touched = false;
-            _this.dirty = false;
-            _this.validatePromise = null;
-            _this.errors = EMPTY_ERRORS;
-            _this.warnings = EMPTY_ERRORS;
-            _this.triggerMetaEvent();
-            onReset === null || onReset === void 0 || onReset();
-            _this.refresh();
-            return;
-          }
-          break;
-
-        /**
-         * In case field with `preserve = false` nest deps like:
-         * - A = 1 => show B
-         * - B = 1 => show C
-         * - Reset A, need clean B, C
-         */
-        case 'remove':
-          {
-            if (shouldUpdate) {
-              _this.reRender();
-              return;
-            }
-            break;
-          }
-        case 'setField':
-          {
-            if (namePathMatch) {
-              var data = info.data;
-              if ('touched' in data) {
-                _this.touched = data.touched;
-              }
-              if ('validating' in data && !('originRCField' in data)) {
-                _this.validatePromise = data.validating ? Promise.resolve([]) : null;
-              }
-              if ('errors' in data) {
-                _this.errors = data.errors || EMPTY_ERRORS;
-              }
-              if ('warnings' in data) {
-                _this.warnings = data.warnings || EMPTY_ERRORS;
-              }
-              _this.dirty = true;
-              _this.triggerMetaEvent();
-              _this.reRender();
-              return;
-            }
-
-            // Handle update by `setField` with `shouldUpdate`
-            if (shouldUpdate && !namePath.length && requireUpdate(shouldUpdate, prevStore, store, prevValue, curValue, info)) {
-              _this.reRender();
-              return;
-            }
-            break;
-          }
-        case 'dependenciesUpdate':
-          {
-            //
-            /**
-             * Trigger when marked `dependencies` updated. Related fields will all update
-             */
-            var dependencyList = dependencies.map(getNamePath);
-            // No need for `namePathMath` check and `shouldUpdate` check, since `valueUpdate` will be
-            // emitted earlier and they will work there
-            // If set it may cause unnecessary twice rerendering
-            if (dependencyList.some(function (dependency) {
-              return containsNamePath(info.relatedFields, dependency);
-            })) {
-              _this.reRender();
-              return;
-            }
-            break;
-          }
-        default:
-          // 1. If `namePath` exists in `namePathList`, means it's related value and should update
-          //      For example <List name="list"><Field name={['list', 0]}/>
-          //      If `namePathList` is [['list']] (List value update), Field should be updated
-          //      If `namePathList` is [['list', 0]] (Field value update), List shouldn't be updated
-          // 2.
-          //   2.1 If `dependencies` is set, `name` is not set and `shouldUpdate` is not set,
-          //       don't use `shouldUpdate`. `dependencies` is view as a shortcut if `shouldUpdate`
-          //       is not provided
-          //   2.2 If `shouldUpdate` provided, use customize logic to update the field
-          //       else to check if value changed
-          if (namePathMatch || (!dependencies.length || namePath.length || shouldUpdate) && requireUpdate(shouldUpdate, prevStore, store, prevValue, curValue, info)) {
-            _this.reRender();
-            return;
-          }
-          break;
+      if (getValueFromEvent) {
+        newValue = getValueFromEvent.apply(void 0, args);
+      } else {
+        newValue = defaultGetValueFromEvent.apply(void 0, [valuePropName].concat(args));
       }
-      if (shouldUpdate === true) {
-        _this.reRender();
+      if (normalize) {
+        newValue = normalize(newValue, value, fieldContext.getFieldsValue(true));
       }
-    });
-    _defineProperty(_assertThisInitialized(_this), "validateRules", function (options) {
-      // We should fixed namePath & value to avoid developer change then by form function
-      var namePath = _this.getNamePath();
-      var currentValue = _this.getValue();
-
-      // Force change to async to avoid rule OOD under renderProps field
-      var rootPromise = Promise.resolve().then(function () {
-        if (!_this.mounted) {
-          return [];
+      dispatch({
+        type: 'updateValue',
+        namePath: namePath,
+        value: newValue
+      });
+      if (originTriggerFunc) {
+        originTriggerFunc.apply(void 0, args);
+      }
+    };
+    var validateTriggerList = toArray(mergedValidateTrigger || []);
+    validateTriggerList.forEach(function (triggerName) {
+      var originTrigger = control[triggerName];
+      control[triggerName] = function () {
+        if (originTrigger) {
+          originTrigger.apply(void 0, arguments);
         }
-        var _this$props5 = _this.props,
-          _this$props5$validate = _this$props5.validateFirst,
-          validateFirst = _this$props5$validate === void 0 ? false : _this$props5$validate,
-          messageVariables = _this$props5.messageVariables;
-        var _ref2 = options || {},
-          triggerName = _ref2.triggerName;
-        var filteredRules = _this.getRules();
-        if (triggerName) {
-          filteredRules = filteredRules.filter(function (rule) {
-            return rule;
-          }).filter(function (rule) {
-            var validateTrigger = rule.validateTrigger;
-            if (!validateTrigger) {
-              return true;
-            }
-            var triggerList = toArray(validateTrigger);
-            return triggerList.includes(triggerName);
+        // We dispatch validate to root,
+        // since it will update related data with other field with same name
+        if (rules && rules.length) {
+          dispatch({
+            type: 'validateField',
+            namePath: namePath,
+            triggerName: triggerName
           });
         }
-        var promise = validateRules(namePath, currentValue, filteredRules, options, validateFirst, messageVariables);
-        promise.catch(function (e) {
-          return e;
-        }).then(function () {
-          var ruleErrors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : EMPTY_ERRORS;
-          if (_this.validatePromise === rootPromise) {
-            var _ruleErrors$forEach;
-            _this.validatePromise = null;
-
-            // Get errors & warnings
-            var nextErrors = [];
-            var nextWarnings = [];
-            (_ruleErrors$forEach = ruleErrors.forEach) === null || _ruleErrors$forEach === void 0 || _ruleErrors$forEach.call(ruleErrors, function (_ref3) {
-              var warningOnly = _ref3.rule.warningOnly,
-                _ref3$errors = _ref3.errors,
-                errors = _ref3$errors === void 0 ? EMPTY_ERRORS : _ref3$errors;
-              if (warningOnly) {
-                nextWarnings.push.apply(nextWarnings, _toConsumableArray(errors));
-              } else {
-                nextErrors.push.apply(nextErrors, _toConsumableArray(errors));
-              }
-            });
-            _this.errors = nextErrors;
-            _this.warnings = nextWarnings;
-            _this.triggerMetaEvent();
-            _this.reRender();
-          }
-        });
-        return promise;
-      });
-      _this.validatePromise = rootPromise;
-      _this.dirty = true;
-      _this.errors = EMPTY_ERRORS;
-      _this.warnings = EMPTY_ERRORS;
-      _this.triggerMetaEvent();
-
-      // Force trigger re-render since we need sync renderProps with new meta
-      _this.reRender();
-      return rootPromise;
-    });
-    _defineProperty(_assertThisInitialized(_this), "isFieldValidating", function () {
-      return !!_this.validatePromise;
-    });
-    _defineProperty(_assertThisInitialized(_this), "isFieldTouched", function () {
-      return _this.touched;
-    });
-    _defineProperty(_assertThisInitialized(_this), "isFieldDirty", function () {
-      // Touched or validate or has initialValue
-      if (_this.dirty || _this.props.initialValue !== undefined) {
-        return true;
-      }
-
-      // Form set initialValue
-      var fieldContext = _this.props.fieldContext;
-      var _fieldContext$getInte = fieldContext.getInternalHooks(HOOK_MARK),
-        getInitialValue = _fieldContext$getInte.getInitialValue;
-      if (getInitialValue(_this.getNamePath()) !== undefined) {
-        return true;
-      }
-      return false;
-    });
-    _defineProperty(_assertThisInitialized(_this), "getErrors", function () {
-      return _this.errors;
-    });
-    _defineProperty(_assertThisInitialized(_this), "getWarnings", function () {
-      return _this.warnings;
-    });
-    _defineProperty(_assertThisInitialized(_this), "isListField", function () {
-      return _this.props.isListField;
-    });
-    _defineProperty(_assertThisInitialized(_this), "isList", function () {
-      return _this.props.isList;
-    });
-    _defineProperty(_assertThisInitialized(_this), "isPreserve", function () {
-      return _this.props.preserve;
-    });
-    // ============================= Child Component =============================
-    _defineProperty(_assertThisInitialized(_this), "getMeta", function () {
-      // Make error & validating in cache to save perf
-      _this.prevValidating = _this.isFieldValidating();
-      var meta = {
-        touched: _this.isFieldTouched(),
-        validating: _this.prevValidating,
-        errors: _this.errors,
-        warnings: _this.warnings,
-        name: _this.getNamePath()
       };
-      return meta;
     });
-    // Only return validate child node. If invalidate, will do nothing about field.
-    _defineProperty(_assertThisInitialized(_this), "getOnlyChild", function (children) {
-      // Support render props
-      if (typeof children === 'function') {
-        var _meta = _this.getMeta();
-        return _objectSpread(_objectSpread({}, _this.getOnlyChild(children(_this.getControlled(), _meta, _this.props.fieldContext))), {}, {
-          isFunction: true
-        });
-      }
-
-      // Filed element only
-      var childList = Children.toArray(children);
-      if (childList.length !== 1 || ! /*#__PURE__*/isValidElement(childList[0])) {
-        // @ts-ignore
-        return {
-          child: childList,
-          isFunction: false
-        };
-      }
-
+    return control;
+  }, [validateTrigger, fieldContext, getNamePath, getValue, getValueProps, valuePropName, trigger, onClear, triggerMetaEvent, getValueFromEvent, normalize, rules]);
+  var getOnlyChild = useCallback(function (childs) {
+    if (typeof childs === 'function') {
+      var _meta = getMeta();
+      return _objectSpread(_objectSpread({}, getOnlyChild(childs(getControlled(), _meta, fieldContext))), {}, {
+        isFunction: true
+      });
+    }
+    var childList = Children.toArray(childs);
+    if (childList.length !== 1 || ! /*#__PURE__*/isValidElement(childList[0])) {
       // @ts-ignore
       return {
-        child: childList[0],
+        child: childList,
         isFunction: false
       };
-    });
-    // ============================== Field Control ==============================
-    _defineProperty(_assertThisInitialized(_this), "getValue", function (store) {
-      var getFieldsValue = _this.props.fieldContext.getFieldsValue;
-      var namePath = _this.getNamePath();
-      return getValue(store || getFieldsValue(true), namePath);
-    });
-    _defineProperty(_assertThisInitialized(_this), "getControlled", function () {
-      var childProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var _this$props6 = _this.props,
-        trigger = _this$props6.trigger,
-        validateTrigger = _this$props6.validateTrigger,
-        getValueFromEvent = _this$props6.getValueFromEvent,
-        normalize = _this$props6.normalize,
-        valuePropName = _this$props6.valuePropName,
-        getValueProps = _this$props6.getValueProps,
-        fieldContext = _this$props6.fieldContext;
-      var mergedValidateTrigger = validateTrigger !== undefined ? validateTrigger : fieldContext.validateTrigger;
-      var namePath = _this.getNamePath();
-      var getInternalHooks = fieldContext.getInternalHooks,
-        getFieldsValue = fieldContext.getFieldsValue;
-      var _getInternalHooks = getInternalHooks(HOOK_MARK),
-        dispatch = _getInternalHooks.dispatch;
-      var value = _this.getValue();
-      var mergedGetValueProps = getValueProps || function (val) {
-        return _defineProperty({}, valuePropName, val);
-      };
+    }
+
+    // @ts-ignore
+    return {
+      child: childList[0],
+      isFunction: false
+    };
+  }, [getMeta, getControlled, fieldContext]);
+  var validateRulesFunc = useCallback(function (options) {
+    // We should fixed namePath & value to avoid developer change then by form function
+    var namePath = getNamePath();
+    var currentValue = getValue();
 
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      var originTriggerFunc = childProps[trigger];
-      var control = _objectSpread(_objectSpread(_objectSpread({}, childProps), mergedGetValueProps(value)), {}, {
-        error: _this.errors.length > 0,
-        warning: _this.warnings.length > 0,
-        onClear: _this.onClear
+    // Force change to async to avoid rule OOD under renderProps field
+    var rootPromise = Promise.resolve().then(function () {
+      if (!mountedRef.current) {
+        return [];
+      }
+      var _ref2 = options || {},
+        triggerName = _ref2.triggerName;
+      var filteredRules = getRules();
+      if (triggerName) {
+        filteredRules = filteredRules.filter(function (rule) {
+          return rule;
+        }).filter(function (rule) {
+          var ruleValidateTrigger = rule.validateTrigger;
+          if (!ruleValidateTrigger) {
+            return true;
+          }
+          var triggerList = toArray(ruleValidateTrigger);
+          return triggerList.includes(triggerName);
+        });
+      }
+      var promise = validateRules(namePath, currentValue, filteredRules, options, validateFirst, messageVariables);
+      promise.catch(function (error) {
+        return error;
+      }).then(function () {
+        var ruleErrors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : EMPTY_ERRORS;
+        if (validatePromiseRef.current === rootPromise) {
+          var _ruleErrors$forEach;
+          validatePromiseRef.current = null;
+
+          // Get errors & warnings
+          var nextErrors = [];
+          var nextWarnings = [];
+          (_ruleErrors$forEach = ruleErrors.forEach) === null || _ruleErrors$forEach === void 0 || _ruleErrors$forEach.call(ruleErrors, function (_ref3) {
+            var warningOnly = _ref3.rule.warningOnly,
+              _ref3$errors = _ref3.errors,
+              errors = _ref3$errors === void 0 ? EMPTY_ERRORS : _ref3$errors;
+            if (warningOnly) {
+              nextWarnings.push.apply(nextWarnings, _toConsumableArray(errors));
+            } else {
+              nextErrors.push.apply(nextErrors, _toConsumableArray(errors));
+            }
+          });
+          errorsRef.current = nextErrors;
+          warningsRef.current = nextWarnings;
+          triggerMetaEvent();
+          reRender();
+        }
       });
+      return promise;
+    });
+    validatePromiseRef.current = rootPromise;
+    dirtyRef.current = true;
+    errorsRef.current = EMPTY_ERRORS;
+    warningsRef.current = EMPTY_ERRORS;
+    triggerMetaEvent();
+    // Force trigger re-render since we need sync renderProps with new meta
+    reRender();
+    return rootPromise;
+  }, [getNamePath, getValue, getRules, validateFirst, messageVariables, triggerMetaEvent, reRender]);
+  var onStoreChange = useCallback(function (prevStore, namePathList, info) {
+    var store = info.store;
+    var namePath = getNamePath();
+    var prevValue = getValue(prevStore);
+    var curValue = getValue(store);
+    var namePathMatch = namePathList && containsNamePath(namePathList, namePath);
+    if (info.type === 'valueUpdate' && info.source === 'external' && prevValue !== curValue) {
+      touchedRef.current = true;
+      dirtyRef.current = true;
+      validatePromiseRef.current = null;
+      errorsRef.current = EMPTY_ERRORS;
+      warningsRef.current = EMPTY_ERRORS;
+      triggerMetaEvent();
+    }
+    switch (info.type) {
+      case 'reset':
+        if (!namePathList || namePathMatch) {
+          touchedRef.current = false;
+          dirtyRef.current = false;
+          validatePromiseRef.current = null;
+          errorsRef.current = EMPTY_ERRORS;
+          warningsRef.current = EMPTY_ERRORS;
+          triggerMetaEvent();
+          onReset === null || onReset === void 0 || onReset();
+          refresh();
+          return;
+        }
+        break;
 
-      // Add trigger
-      control[trigger] = function () {
-        // Mark as touched
-        _this.touched = true;
-        _this.dirty = true;
-        _this.triggerMetaEvent();
-        var newValue;
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
+      /**
+       * In case field with `preserve = false` nest deps like:
+       * - A = 1 => show B
+       * - B = 1 => show C
+       * - Reset A, need clean B, C
+       */
+      case 'remove':
+        if (shouldUpdate) {
+          reRender();
+          return;
         }
-        if (getValueFromEvent) {
-          newValue = getValueFromEvent.apply(void 0, args);
-        } else {
-          newValue = defaultGetValueFromEvent.apply(void 0, [valuePropName].concat(args));
+        break;
+      case 'setField':
+        {
+          if (namePathMatch) {
+            var data = info.data;
+            if ('touched' in data) {
+              touchedRef.current = data.touched;
+            }
+            if ('validating' in data && !('originRCField' in data)) {
+              validatePromiseRef.current = data.validating ? Promise.resolve([]) : null;
+            }
+            if ('errors' in data) {
+              errorsRef.current = data.errors || EMPTY_ERRORS;
+            }
+            if ('warnings' in data) {
+              warningsRef.current = data.warnings || EMPTY_ERRORS;
+            }
+            dirtyRef.current = true;
+            triggerMetaEvent();
+            reRender();
+            return;
+          }
+          if (shouldUpdate && !namePath.length && requireUpdate(shouldUpdate, prevStore, store, prevValue, curValue, info)) {
+            reRender();
+            return;
+          }
+          break;
         }
-        if (normalize) {
-          newValue = normalize(newValue, value, getFieldsValue(true));
+      case 'dependenciesUpdate':
+        {
+          /**
+           * Trigger when marked `dependencies` updated. Related fields will all update
+           */
+          var dependencyList = dependencies.map(getNameArray);
+          // No need for `namePathMath` check and `shouldUpdate` check, since `valueUpdate` will be
+          // emitted earlier and they will work there
+          // If set it may cause unnecessary twice rerendering
+          if (dependencyList.some(function (dependency) {
+            return containsNamePath(info.relatedFields, dependency);
+          })) {
+            reRender();
+            return;
+          }
+          break;
         }
-        dispatch({
-          type: 'updateValue',
-          namePath: namePath,
-          value: newValue
-        });
-        if (originTriggerFunc) {
-          originTriggerFunc.apply(void 0, args);
+      default:
+        // 1. If `namePath` exists in `namePathList`, means it's related value and should update
+        //      For example <List name="list"><Field name={['list', 0]}/>
+        //      If `namePathList` is [['list']] (List value update), Field should be updated
+        //      If `namePathList` is [['list', 0]] (Field value update), List shouldn't be updated
+        // 2.
+        //   2.1 If `dependencies` is set, `name` is not set and `shouldUpdate` is not set,
+        //       don't use `shouldUpdate`. `dependencies` is view as a shortcut if `shouldUpdate`
+        //       is not provided
+        //   2.2 If `shouldUpdate` provided, use customize logic to update the field
+        //       else to check if value changed
+        if (namePathMatch || (!dependencies.length || namePath.length || shouldUpdate) && requireUpdate(shouldUpdate, prevStore, store, prevValue, curValue, info)) {
+          reRender();
+          return;
         }
+        break;
+    }
+    if (shouldUpdate === true) {
+      reRender();
+    }
+  }, [getNamePath, getValue, dependencies, shouldUpdate, triggerMetaEvent, onReset, refresh, reRender]);
+  var getLabelWidth = useCallback(function () {
+    var _props$labelPosition;
+    var labelWidthContext = fieldContext.labelWidth,
+      contextLabelPos = fieldContext.labelPosition;
+    var labelPosition = (_props$labelPosition = props.labelPosition) !== null && _props$labelPosition !== void 0 ? _props$labelPosition : contextLabelPos;
+    if (labelPosition === 'top') {
+      return 0;
+    }
+    if (isNotEmpty(props.labelWidth)) {
+      return addUnit(props.labelWidth);
+    }
+    if (pure === true) {
+      return 0;
+    }
+    return labelWidthContext;
+  }, [fieldContext, props.labelPosition, props.labelWidth, pure]);
+  var getValidateLabel = useCallback(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Transition, {
+      nodeRef: errorRef,
+      name: b('slide-up'),
+      visible: errorsRef.current.length > 0,
+      transitionAppear: true,
+      unmountOnExit: true,
+      display: ""
+    }, /*#__PURE__*/React.createElement("label", {
+      ref: errorRef,
+      className: e(_templateObject || (_templateObject = _taggedTemplateLiteral(["error"]))),
+      style: errorStyle
+    }, head(errorsRef.current))), /*#__PURE__*/React.createElement(Transition, {
+      nodeRef: warningRef,
+      name: b('slide-up'),
+      visible: warningsRef.current.length > 0,
+      transitionAppear: true,
+      unmountOnExit: true,
+      display: ""
+    }, /*#__PURE__*/React.createElement("label", {
+      ref: warningRef,
+      className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["warning"]))),
+      style: warningStyle
+    }, head(warningsRef.current))));
+  }, [b, e, errorStyle, warningStyle]);
+  useMount(function () {
+    mountedRef.current = true;
+    if (fieldContext) {
+      var _fieldContext$getInte4 = fieldContext.getInternalHooks(HOOK_MARK),
+        initEntityValue = _fieldContext$getInte4.initEntityValue,
+        registerField = _fieldContext$getInte4.registerField;
+      var fieldEntity = {
+        onStoreChange: onStoreChange,
+        isFieldTouched: isFieldTouched,
+        isFieldDirty: isFieldDirty,
+        isFieldValidating: isFieldValidating,
+        isListField: function isListField() {
+          return props.isListField;
+        },
+        isList: function isList() {
+          return props.isList;
+        },
+        isPreserve: function isPreserve() {
+          return props.preserve;
+        },
+        validateRules: validateRulesFunc,
+        getMeta: getMeta,
+        getNamePath: getNamePath,
+        getErrors: getErrors,
+        getWarnings: getWarnings,
+        containerRef: containerRef,
+        props: _objectSpread(_objectSpread({
+          label: props.label,
+          dependencies: props.dependencies,
+          initialValue: props.initialValue
+        }, props), {}, {
+          name: name,
+          rules: rules,
+          scrollToError: fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.scrollToError
+        })
       };
-
-      // Add validateTrigger
-      var validateTriggerList = toArray(mergedValidateTrigger || []);
-      validateTriggerList.forEach(function (triggerName) {
-        // Wrap additional function of component, so that we can get latest value from store
-        var originTrigger = control[triggerName];
-        control[triggerName] = function () {
-          if (originTrigger) {
-            originTrigger.apply(void 0, arguments);
-          }
-
-          // Always use latest rules
-          var rules = _this.props.rules;
-          if (rules && rules.length) {
-            // We dispatch validate to root,
-            // since it will update related data with other field with same name
-            dispatch({
-              type: 'validateField',
-              namePath: namePath,
-              triggerName: triggerName
-            });
-          }
-        };
-      });
-      return control;
-    });
-    _defineProperty(_assertThisInitialized(_this), "onClear", function () {
-      var _this$props7, _this$props7$onClear;
-      _this.touched = true;
-      var getInternalHooks = _this.props.fieldContext.getInternalHooks;
-      var _getInternalHooks2 = getInternalHooks(HOOK_MARK),
-        dispatch = _getInternalHooks2.dispatch;
-      dispatch({
-        type: 'updateValue',
-        namePath: _this.getNamePath(),
-        value: ''
-      });
-      // @ts-ignore
-      (_this$props7 = _this.props) === null || _this$props7 === void 0 || (_this$props7 = _this$props7.children) === null || _this$props7 === void 0 || (_this$props7 = _this$props7.props) === null || _this$props7 === void 0 || (_this$props7$onClear = _this$props7.onClear) === null || _this$props7$onClear === void 0 || _this$props7$onClear.call(_this$props7);
-    });
-    _defineProperty(_assertThisInitialized(_this), "getLabelWidth", function () {
-      var _this$props$labelPosi;
-      var _this$props8 = _this.props,
-        pure = _this$props8.pure,
-        fieldContext = _this$props8.fieldContext,
-        labelWidth = _this$props8.labelWidth;
-      var labelWidthContext = fieldContext.labelWidth,
-        contextLabelPos = fieldContext.labelPosition;
-      var labelPosition = (_this$props$labelPosi = _this.props.labelPosition) !== null && _this$props$labelPosi !== void 0 ? _this$props$labelPosi : contextLabelPos;
-      if (labelPosition === 'top') {
-        return 0;
-      } else if (isNotEmpty(labelWidth)) {
-        return addUnit(labelWidth);
-      } else if (pure === true) {
-        return 0;
-      } else {
-        return labelWidthContext;
+      initEntityValue(fieldEntity);
+      cancelRegisterFuncRef.current = registerField(fieldEntity);
+      if (shouldUpdate === true) {
+        reRender();
       }
+    }
+  });
+  useUnmount(function () {
+    cancelRegister();
+    triggerMetaEvent(true);
+    mountedRef.current = false;
+  });
+  var sizeContext = fieldContext.size,
+    contextLabelPos = fieldContext.labelPosition,
+    colonContext = fieldContext.colon,
+    hideRequiredAsterisk = fieldContext.hideRequiredAsterisk,
+    requireAsteriskPosition = fieldContext.requireAsteriskPosition,
+    contextShowMessage = fieldContext.showMessage;
+  var labelWidth = getLabelWidth();
+  var labelPosition = useMemo(function () {
+    var _props$labelPosition2;
+    return (_props$labelPosition2 = props.labelPosition) !== null && _props$labelPosition2 !== void 0 ? _props$labelPosition2 : contextLabelPos;
+  }, [props.labelPosition, contextLabelPos]);
+  var showMessage = useMemo(function () {
+    var _props$showMessage;
+    return (_props$showMessage = props.showMessage) !== null && _props$showMessage !== void 0 ? _props$showMessage : contextShowMessage;
+  }, [props.showMessage, contextShowMessage]);
+  var isRequired = useMemo(function () {
+    return props.required || getRules().some(function (item) {
+      return item.required;
     });
-    _defineProperty(_assertThisInitialized(_this), "getValidateLable", function () {
-      var _this$props9 = _this.props,
-        errorStyle = _this$props9.errorStyle,
-        warningStyle = _this$props9.warningStyle;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Transition, {
-        nodeRef: _this.errorRef,
-        name: b('slide-up'),
-        visible: _this.errors.length > 0,
-        transitionAppear: true,
-        unmountOnExit: true,
-        display: ""
-      }, /*#__PURE__*/React.createElement("label", {
-        ref: _this.errorRef,
-        className: e(_templateObject || (_templateObject = _taggedTemplateLiteral(["error"]))),
-        style: errorStyle
-      }, head(_this.errors))), /*#__PURE__*/React.createElement(Transition, {
-        nodeRef: _this.warningRef,
-        name: b('slide-up'),
-        visible: _this.warnings.length > 0,
-        transitionAppear: true,
-        unmountOnExit: true,
-        display: ""
-      }, /*#__PURE__*/React.createElement("label", {
-        ref: _this.warningRef,
-        className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["warning"]))),
-        style: warningStyle
-      }, head(_this.warnings))));
-    });
-    if (props.fieldContext) {
-      var getInternalHooks = props.fieldContext.getInternalHooks;
-      var _getInternalHooks3 = getInternalHooks(HOOK_MARK),
-        initEntityValue = _getInternalHooks3.initEntityValue;
-      initEntityValue(_assertThisInitialized(_this));
+  }, [props.required, getRules]);
+  var returnChildNode = useCallback(function () {
+    var _getOnlyChild = getOnlyChild(children),
+      child = _getOnlyChild.child,
+      isFunction = _getOnlyChild.isFunction;
+    if (isFunction) {
+      return child;
+    } else if ( /*#__PURE__*/isValidElement(child)) {
+      return /*#__PURE__*/cloneElement(child, getControlled(child.props));
+    } else {
+      return child;
     }
-    _this.warningRef = /*#__PURE__*/createRef();
-    _this.errorRef = /*#__PURE__*/createRef();
-    _this.containerRef = /*#__PURE__*/createRef();
-    return _this;
-  }
-  _createClass(Field, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props10 = this.props,
-        shouldUpdate = _this$props10.shouldUpdate,
-        fieldContext = _this$props10.fieldContext;
-      this.mounted = true;
-
-      // Register on init
-      if (fieldContext) {
-        var getInternalHooks = fieldContext.getInternalHooks;
-        var _getInternalHooks4 = getInternalHooks(HOOK_MARK),
-          registerField = _getInternalHooks4.registerField;
-        this.cancelRegisterFunc = registerField(this);
-      }
-
-      // One more render for component in case fields not ready
-      if (shouldUpdate === true) {
-        this.reRender();
-      }
+  }, [getOnlyChild, children, getControlled]);
+  var computedValidateState = useCallback(function () {
+    if (validateState) {
+      return validateState;
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.cancelRegister();
-      this.triggerMetaEvent(true);
-      this.mounted = false;
+    if (isFieldValidating()) {
+      return 'validating';
     }
-  }, {
-    key: "reRender",
-    value: function reRender() {
-      if (!this.mounted) {
-        return;
-      }
-      this.forceUpdate();
+    if (errorsRef.current.length > 0) {
+      return 'error';
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props$labelPosi2, _this$props$showMessa;
-      var resetCount = this.state.resetCount;
-      var _this$props11 = this.props,
-        children = _this$props11.children,
-        label = _this$props11.label,
-        center = _this$props11.center,
-        className = _this$props11.className,
-        style = _this$props11.style,
-        noStyle = _this$props11.noStyle,
-        fieldContext = _this$props11.fieldContext,
-        _this$props11$labelSt = _this$props11.labelStyle,
-        labelStyle = _this$props11$labelSt === void 0 ? {} : _this$props11$labelSt,
-        _this$props11$colon = _this$props11.colon,
-        colon = _this$props11$colon === void 0 ? false : _this$props11$colon,
-        size = _this$props11.size,
-        help = _this$props11.help,
-        pure = _this$props11.pure;
-      var sizeContext = fieldContext.size,
-        contextLabelPos = fieldContext.labelPosition,
-        colonContext = fieldContext.colon,
-        hideRequiredAsterisk = fieldContext.hideRequiredAsterisk,
-        requireAsteriskPosition = fieldContext.requireAsteriskPosition,
-        contextShowMessage = fieldContext.showMessage;
-      var labelWidth = this.getLabelWidth();
-      var labelPosition = (_this$props$labelPosi2 = this.props.labelPosition) !== null && _this$props$labelPosi2 !== void 0 ? _this$props$labelPosi2 : contextLabelPos;
-      var showMessage = (_this$props$showMessa = this.props.showMessage) !== null && _this$props$showMessa !== void 0 ? _this$props$showMessa : contextShowMessage;
-      var _this$getOnlyChild = this.getOnlyChild(children),
-        child = _this$getOnlyChild.child,
-        isFunction = _this$getOnlyChild.isFunction;
-
-      // 是否必输项
-      var isRequired = this.props.required || this.getRules().some(function (item) {
-        return item.required;
-      });
-
-      // Not need to `cloneElement` since user can handle this in render function self
-      var returnChildNode;
-      if (isFunction) {
-        returnChildNode = child;
-      } else if ( /*#__PURE__*/isValidElement(child)) {
-        returnChildNode = /*#__PURE__*/cloneElement(child, this.getControlled(child.props));
-      } else {
-        // warning(!child, '当前包裹的组件不是合法的表单组件！');
-        returnChildNode = child;
-      }
-      return noStyle ? /*#__PURE__*/React.createElement(FormItemContext.Provider, {
-        key: resetCount,
-        value: {
-          size: size
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        ref: this.containerRef,
-        className: e('nostyle')
-      }, returnChildNode, showMessage ? this.getValidateLable() : null)) : /*#__PURE__*/React.createElement(FormItemContext.Provider, {
-        key: resetCount,
-        value: {
-          size: size
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        ref: this.containerRef,
-        className: classNames(b('form-item'), _defineProperty(_defineProperty({
-          'is-required': isRequired && !hideRequiredAsterisk
-        }, m("label-".concat(labelPosition)), this.props.labelPosition), m(sizeContext !== null && sizeContext !== void 0 ? sizeContext : size), sizeContext !== null && sizeContext !== void 0 ? sizeContext : size), 'asterisk-' + requireAsteriskPosition, className),
-        style: style
-      }, label && !pure && /*#__PURE__*/React.createElement("label", {
-        className: e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["label"]))),
-        style: ['left', 'right'].includes(labelPosition) ? _objectSpread({
-          width: labelWidth
-        }, labelStyle) : labelStyle
-      }, typeof label === 'string' || typeof label === 'number' ? "".concat(label).concat((colonContext !== null && colonContext !== void 0 ? colonContext : colon) ? '：' : '') : label, help && /*#__PURE__*/React.createElement(Tooltip, {
-        className: e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["label--help"]))),
-        content: help,
-        placement: "top",
-        enterable: true
-      }, /*#__PURE__*/React.createElement(Icon, {
-        name: "circle-exclamation",
-        prefix: "fas"
-      }))), /*#__PURE__*/React.createElement("div", {
-        className: classNames(e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["content"]))), {
-          'is-center': center
-        })
-        // 没有文本或者表单布局不是top的时候需要添加marginLeft
-        ,
-        style: !label ? {
-          marginLeft: labelWidth
-        } : {}
-      }, /*#__PURE__*/React.createElement(React.Fragment, null, Children.map(returnChildNode, function (item) {
-        return item;
-      }), showMessage ? this.getValidateLable() : null))));
+    if (warningsRef.current.length > 0) {
+      return 'error';
+    }
+    if (!isFieldValidating() && touchedRef.current && errorsRef.current.length === 0 && warningsRef.current.length === 0) {
+      return 'success';
     }
-  }]);
-  return Field;
-}(React.Component);
-_defineProperty(Field, "contextType", FieldContext);
-_defineProperty(Field, "defaultProps", {
-  trigger: 'onChange',
-  valuePropName: 'value'
-});
-function InternalFormItem(_ref5) {
-  var _fieldContext$rules;
-  var name = _ref5.name,
-    _ref5$rules = _ref5.rules,
-    rules = _ref5$rules === void 0 ? [] : _ref5$rules,
-    restProps = _objectWithoutProperties(_ref5, _excluded);
+    return '';
+  }, [isFieldValidating, validateState]);
+  var contextValue = {
+    size: size,
+    hasLabel: !!label,
+    labelPosition: labelPosition,
+    validateState: computedValidateState(),
+    computedWidth: computedWidth,
+    setComputedWidth: setComputedWidth,
+    oldWidthRef: oldWidthRef
+  };
+  return noStyle ? /*#__PURE__*/React.createElement(FormItemContext.Provider, {
+    key: resetCount,
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: classNames(b(), e('nostyle'), is({
+      error: errorsRef.current.length > 0,
+      warning: warningsRef.current.length > 0,
+      validating: !isFieldValidating() && touchedRef.current && errorsRef.current.length === 0 && warningsRef.current.length === 0,
+      success: errorsRef.current.length === 0 && warningsRef.current.length === 0
+    }), _defineProperty({}, m('feedback'), fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.statusIcon))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["content"]))))
+  }, returnChildNode()), showMessage ? getValidateLabel() : null)) : /*#__PURE__*/React.createElement(FormItemContext.Provider, {
+    key: resetCount,
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: classNames(b(), is({
+      error: errorsRef.current.length > 0,
+      warning: warningsRef.current.length > 0,
+      validating: !isFieldValidating() && touchedRef.current && errorsRef.current.length === 0 && warningsRef.current.length === 0,
+      success: errorsRef.current.length === 0 && warningsRef.current.length === 0,
+      required: isRequired,
+      'no-asterisk': hideRequiredAsterisk
+    }), _defineProperty(_defineProperty(_defineProperty({}, m('feedback'), fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.statusIcon), m("label-".concat(labelPosition)), labelPosition), m(sizeContext !== null && sizeContext !== void 0 ? sizeContext : size), sizeContext !== null && sizeContext !== void 0 ? sizeContext : size), requireAsteriskPosition === 'right' ? 'asterisk-right' : 'asterisk-left', className),
+    style: style
+  }, /*#__PURE__*/React.createElement(FormLabelWrap, {
+    key: key,
+    isAutoWidth: labelWidth === 'auto',
+    updateAll: fieldContext.labelWidth === 'auto'
+  }, label && !pure && /*#__PURE__*/React.createElement("label", {
+    className: e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["label"]))),
+    style: ['left', 'right'].includes(labelPosition) ? _objectSpread({
+      width: labelWidth
+    }, labelStyle) : labelStyle
+  }, typeof label === 'string' || typeof label === 'number' ? "".concat(label).concat((colonContext !== null && colonContext !== void 0 ? colonContext : colon) ? '：' : '') : label, help && /*#__PURE__*/React.createElement(Tooltip, {
+    className: e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["label--help"]))),
+    content: help,
+    placement: "top",
+    enterable: true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "circle-question",
+    prefix: "fas"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: classNames(e(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["content"])))),
+    style: !label ? {
+      marginLeft: labelWidth
+    } : {}
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, Children.map(returnChildNode(), function (item) {
+    return item;
+  }), showMessage ? getValidateLabel() : null))));
+}
+function InternalFormItem(_ref4) {
+  var _fieldContext$rules2;
+  var name = _ref4.name,
+    _ref4$rules = _ref4.rules,
+    rules = _ref4$rules === void 0 ? [] : _ref4$rules,
+    restProps = _objectWithoutProperties(_ref4, _excluded);
+  var formContext = useContext(FormContext);
   var fieldContext = useContext(FieldContext);
-  var namePath = name !== undefined ? getNamePath(name) : undefined;
+  var namePath = name !== undefined ? getNameArray(name) : undefined;
   var key = 'keep';
   if (!restProps.isListField) {
     key = "_".concat((namePath || []).join('_'));
@@ -715,17 +700,15 @@ function InternalFormItem(_ref5) {
   // Warning if it's a directly list field.
   // We can still support multiple level field preserve.
   if (process.env.NODE_ENV !== 'production' && restProps.preserve === false && restProps.isListField && namePath.length <= 1) {
-    warning(false, '`preserve` should not apply on Form.List fields.');
+    warning(false, '`preserve` should not apply on ElFormList fields.');
   }
-  var formRules = (namePath === null || namePath === void 0 ? void 0 : namePath.length) > 0 ? get((_fieldContext$rules = fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.rules) !== null && _fieldContext$rules !== void 0 ? _fieldContext$rules : {}, namePath) : undefined;
+  var formRules = (namePath === null || namePath === void 0 ? void 0 : namePath.length) > 0 ? get((_fieldContext$rules2 = fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.rules) !== null && _fieldContext$rules2 !== void 0 ? _fieldContext$rules2 : {}, namePath) : undefined;
   return /*#__PURE__*/React.createElement(Field, _extends({
     key: key,
     name: namePath,
     rules: [].concat(_toConsumableArray(formRules || []), _toConsumableArray(rules))
-  }, restProps, {
-    fieldContext: fieldContext
-  }));
+  }, restProps));
 }
-var FormItem = /*#__PURE__*/memo(InternalFormItem);
+var FormItem = /*#__PURE__*/memo(Field);
 FormItem.displayName = 'ElFormItem';
 export default FormItem;