doui-react 1.0.0

package/lib/form/component/form-content.js

@@ -0,0 +1,288 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormContent = FormContent;
+exports.useValidateFormOnMount = useValidateFormOnMount;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _api = require("../../api");
+var _2 = require("./..");
+var _hooks = require("../../hooks");
+var _antd = require("antd");
+var _delay = _interopRequireDefault(require("delay"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = require("react");
+var _reactUse = require("react-use");
+var _constant = require("./constant");
+var _formItem = require("./form-item");
+var _useDebug = require("./use-debug");
+var _utils = require("./utils");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["loading", "footer"];
+function useItemsCollection(_ref) {
+  var form = _ref.form;
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
+  var itemsRef = (0, _react.useRef)({});
+  var updateItems = (0, _hooks.useDebounce)(function () {
+    var items = _lodash.default.values(itemsRef.current);
+    setItems(items);
+    form.setItems(items);
+  }, 20);
+  function collect(item) {
+    var key = (0, _utils.generateCollectionKey)(item.name);
+    if (!key) {
+      return;
+    }
+    _lodash.default.set(itemsRef.current, key, item);
+    updateItems();
+  }
+  function removeCollect(name) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var key = (0, _utils.generateCollectionKey)(name);
+    if (!key) {
+      return;
+    }
+    if (options.isFormList) {
+      itemsRef.current = (0, _utils.removeFormListFormItems)(name, itemsRef.current);
+      return updateItems();
+    }
+    if (options.isTableEditor) {
+      itemsRef.current = (0, _utils.removeTableEditorFormItems)(name, itemsRef.current);
+      return updateItems();
+    }
+
+    // 只有当 ListItem 卸载时，才重置 loading
+    var path = options.onlyResetLoading ? [key, 'loading'] : key;
+    _lodash.default.unset(itemsRef.current, path);
+    updateItems();
+  }
+  return {
+    collect: collect,
+    removeCollect: removeCollect,
+    items: items
+  };
+}
+function useInit(_ref2) {
+  var form = _ref2.form,
+    initialValues = _ref2.initialValues,
+    initialContext = _ref2.initialContext;
+  var _useSetState = (0, _reactUse.useSetState)({}),
+    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
+    context = _useSetState2[0],
+    setContext = _useSetState2[1];
+  var _useLoading = (0, _hooks.useLoading)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+      var context, values;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return (0, _api.executeFunction)(initialContext);
+          case 2:
+            context = _context.sent;
+            _context.next = 5;
+            return (0, _api.executeFunction)(initialValues, context);
+          case 5:
+            values = _context.sent;
+            form.setFieldsValue(values);
+            setContext(context);
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }))),
+    _useLoading2 = (0, _slicedToArray2.default)(_useLoading, 2),
+    _useLoading2$ = _useLoading2[0],
+    loading = _useLoading2$ === void 0 ? true : _useLoading2$,
+    init = _useLoading2[1];
+
+  // 初始化数据
+  (0, _reactUse.useMount)(init);
+  return {
+    loading: loading,
+    context: context,
+    setContext: setContext
+  };
+}
+function useValidateFormOnMount(props) {
+  var isValidated = (0, _react.useRef)(false);
+  var _useItemsCollection = useItemsCollection(props),
+    collect = _useItemsCollection.collect,
+    removeCollect = _useItemsCollection.removeCollect,
+    items = _useItemsCollection.items;
+  var form = props.form,
+    onMount = props.onMount,
+    loading = props.loading,
+    validateOnMount = props.validateOnMount,
+    focusFirstOnMount = props.focusFirstOnMount;
+  function validateForm() {
+    return _validateForm.apply(this, arguments);
+  } // loading 中不校验，避免表单数据未初始化完成
+  function _validateForm() {
+    _validateForm = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
+      var params;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!shouldSkipValidation()) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 2:
+            _context2.next = 4;
+            return (0, _delay.default)(20);
+          case 4:
+            // 等待表单渲染完成
+            params = {
+              form: form,
+              items: items
+            };
+            _context2.next = 7;
+            return (0, _utils.validateFormOnMount)(params, validateOnMount);
+          case 7:
+            (0, _utils.focusFirstInput)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, params), {}, {
+              focusFirstOnMount: focusFirstOnMount
+            }));
+            onMount === null || onMount === void 0 || onMount(params);
+            isValidated.current = true;
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return _validateForm.apply(this, arguments);
+  }
+  function shouldSkipValidation() {
+    return isValidated.current || loading || _lodash.default.isEmpty(items) || (0, _utils.hasItemLoading)(items);
+  }
+  var validate = (0, _hooks.useDebounce)(validateForm, 100, {
+    leading: false
+  });
+  (0, _reactUse.useUpdateEffect)(function () {
+    validate();
+  }, [loading, items]);
+  return {
+    collect: collect,
+    removeCollect: removeCollect,
+    items: items
+  };
+}
+function useFormSpinning(context) {
+  var _useSafeState = (0, _hooks.useSafeState)(true),
+    _useSafeState2 = (0, _slicedToArray2.default)(_useSafeState, 2),
+    spinning = _useSafeState2[0],
+    setSpinning = _useSafeState2[1];
+  var currentSpinning = context.loading || (0, _utils.hasItemLoading)(context.items);
+  var debounceTime = 100;
+  var updateSpinning = (0, _hooks.useDebounce)(function (loading) {
+    !loading && setSpinning(false);
+  }, debounceTime, {
+    leading: false
+  });
+
+  // 只有首次使用合成 loading
+  (0, _react.useEffect)(function () {
+    spinning && updateSpinning(currentSpinning);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentSpinning]);
+
+  // 注册事件
+  context.form.registerMethod(_constant.registerMethods.getLoading, function () {
+    return spinning;
+  });
+
+  // 等待 FormItem 渲染校验完成
+  return (0, _hooks.useDebounceState)(spinning, debounceTime);
+}
+function useFormContext(props) {
+  var _useInit = useInit(props),
+    loading = _useInit.loading,
+    initialContext = _useInit.context,
+    setContext = _useInit.setContext;
+  var _useValidateFormOnMou = useValidateFormOnMount((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      loading: loading
+    })),
+    collect = _useValidateFormOnMou.collect,
+    removeCollect = _useValidateFormOnMou.removeCollect,
+    items = _useValidateFormOnMou.items;
+  var form = props.form,
+    context = props.context,
+    disabled = props.disabled,
+    debug = props.debug;
+  var spinning = useFormSpinning({
+    loading: loading,
+    items: items,
+    form: form
+  });
+  var values = form.getValue();
+  var allContext = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, initialContext), context), {}, {
+    loading: loading,
+    // initialContext、initialValues 的 loading
+    spinning: spinning,
+    // 控制 Spin 的 Loading 是否显示
+    disabled: disabled,
+    form: form,
+    values: values,
+    items: items,
+    debug: debug,
+    __collect__: collect,
+    __removeCollect__: removeCollect
+  });
+
+  // 注册事件
+  form.setContext = (0, _utils.setContextWrapper)(setContext);
+  form.getContext = (0, _utils.getContextWrapper)(allContext);
+  return allContext;
+}
+function FormChildren(_ref4) {
+  var items = _ref4.items,
+    children = _ref4.children,
+    onValidate = _ref4.onValidate;
+  (0, _2.useValidateForm)({
+    onValidate: onValidate,
+    validateOnly: true
+  });
+  (0, _useDebug.useDebug)();
+  if (children) {
+    return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: children
+    });
+  }
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: _lodash.default.map(items, function (item, index) {
+      return (0, _jsxRuntime.jsx)(_formItem.FormItem, (0, _objectSpread2.default)({}, item), item.name || index);
+    })
+  });
+}
+function FormContent(_ref5) {
+  var _ref5$loading = _ref5.loading,
+    useLoadingWrapper = _ref5$loading === void 0 ? true : _ref5$loading,
+    footer = _ref5.footer,
+    props = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
+  var context = useFormContext(props);
+  function render() {
+    if (useLoadingWrapper) {
+      return (0, _jsxRuntime.jsxs)(_antd.Spin, {
+        spinning: context.spinning,
+        children: [(0, _jsxRuntime.jsx)(FormChildren, (0, _objectSpread2.default)({}, props)), footer]
+      });
+    }
+    return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [(0, _jsxRuntime.jsx)(FormChildren, (0, _objectSpread2.default)({}, props)), footer]
+    });
+  }
+  return (0, _jsxRuntime.jsx)(_2.FormProvider, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, context), {}, {
+    children: render()
+  }));
+}

package/lib/form/component/form-item-map.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { CheckboxProps } from "../../checkbox";
+import { DatePicker, RangePicker } from "../../date-picker";
+import { FormInstance, FormItemContext, FormItemProps } from "..";
+import { Radio } from "../../radio";
+import { SelectCallbackProps, SelectProps } from "../../select";
+import { Switch } from "../../switch";
+import { TreeSelectProps } from "../../tree-select";
+export interface FormItemSelectProps extends Pick<FormItemProps, 'requiredInOptions' | 'filterNotExistValue' | 'labelInValue'> {
+    name: string;
+    form?: FormInstance;
+    collectState(item: Partial<FormItemContext>): void;
+}
+export declare function useCollectFormItemState({ name, collectState, filterNotExistValue, requiredInOptions, form: outerForm, ...props }: FormItemSelectProps): {
+    __filterNotExistValue__: boolean;
+    __callback__: import("use-debounce").DebouncedState<({ loading, options, value }: SelectCallbackProps) => Promise<void>>;
+    labelInValue?: boolean | undefined;
+};
+declare function FormItemSelect(props: FormItemSelectProps & SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function FormItemTreeSelect(props: FormItemSelectProps & TreeSelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function FormItemTree(props: FormItemSelectProps & TreeSelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function FormItemCheckbox(props: FormItemSelectProps & CheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const supportCollectStateItem: {
+    select: typeof FormItemSelect;
+    treeSelect: typeof FormItemTreeSelect;
+    tree: typeof FormItemTree;
+    checkbox: typeof FormItemCheckbox;
+};
+export declare const formItemMap: {
+    select: typeof FormItemSelect;
+    treeSelect: typeof FormItemTreeSelect;
+    tree: typeof FormItemTree;
+    checkbox: typeof FormItemCheckbox;
+    switch: typeof Switch;
+    radio: typeof Radio;
+    slider: import("react").ForwardRefExoticComponent<(import("antd").SliderSingleProps | import("antd/lib/slider").SliderRangeProps) & import("react").RefAttributes<unknown>>;
+    date: typeof DatePicker;
+    rangeDate: typeof RangePicker;
+};
+export {};

package/lib/form/component/form-item-map.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.supportCollectStateItem = exports.formItemMap = void 0;
+exports.useCollectFormItemState = useCollectFormItemState;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _checkbox = require("../../checkbox");
+var _datePicker = require("../../date-picker");
+var _ = require("./..");
+var _hooks = require("../../hooks");
+var _radio = require("../../radio");
+var _select = require("../../select");
+var _switch = require("../../switch");
+var _tree = require("../../tree");
+var _treeSelect = require("../../tree-select");
+var _antd = require("antd");
+var _delay = _interopRequireDefault(require("delay"));
+var _utils = require("./utils");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["name", "collectState", "filterNotExistValue", "requiredInOptions", "form"];
+function useCollectFormItemState(_ref) {
+  var name = _ref.name,
+    collectState = _ref.collectState,
+    filterNotExistValue = _ref.filterNotExistValue,
+    requiredInOptions = _ref.requiredInOptions,
+    outerForm = _ref.form,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useFormContext = (0, _.useFormContext)(),
+    _useFormContext$form = _useFormContext.form,
+    form = _useFormContext$form === void 0 ? outerForm : _useFormContext$form;
+  var requiredInOptionsAndFilterNotExistValue = requiredInOptions && filterNotExistValue;
+  function onCallback(_x) {
+    return _onCallback.apply(this, arguments);
+  }
+  function _onCallback() {
+    _onCallback = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref2) {
+      var loading, options, value, isUpdated;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            loading = _ref2.loading, options = _ref2.options, value = _ref2.value;
+            collectState({
+              loading: loading,
+              options: options
+            });
+            if (!(loading || (0, _utils.isEmpty)(value))) {
+              _context.next = 4;
+              break;
+            }
+            return _context.abrupt("return");
+          case 4:
+            if (requiredInOptionsAndFilterNotExistValue) {
+              _context.next = 8;
+              break;
+            }
+            isUpdated = (0, _utils.updateNotExistValue)({
+              filterNotExistValue: filterNotExistValue,
+              form: form,
+              value: value,
+              name: name,
+              options: options,
+              labelInValue: props.labelInValue
+            });
+            if (!isUpdated) {
+              _context.next = 8;
+              break;
+            }
+            return _context.abrupt("return");
+          case 8:
+            if (!requiredInOptions) {
+              _context.next = 13;
+              break;
+            }
+            _context.next = 11;
+            return (0, _delay.default)(50);
+          case 11:
+            _context.next = 13;
+            return form.validate((0, _utils.transformPathToName)(name));
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return _onCallback.apply(this, arguments);
+  }
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    __filterNotExistValue__: !!requiredInOptionsAndFilterNotExistValue,
+    __callback__: (0, _hooks.useDebounce)(onCallback)
+  });
+}
+function FormItemSelect(props) {
+  var params = useCollectFormItemState(props);
+  return (0, _jsxRuntime.jsx)(_select.Select, (0, _objectSpread2.default)({}, params));
+}
+function FormItemTreeSelect(props) {
+  var params = useCollectFormItemState(props);
+  return (0, _jsxRuntime.jsx)(_treeSelect.TreeSelect, (0, _objectSpread2.default)({}, params));
+}
+function FormItemTree(props) {
+  var params = useCollectFormItemState(props);
+  return (0, _jsxRuntime.jsx)(_tree.Tree, (0, _objectSpread2.default)({}, params));
+}
+function FormItemCheckbox(props) {
+  var params = useCollectFormItemState((0, _objectSpread2.default)({
+    filterNotExistValue: true
+  }, props));
+  return (0, _jsxRuntime.jsx)(_checkbox.Checkbox, (0, _objectSpread2.default)({}, params));
+}
+var supportCollectStateItem = exports.supportCollectStateItem = {
+  select: FormItemSelect,
+  treeSelect: FormItemTreeSelect,
+  tree: FormItemTree,
+  checkbox: FormItemCheckbox
+};
+var formItemMap = exports.formItemMap = (0, _objectSpread2.default)({
+  switch: _switch.Switch,
+  radio: _radio.Radio,
+  slider: _antd.Slider,
+  date: _datePicker.DatePicker,
+  rangeDate: _datePicker.RangePicker
+}, supportCollectStateItem);

package/lib/form/component/form-item.d.ts

@@ -0,0 +1,7 @@
+import { FormItemProps } from "..";
+import { InputProps } from "../../input";
+import { formItemMap } from './form-item-map';
+export type InputComponentType = InputProps['type'];
+export type OtherComponentType = keyof typeof formItemMap;
+export declare function useCollectItemsStatus({ name, preserveStatus }: FormItemProps): void;
+export declare function FormItem(props: FormItemProps): import("@emotion/react/jsx-runtime").JSX.Element | null;

package/lib/form/component/form-item.js

@@ -0,0 +1,227 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormItem = FormItem;
+exports.useCollectItemsStatus = useCollectItemsStatus;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _api = require("../../api");
+var _2 = require("./..");
+var _hooks = require("../../hooks");
+var _input = require("../../input");
+var _component = require("../../input/component");
+var _css = require("@emotion/css");
+var _antd = require("antd");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = require("react");
+var _reactUse = require("react-use");
+var _style = require("../style");
+var _constant = require("./constant");
+var _formItemMap = require("./form-item-map");
+var _utils = require("./utils");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["item", "items"],
+  _excluded2 = ["type", "name", "disabled", "dateProps", "render", "onChange"],
+  _excluded3 = ["show", "className", "style", "flex", "labelWidth", "controlWidth", "requiredMark", "layout"];
+function useCollectItemsStatus(_ref) {
+  var name = _ref.name,
+    preserveStatus = _ref.preserveStatus;
+  var _useFormContext = (0, _2.useFormContext)(),
+    form = _useFormContext.form;
+  var _Form$Item$useStatus = _antd.Form.Item.useStatus(),
+    status = _Form$Item$useStatus.status;
+
+  // 还原 Error
+  (0, _react.useEffect)(function () {
+    if (!preserveStatus) {
+      return;
+    }
+    var errors = form.callMethod(_constant.registerMethods.getItemsStatus, name);
+    if (_lodash.default.isEmpty(errors)) {
+      return;
+    }
+    form.setFields([{
+      name: name,
+      errors: errors
+    }]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [preserveStatus]);
+
+  // 将 Error 缓存到 Form 中
+  (0, _reactUse.useUpdateEffect)(function () {
+    var errors = form.getFieldError(name);
+    form.callMethod(_constant.registerMethods.setItemsStatus, name, errors);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status]);
+}
+function useCollectItemState(item) {
+  var refs = (0, _react.useRef)();
+  var _useFormContext2 = (0, _2.useFormContext)(),
+    form = _useFormContext2.form,
+    __collect__ = _useFormContext2.__collect__,
+    __removeCollect__ = _useFormContext2.__removeCollect__;
+  var initialState = _lodash.default.pick(item, _constant.needCollectItemPropKeys);
+  var _useSetState = (0, _reactUse.useSetState)(initialState),
+    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
+    itemState = _useSetState2[0],
+    collectState = _useSetState2[1];
+  (0, _hooks.useDeepEffect)(function () {
+    if (item.__noCollectState__) {
+      return;
+    }
+    __collect__((0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemState), {}, {
+      refs: refs
+    }));
+  }, [itemState]);
+  useCollectItemsStatus(item);
+  (0, _reactUse.useUnmount)(function () {
+    if (item.__noCollectState__) {
+      return;
+    }
+    if (!item.preserveStatus) {
+      resetError();
+    }
+
+    // ListItem 卸载时，索引会发生变化，所以只需重置 loading，其余属性统一在 FormList 卸载时处理
+    var isListField = item.isListField || !_lodash.default.isEmpty(itemState.formListContext);
+    __removeCollect__(itemState.name, {
+      onlyResetLoading: isListField
+    });
+  });
+  function resetError() {
+    form.callMethod(_constant.registerMethods.resetInternalError, item.name);
+  }
+  return {
+    refs: refs,
+    collectState: collectState,
+    resetError: resetError
+  };
+}
+function FormItemChildren(_ref2) {
+  var item = _ref2.item,
+    items = _ref2.items,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var _useFormContext3 = (0, _2.useFormContext)(),
+    form = _useFormContext3.form,
+    values = _useFormContext3.values,
+    globalDisabled = _useFormContext3.disabled;
+  var params = {
+    form: form,
+    items: items
+  };
+  var type = item.type,
+    name = item.name,
+    disabled = item.disabled,
+    dateProps = item.dateProps,
+    render = item.render,
+    onChange = item.onChange,
+    restItem = (0, _objectWithoutProperties2.default)(item, _excluded2);
+  var _useCollectItemState = useCollectItemState(item),
+    refs = _useCollectItemState.refs,
+    collectState = _useCollectItemState.collectState,
+    resetError = _useCollectItemState.resetError;
+  var baseProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _utils.getComponentProps)(restItem)), {}, {
+    disabled: globalDisabled !== null && globalDisabled !== void 0 ? globalDisabled : (0, _api.executeFunction)(disabled, values, params),
+    onChange: (0, _api.mergeFunction)(resetError, onChange),
+    name: name,
+    refs: refs
+  });
+  var componentProps = (0, _api.mergeProps)(baseProps, props);
+  if (render) {
+    return render((0, _objectSpread2.default)((0, _objectSpread2.default)({}, componentProps), {}, {
+      collectState: collectState,
+      items: items,
+      form: form,
+      refs: refs,
+      id: (0, _utils.getFormItemId)(name, form)
+    }));
+  }
+  if (type in _component.inputMap) {
+    return (0, _jsxRuntime.jsx)(_input.Input, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, componentProps), {}, {
+      type: type
+    }));
+  }
+  var otherComponentProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, componentProps), {}, {
+    options: (0, _utils.transformOptions)(item, values, params)
+  });
+  if (_lodash.default.get(_formItemMap.supportCollectStateItem, type)) {
+    _lodash.default.assign(otherComponentProps, {
+      collectState: collectState
+    });
+  }
+  var Component = _formItemMap.formItemMap[type];
+  // @ts-ignore
+  return (0, _jsxRuntime.jsx)(Component, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherComponentProps), dateProps));
+}
+function FormItemComponent(_ref3) {
+  var item = _ref3.item,
+    items = _ref3.items;
+  var _useFormContext4 = (0, _2.useFormContext)(),
+    form = _useFormContext4.form,
+    values = _useFormContext4.values;
+  var _item$show = item.show,
+    show = _item$show === void 0 ? true : _item$show,
+    className = item.className,
+    style = item.style,
+    flex = item.flex,
+    labelWidth = item.labelWidth,
+    controlWidth = item.controlWidth,
+    requiredMark = item.requiredMark,
+    layout = item.layout,
+    restItem = (0, _objectWithoutProperties2.default)(item, _excluded3);
+
+  // 是否显示
+  var params = {
+    form: form,
+    items: items
+  };
+  if (!(0, _api.executeFunction)(show, values, params)) {
+    return null;
+  }
+  var cssName = (0, _style.getFormItemStyle)({
+    width: (0, _style.getFormItemWidth)(restItem),
+    style: style,
+    flex: flex,
+    labelWidth: labelWidth,
+    controlWidth: controlWidth,
+    requiredMark: requiredMark,
+    layout: layout,
+    type: restItem.type
+  });
+  var formItemProps = (0, _utils.getFormItemProps)((0, _objectSpread2.default)({
+    form: form,
+    style: style,
+    className: (0, _css.cx)(cssName, className),
+    noStyle: (0, _utils.noStyle)(item)
+  }, restItem));
+  return (0, _jsxRuntime.jsx)(_antd.Form.Item, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, formItemProps), {}, {
+    children: (0, _jsxRuntime.jsx)(FormItemChildren, {
+      item: restItem,
+      items: items
+    })
+  }));
+}
+function FormItem(props) {
+  var _useFormContext5 = (0, _2.useFormContext)(),
+    items = _useFormContext5.items,
+    form = _useFormContext5.form;
+  var formListContext = (0, _2.useFormListContext)();
+  var item = (0, _utils.generateFormItem)({
+    form: form,
+    items: items,
+    item: (0, _objectSpread2.default)({}, props),
+    formListContext: formListContext
+  });
+  if (!form) {
+    console.error('FormItem can only be used in Form! \n');
+    return null;
+  }
+  return (0, _jsxRuntime.jsx)(FormItemComponent, {
+    item: item,
+    items: items
+  });
+}