feat(table): add class to identify expanded and folded row when expan…

…dRowKeys is defined

src/table/BaseTable.tsx

@@ -55,6 +55,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
     resizable,
     lazyLoad,
     pagination,
+    expandedRowKeys,
   } = props;
   const tableRef = useRef<HTMLDivElement>();
   const tableElmRef = useRef<HTMLTableElement>();
@@ -470,6 +471,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
     renderExpandedRow: props.renderExpandedRow,
     ...pick(props, extendTableProps),
     pagination: innerPagination,
+    expandedRowKeys,
   };
 
   const translate = `translate(0, ${virtualConfig.scrollHeight}px)`;

src/table/PrimaryTable.tsx

@@ -36,8 +36,14 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr
   // 自定义列配置功能
   const { tDisplayColumns, renderColumnController } = useColumnController(props, { onColumnReduce });
   // 展开/收起行功能
-  const { showExpandedRow, showExpandIconColumn, getExpandColumn, renderExpandedRow, onInnerExpandRowClick } =
-    useRowExpand(props);
+  const {
+    innerExpandedRowKeys,
+    showExpandedRow,
+    showExpandIconColumn,
+    getExpandColumn,
+    renderExpandedRow,
+    onInnerExpandRowClick,
+  } = useRowExpand(props);
   // 排序功能
   const { renderSortIcon } = useSorter(props);
   // 行选中功能
@@ -264,14 +270,14 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr
   if (props.expandOnRowClick || props.selectOnRowClick) {
     baseTableProps.onRowClick = onInnerRowClick;
   }
-
   return (
     <BaseTable
       ref={primaryTableRef}
       {...baseTableProps}
       className={classNames(primaryTableClasses, className)}
       style={style}
       onLeafColumnsChange={setDragSortColumns}
+      expandedRowKeys={innerExpandedRowKeys}
     />
   );
 });

src/table/TR.tsx

@@ -5,15 +5,17 @@ import { formatRowAttributes, formatRowClassNames } from './utils';
 import { getRowFixedStyles } from './hooks/useFixed';
 import { RowAndColFixedPosition } from './interface';
 import useClassName from './hooks/useClassName';
-import { TableRowData, RowspanColspan, TdBaseTableProps } from './type';
+import { TableRowData, RowspanColspan } from './type';
 import useLazyLoad from './hooks/useLazyLoad';
 import { getCellKey, SkipSpansValue } from './hooks/useRowspanAndColspan';
 import Cell from './Cell';
 import { PaginationProps } from '../pagination';
 import { VirtualScrollConfig } from '../hooks/useVirtualScroll';
 import { InfinityScroll } from '../common';
 
-export type TrCommonProps = Pick<TdBaseTableProps, TrPropsKeys>;
+import type { BaseTableProps } from './interface';
+
+export type TrCommonProps = Pick<BaseTableProps, TrPropsKeys>;
 
 export const TABLE_PROPS = [
   'rowKey',
@@ -33,6 +35,7 @@ export const TABLE_PROPS = [
   'onRowMouseenter',
   'onRowMouseleave',
   'onRowMouseup',
+  'expandedRowKeys',
 ] as const;
 
 export type TrPropsKeys = (typeof TABLE_PROPS)[number];
@@ -76,6 +79,7 @@ export default function TR(props: TrProps) {
     rowAndColFixedPosition,
     virtualConfig,
     onRowMounted,
+    expandedRowKeys,
   } = props;
 
   const trRef = useRef<HTMLTableRowElement>();
@@ -96,10 +100,17 @@ export default function TR(props: TrProps) {
     [row, rowAttributes, rowIndex],
   );
 
+  const currentRowKey = useMemo(() => get(row, rowKey || 'id'), [row, rowKey]);
+
   const classes = useMemo(() => {
     const customClasses = formatRowClassNames(rowClassName, { row, rowIndex, type: 'body' }, rowKey || 'id');
-    return [trStyles?.classes, customClasses];
-  }, [row, rowClassName, rowIndex, rowKey, trStyles?.classes]);
+    if (!expandedRowKeys) return [trStyles?.classes, customClasses];
+    return [
+      trStyles?.classes,
+      classNames.tableExpandClasses[expandedRowKeys?.includes(currentRowKey) ? 'rowExpanded' : 'rowFolded'],
+      customClasses,
+    ];
+  }, [row, rowClassName, rowIndex, rowKey, trStyles?.classes, currentRowKey, classNames, expandedRowKeys]);
 
   const useLazyLoadParams = useMemo(() => ({ ...scroll, rowIndex }), [scroll, rowIndex]);
   const { hasLazyLoadHolder, tRowHeight } = useLazyLoad(tableContentRef.current, trRef, useLazyLoadParams);
@@ -113,7 +124,6 @@ export default function TR(props: TrProps) {
     }
     // eslint-disable-next-line
   }, [virtualConfig.isVirtualScroll, trRef, row]);
-
   const columnVNodeList = props.columns?.map((col, colIndex) => {
     const cellSpans: RowspanColspan = {};
     const params = {

src/table/defaultProps.ts

@@ -40,7 +40,7 @@ export const primaryTableDefaultProps: Pick<
   columnControllerVisible: undefined,
   columns: [],
   expandIcon: true,
-  defaultExpandedRowKeys: [],
+  defaultExpandedRowKeys: undefined,
   multipleSort: false,
   reserveSelectedRowOnPaginate: true,
   defaultSelectedRowKeys: [],

src/table/hooks/useClassName.ts

@@ -108,6 +108,8 @@ export default function useClassName() {
       tableExpandClasses: {
         iconBox: `${classPrefix}-table__expand-box`,
         iconCell: `${classPrefix}-table__expandable-icon-cell`,
+        rowExpanded: `${classPrefix}-table__row--expanded`,
+        rowFolded: `${classPrefix}-table__row--folded`,
         row: `${classPrefix}-table__expanded-row`,
         rowInner: `${classPrefix}-table__expanded-row-inner`,
         expanded: `${classPrefix}-table__row--expanded`,

src/table/hooks/useRowExpand.tsx

@@ -29,6 +29,9 @@ export default function useRowExpand(props: TdPrimaryTableProps) {
     defaultExpandedRowKeys: props.defaultExpandedRowKeys || [],
   });
 
+  // 用于在可展开收起的场景给各行添加类名使用，如果没有配置则不加相关类名
+  const innerExpandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys ? tExpandedRowKeys : undefined;
+
   const showExpandedRow = Boolean(expandedRow);
 
   const showExpandIconColumn = props.expandIcon !== false && showExpandedRow;
@@ -117,5 +120,6 @@ export default function useRowExpand(props: TdPrimaryTableProps) {
     getExpandColumn,
     renderExpandedRow,
     onInnerExpandRowClick,
+    innerExpandedRowKeys,
   };
 }

src/table/interface.ts

@@ -27,6 +27,10 @@ export interface BaseTableProps<T extends TableRowData = TableRowData> extends T
    * 表头是否可拖拽。非公开属性，请勿在业务中使用
    */
   thDraggable?: boolean;
+  /**
+   * 当前展开行的 key 的数组。非公开属性，请勿在业务中使用
+   */
+  expandedRowKeys?: (string | number)[];
 }
 
 /**