doui-react 1.0.0

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

@@ -0,0 +1,280 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["loading", "footer"];
+import { executeFunction } from "../../api";
+import { FormProvider, useValidateForm } from "./..";
+import { useDebounce, useDebounceState, useLoading, useSafeState } from "../../hooks";
+import { Spin } from 'antd';
+import delay from 'delay';
+import _ from 'lodash';
+import { useEffect, useRef, useState } from 'react';
+import { useMount, useSetState, useUpdateEffect } from 'react-use';
+import { registerMethods } from "./constant";
+import { FormItem } from "./form-item";
+import { useDebug } from "./use-debug";
+import { focusFirstInput, generateCollectionKey, getContextWrapper, hasItemLoading, removeFormListFormItems, removeTableEditorFormItems, setContextWrapper, validateFormOnMount } from "./utils";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+function useItemsCollection(_ref) {
+  var form = _ref.form;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
+  var itemsRef = useRef({});
+  var updateItems = useDebounce(function () {
+    var items = _.values(itemsRef.current);
+    setItems(items);
+    form.setItems(items);
+  }, 20);
+  function collect(item) {
+    var key = generateCollectionKey(item.name);
+    if (!key) {
+      return;
+    }
+    _.set(itemsRef.current, key, item);
+    updateItems();
+  }
+  function removeCollect(name) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var key = generateCollectionKey(name);
+    if (!key) {
+      return;
+    }
+    if (options.isFormList) {
+      itemsRef.current = removeFormListFormItems(name, itemsRef.current);
+      return updateItems();
+    }
+    if (options.isTableEditor) {
+      itemsRef.current = removeTableEditorFormItems(name, itemsRef.current);
+      return updateItems();
+    }
+
+    // 只有当 ListItem 卸载时，才重置 loading
+    var path = options.onlyResetLoading ? [key, 'loading'] : key;
+    _.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 = useSetState({}),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    context = _useSetState2[0],
+    setContext = _useSetState2[1];
+  var _useLoading = useLoading( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var context, values;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return executeFunction(initialContext);
+          case 2:
+            context = _context.sent;
+            _context.next = 5;
+            return executeFunction(initialValues, context);
+          case 5:
+            values = _context.sent;
+            form.setFieldsValue(values);
+            setContext(context);
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }))),
+    _useLoading2 = _slicedToArray(_useLoading, 2),
+    _useLoading2$ = _useLoading2[0],
+    loading = _useLoading2$ === void 0 ? true : _useLoading2$,
+    init = _useLoading2[1];
+
+  // 初始化数据
+  useMount(init);
+  return {
+    loading: loading,
+    context: context,
+    setContext: setContext
+  };
+}
+export function useValidateFormOnMount(props) {
+  var isValidated = 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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var params;
+      return _regeneratorRuntime().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 delay(20);
+          case 4:
+            // 等待表单渲染完成
+            params = {
+              form: form,
+              items: items
+            };
+            _context2.next = 7;
+            return validateFormOnMount(params, validateOnMount);
+          case 7:
+            focusFirstInput(_objectSpread(_objectSpread({}, 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 || _.isEmpty(items) || hasItemLoading(items);
+  }
+  var validate = useDebounce(validateForm, 100, {
+    leading: false
+  });
+  useUpdateEffect(function () {
+    validate();
+  }, [loading, items]);
+  return {
+    collect: collect,
+    removeCollect: removeCollect,
+    items: items
+  };
+}
+function useFormSpinning(context) {
+  var _useSafeState = useSafeState(true),
+    _useSafeState2 = _slicedToArray(_useSafeState, 2),
+    spinning = _useSafeState2[0],
+    setSpinning = _useSafeState2[1];
+  var currentSpinning = context.loading || hasItemLoading(context.items);
+  var debounceTime = 100;
+  var updateSpinning = useDebounce(function (loading) {
+    !loading && setSpinning(false);
+  }, debounceTime, {
+    leading: false
+  });
+
+  // 只有首次使用合成 loading
+  useEffect(function () {
+    spinning && updateSpinning(currentSpinning);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentSpinning]);
+
+  // 注册事件
+  context.form.registerMethod(registerMethods.getLoading, function () {
+    return spinning;
+  });
+
+  // 等待 FormItem 渲染校验完成
+  return useDebounceState(spinning, debounceTime);
+}
+function useFormContext(props) {
+  var _useInit = useInit(props),
+    loading = _useInit.loading,
+    initialContext = _useInit.context,
+    setContext = _useInit.setContext;
+  var _useValidateFormOnMou = useValidateFormOnMount(_objectSpread(_objectSpread({}, 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 = _objectSpread(_objectSpread(_objectSpread({}, 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 = setContextWrapper(setContext);
+  form.getContext = getContextWrapper(allContext);
+  return allContext;
+}
+function FormChildren(_ref4) {
+  var items = _ref4.items,
+    children = _ref4.children,
+    onValidate = _ref4.onValidate;
+  useValidateForm({
+    onValidate: onValidate,
+    validateOnly: true
+  });
+  useDebug();
+  if (children) {
+    return _jsx(_Fragment, {
+      children: children
+    });
+  }
+  return _jsx(_Fragment, {
+    children: _.map(items, function (item, index) {
+      return _jsx(FormItem, _objectSpread({}, item), item.name || index);
+    })
+  });
+}
+export function FormContent(_ref5) {
+  var _ref5$loading = _ref5.loading,
+    useLoadingWrapper = _ref5$loading === void 0 ? true : _ref5$loading,
+    footer = _ref5.footer,
+    props = _objectWithoutProperties(_ref5, _excluded);
+  var context = useFormContext(props);
+  function render() {
+    if (useLoadingWrapper) {
+      return _jsxs(Spin, {
+        spinning: context.spinning,
+        children: [_jsx(FormChildren, _objectSpread({}, props)), footer]
+      });
+    }
+    return _jsxs(_Fragment, {
+      children: [_jsx(FormChildren, _objectSpread({}, props)), footer]
+    });
+  }
+  return _jsx(FormProvider, _objectSpread(_objectSpread({}, context), {}, {
+    children: render()
+  }));
+}

package/es/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/es/form/component/form-item-map.js

@@ -0,0 +1,120 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["name", "collectState", "filterNotExistValue", "requiredInOptions", "form"];
+import { Checkbox } from "../../checkbox";
+import { DatePicker, RangePicker } from "../../date-picker";
+import { useFormContext } from "./..";
+import { useDebounce } from "../../hooks";
+import { Radio } from "../../radio";
+import { Select } from "../../select";
+import { Switch } from "../../switch";
+import { Tree } from "../../tree";
+import { TreeSelect } from "../../tree-select";
+import { Slider } from 'antd';
+import delay from 'delay';
+import { isEmpty, transformPathToName, updateNotExistValue } from "./utils";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export function useCollectFormItemState(_ref) {
+  var name = _ref.name,
+    collectState = _ref.collectState,
+    filterNotExistValue = _ref.filterNotExistValue,
+    requiredInOptions = _ref.requiredInOptions,
+    outerForm = _ref.form,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useFormContext = 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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref2) {
+      var loading, options, value, isUpdated;
+      return _regeneratorRuntime().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 || isEmpty(value))) {
+              _context.next = 4;
+              break;
+            }
+            return _context.abrupt("return");
+          case 4:
+            if (requiredInOptionsAndFilterNotExistValue) {
+              _context.next = 8;
+              break;
+            }
+            isUpdated = 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 delay(50);
+          case 11:
+            _context.next = 13;
+            return form.validate(transformPathToName(name));
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return _onCallback.apply(this, arguments);
+  }
+  return _objectSpread(_objectSpread({}, props), {}, {
+    __filterNotExistValue__: !!requiredInOptionsAndFilterNotExistValue,
+    __callback__: useDebounce(onCallback)
+  });
+}
+function FormItemSelect(props) {
+  var params = useCollectFormItemState(props);
+  return _jsx(Select, _objectSpread({}, params));
+}
+function FormItemTreeSelect(props) {
+  var params = useCollectFormItemState(props);
+  return _jsx(TreeSelect, _objectSpread({}, params));
+}
+function FormItemTree(props) {
+  var params = useCollectFormItemState(props);
+  return _jsx(Tree, _objectSpread({}, params));
+}
+function FormItemCheckbox(props) {
+  var params = useCollectFormItemState(_objectSpread({
+    filterNotExistValue: true
+  }, props));
+  return _jsx(Checkbox, _objectSpread({}, params));
+}
+export var supportCollectStateItem = {
+  select: FormItemSelect,
+  treeSelect: FormItemTreeSelect,
+  tree: FormItemTree,
+  checkbox: FormItemCheckbox
+};
+export var formItemMap = _objectSpread({
+  switch: Switch,
+  radio: Radio,
+  slider: Slider,
+  date: DatePicker,
+  rangeDate: RangePicker
+}, supportCollectStateItem);

package/es/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/es/form/component/form-item.js

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