@zat-design/sisyphus-react 4.0.0-beta.9 → 4.0.1

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>;
+}
 /**
  * 兼容旧命名导出
  */