@dtjoy/dt-design 1.0.3 → 1.0.4

package/esm/formList/index.d.ts

@@ -0,0 +1,77 @@
+import React, { ReactNode } from 'react';
+import { type FormListFieldData, type TableProps } from 'antd';
+import type { FormItemProps, FormListProps, RuleObject, RuleRender } from 'antd/lib/form';
+import type { ColumnType as TableColumnType } from 'antd/lib/table';
+import './style';
+declare type NotNullRowSelection = NonNullable<TableProps<any>['rowSelection']>;
+/**
+ * Override NamePath parameters type
+ */
+declare type OverrideParameters = (string | number)[];
+declare type RcFormInstance = Parameters<RuleRender>[0];
+declare type RawPanelRender = NonNullable<TableProps<any>['footer']>;
+/**
+ * Override PanelRender type
+ */
+declare type PanelRenderFunc = (...args: Parameters<FormListProps['children']>) => ReturnType<RawPanelRender>;
+/**
+ * Form.Table 组件类型
+ */
+export interface IFormTableProps
+/**
+ * Support all FormListProps except children for which is re-defined in this component
+ * and prefixCls for which is not expected to be supported
+ */
+ extends Pick<FormListProps, 'name' | 'rules' | 'initialValue'>, 
+/**
+ * Support all TableProps except
+ * - re-define columns and re-defined rowSelection
+ * - and pagination which is expect to be not supported in Form.Table
+ * - and className which is renamed to tableClassName
+ * - and rowKey, dataSource for which are defined and not allowed to be modified
+ * - and footer, title, summary for which are re-defined to pass form's operation
+ */
+Omit<TableProps<any>, 'columns' | 'rowSelection' | 'pagination' | 'className' | 'rowKey' | 'dataSource' | 'footer' | 'title' | 'summary'> {
+    /**
+     * 表格列的配置描述
+     */
+    columns?: ColumnType[] | ((...args: Parameters<FormListProps['children']>) => ColumnType[]);
+    /**
+     * Table 的 className
+     */
+    tableClassName?: TableProps<any>['className'];
+    /**
+     * 表格行是否可选择
+     */
+    rowSelection?: Omit<NotNullRowSelection, 'getCheckboxProps'> & {
+        getCheckboxProps?: (field: FormListFieldData) => ReturnType<NonNullable<NotNullRowSelection['getCheckboxProps']>>;
+    };
+    title?: PanelRenderFunc;
+    footer?: PanelRenderFunc;
+    summary?: PanelRenderFunc;
+}
+export interface ColumnType
+/**
+ * Support all FormItemProps, and re-defined `rules` and `dependencies`
+ */
+ extends Omit<FormItemProps, 'rules' | 'dependencies' | 'prefixCls' | 'children'>, 
+/**
+ * Support all TableColumnType, and re-defined `render`
+ */
+Omit<TableColumnType<FormListFieldData>, 'render'> {
+    /**
+     * 设置依赖字段, 支持通过回调函数获取当前字段名
+     */
+    dependencies?: ((namePath: OverrideParameters) => FormItemProps['dependencies']) | FormItemProps['dependencies'];
+    /**
+     * 校验规则，设置字段的校验逻辑，支持通过回调函数获取当前字段名
+     */
+    rules?: (RuleObject | ((form: RcFormInstance, namePath: OverrideParameters) => RuleObject))[];
+    /**
+     * 渲染函数
+     * @param formInstance 只有在设置了 `dependencies` 的情况下才有该参数
+     */
+    render?: (fieldData: FormListFieldData, namePath: OverrideParameters, formInstance?: RcFormInstance) => ReactNode;
+}
+export default function InternalTable({ name, rules, initialValue, ...tableProps }: IFormTableProps): React.JSX.Element;
+export {};

package/esm/formList/index.js

@@ -0,0 +1,141 @@
+var _excluded = ["name", "rules", "initialValue"],
+  _excluded2 = ["tableClassName", "columns", "title", "footer", "summary"],
+  _excluded3 = ["noStyle", "style", "className", "id", "hasFeedback", "validateStatus", "required", "hidden", "initialValue", "messageVariables", "tooltip", "dependencies", "rules", "validateFirst", "validateTrigger", "valuePropName", "render"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useMemo } from 'react';
+import { Utils } from '@dtinsight/dt-utils';
+import { Form, Table } from 'antd';
+import { globalConfig } from 'antd/es/config-provider';
+import classnames from 'classnames';
+import "./style";
+
+/**
+ * Override NamePath parameters type
+ */
+
+/**
+ * Override PanelRender type
+ */
+
+/**
+ * Form.Table 组件类型
+ */
+
+export default function InternalTable(_ref) {
+  var name = _ref.name,
+    rules = _ref.rules,
+    initialValue = _ref.initialValue,
+    tableProps = _objectWithoutProperties(_ref, _excluded);
+  var tableClassName = tableProps.tableClassName,
+    rawColumns = tableProps.columns,
+    title = tableProps.title,
+    footer = tableProps.footer,
+    summary = tableProps.summary,
+    restProps = _objectWithoutProperties(tableProps, _excluded2);
+  var prefixCls = globalConfig().getPrefixCls('form-list');
+  var formInstance = Form.useFormInstance();
+  var convertRawToTableCol = function convertRawToTableCol(raw) {
+    if (!(raw !== null && raw !== void 0 && raw.length)) return [];
+    return raw.map(function (_ref2) {
+      var noStyle = _ref2.noStyle,
+        style = _ref2.style,
+        className = _ref2.className,
+        id = _ref2.id,
+        hasFeedback = _ref2.hasFeedback,
+        validateStatus = _ref2.validateStatus,
+        required = _ref2.required,
+        hidden = _ref2.hidden,
+        initialValue = _ref2.initialValue,
+        messageVariables = _ref2.messageVariables,
+        tooltip = _ref2.tooltip,
+        dependencies = _ref2.dependencies,
+        rawRules = _ref2.rules,
+        validateFirst = _ref2.validateFirst,
+        validateTrigger = _ref2.validateTrigger,
+        valuePropName = _ref2.valuePropName,
+        _render = _ref2.render,
+        cols = _objectWithoutProperties(_ref2, _excluded3);
+      var formItemProps = {
+        noStyle: noStyle,
+        style: style,
+        className: className,
+        id: id,
+        hasFeedback: hasFeedback,
+        validateStatus: validateStatus,
+        required: required,
+        hidden: hidden,
+        initialValue: initialValue,
+        messageVariables: messageVariables,
+        validateFirst: validateFirst,
+        validateTrigger: validateTrigger,
+        tooltip: tooltip,
+        valuePropName: valuePropName
+      };
+      var isRequired = required || (rawRules === null || rawRules === void 0 ? void 0 : rawRules.some(function (rule) {
+        return _typeof(rule) === 'object' && rule.required;
+      }));
+      return _objectSpread(_objectSpread({}, cols), {}, {
+        title: /*#__PURE__*/React.createElement(React.Fragment, null, isRequired && /*#__PURE__*/React.createElement("span", {
+          className: "dtc-form__table__column--required"
+        }), cols.title),
+        render: function render(_, fieldData) {
+          var currentNamePath = [fieldData.name, cols.dataIndex].filter(Utils.checkExist).flat();
+          var rules = rawRules === null || rawRules === void 0 ? void 0 : rawRules.map(function (rule) {
+            return typeof rule === 'function' ? function (form) {
+              return rule(form, currentNamePath);
+            } : rule;
+          });
+          if (dependencies) {
+            return /*#__PURE__*/React.createElement(Form.Item, {
+              noStyle: true,
+              dependencies: typeof dependencies === 'function' ? dependencies(currentNamePath) : dependencies
+            }, function (formInstance) {
+              return /*#__PURE__*/React.createElement(Form.Item, _extends({
+                name: currentNamePath,
+                rules: rules
+              }, formItemProps), _render === null || _render === void 0 ? void 0 : _render(fieldData, currentNamePath, formInstance));
+            });
+          }
+          return /*#__PURE__*/React.createElement(Form.Item, _extends({
+            name: currentNamePath,
+            rules: rules
+          }, formItemProps), _render === null || _render === void 0 ? void 0 : _render(fieldData, currentNamePath, formInstance));
+        }
+      });
+    });
+  };
+  var columns = useMemo(function () {
+    if (typeof rawColumns === 'function') return rawColumns;
+    return convertRawToTableCol(rawColumns);
+  }, [rawColumns]);
+  return /*#__PURE__*/React.createElement(Form.List, {
+    name: name,
+    rules: rules,
+    initialValue: initialValue
+  }, function (fields, ope, meta) {
+    return /*#__PURE__*/React.createElement(Table, _extends({
+      className: classnames(prefixCls, tableClassName),
+      rowKey: "key",
+      dataSource: fields,
+      pagination: false,
+      columns: typeof columns === 'function' ? convertRawToTableCol(columns(fields, ope, meta)) : columns,
+      footer: footer ? function () {
+        return footer(fields, ope, meta);
+      } : undefined,
+      title: title ? function () {
+        return title(fields, ope, meta);
+      } : undefined,
+      summary: summary ? function () {
+        return summary(fields, ope, meta);
+      } : undefined
+    }, restProps));
+  });
+}

package/esm/formList/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/esm/formList/style/index.js

@@ -0,0 +1,2 @@
+import "../../style/index.less";
+import "./index.less";

package/esm/formList/style/index.less

@@ -0,0 +1,45 @@
+@import '../../style/themes/index.less';
+
+@form-list-prefix-cls: ~'@{ant-prefix}-form-list';
+
+.@{form-list-prefix-cls} {
+  height: 100%;
+
+  &__column {
+    &--required {
+      &::before {
+        content: "*";
+        display: inline-block;
+        margin-inline-end: 4px;
+        font-size: 14px;
+        line-height: 1;
+        color: @error-color;
+      }
+
+      vertical-align: -0.1em;
+    }
+  }
+
+  .ant-table,
+  .ant-table-container {
+    height: 100%;
+  }
+
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+
+  table colgroup > col.ant-table-selection-col {
+    width: 48px;
+  }
+
+  .ant-table-thead > tr > th.ant-table-selection-column {
+    padding: 0 16px;
+  }
+
+  .ant-table-tbody > tr > td.ant-table-selection-column {
+    padding: 0 16px;
+  }
+}
+
+

package/esm/index.d.ts

@@ -1,12 +1,14 @@
 export { default as BlockHeader } from './blockHeader';
 export type { ButtonProps } from './button';
 export { default as Button } from './button';
+export { default as Collapsible } from './collapsible';
+export { default as CollapsibleActionItems } from './collapsibleActionItems';
 export { default as Flex } from './flex';
 export type { FlexProps } from './flex/interface';
-export { default as CollapsibleActionItems } from './collapsibleActionItems';
+export { default as FormList } from './formList';
+export * from './formList';
 export { default as OverflowList } from './overflowList';
 export { default as Resize } from './resize';
 export { default as Splitter } from './splitter';
 export * from './splitter';
-export { default as Collapsible } from './collapsible';
 export { default as StatusTag } from './statusTag';

package/esm/index.js

@@ -1,53 +1,12 @@
 export { default as BlockHeader } from "./blockHeader";
 export { default as Button } from "./button";
-export { default as Flex } from "./flex";
-// export { default as Catalogue } from './catalogue';
-// export { default as Chat } from './chat';
+export { default as Collapsible } from "./collapsible";
 export { default as CollapsibleActionItems } from "./collapsibleActionItems";
+export { default as Flex } from "./flex";
+export { default as FormList } from "./formList";
+export * from "./formList";
 export { default as OverflowList } from "./overflowList";
-// export { default as ConfigProvider } from './configProvider';
-// export { default as ContentLayout } from './contentLayout';
-// export { default as ContextMenu } from './contextMenu';
-// export { default as Copy } from './copy';
-// export { default as Descriptions } from './descriptions';
-// export { default as Drawer } from './drawer';
-// export { default as Dropdown } from './dropdown';
-// export { default as EllipsisText } from './ellipsisText';
-// export { default as Empty } from './empty';
-// export { default as ErrorBoundary } from './errorBoundary';
-// export { default as LoadError } from './errorBoundary/loadError';
-// export { default as FilterRules } from './filterRules';
-// export { default as Flex } from './flex';
-// export type { FlexProps } from './flex/interface';
-// export { default as Float } from './float';
-// export { default as Form } from './form';
-// export { default as Fullscreen } from './fullscreen';
-// export { default as GlobalLoading } from './globalLoading';
-// export { default as Image } from './image';
-// export { default as Input } from './input';
-// export { default as KeyEventListener } from './keyEventListener';
-// export { default as enUS } from './locale/en-US';
-// export { default as useLocale } from './locale/useLocale';
-// export { default as zhCN } from './locale/zh-CN';
-// export { default as MarkdownRender } from './markdownRender';
-// export { default as Modal } from './modal/modal';
-// export { default as NotFound } from './notFound';
-// export { default as ProgressBar } from './progressBar';
-// export { default as ProgressLine } from './progressLine';
 export { default as Resize } from "./resize";
 export { default as Splitter } from "./splitter";
 export * from "./splitter";
-// export { default as SpreadSheet } from './spreadSheet';
-export { default as Collapsible } from "./collapsible";
-export { default as StatusTag } from "./statusTag";
-// export { default as Table } from './table';
-// export { default as TinyTag } from './tinyTag';
-// export { default as useCookieListener } from './useCookieListener';
-// export { default as useDebounce } from './useDebounce';
-// export { default as useIntersectionObserver } from './useIntersectionObserver';
-// export { default as useList } from './useList';
-// export { default as useMeasure } from './useMeasure';
-// export { default as useMergeOption } from './useMergeOption';
-// export { default as useModal } from './useModal';
-// export { default as useTyping } from './useTyping';
-// export { default as useWindowSwitchListener } from './useWindowSwitchListener';
+export { default as StatusTag } from "./statusTag";

package/esm/splitter/Splitter.js

@@ -40,16 +40,10 @@ var Splitter = function Splitter(props) {
     getPrefixCls = _useContext.getPrefixCls,
     direction = _useContext.direction;
   var prefixCls = getPrefixCls('splitter', customizePrefixCls);
-
-  // ======================== Direct ========================
   var isVertical = layout === 'vertical';
   var isRTL = direction === 'rtl';
   var reverse = !isVertical && isRTL;
-
-  // ====================== Items Data ======================
   var items = useItems(children);
-
-  // >>> Warning 适配 v4
   if (process.env.NODE_ENV !== 'production') {
     var existSize = false;
     var existUndefinedSize = false;
@@ -64,8 +58,6 @@ var Splitter = function Splitter(props) {
       warning(false, 'When part of `Splitter.Panel` has `size`, `onResize` is required or change `size` to `defaultSize`.');
     }
   }
-
-  // ====================== Container =======================
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     containerSize = _useState2[0],
@@ -79,8 +71,6 @@ var Splitter = function Splitter(props) {
     }
     setContainerSize(containerSize);
   };
-
-  // ========================= Size =========================
   var _useSizes = useSizes(items, containerSize),
     _useSizes2 = _slicedToArray(_useSizes, 6),
     panelSizes = _useSizes2[0],
@@ -89,8 +79,6 @@ var Splitter = function Splitter(props) {
     itemPtgMinSizes = _useSizes2[3],
     itemPtgMaxSizes = _useSizes2[4],
     updateSizes = _useSizes2[5];
-
-  // ====================== Resizable =======================
   var resizableInfos = useResizable(items, itemPxSizes, isRTL);
   var _useResize = useResize(items, resizableInfos, itemPtgSizes, containerSize, updateSizes, isRTL),
     _useResize2 = _slicedToArray(_useResize, 5),
@@ -99,8 +87,6 @@ var Splitter = function Splitter(props) {
     onOffsetEnd = _useResize2[2],
     onCollapse = _useResize2[3],
     movingIndex = _useResize2[4];
-
-  // ======================== Events ========================
   var onInternalResizeStart = useEvent(function (index) {
     onOffsetStart(index);
     onResizeStart === null || onResizeStart === void 0 || onResizeStart(itemPxSizes);
@@ -120,23 +106,27 @@ var Splitter = function Splitter(props) {
     }
   });
   var onInternalCollapse = useEvent(function (index, type) {
+    var _props$onCollapse;
     var nextSizes = onCollapse(index, type);
     onResize === null || onResize === void 0 || onResize(nextSizes);
     onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd(nextSizes);
+    var collapsed = nextSizes.map(function (size) {
+      return Math.abs(size) < Number.EPSILON;
+    });
+    (_props$onCollapse = props.onCollapse) === null || _props$onCollapse === void 0 || _props$onCollapse.call(props, collapsed, nextSizes);
   });
   var containerClassName = classNames(prefixCls, className, "".concat(prefixCls, "-").concat(layout), _defineProperty({}, "".concat(prefixCls, "-rtl"), isRTL), rootClassName);
-
-  // ======================== Render ========================
   var maskCls = "".concat(prefixCls, "-mask");
   var stackSizes = React.useMemo(function () {
     var mergedSizes = [];
     var stack = 0;
-    for (var i = 0; i < items.length; i += 1) {
+    var len = items.length;
+    for (var i = 0; i < len; i += 1) {
       stack += itemPtgSizes[i];
       mergedSizes.push(stack);
     }
     return mergedSizes;
-  }, [itemPtgSizes]);
+  }, [itemPtgSizes, items.length]);
   var mergedStyle = _objectSpread({}, style);
   return /*#__PURE__*/React.createElement(ResizeObserver, {
     onResize: onContainerResize
@@ -144,7 +134,6 @@ var Splitter = function Splitter(props) {
     style: mergedStyle,
     className: containerClassName
   }, items.map(function (item, idx) {
-    // Panel
     var panel = /*#__PURE__*/React.createElement(InternalPanel, _extends({}, item, {
       prefixCls: prefixCls,
       size: panelSizes[idx]

package/esm/splitter/hooks/sizeUtil.js

@@ -16,10 +16,26 @@ export function autoPtgSizes(ptgSizes, minPtgSizes, maxPtgSizes) {
   });
   var restPtg = 1 - currentTotalPtg;
   var undefinedCount = undefinedIndexes.length;
-  if (restPtg < 0) {
+
+  // If all sizes are defined but don't sum to 1, scale them.
+  if (ptgSizes.length && !undefinedIndexes.length && currentTotalPtg !== 1) {
+    // Handle the case when all sizes are 0
+    if (currentTotalPtg === 0) {
+      var avg = 1 / ptgSizes.length;
+      return ptgSizes.map(function () {
+        return avg;
+      });
+    }
     var scale = 1 / currentTotalPtg;
+    // We know `size` is a number here because undefinedIndexes is empty.
+    return ptgSizes.map(function (size) {
+      return size * scale;
+    });
+  }
+  if (restPtg < 0) {
+    var _scale = 1 / currentTotalPtg;
     return ptgSizes.map(function (size) {
-      return size === undefined ? 0 : size * scale;
+      return size === undefined ? 0 : size * _scale;
     });
   }
   var sumMin = 0;
@@ -36,9 +52,9 @@ export function autoPtgSizes(ptgSizes, minPtgSizes, maxPtgSizes) {
     limitMax = Math.min(limitMax, max);
   }
   if (sumMin > 1 && sumMax < 1) {
-    var avg = 1 / undefinedCount;
+    var _avg = 1 / undefinedCount;
     return ptgSizes.map(function (size) {
-      return size === undefined ? avg : size;
+      return size === undefined ? _avg : size;
     });
   }
   var restAvg = restPtg / undefinedCount;

package/esm/splitter/hooks/useSizes.js

@@ -69,12 +69,12 @@ export default function useSizes(items, containerSize) {
       }
     }
     return autoPtgSizes(ptgList, postPercentMinSizes, postPercentMaxSizes);
-  }, [sizes, mergedContainerSize, postPercentMinSizes, postPercentMaxSizes]);
+  }, [itemsCount, sizes, mergedContainerSize, postPercentMinSizes, postPercentMaxSizes]);
   var postPxSizes = React.useMemo(function () {
     return postPercentSizes.map(ptg2px);
   }, [postPercentSizes, mergedContainerSize]);
   var panelSizes = React.useMemo(function () {
     return containerSize ? postPxSizes : sizes;
-  }, [postPxSizes, containerSize]);
+  }, [postPxSizes, sizes, containerSize]);
   return [panelSizes, postPxSizes, postPercentSizes, postPercentMinSizes, postPercentMaxSizes, setInnerSizes];
 }

package/esm/splitter/interface.d.ts

@@ -9,6 +9,7 @@ export interface SplitterProps {
     onResizeStart?: (sizes: number[]) => void;
     onResize?: (sizes: number[]) => void;
     onResizeEnd?: (sizes: number[]) => void;
+    onCollapse?: (collapsed: boolean[], sizes: number[]) => void;
     lazy?: boolean;
 }
 export interface PanelProps {

package/lib/formList/index.d.ts

@@ -0,0 +1,77 @@
+import React, { ReactNode } from 'react';
+import { type FormListFieldData, type TableProps } from 'antd';
+import type { FormItemProps, FormListProps, RuleObject, RuleRender } from 'antd/lib/form';
+import type { ColumnType as TableColumnType } from 'antd/lib/table';
+import './style';
+declare type NotNullRowSelection = NonNullable<TableProps<any>['rowSelection']>;
+/**
+ * Override NamePath parameters type
+ */
+declare type OverrideParameters = (string | number)[];
+declare type RcFormInstance = Parameters<RuleRender>[0];
+declare type RawPanelRender = NonNullable<TableProps<any>['footer']>;
+/**
+ * Override PanelRender type
+ */
+declare type PanelRenderFunc = (...args: Parameters<FormListProps['children']>) => ReturnType<RawPanelRender>;
+/**
+ * Form.Table 组件类型
+ */
+export interface IFormTableProps
+/**
+ * Support all FormListProps except children for which is re-defined in this component
+ * and prefixCls for which is not expected to be supported
+ */
+ extends Pick<FormListProps, 'name' | 'rules' | 'initialValue'>, 
+/**
+ * Support all TableProps except
+ * - re-define columns and re-defined rowSelection
+ * - and pagination which is expect to be not supported in Form.Table
+ * - and className which is renamed to tableClassName
+ * - and rowKey, dataSource for which are defined and not allowed to be modified
+ * - and footer, title, summary for which are re-defined to pass form's operation
+ */
+Omit<TableProps<any>, 'columns' | 'rowSelection' | 'pagination' | 'className' | 'rowKey' | 'dataSource' | 'footer' | 'title' | 'summary'> {
+    /**
+     * 表格列的配置描述
+     */
+    columns?: ColumnType[] | ((...args: Parameters<FormListProps['children']>) => ColumnType[]);
+    /**
+     * Table 的 className
+     */
+    tableClassName?: TableProps<any>['className'];
+    /**
+     * 表格行是否可选择
+     */
+    rowSelection?: Omit<NotNullRowSelection, 'getCheckboxProps'> & {
+        getCheckboxProps?: (field: FormListFieldData) => ReturnType<NonNullable<NotNullRowSelection['getCheckboxProps']>>;
+    };
+    title?: PanelRenderFunc;
+    footer?: PanelRenderFunc;
+    summary?: PanelRenderFunc;
+}
+export interface ColumnType
+/**
+ * Support all FormItemProps, and re-defined `rules` and `dependencies`
+ */
+ extends Omit<FormItemProps, 'rules' | 'dependencies' | 'prefixCls' | 'children'>, 
+/**
+ * Support all TableColumnType, and re-defined `render`
+ */
+Omit<TableColumnType<FormListFieldData>, 'render'> {
+    /**
+     * 设置依赖字段, 支持通过回调函数获取当前字段名
+     */
+    dependencies?: ((namePath: OverrideParameters) => FormItemProps['dependencies']) | FormItemProps['dependencies'];
+    /**
+     * 校验规则，设置字段的校验逻辑，支持通过回调函数获取当前字段名
+     */
+    rules?: (RuleObject | ((form: RcFormInstance, namePath: OverrideParameters) => RuleObject))[];
+    /**
+     * 渲染函数
+     * @param formInstance 只有在设置了 `dependencies` 的情况下才有该参数
+     */
+    render?: (fieldData: FormListFieldData, namePath: OverrideParameters, formInstance?: RcFormInstance) => ReactNode;
+}
+export default function InternalTable({ name, rules, initialValue, ...tableProps }: IFormTableProps): React.JSX.Element;
+export {};

package/lib/formList/index.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = InternalTable;
+var _react = _interopRequireWildcard(require("react"));
+var _dtUtils = require("@dtinsight/dt-utils");
+var _antd = require("antd");
+var _configProvider = require("antd/es/config-provider");
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./style");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/**
+ * Override NamePath parameters type
+ */
+
+/**
+ * Override PanelRender type
+ */
+
+/**
+ * Form.Table 组件类型
+ */
+
+function InternalTable({
+  name,
+  rules,
+  initialValue,
+  ...tableProps
+}) {
+  const {
+    tableClassName,
+    columns: rawColumns,
+    // override title, footer, summary
+    title,
+    footer,
+    summary,
+    ...restProps
+  } = tableProps;
+  const prefixCls = (0, _configProvider.globalConfig)().getPrefixCls('form-list');
+  const formInstance = _antd.Form.useFormInstance();
+  const convertRawToTableCol = raw => {
+    if (!raw?.length) return [];
+    return raw.map(({
+      noStyle,
+      style,
+      className,
+      id,
+      hasFeedback,
+      validateStatus,
+      required,
+      hidden,
+      initialValue,
+      messageVariables,
+      tooltip,
+      dependencies,
+      rules: rawRules,
+      validateFirst,
+      validateTrigger,
+      valuePropName,
+      render,
+      ...cols
+    }) => {
+      const formItemProps = {
+        noStyle,
+        style,
+        className,
+        id,
+        hasFeedback,
+        validateStatus,
+        required,
+        hidden,
+        initialValue,
+        messageVariables,
+        validateFirst,
+        validateTrigger,
+        tooltip,
+        valuePropName
+      };
+      const isRequired = required || rawRules?.some(rule => typeof rule === 'object' && rule.required);
+      return {
+        ...cols,
+        title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isRequired && /*#__PURE__*/_react.default.createElement("span", {
+          className: "dtc-form__table__column--required"
+        }), cols.title),
+        render(_, fieldData) {
+          const currentNamePath = [fieldData.name, cols.dataIndex].filter(_dtUtils.Utils.checkExist).flat();
+          const rules = rawRules?.map(rule => typeof rule === 'function' ? form => rule(form, currentNamePath) : rule);
+          if (dependencies) {
+            return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+              noStyle: true,
+              dependencies: typeof dependencies === 'function' ? dependencies(currentNamePath) : dependencies
+            }, formInstance => /*#__PURE__*/_react.default.createElement(_antd.Form.Item, _extends({
+              name: currentNamePath,
+              rules: rules
+            }, formItemProps), render?.(fieldData, currentNamePath, formInstance)));
+          }
+          return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, _extends({
+            name: currentNamePath,
+            rules: rules
+          }, formItemProps), render?.(fieldData, currentNamePath, formInstance));
+        }
+      };
+    });
+  };
+  const columns = (0, _react.useMemo)(() => {
+    if (typeof rawColumns === 'function') return rawColumns;
+    return convertRawToTableCol(rawColumns);
+  }, [rawColumns]);
+  return /*#__PURE__*/_react.default.createElement(_antd.Form.List, {
+    name: name,
+    rules: rules,
+    initialValue: initialValue
+  }, (fields, ope, meta) => /*#__PURE__*/_react.default.createElement(_antd.Table, _extends({
+    className: (0, _classnames.default)(prefixCls, tableClassName),
+    rowKey: "key",
+    dataSource: fields,
+    pagination: false,
+    columns: typeof columns === 'function' ? convertRawToTableCol(columns(fields, ope, meta)) : columns,
+    footer: footer ? () => footer(fields, ope, meta) : undefined,
+    title: title ? () => title(fields, ope, meta) : undefined,
+    summary: summary ? () => summary(fields, ope, meta) : undefined
+  }, restProps)));
+}

package/lib/formList/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/lib/formList/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("../../style/index.less");
+require("./index.less");

package/lib/formList/style/index.less

@@ -0,0 +1,45 @@
+@import '../../style/themes/index.less';
+
+@form-list-prefix-cls: ~'@{ant-prefix}-form-list';
+
+.@{form-list-prefix-cls} {
+  height: 100%;
+
+  &__column {
+    &--required {
+      &::before {
+        content: "*";
+        display: inline-block;
+        margin-inline-end: 4px;
+        font-size: 14px;
+        line-height: 1;
+        color: @error-color;
+      }
+
+      vertical-align: -0.1em;
+    }
+  }
+
+  .ant-table,
+  .ant-table-container {
+    height: 100%;
+  }
+
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+
+  table colgroup > col.ant-table-selection-col {
+    width: 48px;
+  }
+
+  .ant-table-thead > tr > th.ant-table-selection-column {
+    padding: 0 16px;
+  }
+
+  .ant-table-tbody > tr > td.ant-table-selection-column {
+    padding: 0 16px;
+  }
+}
+
+

package/lib/index.d.ts

@@ -1,12 +1,14 @@
 export { default as BlockHeader } from './blockHeader';
 export type { ButtonProps } from './button';
 export { default as Button } from './button';
+export { default as Collapsible } from './collapsible';
+export { default as CollapsibleActionItems } from './collapsibleActionItems';
 export { default as Flex } from './flex';
 export type { FlexProps } from './flex/interface';
-export { default as CollapsibleActionItems } from './collapsibleActionItems';
+export { default as FormList } from './formList';
+export * from './formList';
 export { default as OverflowList } from './overflowList';
 export { default as Resize } from './resize';
 export { default as Splitter } from './splitter';
 export * from './splitter';
-export { default as Collapsible } from './collapsible';
 export { default as StatusTag } from './statusTag';

package/lib/index.js

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   BlockHeader: true,
   Button: true,
-  Flex: true,
+  Collapsible: true,
   CollapsibleActionItems: true,
+  Flex: true,
+  FormList: true,
   OverflowList: true,
   Resize: true,
   Splitter: true,
-  Collapsible: true,
   StatusTag: true
 };
 Object.defineProperty(exports, "BlockHeader", {
@@ -44,6 +45,12 @@ Object.defineProperty(exports, "Flex", {
     return _flex.default;
   }
 });
+Object.defineProperty(exports, "FormList", {
+  enumerable: true,
+  get: function () {
+    return _formList.default;
+  }
+});
 Object.defineProperty(exports, "OverflowList", {
   enumerable: true,
   get: function () {
@@ -70,8 +77,21 @@ Object.defineProperty(exports, "StatusTag", {
 });
 var _blockHeader = _interopRequireDefault(require("./blockHeader"));
 var _button = _interopRequireDefault(require("./button"));
-var _flex = _interopRequireDefault(require("./flex"));
+var _collapsible = _interopRequireDefault(require("./collapsible"));
 var _collapsibleActionItems = _interopRequireDefault(require("./collapsibleActionItems"));
+var _flex = _interopRequireDefault(require("./flex"));
+var _formList = _interopRequireWildcard(require("./formList"));
+Object.keys(_formList).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _formList[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _formList[key];
+    }
+  });
+});
 var _overflowList = _interopRequireDefault(require("./overflowList"));
 var _resize = _interopRequireDefault(require("./resize"));
 var _splitter = _interopRequireWildcard(require("./splitter"));
@@ -86,7 +106,6 @@ Object.keys(_splitter).forEach(function (key) {
     }
   });
 });
-var _collapsible = _interopRequireDefault(require("./collapsible"));
 var _statusTag = _interopRequireDefault(require("./statusTag"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/lib/splitter/Splitter.js

@@ -39,16 +39,10 @@ const Splitter = props => {
     direction
   } = (0, _react.useContext)(_configProvider.ConfigContext);
   const prefixCls = getPrefixCls('splitter', customizePrefixCls);
-
-  // ======================== Direct ========================
   const isVertical = layout === 'vertical';
   const isRTL = direction === 'rtl';
   const reverse = !isVertical && isRTL;
-
-  // ====================== Items Data ======================
   const items = (0, _useItems.default)(children);
-
-  // >>> Warning 适配 v4
   if (process.env.NODE_ENV !== 'production') {
     let existSize = false;
     let existUndefinedSize = false;
@@ -63,8 +57,6 @@ const Splitter = props => {
       (0, _warning.default)(false, 'When part of `Splitter.Panel` has `size`, `onResize` is required or change `size` to `defaultSize`.');
     }
   }
-
-  // ====================== Container =======================
   const [containerSize, setContainerSize] = (0, _react.useState)();
   const onContainerResize = size => {
     const {
@@ -77,15 +69,9 @@ const Splitter = props => {
     }
     setContainerSize(containerSize);
   };
-
-  // ========================= Size =========================
   const [panelSizes, itemPxSizes, itemPtgSizes, itemPtgMinSizes, itemPtgMaxSizes, updateSizes] = (0, _useSizes.default)(items, containerSize);
-
-  // ====================== Resizable =======================
   const resizableInfos = (0, _useResizable.default)(items, itemPxSizes, isRTL);
   const [onOffsetStart, onOffsetUpdate, onOffsetEnd, onCollapse, movingIndex] = (0, _useResize.default)(items, resizableInfos, itemPtgSizes, containerSize, updateSizes, isRTL);
-
-  // ======================== Events ========================
   const onInternalResizeStart = (0, _useEvent.default)(index => {
     onOffsetStart(index);
     onResizeStart?.(itemPxSizes);
@@ -108,22 +94,23 @@ const Splitter = props => {
     const nextSizes = onCollapse(index, type);
     onResize?.(nextSizes);
     onResizeEnd?.(nextSizes);
+    const collapsed = nextSizes.map(size => Math.abs(size) < Number.EPSILON);
+    props.onCollapse?.(collapsed, nextSizes);
   });
   const containerClassName = (0, _classnames.default)(prefixCls, className, `${prefixCls}-${layout}`, {
     [`${prefixCls}-rtl`]: isRTL
   }, rootClassName);
-
-  // ======================== Render ========================
   const maskCls = `${prefixCls}-mask`;
   const stackSizes = _react.default.useMemo(() => {
     const mergedSizes = [];
     let stack = 0;
-    for (let i = 0; i < items.length; i += 1) {
+    const len = items.length;
+    for (let i = 0; i < len; i += 1) {
       stack += itemPtgSizes[i];
       mergedSizes.push(stack);
     }
     return mergedSizes;
-  }, [itemPtgSizes]);
+  }, [itemPtgSizes, items.length]);
   const mergedStyle = {
     ...style
   };
@@ -133,7 +120,6 @@ const Splitter = props => {
     style: mergedStyle,
     className: containerClassName
   }, items.map((item, idx) => {
-    // Panel
     const panel = /*#__PURE__*/_react.default.createElement(_Panel.InternalPanel, _extends({}, item, {
       prefixCls: prefixCls,
       size: panelSizes[idx]

package/lib/splitter/hooks/sizeUtil.js

@@ -16,6 +16,18 @@ function autoPtgSizes(ptgSizes, minPtgSizes, maxPtgSizes) {
   });
   const restPtg = 1 - currentTotalPtg;
   const undefinedCount = undefinedIndexes.length;
+
+  // If all sizes are defined but don't sum to 1, scale them.
+  if (ptgSizes.length && !undefinedIndexes.length && currentTotalPtg !== 1) {
+    // Handle the case when all sizes are 0
+    if (currentTotalPtg === 0) {
+      const avg = 1 / ptgSizes.length;
+      return ptgSizes.map(() => avg);
+    }
+    const scale = 1 / currentTotalPtg;
+    // We know `size` is a number here because undefinedIndexes is empty.
+    return ptgSizes.map(size => size * scale);
+  }
   if (restPtg < 0) {
     const scale = 1 / currentTotalPtg;
     return ptgSizes.map(size => size === undefined ? 0 : size * scale);

package/lib/splitter/hooks/useSizes.js

@@ -55,8 +55,8 @@ function useSizes(items, containerSize) {
       }
     }
     return (0, _sizeUtil.autoPtgSizes)(ptgList, postPercentMinSizes, postPercentMaxSizes);
-  }, [sizes, mergedContainerSize, postPercentMinSizes, postPercentMaxSizes]);
+  }, [itemsCount, sizes, mergedContainerSize, postPercentMinSizes, postPercentMaxSizes]);
   const postPxSizes = _react.default.useMemo(() => postPercentSizes.map(ptg2px), [postPercentSizes, mergedContainerSize]);
-  const panelSizes = _react.default.useMemo(() => containerSize ? postPxSizes : sizes, [postPxSizes, containerSize]);
+  const panelSizes = _react.default.useMemo(() => containerSize ? postPxSizes : sizes, [postPxSizes, sizes, containerSize]);
   return [panelSizes, postPxSizes, postPercentSizes, postPercentMinSizes, postPercentMaxSizes, setInnerSizes];
 }

package/lib/splitter/interface.d.ts

@@ -9,6 +9,7 @@ export interface SplitterProps {
     onResizeStart?: (sizes: number[]) => void;
     onResize?: (sizes: number[]) => void;
     onResizeEnd?: (sizes: number[]) => void;
+    onCollapse?: (collapsed: boolean[], sizes: number[]) => void;
     lazy?: boolean;
 }
 export interface PanelProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtjoy/dt-design",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "react-component",
   "repository": "https://github.com/ZhaoFxxkSky/dt-design",
   "main": "lib/index.js",