@qsxy/element-plus-react 1.0.0-next.10 → 1.0.0-next.11

package/dist/Form/FormItem.js

@@ -1,463 +1,731 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Form/FormItem.tsx
-var FormItem_exports = {};
-__export(FormItem_exports, {
-  default: () => FormItem_default
-});
-module.exports = __toCommonJS(FormItem_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_head = __toESM(require("lodash/head"));
-var import_react = __toESM(require("react"));
-var import_Icon = require("../Icon");
-var import_Tooltip = __toESM(require("../Tooltip/Tooltip"));
-var import_Transition = require("../Transition");
-var import_Util = require("../Util");
-var import_FieldContext = __toESM(require("./FieldContext"));
-var import_FormItemContext = require("./FormItemContext");
-var import_classUtil = require("./utils/classUtil");
-var import_typeUtil = require("./utils/typeUtil");
-var import_validateUtil = require("./utils/validateUtil");
-var import_valueUtil = require("./utils/valueUtil");
+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); }
+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 _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 classNames from 'classnames';
+import head from 'lodash/head';
+import React, { Children, cloneElement, createRef, isValidElement, memo, useContext } 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 { FormItemContext } from "./FormItemContext";
+import { b, e, m } from "./utils/classUtil";
+import get from "./utils/get";
+import { toArray } from "./utils/typeUtil";
+import { validateRules } from "./utils/validateUtil";
+import { containsNamePath, defaultGetValueFromEvent, getNamePath, getValue } from "./utils/valueUtil";
 var EMPTY_ERRORS = [];
 function requireUpdate(shouldUpdate, prev, next, prevValue, nextValue, info) {
-  if (typeof shouldUpdate === "function") {
-    return shouldUpdate(prev, next, "source" in info ? { source: info.source } : {});
+  if (typeof shouldUpdate === 'function') {
+    return shouldUpdate(prev, next, 'source' in info ? {
+      source: info.source
+    } : {});
   }
   return prevValue !== nextValue;
 }
-var Field = class extends import_react.default.Component {
+
+// 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 ==============================
-  constructor(props) {
-    super(props);
-    this.state = {
+  function Field(props) {
+    var _this;
+    _classCallCheck(this, Field);
+    _this = _super.call(this, props);
+
+    // Register on init
+    _defineProperty(_assertThisInitialized(_this), "state", {
       resetCount: 0
-    };
-    this.cancelRegisterFunc = null;
-    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), "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.
      */
-    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), "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.
      */
-    this.dirty = false;
-    this.validatePromise = null;
-    this.errors = EMPTY_ERRORS;
-    this.warnings = EMPTY_ERRORS;
-    this.cancelRegister = () => {
-      const { preserve, isListField, name } = this.props;
-      if (this.cancelRegisterFunc) {
-        this.cancelRegisterFunc(isListField, preserve, (0, import_valueUtil.getNamePath)(name));
+    _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));
       }
-      this.cancelRegisterFunc = null;
-    };
+      _this.cancelRegisterFunc = null;
+    });
     // ================================== Utils ==================================
-    this.getNamePath = () => {
-      const { name, fieldContext } = this.props;
-      const { prefixName = [] } = fieldContext;
-      return name !== void 0 ? [...prefixName, ...name] : [];
-    };
-    this.getRules = () => {
-      const { rules = [], fieldContext } = this.props;
-      return rules.map((rule) => {
-        if (typeof rule === "function") {
+    _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)) : [];
+    });
+    _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;
       });
-    };
-    this.refresh = () => {
-      if (!this.mounted) {
+    });
+    _defineProperty(_assertThisInitialized(_this), "refresh", function () {
+      if (!_this.mounted) {
         return;
       }
-      this.setState(({ resetCount }) => ({
-        resetCount: resetCount + 1
+
+      /**
+       * Clean up current node.
+       */
+      _this.setState(function (_ref) {
+        var resetCount = _ref.resetCount;
+        return {
+          resetCount: resetCount + 1
+        };
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "triggerMetaEvent", function (destroy) {
+      var onMetaChange = _this.props.onMetaChange;
+      onMetaChange === null || onMetaChange === void 0 || onMetaChange(_objectSpread(_objectSpread({}, _this.getMeta()), {}, {
+        destroy: destroy
       }));
-    };
-    this.triggerMetaEvent = (destroy) => {
-      const { onMetaChange } = this.props;
-      onMetaChange == null ? void 0 : onMetaChange({ ...this.getMeta(), destroy });
-    };
+    });
     // ========================= Field Entity Interfaces =========================
     // Trigger by store update. Check if need update the component
-    this.onStoreChange = (prevStore, namePathList, info) => {
-      const { shouldUpdate, dependencies = [], onReset } = this.props;
-      const { store } = info;
-      const namePath = this.getNamePath();
-      const prevValue = this.getValue(prevStore);
-      const curValue = this.getValue(store);
-      const namePathMatch = namePathList && (0, import_valueUtil.containsNamePath)(namePathList, namePath);
-      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();
+    _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();
       }
       switch (info.type) {
-        case "reset":
+        case 'reset':
           if (!namePathList || namePathMatch) {
-            this.touched = false;
-            this.dirty = false;
-            this.validatePromise = null;
-            this.errors = EMPTY_ERRORS;
-            this.warnings = EMPTY_ERRORS;
-            this.triggerMetaEvent();
-            onReset == null ? void 0 : onReset();
-            this.refresh();
+            // 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;
-        case "remove": {
-          if (shouldUpdate) {
-            this.reRender();
-            return;
-          }
-          break;
-        }
-        case "setField": {
-          if (namePathMatch) {
-            const { data } = info;
-            if ("touched" in data) {
-              this.touched = data.touched;
-            }
-            if ("validating" in data && !("originRCField" in data)) {
-              this.validatePromise = data.validating ? Promise.resolve([]) : null;
+
+        /**
+         * 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;
             }
-            if ("errors" in data) {
-              this.errors = data.errors || EMPTY_ERRORS;
+            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;
             }
-            if ("warnings" in data) {
-              this.warnings = data.warnings || EMPTY_ERRORS;
+
+            // Handle update by `setField` with `shouldUpdate`
+            if (shouldUpdate && !namePath.length && requireUpdate(shouldUpdate, prevStore, store, prevValue, curValue, info)) {
+              _this.reRender();
+              return;
             }
-            this.dirty = true;
-            this.triggerMetaEvent();
-            this.reRender();
-            return;
+            break;
           }
-          if (shouldUpdate && !namePath.length && requireUpdate(shouldUpdate, prevStore, store, prevValue, curValue, info)) {
-            this.reRender();
-            return;
-          }
-          break;
-        }
-        case "dependenciesUpdate": {
-          const dependencyList = dependencies.map(import_valueUtil.getNamePath);
-          if (dependencyList.some((dependency) => (0, import_valueUtil.containsNamePath)(info.relatedFields, dependency))) {
-            this.reRender();
-            return;
+        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;
           }
-          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();
+            _this.reRender();
             return;
           }
           break;
       }
       if (shouldUpdate === true) {
-        this.reRender();
+        _this.reRender();
       }
-    };
-    this.validateRules = (options) => {
-      const namePath = this.getNamePath();
-      const currentValue = this.getValue();
-      const rootPromise = Promise.resolve().then(() => {
-        if (!this.mounted) {
+    });
+    _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 [];
         }
-        const { validateFirst = false, messageVariables } = this.props;
-        const { triggerName } = options || {};
-        let filteredRules = this.getRules();
+        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((rule) => rule).filter((rule) => {
-            const { validateTrigger } = rule;
+          filteredRules = filteredRules.filter(function (rule) {
+            return rule;
+          }).filter(function (rule) {
+            var validateTrigger = rule.validateTrigger;
             if (!validateTrigger) {
               return true;
             }
-            const triggerList = (0, import_typeUtil.toArray)(validateTrigger);
+            var triggerList = toArray(validateTrigger);
             return triggerList.includes(triggerName);
           });
         }
-        const promise = (0, import_validateUtil.validateRules)(namePath, currentValue, filteredRules, options, validateFirst, messageVariables);
-        promise.catch((e2) => e2).then((ruleErrors = EMPTY_ERRORS) => {
-          var _a;
-          if (this.validatePromise === rootPromise) {
-            this.validatePromise = null;
-            const nextErrors = [];
-            const nextWarnings = [];
-            (_a = ruleErrors.forEach) == null ? void 0 : _a.call(ruleErrors, ({ rule: { warningOnly }, errors = EMPTY_ERRORS }) => {
+        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(...errors);
+                nextWarnings.push.apply(nextWarnings, _toConsumableArray(errors));
               } else {
-                nextErrors.push(...errors);
+                nextErrors.push.apply(nextErrors, _toConsumableArray(errors));
               }
             });
-            this.errors = nextErrors;
-            this.warnings = nextWarnings;
-            this.triggerMetaEvent();
-            this.reRender();
+            _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();
-      this.reRender();
+      _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;
-    };
-    this.isFieldValidating = () => !!this.validatePromise;
-    this.isFieldTouched = () => this.touched;
-    this.isFieldDirty = () => {
-      if (this.dirty || this.props.initialValue !== void 0) {
+    });
+    _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;
       }
-      const { fieldContext } = this.props;
-      const { getInitialValue } = fieldContext.getInternalHooks(import_FieldContext.HOOK_MARK);
-      if (getInitialValue(this.getNamePath()) !== void 0) {
+
+      // 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;
-    };
-    this.getErrors = () => this.errors;
-    this.getWarnings = () => this.warnings;
-    this.isListField = () => this.props.isListField;
-    this.isList = () => this.props.isList;
-    this.isPreserve = () => this.props.preserve;
+    });
+    _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 =============================
-    this.getMeta = () => {
-      this.prevValidating = this.isFieldValidating();
-      const meta = {
-        touched: this.isFieldTouched(),
-        validating: this.prevValidating,
-        errors: this.errors,
-        warnings: this.warnings,
-        name: this.getNamePath()
+    _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.
-    this.getOnlyChild = (children) => {
-      if (typeof children === "function") {
-        const meta = this.getMeta();
-        return {
-          ...this.getOnlyChild(children(this.getControlled(), meta, this.props.fieldContext)),
+    _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
-        };
+        });
       }
-      const childList = import_react.Children.toArray(children);
-      if (childList.length !== 1 || !(0, import_react.isValidElement)(childList[0])) {
-        return { child: childList, isFunction: false };
+
+      // Filed element only
+      var childList = Children.toArray(children);
+      if (childList.length !== 1 || ! /*#__PURE__*/isValidElement(childList[0])) {
+        // @ts-ignore
+        return {
+          child: childList,
+          isFunction: false
+        };
       }
-      return { child: childList[0], isFunction: false };
-    };
+
+      // @ts-ignore
+      return {
+        child: childList[0],
+        isFunction: false
+      };
+    });
     // ============================== Field Control ==============================
-    this.getValue = (store) => {
-      const { getFieldsValue } = this.props.fieldContext;
-      const namePath = this.getNamePath();
-      return (0, import_valueUtil.getValue)(store || getFieldsValue(true), namePath);
-    };
-    this.getControlled = (childProps = {}) => {
-      const { trigger, validateTrigger, getValueFromEvent, normalize, valuePropName, getValueProps, fieldContext } = this.props;
-      const mergedValidateTrigger = validateTrigger !== void 0 ? validateTrigger : fieldContext.validateTrigger;
-      const namePath = this.getNamePath();
-      const { getInternalHooks, getFieldsValue } = fieldContext;
-      const { dispatch } = getInternalHooks(import_FieldContext.HOOK_MARK);
-      const value = this.getValue();
-      const mergedGetValueProps = getValueProps || ((val) => ({ [valuePropName]: val }));
-      const originTriggerFunc = childProps[trigger];
-      const control = {
-        ...childProps,
-        ...mergedGetValueProps(value),
-        error: this.errors.length > 0,
-        warning: this.warnings.length > 0,
-        onClear: this.onClear
+    _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);
       };
-      control[trigger] = (...args) => {
-        this.touched = true;
-        this.dirty = true;
-        this.triggerMetaEvent();
-        let newValue;
+
+      // 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
+      });
+
+      // 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];
+        }
         if (getValueFromEvent) {
-          newValue = getValueFromEvent(...args);
+          newValue = getValueFromEvent.apply(void 0, args);
         } else {
-          newValue = (0, import_valueUtil.defaultGetValueFromEvent)(valuePropName, ...args);
+          newValue = defaultGetValueFromEvent.apply(void 0, [valuePropName].concat(args));
         }
         if (normalize) {
           newValue = normalize(newValue, value, getFieldsValue(true));
         }
         dispatch({
-          type: "updateValue",
-          namePath,
+          type: 'updateValue',
+          namePath: namePath,
           value: newValue
         });
         if (originTriggerFunc) {
-          originTriggerFunc(...args);
+          originTriggerFunc.apply(void 0, args);
         }
       };
-      const validateTriggerList = (0, import_typeUtil.toArray)(mergedValidateTrigger || []);
-      validateTriggerList.forEach((triggerName) => {
-        const originTrigger = control[triggerName];
-        control[triggerName] = (...args) => {
+
+      // 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(...args);
+            originTrigger.apply(void 0, arguments);
           }
-          const { rules } = this.props;
+
+          // 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,
-              triggerName
+              type: 'validateField',
+              namePath: namePath,
+              triggerName: triggerName
             });
           }
         };
       });
       return control;
-    };
-    this.onClear = () => {
-      var _a, _b, _c, _d;
-      this.touched = true;
-      const { getInternalHooks } = this.props.fieldContext;
-      const { dispatch } = getInternalHooks(import_FieldContext.HOOK_MARK);
+    });
+    _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: ""
+        type: 'updateValue',
+        namePath: _this.getNamePath(),
+        value: ''
       });
-      (_d = (_c = (_b = (_a = this.props) == null ? void 0 : _a.children) == null ? void 0 : _b.props) == null ? void 0 : _c.onClear) == null ? void 0 : _d.call(_c);
-    };
-    this.getLabelWidth = () => {
-      const { pure, fieldContext, labelWidth } = this.props;
-      const { labelWidth: labelWidthContext, labelPosition } = fieldContext;
-      if (labelPosition === "top") {
+      // @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 ((0, import_Util.isNotEmpty)(labelWidth)) {
-        return labelWidth;
+      } else if (isNotEmpty(labelWidth)) {
+        return addUnit(labelWidth);
       } else if (pure === true) {
         return 0;
       } else {
         return labelWidthContext;
       }
-    };
-    this.getValidateLable = () => {
-      const { errorStyle, warningStyle } = this.props;
-      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Transition.Transition, { nodeRef: this.errorRef, name: (0, import_classUtil.b)("slide-up"), visible: this.errors.length > 0, transitionAppear: true, unmountOnExit: true, display: "" }, /* @__PURE__ */ import_react.default.createElement("label", { ref: this.errorRef, className: import_classUtil.e`error`, style: errorStyle }, (0, import_head.default)(this.errors))), /* @__PURE__ */ import_react.default.createElement(import_Transition.Transition, { nodeRef: this.warningRef, name: (0, import_classUtil.b)("slide-up"), visible: this.warnings.length > 0, transitionAppear: true, unmountOnExit: true, display: "" }, /* @__PURE__ */ import_react.default.createElement("label", { ref: this.warningRef, className: import_classUtil.e`warning`, style: warningStyle }, (0, import_head.default)(this.warnings))));
-    };
+    });
+    _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) {
-      const { getInternalHooks } = props.fieldContext;
-      const { initEntityValue } = getInternalHooks(import_FieldContext.HOOK_MARK);
-      initEntityValue(this);
+      var getInternalHooks = props.fieldContext.getInternalHooks;
+      var _getInternalHooks3 = getInternalHooks(HOOK_MARK),
+        initEntityValue = _getInternalHooks3.initEntityValue;
+      initEntityValue(_assertThisInitialized(_this));
     }
-    this.warningRef = (0, import_react.createRef)();
-    this.errorRef = (0, import_react.createRef)();
+    _this.warningRef = /*#__PURE__*/createRef();
+    _this.errorRef = /*#__PURE__*/createRef();
+    _this.containerRef = /*#__PURE__*/createRef();
+    return _this;
   }
-  componentDidMount() {
-    const { shouldUpdate, fieldContext } = this.props;
-    this.mounted = true;
-    if (fieldContext) {
-      const { getInternalHooks } = fieldContext;
-      const { registerField } = getInternalHooks(import_FieldContext.HOOK_MARK);
-      this.cancelRegisterFunc = registerField(this);
-    }
-    if (shouldUpdate === true) {
-      this.reRender();
+  _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();
+      }
     }
-  }
-  componentWillUnmount() {
-    this.cancelRegister();
-    this.triggerMetaEvent(true);
-    this.mounted = false;
-  }
-  reRender() {
-    if (!this.mounted) {
-      return;
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.cancelRegister();
+      this.triggerMetaEvent(true);
+      this.mounted = false;
     }
-    this.forceUpdate();
-  }
-  render() {
-    const { resetCount } = this.state;
-    const { children, label, center, className, style, noStyle, fieldContext, labelStyle = {}, colon = false, size, help, pure } = this.props;
-    const { size: sizeContext, labelPosition, colon: colonContext } = fieldContext;
-    const labelWidth = this.getLabelWidth();
-    const { child, isFunction } = this.getOnlyChild(children);
-    const isRequired = this.props.required || this.getRules().some((item) => item.required);
-    let returnChildNode;
-    if (isFunction) {
-      returnChildNode = child;
-    } else if ((0, import_react.isValidElement)(child)) {
-      returnChildNode = (0, import_react.cloneElement)(child, this.getControlled(child.props));
-    } else {
-      returnChildNode = child;
+  }, {
+    key: "reRender",
+    value: function reRender() {
+      if (!this.mounted) {
+        return;
+      }
+      this.forceUpdate();
     }
-    return noStyle ? /* @__PURE__ */ import_react.default.createElement(import_FormItemContext.FormItemContext.Provider, { key: resetCount, value: { size } }, returnChildNode, this.getValidateLable()) : /* @__PURE__ */ import_react.default.createElement(import_FormItemContext.FormItemContext.Provider, { key: resetCount, value: { size } }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)((0, import_classUtil.b)("form-item"), { "is-required": isRequired, [(0, import_classUtil.m)(sizeContext ?? size)]: sizeContext ?? size }, className), style }, label && !pure && /* @__PURE__ */ import_react.default.createElement("label", { className: import_classUtil.e`label`, style: ["left", "right"].includes(labelPosition) ? { width: labelWidth, ...labelStyle } : labelStyle }, typeof label === "string" || typeof label === "number" ? `${label}${colonContext ?? colon ? "：" : ""}` : label, help && /* @__PURE__ */ import_react.default.createElement(import_Tooltip.default, { className: import_classUtil.e`label--help`, content: help, placement: "top", enterable: true }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "circle-exclamation", prefix: "fas" }))), /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: (0, import_classnames.default)(import_classUtil.e`content`, { "is-center": center }),
-        style: !label ? { marginLeft: labelWidth } : {}
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, import_react.Children.map(
-        returnChildNode,
-        (item) => {
-          return item;
+  }, {
+    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
         }
-      ), this.getValidateLable())
-    )));
-  }
-};
-Field.contextType = import_FieldContext.default;
-Field.defaultProps = {
-  trigger: "onChange",
-  valuePropName: "value"
-};
-function InternalFormItem({ name, rules = [], ...restProps }) {
-  var _a;
-  const fieldContext = (0, import_react.useContext)(import_FieldContext.default);
-  const namePath = name !== void 0 ? (0, import_valueUtil.getNamePath)(name) : void 0;
-  let key = "keep";
+      }, /*#__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))));
+    }
+  }]);
+  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);
+  var fieldContext = useContext(FieldContext);
+  var namePath = name !== undefined ? getNamePath(name) : undefined;
+  var key = 'keep';
   if (!restProps.isListField) {
-    key = `_${(namePath || []).join("_")}`;
+    key = "_".concat((namePath || []).join('_'));
   }
-  if (process.env.NODE_ENV !== "production" && restProps.preserve === false && restProps.isListField && namePath.length <= 1) {
-    (0, import_Util.warning)(false, "`preserve` should not apply on Form.List fields.");
+
+  // 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.');
   }
-  return /* @__PURE__ */ import_react.default.createElement(Field, { key, name: namePath, rules: [...((_a = fieldContext.rules) == null ? void 0 : _a[name]) ?? [], ...rules], ...restProps, fieldContext });
+  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;
+  return /*#__PURE__*/React.createElement(Field, _extends({
+    key: key,
+    name: namePath,
+    rules: [].concat(_toConsumableArray(formRules || []), _toConsumableArray(rules))
+  }, restProps, {
+    fieldContext: fieldContext
+  }));
 }
-var FormItem = (0, import_react.memo)(InternalFormItem);
-FormItem.displayName = "ElFormItem";
-var FormItem_default = FormItem;
+var FormItem = /*#__PURE__*/memo(InternalFormItem);
+FormItem.displayName = 'ElFormItem';
+export default FormItem;