@hsu-react/ui 0.0.1

package/lib/components/Form/DrawerForm/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Button = _interopRequireDefault(require("../../Button"));
+var _antd = require("antd");
+var _FormItem = _interopRequireWildcard(require("../../FormItem"));
+var _react = _interopRequireWildcard(require("react"));
+var _Icon = _interopRequireDefault(require("../../Icon"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _useLabelWidth = _interopRequireDefault(require("../../../hooks/useLabelWidth"));
+var _usePermissions = _interopRequireDefault(require("../../../hooks/usePermissions"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && Object.prototype.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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const DrawerForm = props => {
+  const {
+    formItems,
+    extraFormItems,
+    externalForm,
+    className,
+    value,
+    open,
+    hasPermi,
+    buttonGroup = [],
+    onClose,
+    reset = true,
+    title,
+    ...drawerConfig
+  } = props;
+  const {
+    header,
+    body,
+    footer,
+    mask,
+    content,
+    wrapper
+  } = drawerConfig.classNames ?? {};
+  const [form] = _antd.Form.useForm(externalForm);
+  const [labelWidth] = (0, _useLabelWidth.default)(formItems);
+  const {
+    permitted
+  } = (0, _usePermissions.default)(hasPermi);
+  (0, _react.useEffect)(() => {
+    if (!value || !form || !open || !reset) return;
+    form.resetFields();
+    form.setFieldsValue(value);
+  }, [form, value, open, reset]);
+  const _onClose = () => {
+    onClose?.();
+    if (!form || !reset) return;
+    form.resetFields();
+  };
+  if (!permitted) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Drawer, {
+    open: open,
+    className: (0, _classnames.default)(_indexModule.default.DrawerForm, className),
+    classNames: {
+      header: `${header ?? ""}`,
+      body: `${_indexModule.default.body} ${body ?? ""}`,
+      footer: `${footer ?? ""}`,
+      mask: `${mask ?? ""}`,
+      content: `${content ?? ""}`,
+      wrapper: `${wrapper ?? ""}`
+    },
+    width: 500,
+    closable: false,
+    title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [title, /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: _indexModule.default.close,
+        onClick: _onClose,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          icon: "icon-park-outline:right-c"
+        }), "\u6536\u8D77"]
+      })]
+    }),
+    ...drawerConfig,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Form, {
+      form: form,
+      className: _indexModule.default.form,
+      children: [formItems?.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormItem.default, {
+        requiredMsg: item.name?.endsWith("En") ? `${_FormItem.PlaceholderDictEn[item.type]} ${item.name}` : `${_FormItem.PlaceholderDict[item.type]}${item.label}`,
+        labelWidth: item.layout === "horizontal" ? labelWidth : undefined,
+        className: (0, _classnames.default)(_indexModule.default.formItem, item.className),
+        ...item
+      }, item.name)), extraFormItems?.map(item => {
+        item = {
+          ...item,
+          key: item.props.name,
+          props: {
+            labelWidth: item.props.layout === "horizontal" ? labelWidth : undefined,
+            ...item.props
+          }
+        };
+        return item;
+      })]
+    }), buttonGroup?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _indexModule.default.btns,
+      children: buttonGroup?.map(btn => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          ...btn,
+          className: _indexModule.default.btn,
+          children: btn.title
+        }, btn.title);
+      })
+    })]
+  });
+};
+var _default = exports.default = DrawerForm;

package/lib/components/Form/DrawerForm/index.module.less

@@ -0,0 +1,51 @@
+.DrawerForm {
+  .ant-drawer-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    cursor: default;
+
+    > span {
+      display: flex;
+      align-items: center;
+      column-gap: 5px;
+
+      font-weight: normal;
+
+      opacity: 0.5;
+
+      cursor: pointer;
+    }
+  }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    align-items: center;
+
+    .form {
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: 2%;
+      row-gap: 20px;
+
+      width: 100%;
+
+      .formItem {
+        width: calc((100% - 2%) / 2);
+      }
+    }
+
+    .btns {
+      display: flex;
+      align-items: center;
+      column-gap: 10px;
+
+      .ant-btn-icon {
+        font-size: 16px;
+      }
+    }
+  }
+}

package/lib/components/Form/ImportForm/index.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { UploadProps } from "../../FormItem/FormUpload";
+import { ModalProps } from "../../Modal";
+export interface ImportFormProps extends Omit<ModalProps, "onCancel" | "onOk"> {
+    open?: boolean;
+    title?: string;
+    onCancel?: () => void;
+    uploadAction?: string;
+    template?: string;
+    templateName?: string;
+    hasPermi?: string[];
+    formClassName?: string;
+    formItemClassName?: string;
+    uploadProps?: UploadProps;
+}
+declare const ImportForm: React.FC<ImportFormProps>;
+export default ImportForm;

package/lib/components/Form/ImportForm/index.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _antd = require("antd");
+var _FormItem = _interopRequireWildcard(require("../../FormItem"));
+var _react = _interopRequireDefault(require("react"));
+var _hsuUtils = require("hsu-utils");
+var _request = require("../../../request");
+var _mobxReactLite = require("mobx-react-lite");
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _useLabelWidth = _interopRequireDefault(require("../../../hooks/useLabelWidth"));
+var _usePermissions = _interopRequireDefault(require("../../../hooks/usePermissions"));
+var _Modal = _interopRequireDefault(require("../../Modal"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && Object.prototype.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; }
+const ImportForm = (0, _mobxReactLite.observer)(props => {
+  const {
+    open,
+    uploadAction,
+    template,
+    templateName = "",
+    className,
+    classNames = {},
+    formClassName,
+    formItemClassName,
+    hasPermi,
+    uploadProps,
+    ...modalConfig
+  } = props;
+  const {
+    header,
+    body,
+    footer,
+    mask,
+    content,
+    wrapper
+  } = classNames;
+  const {
+    permitted
+  } = (0, _usePermissions.default)(hasPermi);
+  const onExport = () => {
+    if (!template) return;
+    (0, _request.get)(template, {
+      responseType: "arraybuffer"
+    }).then(res => {
+      (0, _hsuUtils.downloadFile)(res.data.data, res.data.filename || templateName);
+    });
+  };
+  const formItems = [{
+    type: "FILE",
+    label: "上传文件",
+    name: "file",
+    extra: template ? /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+      onClick: e => {
+        e.preventDefault();
+        onExport();
+      },
+      children: "\u70B9\u51FB\u4E0B\u8F7D\u5BFC\u5165\u6A21\u677F"
+    }) : undefined,
+    componentProps: {
+      accept: ".xlsx",
+      onUploadSuccess: () => {
+        _antd.notification.success({
+          message: "导入成功"
+        });
+      },
+      maxCount: 1,
+      inline: true,
+      action: uploadAction,
+      showUploadList: false,
+      ...uploadProps
+    }
+  }];
+  const [labelWidth] = (0, _useLabelWidth.default)(formItems);
+  if (!permitted) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
+    open: open,
+    centered: true,
+    className: `${_indexModule.default.ImportForm} ${className ?? ""}`,
+    width: 600,
+    classNames: {
+      header: `${header ?? ""}`,
+      body: `${_indexModule.default.body} ${body ?? ""}`,
+      footer: `${footer ?? ""}`,
+      mask: `${mask ?? ""}`,
+      content: `${content ?? ""}`,
+      wrapper: `${wrapper ?? ""}`
+    },
+    maskClosable: false,
+    footer: false,
+    ...modalConfig,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Form, {
+      className: `${_indexModule.default.form} ${formClassName ?? ""}`,
+      children: formItems?.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormItem.default, {
+        requiredMsg: item.requiredMsg ?? (item.name?.endsWith("En") ? `${_FormItem.PlaceholderDictEn[item.type]} ${item.name}` : `${_FormItem.PlaceholderDict[item.type]}${item.label}`),
+        labelWidth: labelWidth,
+        className: `${formItemClassName} ${item.className}`,
+        ...item
+      }, item.name))
+    })
+  });
+});
+var _default = exports.default = ImportForm;

package/lib/components/Form/ImportForm/index.module.less

@@ -0,0 +1,10 @@
+.ImportForm {
+  .body {
+    height: max-content;
+    min-height: max-content;
+  }
+
+  .form {
+    padding: 12px 0px;
+  }
+}

package/lib/components/Form/ModalForm/_hooks/useAdaptiveColumnNum.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from "react";
+/**
+ * 根据容器宽度动态调整列数
+ * @param containerRef 需要监听宽度的容器
+ * @param columnNum 基础列数
+ * @param enabled 是否开启自适应
+ * @param minColumnNum 最小列数
+ * @param maxColumnNum 最大列数
+ * @param baseWidth 参考宽度（根据设计稿可调整）
+ */
+export declare const useAdaptiveColumnNum: (containerRef: RefObject<HTMLElement> | HTMLElement | null, columnNum: number, enabled?: boolean, minColumnNum?: number, maxColumnNum?: number, baseWidth?: number, active?: boolean) => number;

package/lib/components/Form/ModalForm/_hooks/useAdaptiveColumnNum.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAdaptiveColumnNum = void 0;
+var _react = require("react");
+/**
+ * 根据容器宽度动态调整列数
+ * @param containerRef 需要监听宽度的容器
+ * @param columnNum 基础列数
+ * @param enabled 是否开启自适应
+ * @param minColumnNum 最小列数
+ * @param maxColumnNum 最大列数
+ * @param baseWidth 参考宽度（根据设计稿可调整）
+ */
+const useAdaptiveColumnNum = (containerRef, columnNum, enabled = true, minColumnNum = 1, maxColumnNum, baseWidth = 1200, active = true) => {
+  const [adaptiveColumnNum, setAdaptiveColumnNum] = (0, _react.useState)(columnNum);
+  (0, _react.useEffect)(() => {
+    if (!enabled || !active) {
+      setAdaptiveColumnNum(columnNum);
+      return;
+    }
+    const container = containerRef && "current" in containerRef ? containerRef.current : containerRef;
+    if (!container) {
+      return;
+    }
+    const calculateColumnNum = () => {
+      if (!container) return;
+      const containerWidth = container.parentElement.offsetWidth;
+
+      // 以 baseWidth 为基准，根据当前容器宽度等比例缩放
+      let next = Math.round(columnNum * containerWidth / baseWidth);
+      if (next < minColumnNum) next = minColumnNum;
+      if (maxColumnNum !== undefined && next > maxColumnNum) {
+        next = maxColumnNum;
+      }
+      setAdaptiveColumnNum(next);
+    };
+    const resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(calculateColumnNum);
+    });
+    resizeObserver.observe(container);
+    window.addEventListener("resize", calculateColumnNum);
+    requestAnimationFrame(calculateColumnNum);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", calculateColumnNum);
+    };
+  }, [containerRef, columnNum, enabled, minColumnNum, maxColumnNum, baseWidth, active]);
+  return enabled ? adaptiveColumnNum : columnNum;
+};
+exports.useAdaptiveColumnNum = useAdaptiveColumnNum;

package/lib/components/Form/ModalForm/_hooks/useColumnFormItems.d.ts

@@ -0,0 +1,7 @@
+import { FormItemProps } from "../../../FormItem";
+/**
+ * 计算列布局中的表单项
+ * @param columnNum 列数
+ * @returns 计算列表单项的函数
+ */
+export declare const useColumnFormItems: (columnNum: number) => (formItems: FormItemProps[], idx: number) => FormItemProps[];

package/lib/components/Form/ModalForm/_hooks/useColumnFormItems.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColumnFormItems = void 0;
+var _react = require("react");
+/**
+ * 计算列布局中的表单项
+ * @param columnNum 列数
+ * @returns 计算列表单项的函数
+ */
+const useColumnFormItems = columnNum => {
+  /**
+   * 获取指定索引之前所有全宽表单项（width === "100%"）的索引
+   * @param formItems 所有表单项
+   * @param endIndex 结束索引（包含）
+   * @returns 全宽表单项的索引数组
+   */
+  const getFullWidthIndices = (0, _react.useCallback)((formItems, endIndex) => {
+    const fullWidthIndices = [];
+    for (let i = 0; i <= endIndex; i++) {
+      if (formItems[i]?.width === "100%") {
+        fullWidthIndices.push(i);
+      }
+    }
+    return fullWidthIndices;
+  }, []);
+
+  /**
+   * 计算表单项在列布局中的实际列位置索引
+   * 考虑全宽项（width === "100%"）会占据整行，影响后续项的列位置
+   * @param formItems 所有表单项
+   * @param itemIndex 表单项的原始索引
+   * @returns 实际列位置索引
+   */
+  const calculateActualColumnIndex = (0, _react.useCallback)((formItems, itemIndex) => {
+    const fullWidthIndices = getFullWidthIndices(formItems, itemIndex);
+
+    // 计算由于全宽项导致的列偏移量
+    // 使用 reduce 累积偏移量
+    const offset = fullWidthIndices.reduce((acc, curr, idx) => acc + (columnNum - (curr + acc + idx * (columnNum - 1)) % columnNum), 0);
+
+    // 全宽项后的补充项数量
+    const supplementItemsCount = fullWidthIndices.filter(idx => idx !== itemIndex).length;
+    const additionalOffset = supplementItemsCount * (columnNum - 1);
+
+    // 返回实际列索引
+    return (itemIndex + offset + additionalOffset) % columnNum;
+  }, [columnNum, getFullWidthIndices]);
+  const columnFormItems = (0, _react.useCallback)((formItems, idx) => {
+    // 计算目标索引的实际列索引
+    const targetColumnIndex = calculateActualColumnIndex(formItems, idx);
+
+    // 筛选出与目标项在同一列的所有表单项
+    const sameColumnItems = formItems.filter((_, itemIndex) => {
+      const itemColumnIndex = calculateActualColumnIndex(formItems, itemIndex);
+      return itemColumnIndex === targetColumnIndex;
+    });
+    return sameColumnItems;
+  }, [calculateActualColumnIndex]);
+  return columnFormItems;
+};
+exports.useColumnFormItems = useColumnFormItems;

package/lib/components/Form/ModalForm/_hooks/useFormItems.d.ts

@@ -0,0 +1,9 @@
+import { FormItemProps } from "../../../FormItem";
+/**
+ * 处理表单项的布局和标签宽度计算
+ * @param formItems 表单项配置
+ * @param layout 布局方式
+ * @param columnNum 列数
+ * @returns 处理后的表单项
+ */
+export declare const useFormItems: (formItems: FormItemProps[] | Record<string, FormItemProps[]>, layout?: "horizontal" | "vertical", columnNum?: number) => Record<string, FormItemProps[]>;

package/lib/components/Form/ModalForm/_hooks/useFormItems.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormItems = void 0;
+var _react = require("react");
+var _useLabelWidth = _interopRequireDefault(require("../../../../hooks/useLabelWidth"));
+var _useColumnFormItems = require("./useColumnFormItems");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * 处理表单项的布局和标签宽度计算
+ * @param formItems 表单项配置
+ * @param layout 布局方式
+ * @param columnNum 列数
+ * @returns 处理后的表单项
+ */
+const useFormItems = (formItems, layout, columnNum = 2) => {
+  const [labelWidth, getLabelWidth] = (0, _useLabelWidth.default)(Array.isArray(formItems) ? formItems : Object.values(formItems ?? {}).flat());
+  const columnFormItems = (0, _useColumnFormItems.useColumnFormItems)(columnNum);
+  const _formItems = (0, _react.useMemo)(() => {
+    const _formItems = Object.assign({}, Array.isArray(formItems) ? {
+      "": formItems
+    } : formItems);
+    Object.keys(_formItems)?.forEach(key => {
+      _formItems[key]?.forEach((item, idx) => {
+        if (layout === "horizontal") {
+          item.labelWidth = getLabelWidth(columnFormItems(_formItems[key], idx));
+        } else {
+          item.labelWidth = labelWidth;
+        }
+      });
+    });
+    return _formItems;
+  }, [formItems, layout, getLabelWidth, columnFormItems, labelWidth]);
+  return _formItems;
+};
+exports.useFormItems = useFormItems;

package/lib/components/Form/ModalForm/index.d.ts

@@ -0,0 +1,30 @@
+import { FormInstance } from "antd";
+import { ModalProps } from "../../Modal";
+import { FormItemProps } from "../../FormItem";
+import React from "react";
+import { ItemContainerProps } from "../../FormItem/ItemContainer";
+import { FormRef } from "rc-field-form";
+export type ExtraFormItem = React.ReactElement<ItemContainerProps>;
+export interface ModalFormProps extends Omit<ModalProps, "onCancel" | "onOk"> {
+    formItems?: FormItemProps[] | Record<string, FormItemProps[]>;
+    extraFormItems?: ExtraFormItem[];
+    externalForm?: FormInstance;
+    onCancel?: () => void;
+    onOk?: (data: Record<string, unknown>, form: FormInstance) => void;
+    value?: Record<string, unknown>;
+    hasPermi?: string[];
+    formClassName?: string;
+    formItemClassName?: string;
+    layout?: "horizontal" | "vertical";
+    formItemLayout?: "horizontal" | "vertical";
+    columnNum?: number;
+    disabled?: boolean;
+    outsideChildren?: React.ReactNode;
+    getFormRef?: (ref: FormRef | null) => void;
+    onValuesChange?: (value: Record<string, unknown>, values: Record<string, unknown>) => void;
+    formItemGroupClassName?: string;
+    formItemGroupTitleClassName?: string;
+    formWrapperClassName?: string;
+}
+declare const ModalForm: React.FC<ModalFormProps>;
+export default ModalForm;

package/lib/components/Form/ModalForm/index.js

@@ -0,0 +1,155 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _antd = require("antd");
+var _Modal = _interopRequireDefault(require("../../Modal"));
+var _FormItem = _interopRequireWildcard(require("../../FormItem"));
+var _react = _interopRequireWildcard(require("react"));
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _usePermissions = _interopRequireDefault(require("../../../hooks/usePermissions"));
+var _useFormItems = require("./_hooks/useFormItems");
+var _useAdaptiveColumnNum = require("./_hooks/useAdaptiveColumnNum");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && Object.prototype.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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ModalForm = props => {
+  const {
+    formItems = [],
+    extraFormItems,
+    externalForm,
+    onCancel,
+    onOk,
+    className,
+    classNames = {},
+    value,
+    open,
+    hasPermi,
+    formClassName,
+    formItemClassName,
+    children,
+    layout,
+    formItemLayout,
+    columnNum = 2,
+    disabled,
+    outsideChildren,
+    getFormRef,
+    onValuesChange,
+    formItemGroupClassName,
+    formItemGroupTitleClassName,
+    formWrapperClassName,
+    ...modalConfig
+  } = props;
+  const {
+    header,
+    body,
+    footer,
+    mask,
+    content,
+    wrapper
+  } = classNames;
+  const [form] = _antd.Form.useForm(externalForm);
+  const {
+    permitted
+  } = (0, _usePermissions.default)(hasPermi);
+  const formRef = (0, _react.useRef)(null);
+  const [formContainer, setFormContainer] = _react.default.useState(null);
+  (0, _react.useEffect)(() => {
+    if (!value || !form || !open) return;
+    form.resetFields();
+    form.setFieldsValue(value);
+  }, [form, value, open]);
+  const _onCancel = () => {
+    onCancel && onCancel();
+    if (!form) return;
+    form.resetFields();
+  };
+  const _onOk = () => {
+    if (!form) return;
+    form.validateFields().then(data => {
+      if (onOk) {
+        onOk && onOk(data, form);
+      } else {
+        form.resetFields();
+      }
+    });
+  };
+  const adaptiveColumnNum = (0, _useAdaptiveColumnNum.useAdaptiveColumnNum)(formContainer, columnNum, true, 1, undefined, 1200, !!open);
+  const _formItems = (0, _useFormItems.useFormItems)(formItems, layout, adaptiveColumnNum);
+  if (!permitted) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
+    open: open,
+    centered: true,
+    className: `${_indexModule.default.ModalForm} ${className ?? ""} ${layout === "horizontal" ? _indexModule.default.horizontal : ""}`,
+    onCancel: _onCancel,
+    onOk: _onOk,
+    width: layout === "horizontal" ? "1200px" : "800px",
+    classNames: {
+      header: `${header ?? ""}`,
+      body: `${_indexModule.default.body} ${body ?? ""}`,
+      footer: `${footer ?? ""}`,
+      mask: `${mask ?? ""}`,
+      content: `${content ?? ""}`,
+      wrapper: `${wrapper ?? ""}`
+    },
+    maskClosable: false,
+    ...modalConfig,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: setFormContainer,
+      className: `${_indexModule.default.formWrapper} ${formWrapperClassName ?? ""}`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Form, {
+        ref: ref => {
+          formRef.current = ref;
+          getFormRef?.(ref);
+        },
+        form: form,
+        className: `${_indexModule.default.form} ${formClassName ?? ""} `,
+        style: {
+          "--column-num": adaptiveColumnNum
+        },
+        onValuesChange: onValuesChange,
+        children: [Object.keys(_formItems ?? {})?.map(key => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: `${_indexModule.default.formItemGroup} ${formItemGroupClassName ?? ""}`,
+          id: key,
+          children: [key && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: `${_indexModule.default.formItemTitle} ${formItemGroupTitleClassName ?? ""}`,
+            children: key
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: _indexModule.default.formItemGroupContent,
+            style: {
+              paddingLeft: !key ? 0 : undefined
+            },
+            children: _formItems?.[key]?.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormItem.default, {
+              requiredMsg: item.requiredMsg ?? (item.name?.endsWith("En") ? `${_FormItem.PlaceholderDictEn[item.type]} ${item.name}` : `${_FormItem.PlaceholderDict[item.type]}${item.label}`),
+              className: `${formItemClassName} ${item.className} ${_indexModule.default.formItem}`,
+              disabled: disabled,
+              required: disabled ? false : item.required,
+              layout: formItemLayout,
+              ...item
+            }, item.name))
+          })]
+        }, key)), extraFormItems?.map(item => {
+          item = {
+            ...item,
+            key: item.props.name,
+            props: {
+              requiredMsg: item.props.requiredMsg ?? (item.props.type && (item.props.name?.endsWith("En") ? `${_FormItem.PlaceholderDictEn[item.props.type]} ${item.props.name}` : `${_FormItem.PlaceholderDict[item.props.type]}${item.props.label}`)),
+              className: `${formItemClassName} ${item.props.className} ${_indexModule.default.formItem}`,
+              disabled,
+              required: disabled ? false : item.props.required,
+              layout: formItemLayout,
+              ...item.props
+            }
+          };
+          return item;
+        }), children]
+      })
+    }), outsideChildren]
+  });
+};
+var _default = exports.default = ModalForm;