tntd 3.0.79 → 3.0.81

package/lib/tntd-form/FormItem/index.js

@@ -1,266 +1,386 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _rcFieldForm = require("rc-field-form");
+var _useState3 = _interopRequireDefault(require("rc-util/lib/hooks/useState"));
+var _ref2 = require("rc-util/lib/ref");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _useFormItemStatus = _interopRequireDefault(require("../hooks/useFormItemStatus"));
+var _configProvider = require("../../config-provider");
+var _DisabledContext = _interopRequireDefault(require("../../config-provider/DisabledContext"));
+var _reactNode = require("../../_util/reactNode");
+var _type = require("../../_util/type");
+var _warning = _interopRequireDefault(require("../../_util/warning"));
+var _context = require("../context");
+var _useFrameState3 = _interopRequireDefault(require("../hooks/useFrameState"));
+var _useItemRef = _interopRequireDefault(require("../hooks/useItemRef"));
+var _util = require("../util");
+var _ItemHolder = _interopRequireDefault(require("./ItemHolder"));
+function _getRequireWildcardCache(e) {
+  if ("function" != typeof WeakMap) return null;
+  var r = new WeakMap(),
+    t = new WeakMap();
+  return (_getRequireWildcardCache = function _getRequireWildcardCache(e) {
+    return e ? t : r;
+  })(e);
+}
+function _interopRequireWildcard(e, r) {
+  if (!r && e && e.__esModule) return e;
+  if (null === e || "object" != _typeof(e) && "function" != typeof e) return {
+    "default": e
+  };
+  var t = _getRequireWildcardCache(r);
+  if (t && t.has(e)) return t.get(e);
+  var n = {
+      __proto__: null
+    },
+    a = Object.defineProperty && Object.getOwnPropertyDescriptor;
+  for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {
+    var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
+    i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];
+  }
+  return n["default"] = e, t && t.set(e, n), n;
+}
+function _interopRequireDefault(e) {
+  return e && e.__esModule ? e : {
+    "default": e
+  };
+}
+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 _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _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 _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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 _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+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;
+      }
     }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+    return a;
+  }
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+var NAME_SPLIT = '__SPLIT__';
+var ValidateStatuses = (0, _type.tuple)('success', 'warning', 'error', 'validating', '');
+var MemoInput = React.memo(function (_ref) {
+  var children = _ref.children;
+  return children;
+}, function (prev, next) {
+  return prev.value === next.value && prev.update === next.update && prev.childProps.length === next.childProps.length && prev.childProps.every(function (value, index) {
+    return value === next.childProps[index];
+  });
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const rc_field_form_1 = require("rc-field-form");
-const useState_1 = __importDefault(require("rc-util/lib/hooks/useState"));
-const ref_1 = require("rc-util/lib/ref");
-const React = __importStar(require("react"));
-const react_1 = require("react");
-const useFormItemStatus_1 = __importDefault(require("../hooks/useFormItemStatus"));
-const config_provider_1 = require("../../config-provider");
-const DisabledContext_1 = __importDefault(require("../../config-provider/DisabledContext"));
-const reactNode_1 = require("../../_util/reactNode");
-const type_1 = require("../../_util/type");
-const warning_1 = __importDefault(require("../../_util/warning"));
-const context_1 = require("../context");
-const useFrameState_1 = __importDefault(require("../hooks/useFrameState"));
-const useItemRef_1 = __importDefault(require("../hooks/useItemRef"));
-const util_1 = require("../util");
-const ItemHolder_1 = __importDefault(require("./ItemHolder"));
-const NAME_SPLIT = '__SPLIT__';
-const ValidateStatuses = (0, type_1.tuple)('success', 'warning', 'error', 'validating', '');
-const MemoInput = React.memo(({ children }) => children, (prev, next) => prev.value === next.value &&
-    prev.update === next.update &&
-    prev.childProps.length === next.childProps.length &&
-    prev.childProps.every((value, index) => value === next.childProps[index]));
 function hasValidName(name) {
-    if (name === null) {
-        (0, warning_1.default)(false, 'Form.Item', '`null` is passed as `name` property');
-    }
-    return !(name === undefined || name === null);
+  if (name === null) {
+    (0, _warning["default"])(false, 'Form.Item', '`null` is passed as `name` property');
+  }
+  return !(name === undefined || name === null);
 }
 function genEmptyMeta() {
-    return {
-        errors: [],
-        warnings: [],
-        touched: false,
-        validating: false,
-        validated: false,
-        name: [],
-    };
+  return {
+    errors: [],
+    warnings: [],
+    touched: false,
+    validating: false,
+    validated: false,
+    name: []
+  };
 }
 function InternalFormItem(props) {
-    var _a, _b, _c, _d;
-    const { name, noStyle, dependencies, prefixCls: customizePrefixCls, shouldUpdate, rules, children, required, label, messageVariables, trigger = 'onChange', validateTrigger, hidden, } = props;
-    // TODO
-    // @ts-ignore
-    const { getPrefixCls } = (0, react_1.useContext)(config_provider_1.ConfigContext);
-    const { name: formName } = (0, react_1.useContext)(context_1.FormContext);
-    const isRenderProps = typeof children === 'function';
-    const notifyParentMetaChange = (0, react_1.useContext)(context_1.NoStyleItemContext);
-    const contextDisabled = (0, react_1.useContext)(DisabledContext_1.default);
-    const { readonly: contextReadonly } = (0, react_1.useContext)(context_1.FormContext);
-    const { validateTrigger: contextValidateTrigger } = (0, react_1.useContext)(rc_field_form_1.FieldContext);
-    const mergedValidateTrigger = validateTrigger !== undefined ? validateTrigger : contextValidateTrigger;
-    const hasName = hasValidName(name);
-    const prefixCls = getPrefixCls('form', customizePrefixCls);
-    // ========================= MISC =========================
-    // Get `noStyle` required info
-    const listContext = React.useContext(rc_field_form_1.ListContext);
-    const fieldKeyPathRef = React.useRef();
-    // ======================== Errors ========================
-    // >>>>> Collect sub field errors
-    const [subFieldErrors, setSubFieldErrors] = (0, useFrameState_1.default)({});
-    // >>>>> Current field errors
-    const [meta, setMeta] = (0, useState_1.default)(() => genEmptyMeta());
-    const onMetaChange = (nextMeta) => {
-        // This keyInfo is not correct when field is removed
-        // Since origin keyManager no longer keep the origin key anymore
-        // Which means we need cache origin one and reuse when removed
-        const keyInfo = listContext === null || listContext === void 0 ? void 0 : listContext.getKey(nextMeta.name);
-        // Destroy will reset all the meta
-        setMeta(nextMeta.destroy ? genEmptyMeta() : nextMeta, true);
-        // Bump to parent since noStyle
-        if (noStyle && notifyParentMetaChange) {
-            let namePath = nextMeta.name;
-            if (!nextMeta.destroy) {
-                if (keyInfo !== undefined) {
-                    const [fieldKey, restPath] = keyInfo;
-                    namePath = [fieldKey, ...restPath];
-                    fieldKeyPathRef.current = namePath;
-                }
-            }
-            else {
-                // Use origin cache data
-                namePath = fieldKeyPathRef.current || namePath;
-            }
-            notifyParentMetaChange(nextMeta, namePath);
+  var _a, _b, _c, _d;
+  var name = props.name,
+    noStyle = props.noStyle,
+    dependencies = props.dependencies,
+    customizePrefixCls = props.prefixCls,
+    shouldUpdate = props.shouldUpdate,
+    rules = props.rules,
+    children = props.children,
+    required = props.required,
+    label = props.label,
+    messageVariables = props.messageVariables,
+    _props$trigger = props.trigger,
+    trigger = _props$trigger === void 0 ? 'onChange' : _props$trigger,
+    validateTrigger = props.validateTrigger,
+    hidden = props.hidden;
+  // TODO
+  // @ts-ignore
+  var _useContext = (0, _react.useContext)(_configProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var _useContext2 = (0, _react.useContext)(_context.FormContext),
+    formName = _useContext2.name;
+  var isRenderProps = typeof children === 'function';
+  var notifyParentMetaChange = (0, _react.useContext)(_context.NoStyleItemContext);
+  var contextDisabled = (0, _react.useContext)(_DisabledContext["default"]);
+  var _useContext3 = (0, _react.useContext)(_context.FormContext),
+    contextReadonly = _useContext3.readonly;
+  var _useContext4 = (0, _react.useContext)(_rcFieldForm.FieldContext),
+    contextValidateTrigger = _useContext4.validateTrigger;
+  var mergedValidateTrigger = validateTrigger !== undefined ? validateTrigger : contextValidateTrigger;
+  var hasName = hasValidName(name);
+  var prefixCls = getPrefixCls('form', customizePrefixCls);
+  // ========================= MISC =========================
+  // Get `noStyle` required info
+  var listContext = React.useContext(_rcFieldForm.ListContext);
+  var fieldKeyPathRef = React.useRef();
+  // ======================== Errors ========================
+  // >>>>> Collect sub field errors
+  var _useFrameState = (0, _useFrameState3["default"])({}),
+    _useFrameState2 = _slicedToArray(_useFrameState, 2),
+    subFieldErrors = _useFrameState2[0],
+    setSubFieldErrors = _useFrameState2[1];
+  // >>>>> Current field errors
+  var _useState = (0, _useState3["default"])(function () {
+      return genEmptyMeta();
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    meta = _useState2[0],
+    setMeta = _useState2[1];
+  var onMetaChange = function onMetaChange(nextMeta) {
+    // This keyInfo is not correct when field is removed
+    // Since origin keyManager no longer keep the origin key anymore
+    // Which means we need cache origin one and reuse when removed
+    var keyInfo = listContext === null || listContext === void 0 ? void 0 : listContext.getKey(nextMeta.name);
+    // Destroy will reset all the meta
+    setMeta(nextMeta.destroy ? genEmptyMeta() : nextMeta, true);
+    // Bump to parent since noStyle
+    if (noStyle && notifyParentMetaChange) {
+      var namePath = nextMeta.name;
+      if (!nextMeta.destroy) {
+        if (keyInfo !== undefined) {
+          var _keyInfo = _slicedToArray(keyInfo, 2),
+            fieldKey = _keyInfo[0],
+            restPath = _keyInfo[1];
+          namePath = [fieldKey].concat(_toConsumableArray(restPath));
+          fieldKeyPathRef.current = namePath;
         }
-    };
-    // >>>>> Collect noStyle Field error to the top FormItem
-    const onSubItemMetaChange = (subMeta, uniqueKeys) => {
-        // Only `noStyle` sub item will trigger
-        setSubFieldErrors((prevSubFieldErrors) => {
-            const clone = Object.assign({}, prevSubFieldErrors);
-            // name: ['user', 1] + key: [4] = ['user', 4]
-            const mergedNamePath = [...subMeta.name.slice(0, -1), ...uniqueKeys];
-            const mergedNameKey = mergedNamePath.join(NAME_SPLIT);
-            if (subMeta.destroy) {
-                // Remove
-                delete clone[mergedNameKey];
-            }
-            else {
-                // Update
-                clone[mergedNameKey] = subMeta;
-            }
-            return clone;
-        });
-    };
-    // >>>>> Get merged errors
-    const [mergedErrors, mergedWarnings] = React.useMemo(() => {
-        const errorList = [...meta.errors];
-        const warningList = [...meta.warnings];
-        Object.values(subFieldErrors).forEach((subFieldError) => {
-            errorList.push(...(subFieldError.errors || []));
-            warningList.push(...(subFieldError.warnings || []));
-        });
-        return [errorList, warningList];
-    }, [subFieldErrors, meta.errors, meta.warnings]);
-    // ===================== Children Ref =====================
-    const getItemRef = (0, useItemRef_1.default)();
-    // ======================== Render ========================
-    function renderLayout(baseChildren, fieldId, isRequired) {
-        if (noStyle && !hidden) {
-            return baseChildren;
-        }
-        return (React.createElement(ItemHolder_1.default, Object.assign({ key: "row" }, props, { prefixCls: prefixCls, fieldId: fieldId, isRequired: isRequired, errors: mergedErrors, warnings: mergedWarnings, meta: meta, 
-            // TODO
-            // @ts-ignore
-            onSubItemMetaChange: onSubItemMetaChange }), baseChildren));
+      } else {
+        // Use origin cache data
+        namePath = fieldKeyPathRef.current || namePath;
+      }
+      notifyParentMetaChange(nextMeta, namePath);
     }
-    if (!hasName && !isRenderProps && !dependencies) {
-        if ((0, reactNode_1.isValidElement)(children)) {
-            return renderLayout((0, reactNode_1.cloneElement)(children, Object.assign(Object.assign({}, children.props), { disabled: (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : contextDisabled, readonly: (_d = (_c = children.props) === null || _c === void 0 ? void 0 : _c.readonly) !== null && _d !== void 0 ? _d : contextReadonly })));
-        }
-        return renderLayout(children);
+  };
+  // >>>>> Collect noStyle Field error to the top FormItem
+  var onSubItemMetaChange = function onSubItemMetaChange(subMeta, uniqueKeys) {
+    // Only `noStyle` sub item will trigger
+    setSubFieldErrors(function (prevSubFieldErrors) {
+      var clone = Object.assign({}, prevSubFieldErrors);
+      // name: ['user', 1] + key: [4] = ['user', 4]
+      var mergedNamePath = [].concat(_toConsumableArray(subMeta.name.slice(0, -1)), _toConsumableArray(uniqueKeys));
+      var mergedNameKey = mergedNamePath.join(NAME_SPLIT);
+      if (subMeta.destroy) {
+        // Remove
+        delete clone[mergedNameKey];
+      } else {
+        // Update
+        clone[mergedNameKey] = subMeta;
+      }
+      return clone;
+    });
+  };
+  // >>>>> Get merged errors
+  var _React$useMemo = React.useMemo(function () {
+      var errorList = _toConsumableArray(meta.errors);
+      var warningList = _toConsumableArray(meta.warnings);
+      Object.values(subFieldErrors).forEach(function (subFieldError) {
+        errorList.push.apply(errorList, _toConsumableArray(subFieldError.errors || []));
+        warningList.push.apply(warningList, _toConsumableArray(subFieldError.warnings || []));
+      });
+      return [errorList, warningList];
+    }, [subFieldErrors, meta.errors, meta.warnings]),
+    _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
+    mergedErrors = _React$useMemo2[0],
+    mergedWarnings = _React$useMemo2[1];
+  // ===================== Children Ref =====================
+  var getItemRef = (0, _useItemRef["default"])();
+  // ======================== Render ========================
+  function renderLayout(baseChildren, fieldId, isRequired) {
+    if (noStyle && !hidden) {
+      return baseChildren;
     }
-    let variables = {};
-    if (typeof label === 'string') {
-        variables.label = label;
+    return React.createElement(_ItemHolder["default"], Object.assign({
+      key: "row"
+    }, props, {
+      prefixCls: prefixCls,
+      fieldId: fieldId,
+      isRequired: isRequired,
+      errors: mergedErrors,
+      warnings: mergedWarnings,
+      meta: meta,
+      // TODO
+      // @ts-ignore
+      onSubItemMetaChange: onSubItemMetaChange
+    }), baseChildren);
+  }
+  if (!hasName && !isRenderProps && !dependencies) {
+    if ((0, _reactNode.isValidElement)(children)) {
+      return renderLayout((0, _reactNode.cloneElement)(children, Object.assign(Object.assign({}, children.props), {
+        disabled: (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : contextDisabled,
+        readonly: (_d = (_c = children.props) === null || _c === void 0 ? void 0 : _c.readonly) !== null && _d !== void 0 ? _d : contextReadonly
+      })));
     }
-    else if (name) {
-        variables.label = String(name);
-    }
-    if (messageVariables) {
-        variables = Object.assign(Object.assign({}, variables), messageVariables);
-    }
-    // >>>>> With Field
-    return (React.createElement(rc_field_form_1.Field, Object.assign({}, props, { messageVariables: variables, trigger: trigger, validateTrigger: mergedValidateTrigger, onMetaChange: onMetaChange }), (control, renderMeta, context) => {
-        var _a, _b, _c, _d;
-        const mergedName = (0, util_1.toArray)(name).length && renderMeta ? renderMeta.name : [];
-        const fieldId = (0, util_1.getFieldId)(mergedName, formName);
-        const isRequired = required !== undefined
-            ? required
-            : !!(rules &&
-                rules.some((rule) => {
-                    if (rule && typeof rule === 'object' && rule.required && !rule.warningOnly) {
-                        return true;
-                    }
-                    if (typeof rule === 'function') {
-                        const ruleEntity = rule(context);
-                        return ruleEntity && ruleEntity.required && !ruleEntity.warningOnly;
-                    }
-                    return false;
-                }));
-        // ======================= Children =======================
-        const mergedControl = Object.assign({}, control);
-        let childNode = null;
-        (0, warning_1.default)(!(shouldUpdate && dependencies), 'Form.Item', "`shouldUpdate` and `dependencies` shouldn't be used together. See https://u.ant.design/form-deps.");
-        if (Array.isArray(children) && hasName) {
-            (0, warning_1.default)(false, 'Form.Item', 'A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/complex-form-item.');
-            childNode = children;
-        }
-        else if (isRenderProps && (!(shouldUpdate || dependencies) || hasName)) {
-            (0, warning_1.default)(!!(shouldUpdate || dependencies), 'Form.Item', 'A `Form.Item` with a render function must have either `shouldUpdate` or `dependencies`.');
-            (0, warning_1.default)(!hasName, 'Form.Item', 'A `Form.Item` with a render function cannot be a field, and thus cannot have a `name` prop.');
-        }
-        else if (dependencies && !isRenderProps && !hasName) {
-            (0, warning_1.default)(false, 'Form.Item', 'Must set `name` or use a render function when `dependencies` is set.');
-        }
-        else if ((0, reactNode_1.isValidElement)(children)) {
-            (0, warning_1.default)(children.props.defaultValue === undefined, 'Form.Item', '`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.');
-            const childProps = Object.assign(Object.assign(Object.assign({}, children.props), mergedControl), { disabled: (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : contextDisabled });
-            if (contextReadonly !== undefined) {
-                childProps.readonly = (_d = (_c = children.props) === null || _c === void 0 ? void 0 : _c.readonly) !== null && _d !== void 0 ? _d : contextReadonly;
-            }
-            if (!childProps.id) {
-                childProps.id = fieldId;
-            }
-            if (props.help || mergedErrors.length > 0 || mergedWarnings.length > 0 || props.extra) {
-                const describedbyArr = [];
-                if (props.help || mergedErrors.length > 0) {
-                    describedbyArr.push(`${fieldId}_help`);
-                }
-                if (props.extra) {
-                    describedbyArr.push(`${fieldId}_extra`);
-                }
-                childProps['aria-describedby'] = describedbyArr.join(' ');
-            }
-            if (mergedErrors.length > 0) {
-                childProps['aria-invalid'] = 'true';
-            }
-            if (isRequired) {
-                childProps['aria-required'] = 'true';
-            }
-            if ((0, ref_1.supportRef)(children)) {
-                childProps.ref = getItemRef(mergedName, children);
-            }
-            // We should keep user origin event handler
-            const triggers = new Set([...(0, util_1.toArray)(trigger), ...(0, util_1.toArray)(mergedValidateTrigger)]);
-            triggers.forEach((eventName) => {
-                childProps[eventName] = (...args) => {
-                    var _a, _b, _c;
-                    (_a = mergedControl[eventName]) === null || _a === void 0 ? void 0 : _a.call(mergedControl, ...args);
-                    // @ts-ignore
-                    (_c = (_b = children === null || children === void 0 ? void 0 : children.props) === null || _b === void 0 ? void 0 : _b[eventName]) === null || _c === void 0 ? void 0 : _c.call(_b, ...args);
-                };
-            });
-            // List of props that need to be watched for changes -> if changes are detected in MemoInput -> rerender
-            const watchingChildProps = [
-                childProps['aria-required'],
-                childProps['aria-invalid'],
-                childProps['aria-describedby'],
-                childProps.disabled,
-                childProps.readonly,
-            ];
-            childNode = (React.createElement(MemoInput, { value: mergedControl[props.valuePropName || 'value'], update: children, childProps: watchingChildProps }, (0, reactNode_1.cloneElement)(children, childProps)));
-        }
-        else if (isRenderProps && (shouldUpdate || dependencies) && !hasName) {
-            childNode = children(context);
+    return renderLayout(children);
+  }
+  var variables = {};
+  if (typeof label === 'string') {
+    variables.label = label;
+  } else if (name) {
+    variables.label = String(name);
+  }
+  if (messageVariables) {
+    variables = Object.assign(Object.assign({}, variables), messageVariables);
+  }
+  // >>>>> With Field
+  return React.createElement(_rcFieldForm.Field, Object.assign({}, props, {
+    messageVariables: variables,
+    trigger: trigger,
+    validateTrigger: mergedValidateTrigger,
+    onMetaChange: onMetaChange
+  }), function (control, renderMeta, context) {
+    var _a, _b, _c, _d;
+    var mergedName = (0, _util.toArray)(name).length && renderMeta ? renderMeta.name : [];
+    var fieldId = (0, _util.getFieldId)(mergedName, formName);
+    var isRequired = required !== undefined ? required : !!(rules && rules.some(function (rule) {
+      if (rule && _typeof(rule) === 'object' && rule.required && !rule.warningOnly) {
+        return true;
+      }
+      if (typeof rule === 'function') {
+        var ruleEntity = rule(context);
+        return ruleEntity && ruleEntity.required && !ruleEntity.warningOnly;
+      }
+      return false;
+    }));
+    // ======================= Children =======================
+    var mergedControl = Object.assign({}, control);
+    var childNode = null;
+    (0, _warning["default"])(!(shouldUpdate && dependencies), 'Form.Item', "`shouldUpdate` and `dependencies` shouldn't be used together. See https://u.ant.design/form-deps.");
+    if (Array.isArray(children) && hasName) {
+      (0, _warning["default"])(false, 'Form.Item', 'A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/complex-form-item.');
+      childNode = children;
+    } else if (isRenderProps && (!(shouldUpdate || dependencies) || hasName)) {
+      (0, _warning["default"])(!!(shouldUpdate || dependencies), 'Form.Item', 'A `Form.Item` with a render function must have either `shouldUpdate` or `dependencies`.');
+      (0, _warning["default"])(!hasName, 'Form.Item', 'A `Form.Item` with a render function cannot be a field, and thus cannot have a `name` prop.');
+    } else if (dependencies && !isRenderProps && !hasName) {
+      (0, _warning["default"])(false, 'Form.Item', 'Must set `name` or use a render function when `dependencies` is set.');
+    } else if ((0, _reactNode.isValidElement)(children)) {
+      (0, _warning["default"])(children.props.defaultValue === undefined, 'Form.Item', '`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.');
+      var childProps = Object.assign(Object.assign(Object.assign({}, children.props), mergedControl), {
+        disabled: (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : contextDisabled
+      });
+      if (contextReadonly !== undefined) {
+        childProps.readonly = (_d = (_c = children.props) === null || _c === void 0 ? void 0 : _c.readonly) !== null && _d !== void 0 ? _d : contextReadonly;
+      }
+      if (!childProps.id) {
+        childProps.id = fieldId;
+      }
+      if (props.help || mergedErrors.length > 0 || mergedWarnings.length > 0 || props.extra) {
+        var describedbyArr = [];
+        if (props.help || mergedErrors.length > 0) {
+          describedbyArr.push("".concat(fieldId, "_help"));
         }
-        else {
-            (0, warning_1.default)(!mergedName.length, 'Form.Item', '`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.');
-            childNode = children;
+        if (props.extra) {
+          describedbyArr.push("".concat(fieldId, "_extra"));
         }
-        return renderLayout(childNode, fieldId, isRequired);
-    }));
+        childProps['aria-describedby'] = describedbyArr.join(' ');
+      }
+      if (mergedErrors.length > 0) {
+        childProps['aria-invalid'] = 'true';
+      }
+      if (isRequired) {
+        childProps['aria-required'] = 'true';
+      }
+      if ((0, _ref2.supportRef)(children)) {
+        childProps.ref = getItemRef(mergedName, children);
+      }
+      // We should keep user origin event handler
+      var triggers = new Set([].concat(_toConsumableArray((0, _util.toArray)(trigger)), _toConsumableArray((0, _util.toArray)(mergedValidateTrigger))));
+      triggers.forEach(function (eventName) {
+        childProps[eventName] = function () {
+          var _a2, _c2;
+          var _a, _b, _c;
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          (_a = mergedControl[eventName]) === null || _a === void 0 ? void 0 : (_a2 = _a).call.apply(_a2, [mergedControl].concat(args));
+          // @ts-ignore
+          (_c = (_b = children === null || children === void 0 ? void 0 : children.props) === null || _b === void 0 ? void 0 : _b[eventName]) === null || _c === void 0 ? void 0 : (_c2 = _c).call.apply(_c2, [_b].concat(args));
+        };
+      });
+      // List of props that need to be watched for changes -> if changes are detected in MemoInput -> rerender
+      var watchingChildProps = [childProps['aria-required'], childProps['aria-invalid'], childProps['aria-describedby'], childProps.disabled, childProps.readonly];
+      childNode = React.createElement(MemoInput, {
+        value: mergedControl[props.valuePropName || 'value'],
+        update: children,
+        childProps: watchingChildProps
+      }, (0, _reactNode.cloneElement)(children, childProps));
+    } else if (isRenderProps && (shouldUpdate || dependencies) && !hasName) {
+      childNode = children(context);
+    } else {
+      (0, _warning["default"])(!mergedName.length, 'Form.Item', '`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.');
+      childNode = children;
+    }
+    return renderLayout(childNode, fieldId, isRequired);
+  });
 }
-const FormItem = InternalFormItem;
-FormItem.useStatus = useFormItemStatus_1.default;
-exports.default = FormItem;
-//# sourceMappingURL=index.js.map
+var FormItem = InternalFormItem;
+FormItem.useStatus = _useFormItemStatus["default"];
+var _default = exports["default"] = FormItem;