@yuntijs/ui 1.0.0-beta.99 → 1.1.0-beta.1

package/es/CollapseGroup/style.js

@@ -1,11 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+export var useStyles = createStyles(function (_ref, _ref2) {
   var css = _ref.css,
     token = _ref.token,
     prefixCls = _ref.prefixCls;
+  var collapsible = _ref2.collapsible;
   return {
-    root: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      margin-bottom: ", "px;\n      .", "-collapse {\n        &-header {\n          padding: 0 !important;\n          &-text {\n            flex: 1 !important;\n            padding: ", "px ", "px ", "px 0;\n            & > * {\n              font-size: ", "px;\n              /* font-weight: unset; */\n            }\n          }\n        }\n        &-expand-icon {\n          cursor: pointer;\n          padding: ", "px 0 ", "px ", "px;\n        }\n        &-extra {\n          padding-right: ", "px;\n        }\n        &-item > .", "-collapse-content {\n          padding: ", "px 0;\n          background-color: ", ";\n        }\n        &-content {\n          &-box {\n            padding: ", "px ", "px !important;\n          }\n        }\n      }\n    "])), token.margin, prefixCls, token.paddingSM, token.paddingSM, token.paddingSM, token.fontSize, token.padding, token.padding, token.paddingSM, token.paddingSM, prefixCls, token.paddingXXS, token.colorBgContainer, token.paddingXXS, token.padding)
+    root: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        margin-bottom: ", "px;\n        .", "-collapse {\n          &-header {\n            padding: 0 !important;\n            &-text {\n              flex: 1 !important;\n              padding: ", "px ", "px ", "px\n                ", "px;\n              & > * {\n                font-size: ", "px;\n                /* font-weight: unset; */\n              }\n            }\n          }\n          &-expand-icon {\n            cursor: pointer;\n            padding: ", "px 0 ", "px ", "px;\n          }\n          &-extra {\n            padding-right: ", "px;\n          }\n          &-item > .", "-collapse-content {\n            padding: ", "px 0;\n            background-color: ", ";\n          }\n          &-content {\n            &-box {\n              padding: ", "px ", "px !important;\n            }\n          }\n        }\n      "])), token.margin, prefixCls, token.paddingSM, token.paddingSM, token.paddingSM, collapsible === false ? token.paddingSM : 0, token.fontSize, token.padding, token.padding, token.paddingSM, token.paddingSM, prefixCls, token.paddingXXS, token.colorBgContainer, token.paddingXXS, token.padding)
   };
 });

package/es/Form/collapse-list/FieldsWatcher.d.ts

@@ -0,0 +1,7 @@
+import { type FormItemProps } from 'antd';
+import React from 'react';
+import { FormCollapseListOperation } from './hooks';
+export interface FormCollapseListFieldsWatcherProps extends Pick<FormCollapseListOperation, 'update'> {
+    name: FormItemProps['name'];
+}
+export declare const FormCollapseListFieldsWatcher: React.FC<FormCollapseListFieldsWatcherProps>;

package/es/Form/collapse-list/FieldsWatcher.js

@@ -0,0 +1,19 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { Form } from 'antd';
+import { memo, useEffect, useState } from 'react';
+export var FormCollapseListFieldsWatcher = /*#__PURE__*/memo(function (_ref) {
+  var name = _ref.name,
+    update = _ref.update;
+  var rows = Form.useWatch(name);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    preRowsCount = _useState2[0],
+    setPreRowsCount = _useState2[1];
+  useEffect(function () {
+    if ((rows === null || rows === void 0 ? void 0 : rows.length) !== preRowsCount) {
+      update();
+      setPreRowsCount(rows === null || rows === void 0 ? void 0 : rows.length);
+    }
+  }, [preRowsCount, rows, update]);
+  return null;
+});

package/es/Form/collapse-list/hooks.d.ts

@@ -0,0 +1,20 @@
+import { type FormItemProps, type FormListOperation } from 'antd';
+import React from 'react';
+import type { FormCollapseListColumn } from '.';
+import { ListFieldValue } from './utils';
+export interface FormCollapseListOperation extends FormListOperation {
+    update: () => void;
+}
+export declare const useFormCollapseListHooks: (name: FormItemProps['name'], childrenColumnName: string, columns: FormCollapseListColumn[]) => {
+    values: ListFieldValue[];
+    updateValues: () => void;
+    expandedRowKeys: readonly React.Key[];
+    setExpandedRowKeys: React.Dispatch<React.SetStateAction<readonly React.Key[]>>;
+    fieldValuesToDataSource: (fields: ListFieldValue[]) => {
+        dataSource: ListFieldValue[];
+        allExpandRowKeys: React.Key[];
+    };
+    getFieldPath: (fieldKeyPath: number[], fieldName?: string) => any;
+    getFormListOperation: (operation: FormListOperation, record: ListFieldValue) => FormCollapseListOperation;
+    firstColumnFormItemName: any;
+};

package/es/Form/collapse-list/hooks.js

@@ -0,0 +1,158 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { Form } from 'antd';
+import { cloneDeep } from 'lodash-es';
+import { useCallback, useMemo, useState } from 'react';
+import { FIELD_KEY_PATH, toRowKey } from "./utils";
+export var useFormCollapseListHooks = function useFormCollapseListHooks(name, childrenColumnName, columns) {
+  var _useMemo;
+  var form = Form.useFormInstance();
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    values = _useState2[0],
+    _setValues = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    expandedRowKeys = _useState4[0],
+    setExpandedRowKeys = _useState4[1];
+  var updateValues = useCallback(function () {
+    return _setValues(form.getFieldValue(name));
+  }, [form, name]);
+  var firstColumnFormItemName = (_useMemo = useMemo(function () {
+    return columns.find(function (item) {
+      return !!item.name && !item.noStyle;
+    });
+  }, [columns])) === null || _useMemo === void 0 ? void 0 : _useMemo.name;
+  var fieldValuesToDataSource = useCallback(function (fields) {
+    if (!name) {
+      return {
+        dataSource: [],
+        allExpandRowKeys: []
+      };
+    }
+    var allExpandRowKeys = [];
+    var _setFieldPath = function _setFieldPath(field, index, path) {
+      var item = cloneDeep(field);
+      if (!item) {
+        item = _defineProperty({}, FIELD_KEY_PATH, []);
+      }
+      item[FIELD_KEY_PATH] = [].concat(_toConsumableArray(path), [index]);
+      if (item[childrenColumnName] && Array.isArray(item[childrenColumnName])) {
+        allExpandRowKeys.push(toRowKey(item[FIELD_KEY_PATH]));
+        item[childrenColumnName] = item[childrenColumnName].map(function (child, index) {
+          return _setFieldPath(child, index, item[FIELD_KEY_PATH]);
+        });
+      }
+      return item;
+    };
+    return {
+      dataSource: (fields === null || fields === void 0 ? void 0 : fields.map(function (field, index) {
+        return _setFieldPath(field, index, []);
+      })) || [],
+      allExpandRowKeys: allExpandRowKeys
+    };
+  }, [childrenColumnName, name]);
+  var getFieldPath = useCallback(function (fieldKeyPath, fieldName) {
+    var fieldPath = [];
+    var _iterator = _createForOfIteratorHelper(fieldKeyPath.entries()),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _step$value = _slicedToArray(_step.value, 2),
+          index = _step$value[0],
+          key = _step$value[1];
+        if (index === fieldKeyPath.length - 1) {
+          fieldPath.push(key);
+          if (fieldName) {
+            fieldPath.push(fieldName);
+          }
+        } else {
+          fieldPath.push(key, childrenColumnName);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return fieldPath;
+  }, [childrenColumnName]);
+  var getFormListOperation = useCallback(function (operation, record) {
+    var fieldKeyPath = record[FIELD_KEY_PATH];
+    return {
+      add: function add(defaultValue, insertIndex) {
+        var fieldPath = getFieldPath(fieldKeyPath);
+        var fieldName = [name].concat(_toConsumableArray(fieldPath), [childrenColumnName]);
+        var fieldValue = cloneDeep(form.getFieldValue(fieldName)) || [];
+        var index = insertIndex !== null && insertIndex !== void 0 ? insertIndex : fieldValue.length;
+        fieldValue.splice(index, 0, defaultValue);
+        form.setFieldValue(fieldName, fieldValue);
+        if (firstColumnFormItemName) {
+          var fileNamePath = [].concat(_toConsumableArray(fieldName), [index, firstColumnFormItemName]);
+          // Scroll and focus new item which is just added
+          setTimeout(function () {
+            form.focusField(fileNamePath);
+          }, 200);
+        }
+        setExpandedRowKeys(_toConsumableArray(new Set([].concat(_toConsumableArray(expandedRowKeys), [toRowKey(fieldKeyPath)]))));
+        updateValues();
+      },
+      remove: function remove(index) {
+        if (fieldKeyPath.length <= 1) {
+          operation.remove(index);
+          updateValues();
+          return;
+        }
+        var fieldName = [name].concat(_toConsumableArray(getFieldPath(fieldKeyPath).slice(0, -1)));
+        var fieldValue = cloneDeep(form.getFieldValue(fieldName)) || [];
+        var indexs = [];
+        if (Array.isArray(index)) {
+          indexs.push.apply(indexs, _toConsumableArray(index));
+        } else {
+          indexs.push(index);
+        }
+        var newFieldValue = fieldValue.filter(function (_, _index) {
+          return !indexs.includes(_index);
+        });
+        form.setFieldValue(fieldName, newFieldValue.length > 0 ? newFieldValue : undefined);
+        updateValues();
+      },
+      move: function move(from, to) {
+        if (fieldKeyPath.length <= 1) {
+          return operation.move(from, to);
+        }
+        var fieldName = [name].concat(_toConsumableArray(getFieldPath(fieldKeyPath).slice(0, -1)));
+        var fieldValue = cloneDeep(form.getFieldValue(fieldName)) || [];
+        // 检查索引是否有效
+        if (from < 0 || to < 0 || from >= fieldValue.length || to >= fieldValue.length) {
+          console.warn(new Error('索引超出数组范围'));
+          return;
+        }
+        // 使用数组解构交换两个元素
+        var _ref = [fieldValue[to], fieldValue[from]];
+        fieldValue[from] = _ref[0];
+        fieldValue[to] = _ref[1];
+        form.setFieldValue(fieldName, fieldValue);
+        updateValues();
+      },
+      update: function update() {
+        return updateValues();
+      }
+    };
+  }, [childrenColumnName, expandedRowKeys, firstColumnFormItemName, form, getFieldPath, name, updateValues]);
+  return {
+    values: values,
+    updateValues: updateValues,
+    expandedRowKeys: expandedRowKeys,
+    setExpandedRowKeys: setExpandedRowKeys,
+    fieldValuesToDataSource: fieldValuesToDataSource,
+    getFieldPath: getFieldPath,
+    getFormListOperation: getFormListOperation,
+    // 首个表单输入列 (用于新增表达后 foucs 等)
+    firstColumnFormItemName: firstColumnFormItemName
+  };
+};

package/es/Form/collapse-list/index.d.ts

@@ -1,11 +1,15 @@
-import type { FormItemProps, FormListFieldData, TableColumnProps } from 'antd';
+import type { FormItemProps, TableColumnProps } from 'antd';
 import type { FormListProps as AntFormListProps } from 'antd/es/form';
 import React from 'react';
 import { CollapseGroupProps } from '../../CollapseGroup';
-export interface FormCollapseListColumnItem extends Omit<FormItemProps, 'dependencies' | 'rules' | 'tooltip' | 'labelAlign' | 'labelCol' | 'colon' | 'children'> {
-    render?: (field: FormListFieldData, index: number) => React.ReactElement;
-    rules?: FormItemProps['rules'] | ((field: FormListFieldData, index: number) => FormItemProps['rules']);
-    dependencies?: FormItemProps['dependencies'] | ((field: FormListFieldData, index: number) => FormItemProps['dependencies']);
+import { FormCollapseListOperation } from './hooks';
+import { FieldPath } from './utils';
+interface FormCollapseListColumnItem extends Omit<FormItemProps, 'dependencies' | 'rules' | 'tooltip' | 'labelAlign' | 'labelCol' | 'colon' | 'children'> {
+    render?: (fieldName: number, index: number, operation: FormCollapseListOperation, 
+    /** 当前 item 的 path */
+    fieldPath: FieldPath) => React.ReactNode;
+    rules?: FormItemProps['rules'] | ((parentFieldPath: FieldPath, index: number) => FormItemProps['rules']);
+    dependencies?: FormItemProps['dependencies'] | ((parentFieldPath: FieldPath, index: number) => FormItemProps['dependencies']);
 }
 export interface FormListOperationAddParams {
     defaultValue?: any;
@@ -13,7 +17,7 @@ export interface FormListOperationAddParams {
 }
 export interface FormCollapseListColumn extends FormCollapseListColumnItem, Pick<TableColumnProps<any>, 'align' | 'ellipsis' | 'fixed' | 'responsive' | 'shouldCellUpdate' | 'width'> {
 }
-export interface FormCollapseListProps extends Omit<AntFormListProps, 'name' | 'children'>, Pick<CollapseGroupProps, 'className' | 'extra' | 'expandIcon' | 'icon' | 'title' | 'variant' | 'defaultActive' | 'style'> {
+export interface FormCollapseListProps extends Omit<AntFormListProps, 'name' | 'children'>, Pick<CollapseGroupProps, 'className' | 'collapsible' | 'extra' | 'expandIcon' | 'icon' | 'title' | 'variant' | 'defaultActive' | 'style'> {
     /** 字段名 */
     name?: FormItemProps['name'];
     /** 表单列为空时展示的空内容 */
@@ -36,5 +40,14 @@ export interface FormCollapseListProps extends Omit<AntFormListProps, 'name' | '
     onRemove?: (values: any) => boolean | void | Promise<boolean | void>;
     /** 是否启用表单项删除按钮，默认为启用 */
     fieldRemoveButton?: boolean;
+    /** [树形数据] 初始时，是否展开所有行 */
+    defaultExpandAllRows?: boolean;
+    /** [树形数据] 每层缩进的宽度，以 px 为单位, 默认为 16 */
+    indentSize?: number;
+    /** [树形数据] 指定树形结构的列名，默认为 children */
+    childrenColumnName?: string;
+    /** 表格行是否开启 hover 交互, 默认为启用 */
+    rowHoverable?: boolean;
 }
 export declare const FormCollapseList: React.FC<FormCollapseListProps>;
+export {};

package/es/Form/collapse-list/index.js

@@ -2,9 +2,10 @@ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["extra", "expandIcon", "icon", "title", "variant", "defaultActive", "empty", "columns", "disabled", "readOnly", "addOneFieldDefault", "disableRemoveWhenOneField", "maxFileds", "name", "addParams", "className", "onRemove", "fieldRemoveButton", "style"],
-  _excluded2 = ["label", "name", "render", "dependencies", "rules", "align", "ellipsis", "fixed", "responsive", "shouldCellUpdate", "width"],
-  _excluded3 = ["key", "name"];
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+var _excluded = ["collapsible", "extra", "expandIcon", "icon", "title", "variant", "defaultActive", "empty", "columns", "disabled", "readOnly", "addOneFieldDefault", "disableRemoveWhenOneField", "maxFileds", "name", "addParams", "className", "onRemove", "fieldRemoveButton", "style", "defaultExpandAllRows", "indentSize", "childrenColumnName", "rowHoverable"],
+  _excluded2 = ["label", "name", "render", "dependencies", "rules", "align", "ellipsis", "fixed", "responsive", "shouldCellUpdate", "width", "className"],
+  _excluded3 = ["key"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; }
@@ -12,12 +13,30 @@ import { PlusOutlined } from '@ant-design/icons';
 import { Icon } from '@lobehub/ui';
 import { Button, Flex, Form, Table, Tooltip } from 'antd';
 import { Trash2 } from 'lucide-react';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import Typography from "../../Typography";
 import { CollapseGroup } from "../../CollapseGroup";
+import { FormCollapseListFieldsWatcher } from "./FieldsWatcher";
+import { useFormCollapseListHooks } from "./hooks";
 import { useStyles } from "./style";
+import { FIELD_KEY_PATH, toRowKey } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
-export var FormCollapseList = function FormCollapseList(_ref) {
-  var extra = _ref.extra,
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Text = Typography.Text;
+var FieldText = function FieldText(props) {
+  var id = props.id,
+    value = props.value;
+  if (_typeof(value) === 'object') {
+    console.warn("".concat(id, " => ").concat(value));
+    return '-';
+  }
+  return /*#__PURE__*/_jsx("span", {
+    children: value
+  });
+};
+export var FormCollapseList = /*#__PURE__*/memo(function (_ref) {
+  var collapsible = _ref.collapsible,
+    extra = _ref.extra,
     expandIcon = _ref.expandIcon,
     icon = _ref.icon,
     title = _ref.title,
@@ -39,12 +58,51 @@ export var FormCollapseList = function FormCollapseList(_ref) {
     _ref$fieldRemoveButto = _ref.fieldRemoveButton,
     fieldRemoveButton = _ref$fieldRemoveButto === void 0 ? true : _ref$fieldRemoveButto,
     style = _ref.style,
+    defaultExpandAllRows = _ref.defaultExpandAllRows,
+    _ref$indentSize = _ref.indentSize,
+    indentSize = _ref$indentSize === void 0 ? 16 : _ref$indentSize,
+    _ref$childrenColumnNa = _ref.childrenColumnName,
+    childrenColumnName = _ref$childrenColumnNa === void 0 ? 'children' : _ref$childrenColumnNa,
+    _ref$rowHoverable = _ref.rowHoverable,
+    rowHoverable = _ref$rowHoverable === void 0 ? true : _ref$rowHoverable,
     formListProps = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
+    cx = _useStyles.cx,
     styles = _useStyles.styles;
   var listAdd = useRef();
   var form = Form.useFormInstance();
-  var fieldsWatch = Form.useWatch(name, form);
+  var _useFormCollapseListH = useFormCollapseListHooks(name, childrenColumnName, columns),
+    values = _useFormCollapseListH.values,
+    updateValues = _useFormCollapseListH.updateValues,
+    expandedRowKeys = _useFormCollapseListH.expandedRowKeys,
+    setExpandedRowKeys = _useFormCollapseListH.setExpandedRowKeys,
+    fieldValuesToDataSource = _useFormCollapseListH.fieldValuesToDataSource,
+    getFormListOperation = _useFormCollapseListH.getFormListOperation,
+    getFieldPath = _useFormCollapseListH.getFieldPath,
+    firstColumnFormItemName = _useFormCollapseListH.firstColumnFormItemName;
+  var _useMemo = useMemo(function () {
+      return fieldValuesToDataSource(values);
+    }, [fieldValuesToDataSource, values]),
+    dataSource = _useMemo.dataSource;
+  var isTreeMode = useMemo(function () {
+    return dataSource === null || dataSource === void 0 ? void 0 : dataSource.some(function (d) {
+      return d[childrenColumnName];
+    });
+  }, [childrenColumnName, dataSource]);
+  // 设置初始值以及在 readOnly 变化时更新 values
+  useEffect(function () {
+    updateValues();
+  }, [updateValues, readOnly]);
+
+  // 设置默认展开的 keys
+  useEffect(function () {
+    var fields = form.getFieldValue(name);
+    var _fieldValuesToDataSou = fieldValuesToDataSource(fields),
+      allExpandRowKeys = _fieldValuesToDataSou.allExpandRowKeys;
+    if (defaultExpandAllRows) {
+      setExpandedRowKeys(allExpandRowKeys);
+    }
+  }, [defaultExpandAllRows, fieldValuesToDataSource, form, name, setExpandedRowKeys]);
   var getAddParams = useCallback(function () {
     if (!addParams) {
       return [];
@@ -53,62 +111,80 @@ export var FormCollapseList = function FormCollapseList(_ref) {
     return [params.defaultValue, params.insertIndex];
   }, [addParams]);
   var handleOnRemove = useCallback(function (fieldName) {
-    var values = form.getFieldValue([name, fieldName]);
-    return onRemove === null || onRemove === void 0 ? void 0 : onRemove(values);
+    var value = form.getFieldValue([name, fieldName]);
+    return onRemove === null || onRemove === void 0 ? void 0 : onRemove(value);
   }, [form, name, onRemove]);
+
+  // 默认增加一行的处理
   useEffect(function () {
     var _form$getFieldValue;
     if (addOneFieldDefault && (!(form !== null && form !== void 0 && form.getFieldValue(name)) || (form === null || form === void 0 || (_form$getFieldValue = form.getFieldValue(name)) === null || _form$getFieldValue === void 0 ? void 0 : _form$getFieldValue.length) === 0)) {
       var _listAdd$current;
       (_listAdd$current = listAdd.current) === null || _listAdd$current === void 0 || _listAdd$current.call.apply(_listAdd$current, [listAdd].concat(_toConsumableArray(getAddParams())));
+      // Scroll and focus new item which is just added
+      setTimeout(function () {
+        form.focusField([name, 0, firstColumnFormItemName]);
+      }, 200);
     }
-  }, [addOneFieldDefault, getAddParams, form, name]);
-  return /*#__PURE__*/_jsx(CollapseGroup, {
+  }, [addOneFieldDefault, getAddParams, form, name, firstColumnFormItemName, updateValues]);
+  return /*#__PURE__*/_jsxs(CollapseGroup, {
     extra: extra === undefined ? name && !readOnly && /*#__PURE__*/_jsx(Tooltip, {
       title: maxFileds && "\u6700\u591A\u6DFB\u52A0 ".concat(maxFileds, " \u9879"),
       children: /*#__PURE__*/_jsx(Button, {
-        disabled: disabled || !!(maxFileds && (fieldsWatch === null || fieldsWatch === void 0 ? void 0 : fieldsWatch.length) === maxFileds),
+        disabled: disabled || !!(maxFileds && (values === null || values === void 0 ? void 0 : values.length) === maxFileds),
         icon: /*#__PURE__*/_jsx(PlusOutlined, {}),
         onClick: function onClick(e) {
           var _listAdd$current2;
           e.stopPropagation();
           (_listAdd$current2 = listAdd.current) === null || _listAdd$current2 === void 0 || _listAdd$current2.call.apply(_listAdd$current2, [listAdd].concat(_toConsumableArray(getAddParams())));
+          // Scroll and focus new item which is just added
+          setTimeout(function () {
+            form.focusField([name, form.getFieldValue(name).length - 1, firstColumnFormItemName]);
+          }, 200);
         },
         size: "small",
         type: "text"
       })
     }) : extra,
     className: className,
+    collapsible: collapsible,
     expandIcon: expandIcon,
     icon: icon,
     title: title,
     variant: variant,
     defaultActive: defaultActive,
     style: style,
-    children: name ? /*#__PURE__*/_jsx(Form.List, _objectSpread(_objectSpread({
+    children: [!isTreeMode && /*#__PURE__*/_jsx(FormCollapseListFieldsWatcher, {
+      name: name,
+      update: updateValues
+    }), name ? /*#__PURE__*/_jsx(Form.List, _objectSpread(_objectSpread({
       name: name
     }, formListProps), {}, {
-      children: function children(fields, _ref2) {
-        var add = _ref2.add,
-          remove = _ref2.remove;
-        listAdd.current = add;
+      children: function children(fields, operation) {
+        var add = operation.add,
+          remove = operation.remove;
+        listAdd.current = function (defaultValue, insertIndex) {
+          add(defaultValue, insertIndex);
+          updateValues();
+        };
 
         // @Todo: support sort
         return /*#__PURE__*/_jsx(Table, {
           className: styles.list,
-          columns: [].concat(_toConsumableArray(columns.map(function (_ref3) {
-            var label = _ref3.label,
-              itemName = _ref3.name,
-              fieldRender = _ref3.render,
-              dependencies = _ref3.dependencies,
-              rules = _ref3.rules,
-              align = _ref3.align,
-              ellipsis = _ref3.ellipsis,
-              fixed = _ref3.fixed,
-              responsive = _ref3.responsive,
-              shouldCellUpdate = _ref3.shouldCellUpdate,
-              width = _ref3.width,
-              itemProps = _objectWithoutProperties(_ref3, _excluded2);
+          columns: [].concat(_toConsumableArray(columns.map(function (_ref2) {
+            var label = _ref2.label,
+              itemName = _ref2.name,
+              fieldRender = _ref2.render,
+              dependencies = _ref2.dependencies,
+              rules = _ref2.rules,
+              align = _ref2.align,
+              ellipsis = _ref2.ellipsis,
+              fixed = _ref2.fixed,
+              responsive = _ref2.responsive,
+              shouldCellUpdate = _ref2.shouldCellUpdate,
+              width = _ref2.width,
+              className = _ref2.className,
+              itemProps = _objectWithoutProperties(_ref2, _excluded2);
             return {
               title: label,
               dataIndex: itemName,
@@ -118,41 +194,53 @@ export var FormCollapseList = function FormCollapseList(_ref) {
               responsive: responsive,
               shouldCellUpdate: shouldCellUpdate,
               width: width,
-              render: function render(_text, _record, index) {
-                var _fields$index = fields[index],
-                  key = _fields$index.key,
-                  name = _fields$index.name,
-                  restField = _objectWithoutProperties(_fields$index, _excluded3);
-                var children = fieldRender === null || fieldRender === void 0 ? void 0 : fieldRender(fields[index], index);
-                if (!children && !itemProps.noStyle) {
+              render: function render(text, record, index) {
+                var field = fields[index] || {};
+                var fieldName = field.name;
+                var fieldKeyPath = record[FIELD_KEY_PATH];
+                var fieldPath = [name].concat(_toConsumableArray(getFieldPath(fieldKeyPath)));
+                var parentFieldPath = fieldPath.slice(0, -1);
+                var key = field.key,
+                  restField = _objectWithoutProperties(field, _excluded3);
+                var children = fieldRender === null || fieldRender === void 0 ? void 0 : fieldRender(fieldName !== null && fieldName !== void 0 ? fieldName : fieldKeyPath.at(-1), index, getFormListOperation(operation, record), fieldPath);
+                if (!itemName) {
                   return /*#__PURE__*/_jsx(Flex, {
                     align: "center",
-                    className: styles.noFormItem,
-                    children: "\u65E0\u9700\u8BBE\u7F6E"
+                    className: cx(styles.noFormItem, className),
+                    children: children
                   });
                 }
-                if (!itemName) {
+                if (children !== undefined && _typeof(children) !== 'object') {
                   return /*#__PURE__*/_jsx(Flex, {
                     align: "center",
-                    className: styles.noFormItem,
-                    children: children
+                    className: cx(styles.noFormItem, className),
+                    children: children.toString()
                   });
                 }
-                var chidrenProps = {
-                  readOnly: readOnly,
-                  disabled: disabled
-                };
+                var chidrenProps = {};
+                if (disabled !== undefined) {
+                  chidrenProps.disabled = disabled;
+                }
                 if (readOnly === true) {
-                  chidrenProps.showCount = false;
-                  chidrenProps.variant = 'borderless';
-                  chidrenProps.placeholder = '-';
+                  return /*#__PURE__*/_jsx(Flex, {
+                    align: "center",
+                    className: cx(styles.readOnlyItem, className),
+                    children: text !== null && text !== void 0 ? text : /*#__PURE__*/_jsx(Text, {
+                      type: "secondary",
+                      children: "-"
+                    })
+                  });
                 }
-                return /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread(_objectSpread({}, restField), {}, {
-                  dependencies: typeof dependencies === 'function' ? dependencies(fields[index], index) : dependencies,
-                  name: [name, itemName],
-                  rules: typeof rules === 'function' ? rules(fields[index], index) : rules
+                return /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread(_objectSpread({
+                  className: className
+                }, restField), {}, {
+                  dependencies: typeof dependencies === 'function' ? dependencies(parentFieldPath, index) : dependencies,
+                  name: getFieldPath(fieldKeyPath, itemName)
+                  // label={getFieldPath(fieldKeyPath, itemName).join('/')}
+                  ,
+                  rules: typeof rules === 'function' ? rules(parentFieldPath, index) : rules
                 }, itemProps), {}, {
-                  children: children && /*#__PURE__*/React.cloneElement(children, chidrenProps)
+                  children: children ? ( /*#__PURE__*/React.cloneElement(children, chidrenProps)) : /*#__PURE__*/_jsx(FieldText, {})
                 }), key);
               }
             };
@@ -160,7 +248,11 @@ export var FormCollapseList = function FormCollapseList(_ref) {
             title: '',
             dataIndex: 'del',
             render: function render(_text, _record, index) {
-              var fieldName = fields[index].name;
+              var field = fields[index];
+              if (!field) {
+                return;
+              }
+              var fieldName = field.name;
               return /*#__PURE__*/_jsx(Form.Item, {
                 children: /*#__PURE__*/_jsx(Button, {
                   disabled: disabled || disableRemoveWhenOneField && fields.length === 1,
@@ -178,6 +270,7 @@ export var FormCollapseList = function FormCollapseList(_ref) {
                           isRemove = _context.sent;
                           if (isRemove !== false) {
                             remove(fieldName);
+                            updateValues();
                           }
                         case 4:
                         case "end":
@@ -192,18 +285,29 @@ export var FormCollapseList = function FormCollapseList(_ref) {
           }]).filter(function (c) {
             return !!c;
           }),
-          dataSource: fields,
+          dataSource: dataSource,
+          expandable: {
+            expandedRowKeys: expandedRowKeys,
+            childrenColumnName: childrenColumnName,
+            onExpandedRowsChange: function onExpandedRowsChange(expandedKeys) {
+              setExpandedRowKeys(expandedKeys);
+            }
+          },
+          indentSize: indentSize,
           locale: {
             emptyText: empty
           },
           pagination: false,
-          rowHoverable: false,
+          rowHoverable: rowHoverable,
+          rowKey: function rowKey(row) {
+            return toRowKey(row[FIELD_KEY_PATH]);
+          },
           size: "small"
         });
       }
     })) : /*#__PURE__*/_jsx("div", {
       className: styles.empty,
       children: empty
-    })
+    })]
   });
-};
+});

package/es/Form/collapse-list/style.d.ts

@@ -2,4 +2,5 @@ export declare const useStyles: (props?: unknown) => import("antd-style").Return
     empty: import("antd-style").SerializedStyles;
     list: import("antd-style").SerializedStyles;
     noFormItem: import("antd-style").SerializedStyles;
+    readOnlyItem: import("antd-style").SerializedStyles;
 }>;

package/es/Form/collapse-list/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
@@ -7,7 +7,8 @@ export var useStyles = createStyles(function (_ref) {
     prefixCls = _ref.prefixCls;
   return {
     empty: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: ", "px ", "px;\n      color: ", ";\n    "])), token.paddingXS, token.paddingSM, token.colorTextTertiary),
-    list: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &.", "-table-wrapper {\n        .", "-table {\n          &-thead {\n            & > tr > th {\n              font-weight: normal;\n              color: ", ";\n              background-color: unset;\n              &::before {\n                display: none;\n              }\n            }\n          }\n          &-tbody {\n            & > tr:last-child {\n              & > td {\n                border-bottom-color: transparent;\n              }\n            }\n          }\n          &-cell {\n            vertical-align: top;\n          }\n        }\n      }\n      .", "-form {\n        &-item {\n          margin-bottom: 0;\n        }\n      }\n    "])), prefixCls, prefixCls, token.colorTextTertiary, prefixCls),
-    noFormItem: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      height: ", "px;\n      color: ", ";\n    "])), token.controlHeight, token.colorTextTertiary)
+    list: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &.", "-table-wrapper {\n        .", "-table {\n          &-thead {\n            & > tr > th {\n              font-weight: normal;\n              color: ", ";\n              background-color: unset;\n              &::before {\n                display: none;\n              }\n            }\n          }\n          &-tbody {\n            & > tr:last-child {\n              & > td {\n                border-bottom-color: transparent;\n              }\n            }\n          }\n          &-cell {\n            vertical-align: top;\n            .", "-table-row-expand-icon {\n              margin-top: ", "px;\n            }\n          }\n        }\n      }\n      .", "-form {\n        &-item {\n          margin-bottom: 0;\n        }\n      }\n    "])), prefixCls, prefixCls, token.colorTextTertiary, prefixCls, token.marginXS, prefixCls),
+    noFormItem: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      height: ", "px;\n      color: ", ";\n    "])), token.controlHeight, token.colorTextTertiary),
+    readOnlyItem: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      height: ", "px;\n      color: ", ";\n    "])), token.controlHeight, token.colorTextBase)
   };
 });