@zat-design/sisyphus-react 4.5.9 → 4.5.10-beta.2

package/es/ProForm/components/combination/Group/component/FlexibleGroup.js

@@ -1,32 +1,19 @@
-import _isFunction from "lodash/isFunction";
-import _isEmpty from "lodash/isEmpty";
-import React from 'react';
-import { Space, Form } from 'antd';
-import classnames from 'classnames';
+import { jsx } from "react/jsx-runtime";
+import { Space, Form } from "antd";
+import classnames from "classnames";
+import isFunction from "lodash/isFunction";
 import { FieldProvider } from "../../../../hooks/useFieldProps";
 import ProForm from "../../../../../ProForm";
 import Render from "../../../render/Render";
 import * as componentMap from "../../../../../index";
 import * as utils from "../utils";
 import { useResetProEditTable, checkShouldShow } from "../hooks";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * 错误提示组件
- */
-const ErrorTip = () => /*#__PURE__*/_jsx("div", {
-  className: "pro-group-error-tip",
-  children: "Group\u914D\u7F6E\u9519\u8BEF\uFF0C\u8BF7\u68C0\u67E5\u63A7\u5236\u53F0\u8B66\u544A\u4FE1\u606F"
-});
-
-/**
- * FlexibleGroup渲染组件
- */
-const FlexibleGroupRender = props => {
+const ErrorTip = () => /* @__PURE__ */ jsx("div", { className: "pro-group-error-tip", children: "Group配置错误，请检查控制台警告信息" });
+const FlexibleGroupRender = (props) => {
+  var _a;
   const {
     children: propsChildren,
-    space = {
-      size: 12
-    },
+    space = { size: 12 },
     className,
     isView: isParentView,
     separator,
@@ -36,54 +23,33 @@ const FlexibleGroupRender = props => {
     otherProps,
     id
   } = props;
-
-  // children可能在props.children或props.fieldProps.children中
-  const children = propsChildren || props.fieldProps?.children || [];
-
-  // 向后兼容处理：优先使用 separator，如果没有则使用 split，最后使用默认值
-  const finalSeparator = separator ?? split ?? '/';
+  const children = propsChildren || ((_a = props.fieldProps) == null ? void 0 : _a.children) || [];
+  const finalSeparator = separator ?? split ?? "/";
   const contextProps = ProForm.useFieldProps() || {};
-  const {
-    form,
-    isView: contextIsView
-  } = contextProps;
-  const isView = isParentView || contextIsView || otherProps?.isView;
-
-  // 使用 hook 处理 ProEditTable 场景下的字段重置逻辑
+  const { form, isView: contextIsView } = contextProps;
+  const isView = isParentView || contextIsView || (otherProps == null ? void 0 : otherProps.isView);
   useResetProEditTable({
     children,
     form,
     namePath: contextProps.namePath,
-    source: otherProps?.source
+    source: otherProps == null ? void 0 : otherProps.source
   });
   const renderFormItem = (child, index) => {
-    // 计算样式（宽度处理）
-    const childWidth = child.fieldProps?.style?.width;
-    const formItemStyle = childWidth ? {
-      width: childWidth
-    } : undefined;
-    const formItemClassName = childWidth ? 'pro-group-form-item pro-group-form-item-has-width' : 'pro-group-form-item';
-
-    // 如果子组件有自定义宽度，从 fieldProps.style 中移除 width，让组件保持默认宽度
-    // 宽度只应用到 Form.Item，不透传到组件本身
-    const adjustedFieldProps = childWidth && child.fieldProps?.style ? {
+    var _a2, _b, _c;
+    const childWidth = (_b = (_a2 = child.fieldProps) == null ? void 0 : _a2.style) == null ? void 0 : _b.width;
+    const formItemStyle = childWidth ? { width: childWidth } : void 0;
+    const formItemClassName = childWidth ? "pro-group-form-item pro-group-form-item-has-width" : "pro-group-form-item";
+    const adjustedFieldProps = childWidth && ((_c = child.fieldProps) == null ? void 0 : _c.style) ? {
       ...child.fieldProps,
       style: (() => {
-        const {
-          width,
-          ...restStyle
-        } = child.fieldProps.style;
+        const { width, ...restStyle } = child.fieldProps.style;
         return restStyle;
       })()
     } : child.fieldProps;
-
-    // 检查 child 是否来自 FormList 的处理（已有处理过的参数）
-    const isFromFormList = child?.source === 'FormList';
+    const isFromFormList = (child == null ? void 0 : child.source) === "FormList";
     const childNamePath = child.namePath || contextProps.namePath;
     const childIndex = child.index;
     const childListName = child.listName;
-
-    // 需要判断childNamePath来源是FormList还是ProEditTable
     const fullName = (() => {
       if (isFromFormList) {
         return child.name;
@@ -96,41 +62,30 @@ const FlexibleGroupRender = props => {
       }
       return child.name;
     })();
-
-    // 处理依赖关系 - 支持相对路径和绝对路径
     const safeDependencies = Array.isArray(child.dependencies) ? child.dependencies : [];
-    const processedDependencies = safeDependencies.map(dep => {
-      if (typeof dep === 'string') {
-        // 相对路径：同Group内的其他字段
+    const processedDependencies = safeDependencies.map((dep) => {
+      if (typeof dep === "string") {
         return childNamePath ? [...childNamePath, dep] : dep;
       }
-      return dep; // 绝对路径保持不变
+      return dep;
     });
-
-    // 获取组件类型
-    const type = child.type || 'Input';
+    const type = child.type || "Input";
     const TargetComponent = componentMap[type];
-
-    // 处理 disabled（可能是函数）
-    const childDisabled = typeof child.disabled === 'function' ? false : child.disabled;
+    const childDisabled = typeof child.disabled === "function" ? false : child.disabled;
     const finalDisabled = groupDisabled || childDisabled;
-
-    // 构建 formItemProps - 在非编辑态时移除校验规则
     const formItemProps = {
       name: fullName,
       label: child.label,
-      rules: isView ? undefined : child.rules,
+      rules: isView ? void 0 : child.rules,
       dependencies: processedDependencies,
       extra: child.extra,
       before: child.before,
       after: child.after,
-      required: isView ? undefined : child.required,
+      required: isView ? void 0 : child.required,
       disabled: finalDisabled,
       validateFirst: child.validateFirst
     };
-
-    // 如果 child 来自 FormList 的处理，传递 index、namePath、listName
-    if (childIndex !== undefined) {
+    if (childIndex !== void 0) {
       formItemProps.index = childIndex;
     }
     if (childNamePath) {
@@ -139,19 +94,14 @@ const FlexibleGroupRender = props => {
     if (childListName) {
       formItemProps.listName = childListName;
     }
-
-    // 处理 tooltip（类型兼容）
     if (child.tooltip) {
       formItemProps.tooltip = child.tooltip;
     }
-
-    // 在ProEditTable场景下，如果同组其他字段有值，则当前字段空值不显示 -
-    let childViewEmpty = otherProps?.viewEmpty;
-    if (isView && otherProps?.source === 'ProEditTable' && form && children.length > 1) {
-      // 检查同组其他字段是否有值
-      const hasOtherValues = children.some(otherChild => {
-        if (otherChild === child) return false; // 跳过当前字段
-
+    let childViewEmpty = otherProps == null ? void 0 : otherProps.viewEmpty;
+    if (isView && (otherProps == null ? void 0 : otherProps.source) === "ProEditTable" && form && children.length > 1) {
+      const hasOtherValues = children.some((otherChild) => {
+        if (otherChild === child)
+          return false;
         const otherChildNamePath = otherChild.namePath || contextProps.namePath;
         const otherFullName = (() => {
           if (otherChildNamePath && Array.isArray(otherChild.name) && otherChild.name.length > 1) {
@@ -163,16 +113,12 @@ const FlexibleGroupRender = props => {
           return otherChild.name;
         })();
         const value = form.getFieldValue(otherFullName);
-        return value !== undefined && value !== null && value !== '';
+        return value !== void 0 && value !== null && value !== "";
       });
-
-      // 如果有其他字段有值，当前字段空值显示为空字符串
       if (hasOtherValues) {
-        childViewEmpty = '';
+        childViewEmpty = "";
       }
     }
-
-    // 构建 otherProps
     const renderOtherProps = {
       label: child.label,
       name: fullName,
@@ -182,148 +128,122 @@ const FlexibleGroupRender = props => {
       valueType: child.valueType,
       form,
       type,
-      colProps: {
-        span: 24
-      },
+      colProps: { span: 24 },
       // 灵活模式不需要 Col，但需要传递 colProps
       namePath: childNamePath || contextProps.namePath,
-      formDisabled: otherProps?.formDisabled,
-      globalControl: otherProps?.globalControl,
-      diffConfig: otherProps?.diffConfig,
-      shouldUpdateDebounce: otherProps?.shouldUpdateDebounce,
+      formDisabled: otherProps == null ? void 0 : otherProps.formDisabled,
+      globalControl: otherProps == null ? void 0 : otherProps.globalControl,
+      diffConfig: otherProps == null ? void 0 : otherProps.diffConfig,
+      shouldUpdateDebounce: otherProps == null ? void 0 : otherProps.shouldUpdateDebounce,
       // 灵活模式样式属性
       flexibleGroupProps: {
         className: formItemClassName,
         style: formItemStyle
       }
     };
-
-    // 如果 child 来自 FormList 的处理，传递 listName
     if (childListName) {
       renderOtherProps.listName = childListName;
     }
-    return /*#__PURE__*/_jsx(FieldProvider, {
-      value: renderOtherProps,
-      children: /*#__PURE__*/_jsx(Render, {
+    return /* @__PURE__ */ jsx(FieldProvider, { value: renderOtherProps, children: /* @__PURE__ */ jsx(
+      Render,
+      {
         show: child.show,
         disabled: child.disabled,
         originComponent: child.component,
         component: TargetComponent,
-        formItemProps: formItemProps,
+        formItemProps,
         confirm: child.confirm,
         componentProps: adjustedFieldProps || {},
         otherProps: renderOtherProps,
         fieldProps: child.fieldProps,
-        isSelect: false // 由 Render 内部计算
-        ,
-        requiredOnView: otherProps?.requiredOnView,
+        isSelect: false,
+        requiredOnView: otherProps == null ? void 0 : otherProps.requiredOnView,
         viewRender: child.viewRender
-      })
-    }, child.name || `item-${index}`);
+      }
+    ) }, String(child.name ?? `item-${index}`));
   };
-
-  // 非compact模式：正常的表单项渲染
   const renderChildren = () => {
     const elements = [];
     const visibleChildren = [];
-
-    // 先过滤出可见的子项
-    children.forEach(child => {
+    children.forEach((child) => {
       const childNamePath = child.namePath || contextProps.namePath;
       const childIndex = child.index;
       if (checkShouldShow(child, form, childNamePath, childIndex)) {
         visibleChildren.push(child);
       }
     });
-
-    // 只渲染可见的子项
     visibleChildren.forEach((child, index) => {
-      // 找到原始索引，用于获取正确的 child 对象和分隔符索引计算
-      const originalIndex = children.findIndex(c => c === child);
-
-      // 渲染表单项
+      const originalIndex = children.findIndex((c) => c === child);
       const formElement = renderFormItem(child, originalIndex);
       elements.push(formElement);
-
-      // 添加分隔符（除最后一个元素外）
-      if (index < visibleChildren.length - 1 && space?.separator) {
-        // 检查是否在指定位置添加分隔符
-        const shouldAddSeparator = space.separatorIndex ? Array.isArray(space.separatorIndex) ? space.separatorIndex.includes(originalIndex) : space.separatorIndex === originalIndex : true; // 默认每个元素后都加分隔符
-
+      if (index < visibleChildren.length - 1 && (space == null ? void 0 : space.separator)) {
+        const shouldAddSeparator = space.separatorIndex != null ? Array.isArray(space.separatorIndex) ? space.separatorIndex.includes(originalIndex) : space.separatorIndex === originalIndex : true;
         if (shouldAddSeparator) {
-          elements.push( /*#__PURE__*/_jsx("span", {
-            className: "pro-group-separator-space",
-            children: space.separator
-          }, child.name ? `separator-${child.name}` : `separator-${originalIndex}`));
+          elements.push(
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "pro-group-separator-space",
+                children: space.separator
+              },
+              `separator-${String(child.name ?? originalIndex)}`
+            )
+          );
         }
       }
     });
     return elements;
   };
-
-  // compact模式专用：为每个字段创建可见的Form.Item，并使用CSS实现compact视觉效果
   const renderCompactFormItems = () => {
     const elements = [];
     const visibleChildren = [];
-
-    // 先过滤出可见的子项
-    children.forEach(child => {
+    children.forEach((child) => {
       const childNamePath = child.namePath || contextProps.namePath;
       const childIndex = child.index;
       if (checkShouldShow(child, form, childNamePath, childIndex)) {
         visibleChildren.push(child);
       }
     });
-
-    // 只渲染可见的子项
     visibleChildren.forEach((child, index) => {
-      // 找到原始索引，用于获取正确的 child 对象和分隔符索引计算
-      const originalIndex = children.findIndex(c => c === child);
-
-      // 为每个字段创建独立的Form.Item，确保表单校验正常工作
+      const originalIndex = children.findIndex((c) => c === child);
       const formElement = renderFormItem(child, originalIndex);
       elements.push(formElement);
-
-      // 添加分隔符
-      // 查看模式下，如果没有配置separator，使用默认的 finalSeparator
-      const separatorToUse = isView ? space?.separator || finalSeparator : space?.separator;
+      const separatorToUse = isView ? (space == null ? void 0 : space.separator) || finalSeparator : space == null ? void 0 : space.separator;
       if (index < visibleChildren.length - 1 && separatorToUse) {
-        const shouldAddSeparator = space.separatorIndex ? Array.isArray(space.separatorIndex) ? space.separatorIndex.includes(originalIndex) : space.separatorIndex === originalIndex : true;
+        const shouldAddSeparator = space.separatorIndex != null ? Array.isArray(space.separatorIndex) ? space.separatorIndex.includes(originalIndex) : space.separatorIndex === originalIndex : true;
         if (shouldAddSeparator) {
-          // 查看模式下使用不同的className，避免显示边框
-          const separatorClassName = isView ? 'pro-group-separator-compact pro-group-separator-view' : 'pro-group-separator-compact';
-          elements.push( /*#__PURE__*/_jsx("span", {
-            className: separatorClassName,
-            children: separatorToUse
-          }, child.name ? `separator-${child.name}` : `separator-${originalIndex}`));
+          const separatorClassName = isView ? "pro-group-separator-compact pro-group-separator-view" : "pro-group-separator-compact";
+          elements.push(
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: separatorClassName,
+                children: separatorToUse
+              },
+              `separator-${String(child.name ?? originalIndex)}`
+            )
+          );
         }
       }
     });
-    return /*#__PURE__*/_jsx("div", {
-      className: "ant-space ant-space-horizontal ant-space-compact pro-group-compact-container",
-      children: elements
-    });
+    return /* @__PURE__ */ jsx("div", { className: "ant-space ant-space-horizontal ant-space-compact pro-group-compact-container", children: elements });
   };
   const nextClassName = classnames({
-    'pro-group': true,
-    'pro-group-flexible': true,
-    'pro-group-diy-width': children.some(item => item?.fieldProps?.style?.width),
-    'pro-group-width-auto': children.some(item => ['Radio', 'Checkbox', 'Switch'].includes(item.type)),
-    'pro-group-view': isView,
+    "pro-group": true,
+    "pro-group-flexible": true,
+    "pro-group-diy-width": children.some((item) => {
+      var _a2, _b;
+      return (_b = (_a2 = item == null ? void 0 : item.fieldProps) == null ? void 0 : _a2.style) == null ? void 0 : _b.width;
+    }),
+    "pro-group-width-auto": children.some(
+      (item) => ["Radio", "Checkbox", "Switch"].includes(item.type)
+    ),
+    "pro-group-view": isView,
     [`${className}`]: className
   });
-
-  // 检查是否有子项包含 show 函数，如果有则需要响应式更新
-  const hasShowFunction = children.some(child => _isFunction(child.show));
-
-  // 查看模式下空值处理
-  if (isView && _isEmpty(children)) {
-    return otherProps?.viewEmpty || '-';
-  }
-
-  // 查看模式下，检查所有children的值是否都为空
+  const hasShowFunction = children.some((child) => isFunction(child.show));
   if (isView && form && children.length > 0) {
-    const allValuesEmpty = children.every(child => {
+    const allValuesEmpty = children.every((child) => {
       const childNamePath = child.namePath || contextProps.namePath;
       const fullName = (() => {
         if (childNamePath && Array.isArray(child.name) && child.name.length > 1) {
@@ -335,60 +255,33 @@ const FlexibleGroupRender = props => {
         return child.name;
       })();
       const value = form.getFieldValue(fullName);
-      return value === undefined || value === null || value === '';
+      return value === void 0 || value === null || value === "";
     });
-
-    // 如果所有值都为空，显示一个 -
     if (allValuesEmpty) {
-      return otherProps?.viewEmpty || '-';
+      return (otherProps == null ? void 0 : otherProps.viewEmpty) || "-";
     }
   }
-
-  // 渲染内容
   const renderContent = () => {
-    return /*#__PURE__*/_jsx("div", {
-      className: nextClassName,
-      id: id,
-      children: space.compact ?
+    return /* @__PURE__ */ jsx("div", { className: nextClassName, id, children: space.compact ? (
       // compact模式：使用Form.Item确保表单校验正常工作
-      renderCompactFormItems() : /*#__PURE__*/_jsx(Space, {
-        align: "start",
-        size: space.size || 12,
-        separator: isView ? finalSeparator : null,
-        children: renderChildren()
-      })
-    });
+      renderCompactFormItems()
+    ) : /* @__PURE__ */ jsx(Space, { align: "start", size: space.size || 12, separator: isView ? finalSeparator : null, children: renderChildren() }) });
   };
-
-  // 如果有 show 函数，使用 Form.Item 的 shouldUpdate 来监听表单值变化
   if (hasShowFunction && form) {
-    return /*#__PURE__*/_jsx(Form.Item, {
-      shouldUpdate: () => true,
-      noStyle: true,
-      children: renderContent
-    });
+    return /* @__PURE__ */ jsx(Form.Item, { shouldUpdate: () => true, noStyle: true, children: renderContent });
   }
   return renderContent();
 };
-
-/**
- * FlexibleGroup主组件
- */
-const FlexibleGroup = props => {
-  const {
-    children: propsChildren
-  } = props;
-
-  // children可能在props.children或props.fieldProps.children中
-  const children = propsChildren || props.fieldProps?.children || [];
-
-  // 配置验证
+const FlexibleGroup = (props) => {
+  var _a;
+  const { children: propsChildren } = props;
+  const children = propsChildren || ((_a = props.fieldProps) == null ? void 0 : _a.children) || [];
   if (!utils.validateChildren(children)) {
-    return /*#__PURE__*/_jsx(ErrorTip, {});
+    return /* @__PURE__ */ jsx(ErrorTip, {});
   }
-  return /*#__PURE__*/_jsx(FlexibleGroupRender, {
-    ...props,
-    children: children
-  });
+  return /* @__PURE__ */ jsx(FlexibleGroupRender, { ...props, children });
+};
+var FlexibleGroup_default = FlexibleGroup;
+export {
+  FlexibleGroup_default as default
 };
-export default FlexibleGroup;