@zat-design/sisyphus-react 3.0.16-beta.4 → 3.1.4

package/lib/ProForm/components/{base → combination}/FormList/components/BlockTitle.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _lodash = require("lodash");
 var BlockTitle = function BlockTitle(props) {
@@ -17,7 +18,7 @@ var BlockTitle = function BlockTitle(props) {
     return null;
   }
   if (!title) {
-    return /*#__PURE__*/_react.default.createElement("div", null);
+    return (0, _jsxRuntime.jsx)("div", {});
   }
   if ( /*#__PURE__*/_react.default.isValidElement(title)) {
     return title;
@@ -27,9 +28,9 @@ var BlockTitle = function BlockTitle(props) {
     var record = form.getFieldValue(namePath);
     titleContent = title(record, index, form);
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "pro-form-list-block-title"
-  }, titleContent);
+  return (0, _jsxRuntime.jsx)("div", {
+    className: "pro-form-list-block-title",
+    children: titleContent
+  });
 };
-var _default = BlockTitle;
-exports.default = _default;
+var _default = exports.default = BlockTitle;

package/lib/ProForm/components/{base → combination}/FormList/components/LineFields.d.ts

@@ -1,14 +1,17 @@
 import { ColProps, FormListFieldData } from 'antd';
 import React from 'react';
-import { InternalNamePath } from 'antd/lib/form/interface';
-import { Props as FromListProps } from '../index';
-interface Props extends Omit<FromListProps, 'toolbarProps'> {
+import { InternalNamePath } from 'antd/es/form/interface';
+import { FormListProps } from '../propsType';
+interface Props extends Omit<FormListProps, 'toolbarProps'> {
+    className?: string;
     index: number;
     namePath: InternalNamePath;
     disabled?: boolean;
     isView?: boolean;
     colProps: ColProps;
-    field: FormListFieldData;
+    field: Omit<FormListFieldData, 'key'> & {
+        key: string;
+    };
 }
 declare const LineFields: React.FC<Props>;
 export default LineFields;

package/lib/ProForm/components/combination/FormList/components/LineFields.js

@@ -0,0 +1,91 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _sortable = require("@dnd-kit/sortable");
+var _utilities = require("@dnd-kit/utilities");
+var _ProIcon = _interopRequireDefault(require("../../../../../ProIcon"));
+var _ActionButton = _interopRequireDefault(require("./ActionButton"));
+var _RenderFields = _interopRequireDefault(require("../../../render/RenderFields"));
+var LineFields = function LineFields(props) {
+  var mode = props.mode,
+    index = props.index,
+    form = props.form,
+    namePath = props.namePath,
+    min = props.min,
+    max = props.max,
+    fields = props.fields,
+    operation = props.operation,
+    field = props.field,
+    actionProps = props.actionProps,
+    columns = props.columns,
+    colProps = props.colProps,
+    disabled = props.disabled,
+    isView = props.isView,
+    draggable = props.draggable,
+    className = props.className;
+  var isLess = mode === 'less';
+  var _useSortable = (0, _sortable.useSortable)({
+      id: field.key,
+      disabled: disabled
+    }),
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition,
+    isDragging = _useSortable.isDragging,
+    setActivatorNodeRef = _useSortable.setActivatorNodeRef;
+  var classnames = (0, _classnames.default)((0, _defineProperty2.default)({
+    'pro-form-list': true,
+    'pro-form-list-line': mode === 'line'
+  }, className, !!className));
+  var style = {
+    opacity: isDragging ? 0.4 : undefined,
+    transform: _utilities.CSS.Translate.toString(transform),
+    transition: transition
+  };
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: classnames,
+    ref: setNodeRef,
+    style: style,
+    children: [!disabled && draggable && (0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, attributes), listeners), {}, {
+      className: "pro-form-list-drag-handle",
+      ref: setActivatorNodeRef,
+      children: (0, _jsxRuntime.jsx)(_ProIcon.default, {
+        type: "drag"
+      })
+    })), (0, _jsxRuntime.jsx)(_antd.Row, {
+      gutter: isLess ? 0 : 24,
+      children: (0, _jsxRuntime.jsx)(_RenderFields.default, {
+        columns: columns,
+        form: form,
+        colProps: colProps,
+        disabled: disabled,
+        isView: isView
+      })
+    }), actionProps !== false && (0, _jsxRuntime.jsx)(_ActionButton.default, {
+      min: min,
+      max: max,
+      index: index,
+      length: fields.length,
+      operation: operation,
+      namePath: namePath,
+      form: form,
+      field: field,
+      fields: fields,
+      actionProps: actionProps,
+      mode: mode,
+      disabled: disabled
+    })]
+  });
+};
+var _default = exports.default = LineFields;

package/{es/ProForm/components/base → lib/ProForm/components/combination}/FormList/components/ToolbarButton.d.ts

@@ -1,9 +1,9 @@
-import { InternalNamePath } from 'antd/lib/form/interface';
+import { InternalNamePath } from 'antd/es/form/interface';
 import React from 'react';
-import { ActionProps } from '../index';
+import { ToolbarActionProps } from '../propsType';
 import { Props as ActionButtonProps } from './ActionButton';
 interface Props extends Omit<ActionButtonProps, 'actionProps' | 'field' | 'index' | 'mode' | 'namePath'> {
-    toolbarProps: ActionProps[];
+    toolbarProps: ToolbarActionProps[];
     namePath: InternalNamePath;
     disabled?: boolean;
     isView?: boolean;

package/lib/ProForm/components/combination/FormList/components/ToolbarButton.js

@@ -0,0 +1,111 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _antd = require("antd");
+var _icons = require("@ant-design/icons");
+var _lodash = require("lodash");
+var _react = require("react");
+var _excluded = ["label", "onClick", "onHandle", "actionType"],
+  _excluded2 = ["onClick", "label"];
+var actions = {
+  add: {
+    onClick: function onClick(value, _ref) {
+      var operation = _ref.operation,
+        form = _ref.form,
+        namePath = _ref.namePath;
+      operation.add();
+    },
+    label: '新增一行',
+    type: 'link',
+    icon: (0, _jsxRuntime.jsx)(_icons.PlusOutlined, {})
+  }
+};
+var defaultActionProps = [{
+  actionType: 'add'
+}];
+var ToolbarButton = function ToolbarButton(props) {
+  var namePath = props.namePath,
+    form = props.form,
+    operation = props.operation,
+    length = props.length,
+    fields = props.fields,
+    min = props.min,
+    max = props.max,
+    disabled = props.disabled,
+    isView = props.isView;
+  // 默认显示一个delete
+  var toolbarProps = (0, _react.useMemo)(function () {
+    var _props$toolbarProps;
+    if (!((_props$toolbarProps = props.toolbarProps) === null || _props$toolbarProps === void 0 ? void 0 : _props$toolbarProps.find(function (item) {
+      return item.actionType === 'add';
+    }))) {
+      return (props === null || props === void 0 ? void 0 : props.toolbarProps) ? [].concat((0, _toConsumableArray2.default)(props.toolbarProps), defaultActionProps) : defaultActionProps;
+    }
+    return props.toolbarProps;
+  }, [props.toolbarProps]);
+  var handleClick = function handleClick(callback, item) {
+    var value = form.getFieldValue(namePath);
+    var data = callback === null || callback === void 0 ? void 0 : callback(value, {
+      operation: operation,
+      form: form,
+      namePath: namePath
+    });
+    if ((item === null || item === void 0 ? void 0 : item.actionType) === 'add' && data) {
+      operation.add(data);
+    }
+  };
+  if (disabled || isView) {
+    return null;
+  }
+  return (0, _jsxRuntime.jsx)(_antd.Space, {
+    align: "start",
+    className: "pro-form-list-toolbar",
+    children: toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.map(function (item) {
+      if (item.show === false) return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+      if ((0, _lodash.isFunction)(item.show) && !item.show(form.getFieldValue(namePath), {
+        namePath: namePath,
+        form: form
+      })) {
+        return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+      }
+      var label = item.label,
+        _onClick2 = item.onClick,
+        onHandle = item.onHandle,
+        actionType = item.actionType,
+        rest = (0, _objectWithoutProperties2.default)(item, _excluded);
+      var _onClick = _onClick2 || onHandle;
+      if (['add'].includes(actionType)) {
+        if (disabled) return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+        var _actions$actionType = actions[actionType],
+          internalOnClick = _actions$actionType.onClick,
+          defaultLabel = _actions$actionType.label,
+          defaultRest = (0, _objectWithoutProperties2.default)(_actions$actionType, _excluded2);
+        // 大于等于max不可新增
+        if (max && max <= fields.length && ['add'].includes(actionType)) {
+          return false;
+        }
+        return (0, _jsxRuntime.jsx)(_antd.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, actions[actionType]), rest), {}, {
+          onClick: function onClick() {
+            return handleClick(_onClick || internalOnClick, item);
+          },
+          children: label || defaultLabel
+        }), actionType);
+      }
+      return (0, _jsxRuntime.jsx)(_antd.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rest), {}, {
+        onClick: function onClick() {
+          return handleClick(_onClick2, item);
+        },
+        children: label
+      }), actionType);
+    })
+  });
+};
+var _default = exports.default = ToolbarButton;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { FormListRef, FormListProps } from './propsType';
+declare const _default: React.ForwardRefExoticComponent<FormListProps & React.RefAttributes<FormListRef>>;
+export default _default;

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

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _antd = require("antd");
+var _core = require("@dnd-kit/core");
+var _sortable = require("@dnd-kit/sortable");
+var _utils = require("../../../utils");
+var _utils2 = require("./utils");
+var _ToolbarButton = _interopRequireDefault(require("./components/ToolbarButton"));
+var _BlockFields = _interopRequireDefault(require("./components/BlockFields"));
+var _LineFields = _interopRequireDefault(require("./components/LineFields"));
+var FormList = function FormList(props, ref) {
+  var columns = props.columns,
+    otherProps = props.otherProps,
+    min = props.min,
+    max = props.max,
+    toolbarProps = props.toolbarProps,
+    fields = props.fields,
+    operation = props.operation,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'line' : _props$mode,
+    meta = props.meta,
+    _props$span = props.span,
+    span = _props$span === void 0 ? 8 : _props$span;
+  var _fields = fields.map(function (item) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+      key: String(item.key)
+    });
+  });
+  var form = otherProps.form,
+    name = otherProps.name,
+    isView = otherProps.isView,
+    disabled = otherProps.disabled;
+  var errors = meta.errors;
+  var _namePath = (0, _utils.toArray)(name);
+  var processColumns = (0, _react.useCallback)(function (fieldName, namePath) {
+    return columns.map(function (item) {
+      // names的name处理
+      var _name = Array.isArray(item === null || item === void 0 ? void 0 : item.names) ? [fieldName, (0, _utils2.namesPathTransform)({
+        names: item === null || item === void 0 ? void 0 : item.names,
+        prefixNamePath: namePath
+      })] : [fieldName].concat((0, _toConsumableArray2.default)((0, _utils.toArray)(item.name)));
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+        name: _name,
+        names: (item === null || item === void 0 ? void 0 : item.names) ? item.names.map(function (nameItem) {
+          return [].concat((0, _toConsumableArray2.default)(namePath), (0, _toConsumableArray2.default)((0, _utils.toArray)(nameItem)));
+        }) : item.names,
+        index: fieldName,
+        namePath: namePath,
+        label: mode === 'less' ? undefined : item.label
+      });
+    });
+  }, [columns]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      operation: operation
+    };
+  });
+  var handleDragEnd = function handleDragEnd(drag) {
+    var active = drag.active,
+      over = drag.over;
+    if (active.id !== over.id) {
+      var activeIndex = _fields.findIndex(function (item) {
+        return item.key === active.id;
+      });
+      var overIndex = _fields.findIndex(function (item) {
+        return item.key === over.id;
+      });
+      props.operation.move(activeIndex, overIndex);
+    }
+  };
+  return (0, _jsxRuntime.jsx)(_core.DndContext, {
+    onDragEnd: handleDragEnd,
+    children: (0, _jsxRuntime.jsxs)(_sortable.SortableContext, {
+      items: _fields.map(function (item) {
+        return {
+          id: item.key
+        };
+      }),
+      strategy: _sortable.verticalListSortingStrategy,
+      children: [_fields.map(function (field, index) {
+        var namePath = [].concat((0, _toConsumableArray2.default)(_namePath), [index]);
+        var _columns = processColumns(index, namePath);
+        return mode === 'block' ? (0, _jsxRuntime.jsx)(_BlockFields.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+          columns: _columns,
+          disabled: disabled || (props === null || props === void 0 ? void 0 : props.disabled),
+          isView: isView,
+          namePath: namePath,
+          index: index,
+          field: field,
+          colProps: {
+            span: span
+          },
+          form: form
+        }), field.key) : (0, _jsxRuntime.jsx)(_LineFields.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+          className: _fields.length === index + 1 ? 'pro-form-list-last' : ''
+        }, props), {}, {
+          mode: mode,
+          columns: _columns,
+          disabled: disabled || (props === null || props === void 0 ? void 0 : props.disabled),
+          isView: isView,
+          namePath: namePath,
+          index: index,
+          field: field,
+          colProps: {
+            span: mode === 'less' ? 24 : span
+          },
+          form: form
+        }), field.key);
+      }), (0, _jsxRuntime.jsx)(_antd.Form.ErrorList, {
+        errors: errors
+      }), toolbarProps !== false && (0, _jsxRuntime.jsx)(_ToolbarButton.default, {
+        disabled: disabled,
+        isView: isView,
+        min: min,
+        max: max,
+        length: fields.length,
+        operation: operation,
+        namePath: _namePath,
+        form: form,
+        fields: fields,
+        toolbarProps: toolbarProps
+      })]
+    })
+  });
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(FormList);

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import type { FormInstance } from 'antd/es/form/Form';
+import type { ButtonProps, FormListFieldData, FormListOperation, PopconfirmProps } from 'antd';
+import type { InternalNamePath } from 'antd/es/form/interface';
+import type { levelType } from '@/ProLayout/components/ProCollapse/PropTypes';
+import type { ProColumnProps, ProFormOtherProps } from '../../../propsType';
+export type TitleRender = (record: Record<string, any>, index: number, form: FormInstance) => any;
+export type TitleType = string | React.ReactNode | TitleRender;
+type Callback = (record: any, option: Pick<Option, 'namePath' | 'index' | 'operation' | 'form'>) => any | void;
+export type ToolbarCallback = (record: any, option: Pick<Option, 'namePath' | 'form' | 'operation'>) => any | void;
+export interface Option {
+    index: number;
+    namePath: InternalNamePath;
+    form: FormInstance;
+    operation: FormListOperation;
+}
+export interface ActionProps extends Omit<ButtonProps, 'onClick'> {
+    actionType?: 'add' | 'delete' | 'copy' | 'moveUp' | 'moveDown';
+    onHandle?: Callback;
+    onClick?: Callback;
+    label?: string;
+    needConfirm?: boolean;
+    confirmProps?: boolean | PopconfirmProps;
+    title?: string;
+    show?: boolean | ((record: any, option: Pick<Option, 'index' | 'form' | 'namePath'>) => boolean);
+}
+export interface ToolbarActionProps extends Omit<ActionProps, 'actionType' | 'onHandle' | 'onClick' | 'show'> {
+    actionType?: 'add';
+    onHandle?: ToolbarCallback;
+    onClick?: ToolbarCallback;
+    show?: boolean | ((record: any, option: Pick<Option, 'form' | 'namePath'>) => boolean);
+}
+export type FormListMode = 'block' | 'line' | 'less';
+export interface FormListProps {
+    columns: ProColumnProps[];
+    otherProps?: ProFormOtherProps;
+    form?: FormInstance;
+    min?: number;
+    max?: number;
+    actionProps?: ActionProps[] | false;
+    toolbarProps?: ToolbarActionProps[] | false;
+    value?: any[];
+    onChange?: (record: any[], option: Pick<Option, 'namePath' | 'form'>) => void;
+    fields: FormListFieldData[];
+    operation: FormListOperation;
+    title?: string | TitleType;
+    mode?: FormListMode;
+    level?: levelType;
+    disabled?: boolean;
+    span?: number;
+    towCollapse?: boolean;
+    meta: {
+        errors: React.ReactNode[];
+        warnings: React.ReactNode[];
+    };
+    draggable?: boolean;
+}
+export type PropsWithRef = FormListProps & React.RefAttributes<FormListRef>;
+export interface FormListRef {
+    operation: FormListOperation;
+}
+export {};

package/lib/ProForm/components/combination/FormList/style/index.less

@@ -0,0 +1,71 @@
+.pro-form-list-block-title {
+  height: 14px;
+  margin: 3px 0;
+  padding-left: 7px;
+  font-weight: 600;
+  line-height: 14px;
+  border-left: 4px solid #006aff;
+}
+
+.pro-form-list {
+  display: flex;
+  padding-bottom: 0;
+
+  &.pro-form-list-last {
+    .pro-form-list-drag-handle,
+    .ant-form-item {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .single-delete {
+    width: 14px !important;
+    height: 14px !important;
+    color: #939599;
+
+    &:hover {
+      color: #8f8c8c;
+    }
+  }
+
+  &:nth-child(1) {
+    flex: 1;
+  }
+
+  .pro-form-list-action {
+    padding-bottom: var(--zaui-height-size-md, 16px);
+
+    & > .ant-space-item:first-child > .ant-btn-link {
+      margin-left: 8px;
+    }
+  }
+
+  .pro-form-list-drag-handle {
+    display: flex;
+    align-items: center;
+    height: @zaui-height-size-lg;
+    margin-bottom: 22px;
+    padding: 0;
+    padding-right: @zaui-space-size-sm;
+    border: none;
+  }
+}
+
+.pro-form-list-line {
+  padding: var(--zaui-height-size-md, 16px);
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.018);
+  }
+}
+
+.pro-form-list-toolbar,
+.pro-form-list-action {
+  .ant-btn-link {
+    padding: 4px 0;
+  }
+
+  .ant-btn-text:hover {
+    background: transparent;
+  }
+}

package/lib/ProForm/components/{base → combination}/FormList/utils.js

@@ -10,7 +10,7 @@ exports.namesPathTransform = void 0;
  * @param prefixNamePath formList的name前缀
  * @returns list_0_min-list_0_max
  */
-var namesPathTransform = function namesPathTransform(_ref) {
+var namesPathTransform = exports.namesPathTransform = function namesPathTransform(_ref) {
   var names = _ref.names,
     prefixNamePath = _ref.prefixNamePath;
   if (!Array.isArray(names) || !Array.isArray(prefixNamePath)) {
@@ -22,5 +22,4 @@ var namesPathTransform = function namesPathTransform(_ref) {
   return newNamePath === null || newNamePath === void 0 ? void 0 : newNamePath.map(function (name) {
     return Array.isArray(name) ? name.join('_') : name;
   }).join('-');
-};
-exports.namesPathTransform = namesPathTransform;
+};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { GroupProps } from './propsType';
+declare const Group: React.FC<GroupProps>;
+export default Group;

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

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _antd = require("antd");
+var _react = require("react");
+var _lodash = require("lodash");
+var _classnames2 = _interopRequireDefault(require("classnames"));
+var _RenderFields = _interopRequireDefault(require("../../render/RenderFields"));
+var _utils = require("./utils");
+var Group = function Group(props) {
+  var columns = props.children,
+    otherProps = props.otherProps,
+    className = props.className,
+    _props$space = props.space,
+    space = _props$space === void 0 ? {
+      size: 12
+    } : _props$space,
+    id = props.id;
+  var name = otherProps.name,
+    form = otherProps.form;
+  if (!Array.isArray(otherProps === null || otherProps === void 0 ? void 0 : otherProps.names)) {
+    console.error('Warning: Composite form components whose type is Group must be configured with names');
+  }
+  var _parentNames = (0, _utils.parseName)(id);
+  var data = (0, _react.useMemo)(function () {
+    var fieldList = [];
+    var result = columns.map(function (item) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({
+        disabled: props === null || props === void 0 ? void 0 : props.disabled
+      }, item), {}, {
+        noStyle: (space === null || space === void 0 ? void 0 : space.compact) || (space === null || space === void 0 ? void 0 : space.separator),
+        parentNames: _parentNames
+      });
+    });
+    var node = (0, _jsxRuntime.jsx)(_antd.Button, {
+      className: "group-separator",
+      children: space.separator
+    });
+    return {
+      columns: (0, _utils.insertSeparator)(result, space, node, otherProps),
+      fieldList: fieldList
+    };
+  }, [name, columns, space]);
+  var _className = (0, _classnames2.default)((0, _defineProperty2.default)({
+    'pro-group': true,
+    'pro-group-diy-width': columns.some(function (item) {
+      var _item$fieldProps, _item$fieldProps$styl;
+      return item === null || item === void 0 ? void 0 : (_item$fieldProps = item.fieldProps) === null || _item$fieldProps === void 0 ? void 0 : (_item$fieldProps$styl = _item$fieldProps.style) === null || _item$fieldProps$styl === void 0 ? void 0 : _item$fieldProps$styl.width;
+    })
+  }, "".concat(className), className));
+  return (0, _jsxRuntime.jsx)("div", {
+    className: _className,
+    children: space.compact || (space === null || space === void 0 ? void 0 : space.separator) ? (0, _jsxRuntime.jsx)(_antd.Space.Compact, {
+      children: (0, _jsxRuntime.jsx)(_RenderFields.default, (0, _objectSpread2.default)({
+        columns: data.columns,
+        form: form
+      }, (0, _lodash.omit)(otherProps, ['colProps'])))
+    }) : (0, _jsxRuntime.jsx)(_antd.Space, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _lodash.omit)(space, ['separator', 'compact'])), {}, {
+      children: data.columns.map(function (column, index) {
+        return (0, _jsxRuntime.jsx)(_RenderFields.default, (0, _objectSpread2.default)({
+          columns: [column],
+          form: form
+        }, (0, _lodash.omit)(otherProps, ['colProps'])), (column === null || column === void 0 ? void 0 : column.name) || index);
+      })
+    }))
+  });
+};
+var _default = exports.default = Group;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { RowProps, SpaceProps } from 'antd';
+import { ProColumnProps, ProFormOtherProps } from '../../../propsType';
+export interface SpaceType extends SpaceProps {
+    /**
+     * 是否紧凑合并
+     */
+    compact?: Boolean;
+    /**
+     * 分隔符
+     */
+    separator?: string | React.ReactNode;
+    /** 间隔距离 */
+    size?: number;
+}
+export interface GroupProps {
+    children?: ProColumnProps[];
+    space?: SpaceType;
+    otherProps?: ProFormOtherProps;
+    rowProps?: RowProps;
+    className?: string;
+    value?: any;
+    id?: string;
+    disabled?: boolean | (() => void);
+}