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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/index.esm.css +1 -1
  2. package/dist/less.esm.css +1 -1
  3. package/es/ProEditTable/components/RcTable/DraggableTable.js +5 -3
  4. package/es/ProEditTable/style/index.less +9 -3
  5. package/es/ProForm/components/combination/FormList/components/ActionButton.d.ts +1 -0
  6. package/es/ProForm/components/combination/FormList/components/ActionButton.js +84 -3
  7. package/es/ProForm/components/combination/FormList/components/BlockFields.d.ts +2 -0
  8. package/es/ProForm/components/combination/FormList/components/BlockFields.js +63 -6
  9. package/es/ProForm/components/combination/FormList/components/Empty.js +11 -2
  10. package/es/ProForm/components/combination/FormList/components/LineFields.d.ts +1 -0
  11. package/es/ProForm/components/combination/FormList/components/LineFields.js +4 -2
  12. package/es/ProForm/components/combination/FormList/components/ToolbarButton.js +38 -9
  13. package/es/ProForm/components/combination/FormList/index.js +67 -57
  14. package/es/ProForm/components/combination/FormList/propsType.d.ts +7 -2
  15. package/es/ProForm/components/combination/FormList/style/index.less +41 -0
  16. package/es/ProForm/utils/useWatch.js +3 -3
  17. package/es/ProLayout/components/Layout/Menu/FoldMenu/index.js +19 -9
  18. package/es/ProLayout/components/Layout/Menu/OpenMenu/index.js +6 -8
  19. package/es/ProLayout/components/ProHeader/index.js +19 -15
  20. package/es/ProTable/hooks/useAntdTable.js +52 -29
  21. package/lib/ProEditTable/components/RcTable/DraggableTable.js +5 -3
  22. package/lib/ProEditTable/style/index.less +9 -3
  23. package/lib/ProForm/components/combination/FormList/components/ActionButton.d.ts +1 -0
  24. package/lib/ProForm/components/combination/FormList/components/ActionButton.js +84 -3
  25. package/lib/ProForm/components/combination/FormList/components/BlockFields.d.ts +2 -0
  26. package/lib/ProForm/components/combination/FormList/components/BlockFields.js +62 -6
  27. package/lib/ProForm/components/combination/FormList/components/Empty.js +11 -2
  28. package/lib/ProForm/components/combination/FormList/components/LineFields.d.ts +1 -0
  29. package/lib/ProForm/components/combination/FormList/components/LineFields.js +4 -2
  30. package/lib/ProForm/components/combination/FormList/components/ToolbarButton.js +38 -9
  31. package/lib/ProForm/components/combination/FormList/index.js +67 -57
  32. package/lib/ProForm/components/combination/FormList/propsType.d.ts +7 -2
  33. package/lib/ProForm/components/combination/FormList/style/index.less +41 -0
  34. package/lib/ProForm/utils/useWatch.js +3 -3
  35. package/lib/ProLayout/components/Layout/Menu/FoldMenu/index.js +18 -8
  36. package/lib/ProLayout/components/Layout/Menu/OpenMenu/index.js +5 -7
  37. package/lib/ProLayout/components/ProHeader/index.js +19 -15
  38. package/lib/ProTable/hooks/useAntdTable.js +52 -29
  39. package/package.json +3 -3
@@ -38,8 +38,9 @@ var Row = props => {
38
38
  ref: setNodeRef,
39
39
  style: style
40
40
  }, attributes), {}, {
41
- children: React.Children.map(children, child => {
42
- if (child.key === 'RC_TABLE_KEY' && !disabled) {
41
+ children: React.Children.map(children, (child, index) => {
42
+ // 在第一列(通常是rowSelection列)显示拖拽图标
43
+ if (index === 0 && !disabled) {
43
44
  var _restProps$dataRowD;
44
45
  var _ref = (child === null || child === void 0 ? void 0 : child.props) || {},
45
46
  render = _ref.render,
@@ -60,7 +61,8 @@ var Row = props => {
60
61
  }, listeners)) : /*#__PURE__*/_jsx(ProIcon, {
61
62
  size: 20
62
63
  }), props['data-hide'] ? null : render === null || render === void 0 ? void 0 : render(null, record, renderIndex)]
63
- })
64
+ }),
65
+ className: 'pro-edit-table-drag-wrapper-cell'
64
66
  });
65
67
  }
66
68
  return child;
@@ -1,5 +1,12 @@
1
1
 
2
2
  .pro-edit-table {
3
+ .pro-edit-table-drag-wrapper-cell{
4
+ .@{ant-prefix}-btn{
5
+ &:hover{
6
+ background: transparent;
7
+ }
8
+ }
9
+ }
3
10
  td[rowspan]{
4
11
  vertical-align: middle !important;
5
12
  }
@@ -81,10 +88,9 @@
81
88
 
82
89
  .pro-edit-table-drag-wrapper {
83
90
  display: flex;
84
- justify-content: flex-end;
91
+ align-items: center;
85
92
  .anticon {
86
- margin-right: var(--zaui-space-size-md, 16px);
87
- margin-left: var(--zaui-space-size-xs, 4px);
93
+ margin-right: var(--zaui-space-size-xs, 4px);
88
94
  cursor: pointer;
89
95
  }
90
96
  }
@@ -18,6 +18,7 @@ export interface Props {
18
18
  mode: FormListMode;
19
19
  disabled?: boolean;
20
20
  isView?: boolean;
21
+ hideStartEndActionProps?: [boolean, boolean];
21
22
  }
22
23
  declare const ActionButton: React.FC<Props>;
23
24
  export default ActionButton;
@@ -113,7 +113,8 @@ var ActionButton = props => {
113
113
  min = props.min,
114
114
  max = props.max,
115
115
  mode = props.mode,
116
- isView = props.isView;
116
+ isView = props.isView,
117
+ hideStartEndActionProps = props.hideStartEndActionProps;
117
118
 
118
119
  // 默认显示一个delete
119
120
  var actionProps = useMemo(() => {
@@ -181,6 +182,10 @@ var ActionButton = props => {
181
182
  });
182
183
  };
183
184
  var defaultActions = useMemo(() => getDefaultActions(mode), [mode]);
185
+
186
+ // 整体隐藏首尾 ActionButton
187
+ if (hideStartEndActionProps !== null && hideStartEndActionProps !== void 0 && hideStartEndActionProps[0] && index === 0) return null;
188
+ if (hideStartEndActionProps !== null && hideStartEndActionProps !== void 0 && hideStartEndActionProps[1] && index === fields.length - 1) return null;
184
189
  return /*#__PURE__*/_jsx(Space, {
185
190
  align: "start",
186
191
  className: "pro-form-list-action",
@@ -229,11 +234,83 @@ var ActionButton = props => {
229
234
  if (index + 1 === fields.length && type === 'moveDown') {
230
235
  return false;
231
236
  }
237
+
238
+ // 移动限制:防止将项移动到隐藏的首尾位置
239
+ if (hideStartEndActionProps !== null && hideStartEndActionProps !== void 0 && hideStartEndActionProps[0] && index === 1 && ['moveUp'].includes(type)) {
240
+ return false;
241
+ }
242
+ if (hideStartEndActionProps !== null && hideStartEndActionProps !== void 0 && hideStartEndActionProps[1] && index === fields.length - 2 && type === 'moveDown') {
243
+ return false;
244
+ }
245
+
246
+ // 处理 add 操作的插入位置
247
+ var handleAddClick = /*#__PURE__*/function () {
248
+ var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
249
+ var value, data, insertIndex, _insertIndex;
250
+ return _regeneratorRuntime().wrap(function _callee2$(_context2) {
251
+ while (1) switch (_context2.prev = _context2.next) {
252
+ case 0:
253
+ value = form.getFieldValue(namePath);
254
+ _context2.next = 3;
255
+ return _onClick === null || _onClick === void 0 ? void 0 : _onClick(value, {
256
+ namePath,
257
+ index,
258
+ operation,
259
+ form
260
+ });
261
+ case 3:
262
+ data = _context2.sent;
263
+ if (!(!_onClick || data === true)) {
264
+ _context2.next = 7;
265
+ break;
266
+ }
267
+ // 如果有 addIndex 配置,使用它计算插入位置
268
+ if (item.addIndex) {
269
+ insertIndex = typeof item.addIndex === 'function' ? item.addIndex(value, {
270
+ index,
271
+ namePath,
272
+ form,
273
+ operation
274
+ }) : item.addIndex;
275
+ operation.add(data, insertIndex);
276
+ } else {
277
+ operation.add(data, index + 1); // 默认插入到下一位置
278
+ }
279
+ return _context2.abrupt("return");
280
+ case 7:
281
+ if ((item === null || item === void 0 ? void 0 : item.type) === 'add') {
282
+ // 如果有 addIndex 配置,使用它计算插入位置
283
+ if (item.addIndex) {
284
+ _insertIndex = typeof item.addIndex === 'function' ? item.addIndex(value, {
285
+ index,
286
+ namePath,
287
+ form,
288
+ operation
289
+ }) : item.addIndex;
290
+ operation.add(data, _insertIndex);
291
+ } else {
292
+ operation.add(data, index + 1); // 默认插入到下一位置
293
+ }
294
+ }
295
+ case 8:
296
+ case "end":
297
+ return _context2.stop();
298
+ }
299
+ }, _callee2);
300
+ }));
301
+ return function handleAddClick() {
302
+ return _ref7.apply(this, arguments);
303
+ };
304
+ }();
232
305
  return _needConfirm ? /*#__PURE__*/_jsx(Popconfirm, _objectSpread(_objectSpread({
233
306
  title: title !== null && title !== void 0 ? title : `${locale.ProForm.formListConfirmMessage}`,
234
307
  onCancel: e => e.stopPropagation(),
235
308
  onConfirm: e => {
236
- handleClick(internalOnClick, _onClick, index, item);
309
+ if (type === 'add') {
310
+ handleAddClick();
311
+ } else {
312
+ handleClick(internalOnClick, _onClick, index, item);
313
+ }
237
314
  }
238
315
  }, _confirmProps), {}, {
239
316
  children: /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread(_objectSpread({}, defaultRest), omit(rest, filterKeys)), {}, {
@@ -251,7 +328,11 @@ var ActionButton = props => {
251
328
  type: "text",
252
329
  onClick: e => {
253
330
  e.stopPropagation();
254
- handleClick(internalOnClick, _onClick, index, item);
331
+ if (type === 'add') {
332
+ handleAddClick();
333
+ } else {
334
+ handleClick(internalOnClick, _onClick, index, item);
335
+ }
255
336
  },
256
337
  children: label || defaultLabel
257
338
  }), `${item === null || item === void 0 ? void 0 : item.type}${index}`);
@@ -16,6 +16,8 @@ interface Props extends Omit<FormListType, 'toolbarProps'> {
16
16
  level?: levelType;
17
17
  towCollapse?: boolean;
18
18
  diffConfig?: DiffConfigType;
19
+ hideStartEndActionProps?: [boolean, boolean];
20
+ titlePosition?: 'top' | 'left';
19
21
  }
20
22
  declare const BlockFields: React.FC<Props>;
21
23
  export default BlockFields;
@@ -7,6 +7,7 @@ import RenderFields from "../../../render/RenderFields";
7
7
  import ProCollapse from "../../../../../ProLayout/components/ProCollapse";
8
8
  import { memoWith } from "../utils";
9
9
  import { jsx as _jsx } from "react/jsx-runtime";
10
+ import { jsxs as _jsxs } from "react/jsx-runtime";
10
11
  var MemoRenderFields = /*#__PURE__*/React.memo(RenderFields, memoWith);
11
12
  var BlockFields = props => {
12
13
  var title = props.title,
@@ -28,7 +29,9 @@ var BlockFields = props => {
28
29
  level = _props$level === void 0 ? '2' : _props$level,
29
30
  towCollapse = props.towCollapse,
30
31
  id = props.id,
31
- diffConfig = props.diffConfig;
32
+ diffConfig = props.diffConfig,
33
+ hideStartEndActionProps = props.hideStartEndActionProps,
34
+ titlePosition = props.titlePosition;
32
35
  var _title = useMemo(() => {
33
36
  if (isFunction(title)) {
34
37
  var record = form.getFieldValue(namePath);
@@ -37,8 +40,63 @@ var BlockFields = props => {
37
40
  return title;
38
41
  }, [title, index]);
39
42
  var cls = classNames({
40
- [`pro-form-list-mode-${mode}`]: mode === 'block' || mode === 'line' || mode === 'less'
43
+ [`pro-form-list-mode-${mode}`]: mode === 'block' || mode === 'line' || mode === 'less',
44
+ 'pro-form-list-title-left': titlePosition === 'left'
41
45
  });
46
+
47
+ // 左侧标题布局
48
+ if (titlePosition === 'left') {
49
+ return /*#__PURE__*/_jsx(Space, {
50
+ direction: "vertical",
51
+ className: cls,
52
+ id: id,
53
+ children: /*#__PURE__*/_jsxs("div", {
54
+ className: "pro-form-list-left-title-wrapper",
55
+ children: [/*#__PURE__*/_jsx("div", {
56
+ className: "pro-form-list-left-title",
57
+ children: _title
58
+ }), /*#__PURE__*/_jsx("div", {
59
+ className: "pro-form-list-left-content",
60
+ children: /*#__PURE__*/_jsx(ProCollapse, {
61
+ title: _title,
62
+ index: index,
63
+ form: form,
64
+ level: level,
65
+ towCollapse: towCollapse,
66
+ extra: actionProps !== false && /*#__PURE__*/_jsx(ActionButton, {
67
+ min: min,
68
+ max: max,
69
+ index: index,
70
+ length: fields.length,
71
+ operation: operation,
72
+ namePath: namePath,
73
+ form: form,
74
+ field: field,
75
+ fields: fields,
76
+ actionProps: actionProps,
77
+ mode: mode,
78
+ disabled: disabled,
79
+ isView: isView,
80
+ hideStartEndActionProps: hideStartEndActionProps
81
+ }),
82
+ children: /*#__PURE__*/_jsx(Row, {
83
+ gutter: 24,
84
+ children: /*#__PURE__*/_jsx(MemoRenderFields, {
85
+ columns: columns,
86
+ form: form,
87
+ colProps: colProps,
88
+ disabled: disabled,
89
+ isView: isView,
90
+ diffConfig: diffConfig
91
+ })
92
+ }, field.key)
93
+ })
94
+ })]
95
+ })
96
+ });
97
+ }
98
+
99
+ // 默认顶部标题布局
42
100
  return /*#__PURE__*/_jsx(Space, {
43
101
  direction: "vertical",
44
102
  className: cls,
@@ -46,9 +104,7 @@ var BlockFields = props => {
46
104
  children: /*#__PURE__*/_jsx(ProCollapse, {
47
105
  title: _title,
48
106
  index: index,
49
- form: form
50
- // namePath={namePath}
51
- ,
107
+ form: form,
52
108
  level: level,
53
109
  towCollapse: towCollapse,
54
110
  extra: actionProps !== false && /*#__PURE__*/_jsx(ActionButton, {
@@ -64,7 +120,8 @@ var BlockFields = props => {
64
120
  actionProps: actionProps,
65
121
  mode: mode,
66
122
  disabled: disabled,
67
- isView: isView
123
+ isView: isView,
124
+ hideStartEndActionProps: hideStartEndActionProps
68
125
  }),
69
126
  children: /*#__PURE__*/_jsx(Row, {
70
127
  gutter: 24,
@@ -1,6 +1,7 @@
1
1
  import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
2
2
  import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
3
3
  import { Button } from 'antd';
4
+ import { isFunction } from 'lodash';
4
5
  import EmptyImg from "../../../../../assets/empty.png";
5
6
  import locale from "../../../../../locale";
6
7
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -34,7 +35,8 @@ var Empty = _ref => {
34
35
  return addConfig === null || addConfig === void 0 || (_addConfig$onClick = addConfig.onClick) === null || _addConfig$onClick === void 0 ? void 0 : _addConfig$onClick.call(addConfig, value, {
35
36
  operation,
36
37
  form,
37
- namePath
38
+ namePath,
39
+ index: 0
38
40
  });
39
41
  case 5:
40
42
  data = _context.sent;
@@ -63,6 +65,13 @@ var Empty = _ref => {
63
65
  var getBtnText = () => {
64
66
  return emptyBtnText || (addConfig === null || addConfig === void 0 ? void 0 : addConfig.label) || locale.ProForm.formListActions[6];
65
67
  };
68
+ var show = true;
69
+ if ((addConfig === null || addConfig === void 0 ? void 0 : addConfig.show) !== undefined) {
70
+ show = isFunction(addConfig.show) ? addConfig.show(form.getFieldValue(namePath), {
71
+ namePath,
72
+ form
73
+ }) : !!addConfig.show;
74
+ }
66
75
  return /*#__PURE__*/_jsxs("div", {
67
76
  className: "pro-form-list-empty",
68
77
  children: [/*#__PURE__*/_jsx("img", {
@@ -71,7 +80,7 @@ var Empty = _ref => {
71
80
  alt: "Empty"
72
81
  }), /*#__PURE__*/_jsx("div", {
73
82
  className: "pro-form-list-empty-content",
74
- children: disabled ? locale.ProForm.noData : /*#__PURE__*/_jsxs(_Fragment, {
83
+ children: disabled || !show ? locale.ProForm.noData : /*#__PURE__*/_jsxs(_Fragment, {
75
84
  children: [locale.ProForm.noData, !disabled && /*#__PURE__*/_jsxs(_Fragment, {
76
85
  children: ["\uFF0C", /*#__PURE__*/_jsx(Button, {
77
86
  type: "link",
@@ -14,6 +14,7 @@ interface Props extends Omit<FormListType, 'toolbarProps'> {
14
14
  key: string;
15
15
  };
16
16
  diffConfig?: DiffConfigType;
17
+ hideStartEndActionProps?: [boolean, boolean];
17
18
  }
18
19
  declare const LineFields: React.FC<Props>;
19
20
  export default LineFields;
@@ -29,7 +29,8 @@ var LineFields = props => {
29
29
  draggable = props.draggable,
30
30
  className = props.className,
31
31
  id = props.id,
32
- diffConfig = props.diffConfig;
32
+ diffConfig = props.diffConfig,
33
+ hideStartEndActionProps = props.hideStartEndActionProps;
33
34
  var isLess = mode === 'less';
34
35
  var _useSortable = useSortable({
35
36
  id: field.key,
@@ -87,7 +88,8 @@ var LineFields = props => {
87
88
  fields: fields,
88
89
  actionProps: actionProps,
89
90
  mode: mode,
90
- disabled: disabled
91
+ disabled: disabled,
92
+ hideStartEndActionProps: hideStartEndActionProps
91
93
  })]
92
94
  });
93
95
  };
@@ -55,7 +55,7 @@ var ToolbarButton = props => {
55
55
  }, [props.toolbarProps]);
56
56
  var handleClick = /*#__PURE__*/function () {
57
57
  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(defaultCallback, callback, item) {
58
- var value, data;
58
+ var value, data, insertIndex, _insertIndex;
59
59
  return _regeneratorRuntime().wrap(function _callee$(_context) {
60
60
  while (1) switch (_context.prev = _context.next) {
61
61
  case 0:
@@ -64,7 +64,8 @@ var ToolbarButton = props => {
64
64
  return callback === null || callback === void 0 ? void 0 : callback(value, {
65
65
  operation,
66
66
  form,
67
- namePath
67
+ namePath,
68
+ index: (value === null || value === void 0 ? void 0 : value.length) || 0
68
69
  });
69
70
  case 3:
70
71
  data = _context.sent;
@@ -72,15 +73,42 @@ var ToolbarButton = props => {
72
73
  _context.next = 7;
73
74
  break;
74
75
  }
75
- defaultCallback === null || defaultCallback === void 0 || defaultCallback(value, {
76
- operation,
77
- form,
78
- namePath
79
- });
76
+ if ((item === null || item === void 0 ? void 0 : item.type) === 'add') {
77
+ // 如果有 addIndex 配置,使用它计算插入位置
78
+ if (item.addIndex) {
79
+ insertIndex = typeof item.addIndex === 'function' ? item.addIndex(value, {
80
+ namePath,
81
+ form,
82
+ operation,
83
+ index: (value === null || value === void 0 ? void 0 : value.length) || 0
84
+ }) : item.addIndex;
85
+ operation.add(data, insertIndex);
86
+ } else {
87
+ operation.add(data); // 默认插入到末尾
88
+ }
89
+ } else {
90
+ defaultCallback === null || defaultCallback === void 0 || defaultCallback(value, {
91
+ operation,
92
+ form,
93
+ namePath,
94
+ index: (value === null || value === void 0 ? void 0 : value.length) || 0
95
+ });
96
+ }
80
97
  return _context.abrupt("return");
81
98
  case 7:
82
99
  if ((item === null || item === void 0 ? void 0 : item.type) === 'add' && data) {
83
- operation.add(data);
100
+ // 如果有 addIndex 配置,使用它计算插入位置
101
+ if (item.addIndex) {
102
+ _insertIndex = typeof item.addIndex === 'function' ? item.addIndex(value, {
103
+ namePath,
104
+ form,
105
+ operation,
106
+ index: (value === null || value === void 0 ? void 0 : value.length) || 0
107
+ }) : item.addIndex;
108
+ operation.add(data, _insertIndex);
109
+ } else {
110
+ operation.add(data); // 默认插入到末尾
111
+ }
84
112
  }
85
113
  case 8:
86
114
  case "end":
@@ -97,7 +125,8 @@ var ToolbarButton = props => {
97
125
  callback === null || callback === void 0 || callback(value, {
98
126
  operation,
99
127
  form,
100
- namePath
128
+ namePath,
129
+ index: 0
101
130
  });
102
131
  };
103
132
  return /*#__PURE__*/_jsx(Space, {
@@ -27,7 +27,10 @@ var FormList = (props, ref) => {
27
27
  _props$span = props.span,
28
28
  span = _props$span === void 0 ? 8 : _props$span,
29
29
  disabled = props.disabled,
30
- emptyBtnText = props.emptyBtnText;
30
+ emptyBtnText = props.emptyBtnText,
31
+ hideStartEndActionProps = props.hideStartEndActionProps,
32
+ titlePosition = props.titlePosition,
33
+ className = props.className;
31
34
  var _fields = fields.map(item => _objectSpread(_objectSpread({}, item), {}, {
32
35
  key: String(item.key)
33
36
  }));
@@ -35,11 +38,12 @@ var FormList = (props, ref) => {
35
38
  form = _ref.form,
36
39
  name = _ref.name,
37
40
  isView = _ref.isView,
38
- diffConfig = _ref.diffConfig;
41
+ diffConfig = _ref.diffConfig,
42
+ namePath = _ref.namePath;
39
43
  var _useProConfig = useProConfig('ProForm'),
40
44
  isDiffAll = _useProConfig.isDiffAll;
41
45
  var errors = meta.errors;
42
- var _namePath = toArray(name);
46
+ var _namePath = namePath ? [...namePath.slice(0, -1), ...toArray(name)] : toArray(name);
43
47
  var orgValues = get(diffConfig === null || diffConfig === void 0 ? void 0 : diffConfig.originalValues, name);
44
48
  var _diffConfig = _objectSpread(_objectSpread({}, diffConfig), {}, {
45
49
  originalValues: diffConfig !== null && diffConfig !== void 0 && diffConfig.originalValues && isDiffAll ? orgValues || [] : orgValues
@@ -80,65 +84,71 @@ var FormList = (props, ref) => {
80
84
  props.operation.move(activeIndex, overIndex);
81
85
  }
82
86
  };
83
- return /*#__PURE__*/_jsx(DndContext, {
84
- onDragEnd: handleDragEnd,
85
- children: /*#__PURE__*/_jsxs(SortableContext, {
86
- items: _fields.map(item => ({
87
- id: item.key
88
- })),
89
- strategy: verticalListSortingStrategy,
90
- children: [_fields.map((field, index) => {
91
- var namePath = [..._namePath, field.name];
92
- var _columns = processColumns(index, namePath);
93
- return mode === 'block' ? /*#__PURE__*/_jsx(BlockFields, _objectSpread(_objectSpread({}, props), {}, {
94
- columns: _columns,
87
+ return /*#__PURE__*/_jsx("div", {
88
+ className: className,
89
+ children: /*#__PURE__*/_jsx(DndContext, {
90
+ onDragEnd: handleDragEnd,
91
+ children: /*#__PURE__*/_jsxs(SortableContext, {
92
+ items: _fields.map(item => ({
93
+ id: item.key
94
+ })),
95
+ strategy: verticalListSortingStrategy,
96
+ children: [_fields.map((field, index) => {
97
+ var namePath = [..._namePath, field.name];
98
+ var _columns = processColumns(index, namePath);
99
+ return mode === 'block' ? /*#__PURE__*/_jsx(BlockFields, _objectSpread(_objectSpread({}, props), {}, {
100
+ columns: _columns,
101
+ disabled: disabled,
102
+ isView: isView,
103
+ namePath: namePath,
104
+ index: index,
105
+ field: field,
106
+ colProps: {
107
+ span
108
+ },
109
+ form: form,
110
+ diffConfig: _diffConfig,
111
+ hideStartEndActionProps: hideStartEndActionProps,
112
+ titlePosition: titlePosition
113
+ }), field.key) : /*#__PURE__*/_jsx(LineFields, _objectSpread(_objectSpread({
114
+ className: _fields.length === index + 1 ? 'pro-form-list-last' : ''
115
+ }, props), {}, {
116
+ mode: mode,
117
+ columns: _columns,
118
+ disabled: disabled,
119
+ isView: isView,
120
+ namePath: namePath,
121
+ index: index,
122
+ field: field,
123
+ colProps: {
124
+ span: mode === 'less' ? 24 : span
125
+ },
126
+ form: form,
127
+ diffConfig: _diffConfig,
128
+ hideStartEndActionProps: hideStartEndActionProps
129
+ }), field.key);
130
+ }), _fields.length === 0 && /*#__PURE__*/_jsx(Empty, {
95
131
  disabled: disabled,
96
- isView: isView,
97
- namePath: namePath,
98
- index: index,
99
- field: field,
100
- colProps: {
101
- span
102
- },
132
+ toolbarProps: toolbarProps,
133
+ operation: operation,
103
134
  form: form,
104
- diffConfig: _diffConfig
105
- }), field.key) : /*#__PURE__*/_jsx(LineFields, _objectSpread(_objectSpread({
106
- className: _fields.length === index + 1 ? 'pro-form-list-last' : ''
107
- }, props), {}, {
108
- mode: mode,
109
- columns: _columns,
135
+ namePath: _namePath,
136
+ emptyBtnText: emptyBtnText
137
+ }), /*#__PURE__*/_jsx(Form.ErrorList, {
138
+ errors: errors
139
+ }), toolbarProps !== false && _fields.length > 0 && /*#__PURE__*/_jsx(ToolbarButton, {
110
140
  disabled: disabled,
111
141
  isView: isView,
112
- namePath: namePath,
113
- index: index,
114
- field: field,
115
- colProps: {
116
- span: mode === 'less' ? 24 : span
117
- },
142
+ min: min,
143
+ max: max,
144
+ length: fields.length,
145
+ operation: operation,
146
+ namePath: _namePath,
118
147
  form: form,
119
- diffConfig: _diffConfig
120
- }), field.key);
121
- }), _fields.length === 0 && /*#__PURE__*/_jsx(Empty, {
122
- disabled: disabled,
123
- toolbarProps: toolbarProps,
124
- operation: operation,
125
- form: form,
126
- namePath: _namePath,
127
- emptyBtnText: emptyBtnText
128
- }), /*#__PURE__*/_jsx(Form.ErrorList, {
129
- errors: errors
130
- }), toolbarProps !== false && _fields.length > 0 && /*#__PURE__*/_jsx(ToolbarButton, {
131
- disabled: disabled,
132
- isView: isView,
133
- min: min,
134
- max: max,
135
- length: fields.length,
136
- operation: operation,
137
- namePath: _namePath,
138
- form: form,
139
- fields: fields,
140
- toolbarProps: toolbarProps
141
- })]
148
+ fields: fields,
149
+ toolbarProps: toolbarProps
150
+ })]
151
+ })
142
152
  })
143
153
  });
144
154
  };
@@ -7,9 +7,9 @@ import type { ProFormColumnType, ProFormOtherType } from '../../../propsType';
7
7
  export type TitleRender = (record: Record<string, any>, index: number, form: FormInstance) => any;
8
8
  export type TitleType = string | React.ReactNode | TitleRender;
9
9
  type Callback = (record: any, option: Pick<Option, 'namePath' | 'index' | 'operation' | 'form'>) => any | void;
10
- export type ToolbarCallback = (record: any, option: Pick<Option, 'namePath' | 'form' | 'operation'>) => any | void;
10
+ export type ToolbarCallback = (record: any, option: Pick<Option, 'index' | 'namePath' | 'form' | 'operation'>) => any | void;
11
11
  export interface Option {
12
- index: number;
12
+ index: number | undefined;
13
13
  namePath: InternalNamePath;
14
14
  form: FormInstance;
15
15
  operation: FormListOperation;
@@ -23,12 +23,14 @@ export interface ActionType extends Omit<ButtonProps, 'onClick' | 'type'> {
23
23
  confirmProps?: boolean | PopconfirmProps;
24
24
  title?: string;
25
25
  show?: boolean | ((record: any, option: Pick<Option, 'index' | 'form' | 'namePath'>) => boolean);
26
+ addIndex?: number | ((record: any, option: Pick<Option, 'index' | 'form' | 'namePath' | 'operation'>) => number);
26
27
  }
27
28
  export interface ToolbarActionType extends Omit<ActionType, 'actionType' | 'onHandle' | 'onClick' | 'show' | 'type'> {
28
29
  type?: 'add';
29
30
  onHandle?: ToolbarCallback;
30
31
  onClick?: ToolbarCallback;
31
32
  show?: boolean | ((record: any, option: Pick<Option, 'form' | 'namePath'>) => boolean);
33
+ addIndex?: number | ((record: any, option: Pick<Option, 'index' | 'form' | 'namePath' | 'operation'>) => number);
32
34
  }
33
35
  export type FormListMode = 'block' | 'line' | 'less';
34
36
  export interface FormListType {
@@ -56,6 +58,9 @@ export interface FormListType {
56
58
  draggable?: boolean;
57
59
  id?: string;
58
60
  emptyBtnText?: string;
61
+ hideStartEndActionProps?: [boolean, boolean];
62
+ titlePosition?: 'top' | 'left';
63
+ className?: string;
59
64
  }
60
65
  export type TypeWithRef = FormListType & React.RefAttributes<FormListRefType>;
61
66
  export interface FormListRefType {
@@ -127,3 +127,44 @@
127
127
  }
128
128
  }
129
129
  }
130
+
131
+ // 左侧标题布局样式
132
+ .pro-form-list-mode-block.pro-form-list-title-left {
133
+ .@{ant-prefix}-collapse-header-text{
134
+ display: none;
135
+ }
136
+ .pro-form-list-left-title-wrapper {
137
+ display: flex;
138
+ gap: 16px;
139
+ align-items: flex-start;
140
+
141
+ .pro-form-list-left-title {
142
+ flex: 0 0 80px;
143
+ font-weight: 600;
144
+ font-size: 14px;
145
+ line-height: 1.4;
146
+ color: @zaui-text;
147
+ padding-top: 8px;
148
+ }
149
+
150
+ .pro-form-list-left-content {
151
+ flex: 1;
152
+ min-width: 0;
153
+ }
154
+ }
155
+
156
+ // 移动端响应式
157
+ @media (max-width: 768px) {
158
+ .pro-form-list-left-title-wrapper {
159
+ flex-direction: column;
160
+ gap: 8px;
161
+
162
+ .pro-form-list-left-title {
163
+ flex: none;
164
+ width: 100%;
165
+ padding-top: 0;
166
+ margin-bottom: 8px;
167
+ }
168
+ }
169
+ }
170
+ }