@zat-design/sisyphus-react 4.0.0-beta.8 → 4.0.0

package/lib/ProForm/components/combination/Group/hooks/index.js

@@ -1,18 +1,19 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTransformColumns = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+exports.useTransformColumns = exports.useResetProEditTable = exports.checkShouldShow = void 0;
 var _react = require("react");
 var _lodash = require("lodash");
 var _useDeepCompareMemo = require("../../../../utils/useDeepCompareMemo");
 var _tools = require("../../../../../ProEditTable/utils/tools");
 var _utils = require("../utils");
-/* eslint-disable no-lonely-if */
-
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable no-lonely-if */
 /** 转换columns */
 var useTransformColumns = params => {
   var form = params.form,
@@ -131,7 +132,6 @@ var useTransformColumns = params => {
         form,
         option: args === null || args === void 0 ? void 0 : args[1]
       });
-
       // 如果是在可编辑表格或formList内部, 储存当前行的值, 并在变更后更新到表单里
       if (namePath !== null && namePath !== void 0 && namePath.length && !(0, _lodash.isEqual)(originRow, values)) {
         var _Object$keys, _Object$keys$map;
@@ -166,12 +166,12 @@ var useTransformColumns = params => {
       }
       return reactiveProps.disabled || groupProps.disabled;
     };
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, column), {}, {
+    return _objectSpread(_objectSpread(_objectSpread({}, column), {}, {
       name: columnName
     }, reactiveProps), {}, {
       disabled: getLastDisabled(),
       getValueProps: transform === null || transform === void 0 ? void 0 : transform.getValueProps,
-      fieldProps: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, column === null || column === void 0 ? void 0 : column.fieldProps), reactiveProps === null || reactiveProps === void 0 ? void 0 : reactiveProps.fieldProps), {}, {
+      fieldProps: _objectSpread(_objectSpread(_objectSpread({}, column === null || column === void 0 ? void 0 : column.fieldProps), reactiveProps === null || reactiveProps === void 0 ? void 0 : reactiveProps.fieldProps), {}, {
         onChange: handleChange,
         onBlur: handleBlur,
         value: value === null || value === void 0 ? void 0 : value[index]
@@ -179,4 +179,106 @@ var useTransformColumns = params => {
     });
   });
 };
-exports.useTransformColumns = useTransformColumns;
+
+/**
+ * 检查子项是否应该显示（纯函数，不执行副作用）
+ */
+exports.useTransformColumns = useTransformColumns;
+var checkShouldShow = (child, form, namePath, index) => {
+  var show = child.show;
+
+  // 如果没有配置 show，默认显示
+  if (show === undefined || show === true) {
+    return true;
+  }
+
+  // 如果 show 是 false，不显示
+  if (show === false) {
+    return false;
+  }
+
+  // 如果 show 是函数，需要获取表单值来评估
+  if ((0, _lodash.isFunction)(show)) {
+    var values = {};
+    if (namePath) {
+      // FormList 场景：取当前行数据
+      values = form.getFieldValue(namePath) || {};
+    } else {
+      // 普通场景：取整个表单值
+      values = form.getFieldsValue(true);
+    }
+    return Boolean(show(values, {
+      form,
+      index,
+      namePath
+    }));
+  }
+  return true;
+};
+exports.checkShouldShow = checkShouldShow;
+/**
+ * ProEditTable 场景下，当字段的 show 从 true 变为 false 时，自动重置字段值
+ * 使用 useEffect 在副作用中执行重置，避免在渲染过程中调用 setState
+ */
+var useResetProEditTable = params => {
+  var children = params.children,
+    form = params.form,
+    namePath = params.namePath,
+    source = params.source;
+
+  // 用于跟踪每个子项的显示状态
+  var showStateRef = (0, _react.useRef)(new Map());
+  // 用于存储重置定时器
+  var resetTimersRef = (0, _react.useRef)(new Map());
+  (0, _react.useEffect)(() => {
+    // 只在 ProEditTable 场景下执行重置逻辑
+    if (source !== 'ProEditTable') {
+      return;
+    }
+
+    // 检查每个子项的显示状态
+    children.forEach(child => {
+      var childNamePath = child.namePath || namePath;
+      var childIndex = child.index;
+
+      // 生成唯一 key 用于跟踪状态
+      var childKey = child.name ? Array.isArray(child.name) ? `${JSON.stringify(childNamePath)}-${JSON.stringify(child.name)}` : `${JSON.stringify(childNamePath)}-${child.name}` : `child-${children.indexOf(child)}`;
+
+      // 计算当前显示状态
+      var currentShow = checkShouldShow(child, form, childNamePath, childIndex);
+      var previousShow = showStateRef.current.get(childKey);
+
+      // 如果状态发生变化，且从显示变为隐藏，执行重置
+      if (previousShow !== undefined && previousShow === true && currentShow === false) {
+        // 清除之前的定时器
+        var existingTimer = resetTimersRef.current.get(childKey);
+        if (existingTimer) {
+          clearTimeout(existingTimer);
+        }
+
+        // 延迟执行重置，避免在渲染过程中调用
+        var timer = setTimeout(() => {
+          if (Array.isArray(child.name)) {
+            form.resetFields([[...childNamePath, ...child.name]]);
+          } else {
+            form.resetFields([[...childNamePath, child.name]]);
+          }
+          resetTimersRef.current.delete(childKey);
+        }, 300);
+        resetTimersRef.current.set(childKey, timer);
+      }
+
+      // 更新显示状态
+      showStateRef.current.set(childKey, currentShow);
+    });
+
+    // 清理函数：组件卸载时清除所有定时器
+    return () => {
+      resetTimersRef.current.forEach(timer => {
+        clearTimeout(timer);
+      });
+      resetTimersRef.current.clear();
+    };
+  }, [children, namePath, source, form]);
+};
+exports.useResetProEditTable = useResetProEditTable;

package/lib/ProForm/components/combination/Group/index.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import type { GroupType } from './propsType';
 /**
- * 1. 外层过滤FormItem相关属性, 但是子元素上的 required [disabled] [show] rules [fieldProps] [component] 需要取到并
- * 2.
- *
- * render内部能力 show, component, value, onChange, disabled, clearNotShow, fieldProps
+ * Group组件 - 支持传统模式和灵活模式
+ * - 有names属性 → 传统数组模式（保持向后兼容）
+ * - 无names属性 → 新的灵活模式（子组件必须配置name）
  */
 declare const Group: React.FC<GroupType>;
 export default Group;

package/lib/ProForm/components/combination/Group/index.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _antd = require("antd");
 var _react = _interopRequireDefault(require("react"));
 var _lodash = require("lodash");
@@ -14,17 +12,22 @@ var _utils = require("./utils");
 var _hooks = require("./hooks");
 var _ProForm = _interopRequireDefault(require("../../../../ProForm"));
 var _ComRender = _interopRequireDefault(require("./component/ComRender"));
+var _FlexibleGroup = _interopRequireDefault(require("./component/FlexibleGroup"));
 var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 1. 外层过滤FormItem相关属性, 但是子元素上的 required [disabled] [show] rules [fieldProps] [component] 需要取到并
- * 2.
- *
- * render内部能力 show, component, value, onChange, disabled, clearNotShow, fieldProps
- */var Group = props => {
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
+ * 传统数组模式Group组件（保持向后兼容）
+ */
+var LegacyGroup = props => {
+  var _ref, _fieldProps;
   var children = props.children,
     className = props.className,
     _props$space = props.space,
-    space = _props$space === void 0 ? {
+    propsSpace = _props$space === void 0 ? {
       size: 12
     } : _props$space,
     value = props.value,
@@ -33,8 +36,15 @@ var _jsxRuntime = require("react/jsx-runtime");
     id = props.id,
     isParentView = props.isView,
     formDisabled = props.disabled,
-    _props$split = props.split,
-    split = _props$split === void 0 ? '/' : _props$split;
+    separator = props.separator,
+    split = props.split;
+
+  // 向后兼容处理：优先使用 separator，如果没有则使用 split，最后使用默认值
+  var finalSeparator = (_ref = separator !== null && separator !== void 0 ? separator : split) !== null && _ref !== void 0 ? _ref : '/';
+
+  // 支持从 fieldProps.space 获取 space 配置
+  var fieldPropsSpace = (_fieldProps = props.fieldProps) === null || _fieldProps === void 0 ? void 0 : _fieldProps.space;
+  var space = fieldPropsSpace || propsSpace;
   var contextProps = _ProForm.default.useFieldProps() || {};
   var names = contextProps.names,
     name = contextProps.name,
@@ -67,6 +77,7 @@ var _jsxRuntime = require("react/jsx-runtime");
   var columns = (0, _utils.insertSeparator)(columnsProps, space);
   var nextClassName = (0, _classnames.default)({
     'pro-group': true,
+    'pro-group-unflexible': true,
     'pro-group-diy-width': columns.some(item => {
       var _item$fieldProps;
       return item === null || item === void 0 || (_item$fieldProps = item.fieldProps) === null || _item$fieldProps === void 0 || (_item$fieldProps = _item$fieldProps.style) === null || _item$fieldProps === void 0 ? void 0 : _item$fieldProps.width;
@@ -80,26 +91,71 @@ var _jsxRuntime = require("react/jsx-runtime");
   if (nextIsView && (0, _lodash.isEmpty)(value)) {
     return (otherProps === null || otherProps === void 0 ? void 0 : otherProps.viewEmpty) || '-';
   }
+
+  // compact模式专用：为每个字段创建可见的Form.Item，并应用宽度样式
+  var renderCompactFormItems = () => {
+    var elements = [];
+    columns.forEach((column, index) => {
+      var _column$fieldProps;
+      // 检测是否有自定义宽度
+      var childWidth = column === null || column === void 0 || (_column$fieldProps = column.fieldProps) === null || _column$fieldProps === void 0 || (_column$fieldProps = _column$fieldProps.style) === null || _column$fieldProps === void 0 ? void 0 : _column$fieldProps.width;
+      var formItemStyle = childWidth ? {
+        width: childWidth
+      } : undefined;
+      var formItemClassName = childWidth ? 'pro-group-form-item pro-group-form-item-has-width' : 'pro-group-form-item';
+
+      // 创建新的 column 对象，避免直接修改原对象
+      var newColumn = _objectSpread({}, column);
+      newColumn.otherProps = otherProps;
+
+      // 如果子组件有自定义宽度，将子组件的宽度改为 100%，让它填充 Form.Item
+      if (childWidth) {
+        var _newColumn$fieldProps;
+        newColumn.fieldProps = _objectSpread(_objectSpread({}, newColumn.fieldProps), {}, {
+          style: _objectSpread(_objectSpread({}, (_newColumn$fieldProps = newColumn.fieldProps) === null || _newColumn$fieldProps === void 0 ? void 0 : _newColumn$fieldProps.style), {}, {
+            width: '100%'
+          })
+        });
+      }
+
+      // 自定义间隔移除对应参数
+      if (newColumn !== null && newColumn !== void 0 && newColumn.separator) {
+        delete newColumn.separator;
+        delete newColumn.otherProps;
+      }
+
+      // 传统模式 compact 模式：将 Form.Item 相关的 props 传递给 ComRender
+      // ComRender 内部会处理 Form.Item 的渲染，避免嵌套
+      var dependencies = names && names.length > 0 ? names.filter(n => n !== newColumn.name) : undefined;
+      var formElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComRender.default, _objectSpread({
+        contextProps: contextProps,
+        isView: nextIsView,
+        formItemClassName: formItemClassName,
+        formItemStyle: formItemStyle,
+        dependencies: dependencies
+      }, newColumn), newColumn.name || index);
+      elements.push(formElement);
+
+      // 添加分隔符
+      if (newColumn !== null && newColumn !== void 0 && newColumn.separator && index < columns.length - 1) {
+        elements.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "pro-group-separator-compact",
+          children: newColumn.separator
+        }, `separator-${newColumn.name || index}`));
+      }
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "ant-space ant-space-horizontal ant-space-compact pro-group-compact-container",
+      children: elements
+    });
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: nextClassName,
     id: id,
-    children: (space.compact || space !== null && space !== void 0 && space.separator) && !nextIsView ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space.Compact, {
-      children: columns.map((column, index) => {
-        column.otherProps = otherProps;
-        // 自定义间隔移除对应参数
-        if (column !== null && column !== void 0 && column.separator) {
-          delete column.separator;
-          delete column.otherProps;
-        }
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComRender.default, (0, _objectSpread2.default)({
-          contextProps: contextProps,
-          isView: nextIsView
-        }, column), column.name || index);
-      })
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    children: (space.compact || space !== null && space !== void 0 && space.separator) && !nextIsView ? renderCompactFormItems() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, _objectSpread(_objectSpread({
       align: "start"
     }, (0, _lodash.omit)(space, ['separator', 'compact'])), {}, {
-      split: nextIsView ? split : null,
+      separator: nextIsView ? finalSeparator : null,
       size: nextIsView ? 0 : space.size,
       children: columns.map((column, index) => {
         column.otherProps = otherProps;
@@ -107,7 +163,7 @@ var _jsxRuntime = require("react/jsx-runtime");
           delete column.separator;
           delete column.otherProps;
         }
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComRender.default, (0, _objectSpread2.default)({
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComRender.default, _objectSpread({
           contextProps: contextProps,
           isView: nextIsView
         }, column), column.name || index);
@@ -115,4 +171,32 @@ var _jsxRuntime = require("react/jsx-runtime");
     }))
   });
 };
+
+/**
+ * Group组件 - 支持传统模式和灵活模式
+ * - 有names属性 → 传统数组模式（保持向后兼容）
+ * - 无names属性 → 新的灵活模式（子组件必须配置name）
+ */
+var Group = props => {
+  var _ref2 = props,
+    children = _ref2.children,
+    names = _ref2.names,
+    otherProps = _ref2.otherProps;
+
+  // names可能在props.names或props.otherProps.names中（来自ProForm的传递）
+  var actualNames = names || (otherProps === null || otherProps === void 0 ? void 0 : otherProps.names);
+
+  // 模式检测：基于names属性判断使用哪种模式
+  // 传统模式：有names属性且为非空数组
+  // 灵活模式：无names属性或names为空，children中的子项必须配置name
+  var isLegacyMode = Array.isArray(actualNames) && actualNames.length > 0;
+  if (isLegacyMode) {
+    // 传统模式：使用names数组管理值，确保names被传递给LegacyGroup
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(LegacyGroup, _objectSpread(_objectSpread({}, props), {}, {
+      names: actualNames
+    }));
+  }
+  // 灵活模式：子组件独立管理name和rules
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexibleGroup.default, _objectSpread({}, props));
+};
 var _default = exports.default = Group;

package/lib/ProForm/components/combination/Group/propsType.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormItemProps, ModalFuncProps, SpaceProps } from 'antd';
+import type { RuleObject } from 'antd/es/form';
 import { FormInstance } from 'antd/es/form/Form';
 import { NamePath } from 'antd/lib/form/interface';
 import type { ColumnTypeMap, FunctionArgs, ProFormValueType, ReactiveFunction, ViewType } from '../../render/propsType';
@@ -18,7 +19,9 @@ export interface SpaceType extends SpaceProps {
     size?: number;
 }
 export interface GroupType {
-    children?: GroupColumnType[];
+    children?: GroupColumnType[] | FlexibleGroupColumnType[];
+    /** 传统模式：字段名称数组（与children索引对应） */
+    names?: NamePath[];
     space?: SpaceType;
     className?: string;
     id?: string;
@@ -28,6 +31,10 @@ export interface GroupType {
     onChange?: (value: any[] | null, options?: any[]) => void;
     otherProps?: any;
     /** 分隔符 */
+    separator?: string | React.ReactNode;
+    /**
+     * @deprecated 已弃用，请使用 separator 替代
+     */
     split?: string | React.ReactNode;
 }
 export type GroupColumnType<Values = any> = {
@@ -54,6 +61,42 @@ export type GroupColumnType<Values = any> = {
     getValueProps?: (value: any) => Record<string, unknown>;
     desensitization?: [number, number] | ReactiveFunction<Values, [number, number]>;
 } & ColumnTypeMap & FormItemProps;
+/**
+ * 灵活模式子组件类型定义（新模式）
+ */
+export interface FlexibleGroupColumnType<Values = any> extends Omit<GroupColumnType<Values>, 'names' | 'tooltip' | 'rules'> {
+    /** 字段名称，新模式下必须 */
+    name: NamePath;
+    /** 字段标签 */
+    label?: React.ReactNode;
+    /** 校验规则，支持函数化 */
+    rules?: RuleObject[] | ReactiveFunction<Values, RuleObject[]>;
+    /** 是否必填 */
+    required?: boolean;
+    /** 字段依赖 */
+    dependencies?: NamePath[];
+    /** 提示信息 */
+    tooltip?: string | {
+        title: string;
+        icon?: React.ReactNode;
+    };
+    /** 额外信息 */
+    extra?: React.ReactNode;
+    /** 前置内容 */
+    before?: React.ReactNode;
+    /** 后置内容 */
+    after?: React.ReactNode;
+    /** 确认操作 */
+    confirm?: boolean | ModalFuncProps | FunctionArgs<Values, boolean | ModalFuncProps>;
+    /** 显示控制，支持函数化 */
+    show?: boolean | ReactiveFunction<Values, boolean>;
+    /** 禁用状态，支持函数化 */
+    disabled?: boolean | ReactiveFunction<Values, boolean>;
+    /** 自定义组件，支持函数化 */
+    component?: React.ReactNode | ReactiveFunction<Values, React.ReactNode>;
+    /** 字段属性，支持函数化 */
+    fieldProps?: any | ReactiveFunction<Values, any>;
+}
 /**
  * 兼容旧命名导出
  */