@aloudata/aloudata-design 2.10.1 → 2.10.3

package/dist/Table/helper.d.ts

@@ -21,7 +21,7 @@ export declare function getTableColumns<TDataItem extends object>({ columns, tot
         render?: ((text: any, record: TDataItem, rowIndex: number) => import("react").ReactNode) | undefined;
         ellipsis?: boolean | undefined;
         noPadding?: boolean | undefined;
-        align?: "center" | "left" | "right" | undefined;
+        align?: "left" | "center" | "right" | undefined;
         fixed?: "left" | "right" | undefined;
         sortOrder?: "ascend" | "descend" | null | undefined;
     };

package/dist/Table/hooks/useExpandable.d.ts

@@ -12,6 +12,7 @@ export interface IExpandItem {
     isExpanded?: boolean;
     level: number;
     rowKey: string;
+    customExpandRowKey?: string;
 }
 interface IExpandItemMap {
     [key: string]: IExpandItem;

package/dist/Table/hooks/useExpandable.js

@@ -24,28 +24,32 @@ export default function useExpandable(props) {
     _expandable$defaultEx = expandable.defaultExpandAllRows,
     defaultExpandAllRows = _expandable$defaultEx === void 0 ? true : _expandable$defaultEx,
     defaultExpandedRowKeys = expandable.defaultExpandedRowKeys,
-    childrenColumnName = expandable.childrenColumnName;
+    childrenColumnName = expandable.childrenColumnName,
+    expandedRowRender = expandable.expandedRowRender;
   var columnName = getChildrenColumnName(childrenColumnName);
   var flattenList = useMemo(function () {
     return flattenChildren(data, columnName);
   }, [columnName, data]);
+  var isRenderCustomExpandRow = !!expandedRowRender;
   var allCategoryRowKeys = useMemo(function () {
-    return getAllExpandRowKeys(flattenList, columnName, defaultExpandAllRows, rowKey);
-  }, [columnName, flattenList, defaultExpandAllRows, rowKey]);
+    return getAllExpandRowKeys(flattenList, columnName, isRenderCustomExpandRow, defaultExpandAllRows, rowKey);
+  }, [columnName, flattenList, defaultExpandAllRows, rowKey, isRenderCustomExpandRow]);
 
   // 考虑 defaultExpandAllRows 的情况
   var _useState = useState(expandedRowKeys || defaultExpandedRowKeys || allCategoryRowKeys || []),
     _useState2 = _slicedToArray(_useState, 2),
     expandedKeys = _useState2[0],
     setExpandedKeys = _useState2[1];
+
+  // 只有在 Map 中的存在 rowKey 的数据行才可见
   var expandItemMap = useMemo(function () {
     var listData = data.map(function (dataItem) {
-      return getListItemsByTree(dataItem, expandedKeys, rowKey, childrenColumnName);
+      return getListItemsByTree(dataItem, expandedKeys, !!expandedRowRender, rowKey, childrenColumnName);
     }).flat();
     return _.keyBy(listData, function (dataItem) {
       return dataItem.rowKey;
     });
-  }, [childrenColumnName, data, expandedKeys, rowKey]);
+  }, [childrenColumnName, data, expandedKeys, rowKey, expandedRowRender]);
   useEffect(function () {
     if (expandedRowKeys) {
       // 展开收起完全受控的情况
@@ -91,20 +95,30 @@ export default function useExpandable(props) {
     data: visibleList
   };
 }
-function getListItemsByTree(currNode, expandedKeys, getKey, childrenColumnName) {
-  var level = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+function getListItemsByTree(currNode, expandedKeys, isRenderCustomExpandRow,
+// 是否渲染自定义展开行
+getKey, childrenColumnName) {
+  var level = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
   var subNodes = _.get(currNode, getChildrenColumnName(childrenColumnName));
   var isLeaf = !subNodes;
   var rowKey = getRowKey(currNode, getKey);
+  var isExpanded = expandedKeys.includes(rowKey);
   if (isLeaf) {
-    return [{
+    var leafNode = {
       isLeaf: true,
       level: level,
       rowKey: rowKey
-    }];
+    };
+    if (isRenderCustomExpandRow) {
+      leafNode.isLeaf = false;
+      var customExpandRowKey = getCustomExpandRowKey(rowKey);
+      leafNode.customExpandRowKey = customExpandRowKey;
+      leafNode.isExpanded = isExpanded;
+      return [leafNode];
+    }
+    return [leafNode];
   }
   // 是目录的情况
-  var isExpanded = expandedKeys.includes(rowKey);
   var curr = {
     isLeaf: false,
     level: level,
@@ -117,20 +131,35 @@ function getListItemsByTree(currNode, expandedKeys, getKey, childrenColumnName)
   curr.isExpanded = true;
   // 子目录是展开的情况
   var subItems = (subNodes === null || subNodes === void 0 ? void 0 : subNodes.map(function (child) {
-    return getListItemsByTree(child, expandedKeys, getKey, childrenColumnName, level + 1);
+    return getListItemsByTree(child, expandedKeys, isRenderCustomExpandRow, getKey, childrenColumnName, level + 1);
   })) || [];
   return [curr].concat(_toConsumableArray(_.flatten(subItems)));
 }
+
+/**
+ * 为自定义展开行生成唯一的 key
+ * @param rowKey
+ * @returns
+ */
+function getCustomExpandRowKey(rowKey) {
+  return "".concat(rowKey, "-expand");
+}
 export function getExpandableConfig(expandable) {
   if (typeof expandable === 'boolean') {
     return {};
   }
   return expandable || {};
 }
-function getAllExpandRowKeys(list, childrenColumnName, defaultExpandAllRows, rowKey) {
+function getAllExpandRowKeys(list, childrenColumnName, isRenderCustomExpandRow, defaultExpandAllRows, rowKey) {
   if (!defaultExpandAllRows) {
     return undefined;
   }
+  if (isRenderCustomExpandRow) {
+    // 自定义展开行的情况，即使是叶子节点也可以展开
+    return list.map(function (item) {
+      return getRowKey(item, rowKey);
+    });
+  }
   var itemsWithChildrenProp = list.filter(function (item) {
     return !!_.get(item, childrenColumnName);
   });

package/dist/Table/index.js

@@ -19,15 +19,16 @@ import { Empty, Spin } from '..';
 import ExpandCell from "./components/ExpandCell";
 import Footer from "./components/Footer";
 import { getRowKey, getTableColumns, prefixCls } from "./helper";
-import useExpandable from "./hooks/useExpandable";
+import useExpandable, { getExpandableConfig } from "./hooks/useExpandable";
 import useFixed from "./hooks/useFixed";
 import useRowSelection from "./hooks/useRowSelection";
 import useScroll from "./hooks/useScroll";
 var HEADER_HEIGHT = 41;
 var FOOTER_HEIGHT = 52;
 function Table(props, ref) {
-  var _classnames, _classnames5, _classnames6;
+  var _classnames, _classnames5, _classnames7;
   var data = props.data,
+    bordered = props.bordered,
     rowKey = props.rowKey,
     columnSizing = props.columnSizing,
     sticky = props.sticky,
@@ -76,6 +77,7 @@ function Table(props, ref) {
     data: data,
     rowKey: rowKey
   });
+  var expandableConfig = getExpandableConfig(expandable);
   var rowSelectionInfo = useRowSelection(props);
   var tableColumns = useMemo(function () {
     if (!totalSize || !realWidth) {
@@ -186,10 +188,11 @@ function Table(props, ref) {
   }, /*#__PURE__*/React.createElement(Empty, {
     image: isSmallEmpty ? null : Empty.PRESENTED_IMAGE_SEARCH,
     size: isSmallEmpty ? 'small' : undefined
-  }))) : _.map(rows, function (row, rowIndex) {
+  }))) : _.reduce(rows, function (rowList, row, rowIndex) {
     var _classnames4;
-    return /*#__PURE__*/React.createElement("div", {
-      key: row.id,
+    var rowId = row.id;
+    var rowNode = /*#__PURE__*/React.createElement("div", {
+      key: rowId,
       className: classnames(prefixCls('tr'), (_classnames4 = {}, _defineProperty(_classnames4, prefixCls('row-hover'), typeof onRowClick === 'function'), _defineProperty(_classnames4, prefixCls('no-border-tr'), isShowPagination && rowIndex === rows.length - 1), _classnames4), rowClassName(row.original, rowIndex)),
       onClick: onClickRow(row.original, rowIndex)
     }, _.map(row.getVisibleCells(), function (cell, colIndex) {
@@ -210,7 +213,31 @@ function Table(props, ref) {
         rowKey: rowKey
       }, tdContent) : tdContent);
     }));
-  }));
+    rowList.push(rowNode);
+
+    // 渲染额外展开的行
+    var expandItem = expandableInfo.expandItemMap[rowId];
+    var customExpandRowKey = expandableInfo.isExpandable && (expandItem === null || expandItem === void 0 ? void 0 : expandItem.customExpandRowKey);
+    var hasCustomExpandRowKey = !!customExpandRowKey;
+    if (hasCustomExpandRowKey) {
+      // 在该行的下面追加自定义展开行
+      var expandedRowRender = expandableConfig.expandedRowRender;
+      if (typeof expandedRowRender !== 'function') {
+        console.error('expandedRowRender must be a function');
+        return rowList;
+      }
+      if ((expandItem === null || expandItem === void 0 ? void 0 : expandItem.isExpanded) !== true) {
+        return rowList;
+      }
+      var customRow = /*#__PURE__*/React.createElement("div", {
+        key: customExpandRowKey,
+        className: classnames(prefixCls('tr')),
+        onClick: onClickRow(row.original, rowIndex)
+      }, expandedRowRender(row.original, expandItem.level + 1));
+      rowList.push(customRow);
+    }
+    return rowList;
+  }, []));
   var tableContent = /*#__PURE__*/React.createElement(Spin, {
     spinning: !!loading
   }, /*#__PURE__*/React.createElement("div", {
@@ -234,7 +261,7 @@ function Table(props, ref) {
     tableStyle.height = y;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: prefixCls('container'),
+    className: classnames(prefixCls('container'), _defineProperty({}, prefixCls('bordered'), bordered)),
     style: tableStyle
   }, /*#__PURE__*/React.createElement(ResizeObserver, {
     onResize: function onResize(size) {
@@ -246,7 +273,7 @@ function Table(props, ref) {
       });
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classnames(prefixCls('main'), (_classnames6 = {}, _defineProperty(_classnames6, prefixCls('overflow-hidden'), !!y), _defineProperty(_classnames6, prefixCls('ping-left'), isPingLeft), _defineProperty(_classnames6, prefixCls('ping-right'), isPingRight), _classnames6))
+    className: classnames(prefixCls('main'), (_classnames7 = {}, _defineProperty(_classnames7, prefixCls('overflow-hidden'), !!y), _defineProperty(_classnames7, prefixCls('ping-left'), isPingLeft), _defineProperty(_classnames7, prefixCls('ping-right'), isPingRight), _classnames7))
   }, tableContent)));
 }
 export default /*#__PURE__*/forwardRef(Table);

package/dist/Table/style/index.less

@@ -12,6 +12,19 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+
+  &.ald-table-bordered {
+    border: 1px solid var(--alias-colors-border-default, #e5e7eb);
+
+    .ald-table-main .ald-table-th,
+    .ald-table-header-scroll-placeholder {
+      border-bottom: 1px solid var(--alias-colors-border-default, #e5e7eb);
+    }
+
+    .ald-table-main .ald-table-tr:last-child .ald-table-td {
+      border-bottom: 0;
+    }
+  }
 }
 
 .ald-table-main {
@@ -311,12 +324,14 @@
 }
 
 .ald-table-header-scroll-placeholder {
-  height: @header-height;
+  // 1px 是 border-bottom 高度
+  height: @header-height + 1px;
   position: sticky;
   right: 0;
   background: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
   z-index: 2;
   flex: 0 0 auto;
+  border-bottom: 1px solid var(--alias-colors-border-subtle, #f3f4f6);
 }
 
 .ald-table-body-scroll {

package/dist/Table/types.d.ts

@@ -19,6 +19,7 @@ export interface ITableProps<TDataItem extends object> {
     expandable?: ITableExpandable<TDataItem> | boolean;
     onSort?: (columnKey: string, order: 'ascend' | 'descend' | null) => void;
     rowSelection?: IRowSelection<TDataItem>;
+    bordered?: boolean;
 }
 export type TRowKey<TDataItem extends object> = string | ((record: TDataItem) => string | number);
 export interface ITableCellErrorInfo {
@@ -70,6 +71,7 @@ export interface ITableExpandable<TDataItem = unknown> {
     expandedRowKeys?: string[];
     onExpand?: (record: TDataItem, isExpanded: boolean) => void;
     expandIcon?: (params: IExpandIconProps<TDataItem>) => React.ReactNode;
+    expandedRowRender?: (record: TDataItem, indent: number) => React.ReactNode;
 }
 export interface IExpandIconProps<TDataItem = unknown> {
     record: TDataItem;