@yuntijs/ui 1.0.0-beta.101 → 1.0.0-beta.103

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

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

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

@@ -1,30 +1,46 @@
 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 { useCallback, useState } from 'react';
-import { FIELD_KEY_PATH, getFieldPath, toRowKey } from "./utils";
-export var useFormCollapseListHooks = function useFormCollapseListHooks(name) {
+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),
     expandedRowKeys = _useState2[0],
     setExpandedRowKeys = _useState2[1];
+  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 fieldsToDataSource = useCallback(function (fields) {
+    if (!name) {
+      return {
+        dataSource: [],
+        allExpandRowKeys: []
+      };
+    }
     var allExpandRowKeys = [];
     var _setFieldPath = function _setFieldPath(field, index, path) {
-      if (!field) {
-        // eslint-disable-next-line no-param-reassign
-        field = _defineProperty({}, FIELD_KEY_PATH, []);
+      var item = cloneDeep(field);
+      if (!item) {
+        item = _defineProperty({}, FIELD_KEY_PATH, []);
       }
-      field[FIELD_KEY_PATH] = [].concat(_toConsumableArray(path), [index]);
-      if (field.children && Array.isArray(field.children)) {
-        allExpandRowKeys.push(toRowKey(field[FIELD_KEY_PATH]));
-        field.children = field.children.map(function (item, index) {
-          return _setFieldPath(item, index, field[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 field;
+      return item;
     };
     return {
       dataSource: (fields === null || fields === void 0 ? void 0 : fields.map(function (field, index) {
@@ -32,17 +48,49 @@ export var useFormCollapseListHooks = function useFormCollapseListHooks(name) {
       })) || [],
       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), ['children']);
-        var fieldValue = form.getFieldValue(fieldName) || [];
-        fieldValue.push(undefined);
-        fieldValue.splice(insertIndex !== null && insertIndex !== void 0 ? insertIndex : fieldValue.length, defaultValue);
+        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)]))));
       },
       remove: function remove(index) {
@@ -50,7 +98,7 @@ export var useFormCollapseListHooks = function useFormCollapseListHooks(name) {
           return operation.remove(index);
         }
         var fieldName = [name].concat(_toConsumableArray(getFieldPath(fieldKeyPath).slice(0, -1)));
-        var fieldValue = form.getFieldValue(fieldName) || [];
+        var fieldValue = cloneDeep(form.getFieldValue(fieldName)) || [];
         var indexs = [];
         if (Array.isArray(index)) {
           indexs.push.apply(indexs, _toConsumableArray(index));
@@ -67,7 +115,7 @@ export var useFormCollapseListHooks = function useFormCollapseListHooks(name) {
           return operation.move(from, to);
         }
         var fieldName = [name].concat(_toConsumableArray(getFieldPath(fieldKeyPath).slice(0, -1)));
-        var fieldValue = form.getFieldValue(fieldName) || [];
+        var fieldValue = cloneDeep(form.getFieldValue(fieldName)) || [];
         // 检查索引是否有效
         if (from < 0 || to < 0 || from >= fieldValue.length || to >= fieldValue.length) {
           console.warn(new Error('索引超出数组范围'));
@@ -80,11 +128,14 @@ export var useFormCollapseListHooks = function useFormCollapseListHooks(name) {
         form.setFieldValue(fieldName, fieldValue);
       }
     };
-  }, [expandedRowKeys, form, name]);
+  }, [childrenColumnName, expandedRowKeys, firstColumnFormItemName, form, getFieldPath, name]);
   return {
     expandedRowKeys: expandedRowKeys,
     setExpandedRowKeys: setExpandedRowKeys,
     fieldsToDataSource: fieldsToDataSource,
-    getFormListOperation: getFormListOperation
+    getFieldPath: getFieldPath,
+    getFormListOperation: getFormListOperation,
+    // 首个表单输入列 (用于新增表达后 foucs 等)
+    firstColumnFormItemName: firstColumnFormItemName
   };
 };

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

@@ -4,9 +4,11 @@ import React from 'react';
 import { CollapseGroupProps } from '../../CollapseGroup';
 import { FieldPath } from './utils';
 export interface FormCollapseListColumnItem extends Omit<FormItemProps, 'dependencies' | 'rules' | 'tooltip' | 'labelAlign' | 'labelCol' | 'colon' | 'children'> {
-    render?: (fieldName: number, index: number, operation: FormListOperation, fieldPath: FieldPath) => React.ReactElement;
-    rules?: FormItemProps['rules'] | ((fieldPath: FieldPath, index: number) => FormItemProps['rules']);
-    dependencies?: FormItemProps['dependencies'] | ((fieldPath: FieldPath, index: number) => FormItemProps['dependencies']);
+    render?: (fieldName: number, index: number, operation: FormListOperation, 
+    /** 当前 item 的 path */
+    fieldPath: FieldPath) => React.ReactElement;
+    rules?: FormItemProps['rules'] | ((parentFieldPath: FieldPath, index: number) => FormItemProps['rules']);
+    dependencies?: FormItemProps['dependencies'] | ((parentFieldPath: FieldPath, index: number) => FormItemProps['dependencies']);
 }
 export interface FormListOperationAddParams {
     defaultValue?: any;
@@ -39,8 +41,10 @@ export interface FormCollapseListProps extends Omit<AntFormListProps, 'name' | '
     fieldRemoveButton?: boolean;
     /** [树形数据] 初始时，是否展开所有行 */
     defaultExpandAllRows?: boolean;
-    /** [树形数据] 每层缩进的宽度，以 px 为单位, 默认为 15 */
+    /** [树形数据] 每层缩进的宽度，以 px 为单位, 默认为 16 */
     indentSize?: number;
+    /** [树形数据] 指定树形结构的列名，默认为 children */
+    childrenColumnName?: string;
     /** 表格行是否开启 hover 交互, 默认为启用 */
     rowHoverable?: boolean;
 }

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

@@ -2,7 +2,7 @@ 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", "defaultExpandAllRows", "indentSize", "rowHoverable"],
+var _excluded = ["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";
@@ -16,7 +16,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { CollapseGroup } from "../../CollapseGroup";
 import { useFormCollapseListHooks } from "./hooks";
 import { useStyles } from "./style";
-import { FIELD_KEY_PATH, getFieldPath, toRowKey } from "./utils";
+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,
@@ -42,7 +42,10 @@ export var FormCollapseList = function FormCollapseList(_ref) {
     fieldRemoveButton = _ref$fieldRemoveButto === void 0 ? true : _ref$fieldRemoveButto,
     style = _ref.style,
     defaultExpandAllRows = _ref.defaultExpandAllRows,
-    indentSize = _ref.indentSize,
+    _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);
@@ -52,11 +55,13 @@ export var FormCollapseList = function FormCollapseList(_ref) {
   var listAdd = useRef();
   var form = Form.useFormInstance();
   var fieldsWatch = Form.useWatch(name, form);
-  var _useFormCollapseListH = useFormCollapseListHooks(name),
+  var _useFormCollapseListH = useFormCollapseListHooks(name, childrenColumnName, columns),
     expandedRowKeys = _useFormCollapseListH.expandedRowKeys,
     setExpandedRowKeys = _useFormCollapseListH.setExpandedRowKeys,
     fieldsToDataSource = _useFormCollapseListH.fieldsToDataSource,
-    getFormListOperation = _useFormCollapseListH.getFormListOperation;
+    getFormListOperation = _useFormCollapseListH.getFormListOperation,
+    getFieldPath = _useFormCollapseListH.getFieldPath,
+    firstColumnFormItemName = _useFormCollapseListH.firstColumnFormItemName;
   var _useMemo = useMemo(function () {
       return fieldsToDataSource(fieldsWatch);
     }, [fieldsWatch, fieldsToDataSource]),
@@ -85,8 +90,12 @@ export var FormCollapseList = function FormCollapseList(_ref) {
     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]);
+  }, [addOneFieldDefault, getAddParams, form, name, firstColumnFormItemName]);
   return /*#__PURE__*/_jsx(CollapseGroup, {
     extra: extra === undefined ? name && !readOnly && /*#__PURE__*/_jsx(Tooltip, {
       title: maxFileds && "\u6700\u591A\u6DFB\u52A0 ".concat(maxFileds, " \u9879"),
@@ -97,6 +106,10 @@ export var FormCollapseList = function FormCollapseList(_ref) {
           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"
@@ -147,7 +160,8 @@ export var FormCollapseList = function FormCollapseList(_ref) {
                 var field = fields[index] || {};
                 var fieldName = field.name;
                 var fieldKeyPath = record[FIELD_KEY_PATH];
-                var fieldPath = getFieldPath(fieldKeyPath).slice(0, -1);
+                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);
@@ -177,11 +191,11 @@ export var FormCollapseList = function FormCollapseList(_ref) {
                 return /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread(_objectSpread({
                   className: className
                 }, restField), {}, {
-                  dependencies: typeof dependencies === 'function' ? dependencies(fieldPath, index) : dependencies,
+                  dependencies: typeof dependencies === 'function' ? dependencies(parentFieldPath, index) : dependencies,
                   name: getFieldPath(fieldKeyPath, itemName)
                   // label={getFieldPath(fieldKeyPath, itemName).join('/')}
                   ,
-                  rules: typeof rules === 'function' ? rules(fieldPath, index) : rules
+                  rules: typeof rules === 'function' ? rules(parentFieldPath, index) : rules
                 }, itemProps), {}, {
                   children: children && /*#__PURE__*/React.cloneElement(children, chidrenProps)
                 }), key);
@@ -230,9 +244,7 @@ export var FormCollapseList = function FormCollapseList(_ref) {
           dataSource: dataSource,
           expandable: {
             expandedRowKeys: expandedRowKeys,
-            columnTitle: /*#__PURE__*/_jsx("h1", {
-              children: "columnTitle"
-            }),
+            childrenColumnName: childrenColumnName,
             onExpandedRowsChange: function onExpandedRowsChange(expandedKeys) {
               setExpandedRowKeys(expandedKeys);
             }

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

@@ -1,10 +1,10 @@
 import type { NamePath } from 'antd/es/form/interface';
 export declare const FIELD_KEY_PATH = "__YUNTI_FORM_COLLAPSE_LIST_FIELD_KEY_PATH";
-export interface ListFieldValue {
+export type ListFieldValue<K extends string = 'children'> = {
+    [P in K]?: ListFieldValue[];
+} & {
     [key: string]: any;
     [FIELD_KEY_PATH]: number[];
-    children?: ListFieldValue[];
-}
+};
 export type FieldPath = NamePath<any>;
-export declare const getFieldPath: (fieldKeyPath: number[], fieldName?: string) => any;
 export declare const toRowKey: (keyPath: number[]) => string;

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

@@ -1,33 +1,4 @@
-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; }
 export var FIELD_KEY_PATH = '__YUNTI_FORM_COLLAPSE_LIST_FIELD_KEY_PATH';
-export var getFieldPath = function getFieldPath(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, 'children');
-      }
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
-  return fieldPath;
-};
 export var toRowKey = function toRowKey(keyPath) {
   return keyPath.join('-');
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuntijs/ui",
-  "version": "1.0.0-beta.101",
+  "version": "1.0.0-beta.103",
   "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
   "keywords": [
     "yuntijs",