Merge branch 'master' into fix/issue-56713-stable-header-width

Author: biubiukam

README.md

@@ -84,12 +84,15 @@ Then open `http://localhost:8000`.
 | expandable.expandedRowRender | Function(recode, index, indent, expanded):ReactNode |  | Content render to expanded row |
 | expandable.forceRender | Boolean | false | Force render expanded row content before expansion. In virtual mode, only rows currently mounted by the virtual list are force-rendered; off-screen rows may still be unmounted |
 | expandable.expandedRowClassName | `string` \| `(recode, index, indent) => string` |  | get expanded row's className |
+| expandable.columnTitle | ReactNode \| Function({ expandIcon }) |  | Customize expand column title |
 | expandable.expandRowByClick | boolean |  | Support expand by click row |
 | expandable.expandIconColumnIndex | Number | 0 | The index of expandIcon which column will be inserted when expandIconAsCell is false |
-| expandable.expandIcon | props => ReactNode |  | Customize expand icon |
+| expandable.expandIcon | props => ReactNode |  | Deprecated. Use `components.ExpandIcon`; retained as a row-only fallback |
 | expandable.indentSize | Number | 15 | indentSize for every level of data.i.children, better using with column.width specified |
 | expandable.rowExpandable | (record) => boolean |  | Config row support expandable |
+| expandable.showExpandAll | Boolean | false | Show expand all icon in the expand column header when using `expandedRowRender` |
 | expandable.onExpand | Function(expanded, record) |  | function to call when click expand icon |
+| expandable.onExpandAll | Function(expanded) |  | function to call when click expand all icon |
 | expandable.onExpandedRowsChange | Function(expandedRows) |  | function to call when the expanded rows change |
 | expandable.fixed | String \| Boolean | - | this expand icon will be fixed when table scroll horizontally: true or `left` or `right` and `expandIconColumnIndex` need to stay first or last |
 | rowKey | string or Function(record, index):string | 'key' | If rowKey is string, `record[rowKey]` will be used as key. If rowKey is function, the return value of `rowKey(record, index)` will be use as key. |
@@ -105,6 +108,7 @@ Then open `http://localhost:8000`.
 | emptyText | React.Node or Function | `No Data` | Display text when data is empty |
 | columns | Object[] |  | The columns config of table, see table below |
 | components | Object |  | Override table elements, see [#171](https://github.com/react-component/table/pull/171) for more details |
+| components.ExpandIcon | `React.ComponentType<ExpandIconProps>` |  | Customize both row and expand-all icons. Receives `type` (`row` or `all`), `prefixCls`, `expanded`, `expandable`, `onClick`, and `record` for rows only |
 | sticky | boolean \| {offsetHeader?: number, offsetScroll?: number, getContainer?: () => Window \| HTMLElement } | false | stick header and scroll bar |
 | summary | (data: readonly RecordType[]) => React.ReactNode | - | `summary` attribute in `table` component is used to define the summary row. |
 | rowHoverable | boolean | true | Table hover interaction |

README.zh-CN.md

@@ -84,12 +84,15 @@ npm start
 | expandable.expandedRowRender | Function(recode, index, indent, expanded):ReactNode |  | 内容渲染到扩展行 |
 | expandable.forceRender | Boolean | false | 在展开前强制渲染展开行内容。虚拟模式下，仅强制渲染虚拟列表当前挂载的行；屏幕外的行仍可能被卸载 |
 | expandable.expandedRowClassName | `string` \| `(recode, index, indent) => string` |  | 获取扩展行的 className |
+| expandable.columnTitle | ReactNode \| Function({ expandIcon }) |  | 自定义展开列表头 |
 | expandable.expandRowByClick | boolean |  | 支持点击行展开 |
 | expandable.expandIconColumnIndex | Number | 0 | ExpandIconAsCell 为 false 时将插入哪一列的 ExpandIcon 索引 |
-| expandable.expandIcon | props => ReactNode |  | 自定义展开图标 |
+| expandable.expandIcon | props => ReactNode |  | 已废弃。请使用 `components.ExpandIcon`；此配置仅作为行展开图标的后备方案保留 |
 | expandable.indentSize | Number | 15 | 每一级 `data[i].children` 的缩进尺寸，建议配合指定的 `column.width` 使用 |
 | expandable.rowExpandable | (record) => boolean |  | 配置行支持可扩展 |
+| expandable.showExpandAll | Boolean | false | 使用 `expandedRowRender` 时在展开列的表头中显示全部展开图标 |
 | expandable.onExpand | Function(expanded, record) |  | 单击展开图标时调用的函数 |
+| expandable.onExpandAll | Function(expanded) |  | 单击全部展开图标时调用的函数 |
 | expandable.onExpandedRowsChange | Function(expandedRows) |  | 扩展行更改时调用的函数 |
 | expandable.fixed | String \| Boolean | - | 当表格水平滚动时，此展开图标将被修复： true 或 `left` 或 `right` 和 `expandIconColumnIndex` 需要保留在第一个或最后一个 |
 | rowKey | string or Function(record, index):string | 'key' | 如果 rowKey 是字符串，则 `record[rowKey]` 将用作键。如果 rowKey 是函数，则 `rowKey(record, index)` 的返回值将用作 key。 |
@@ -105,6 +108,7 @@ npm start
 | emptyText | React.Node or Function | `No Data` | 数据为空时显示文本 |
 | columns | Object[] |  | 表的列配置见下表 |
 | components | Object |  | 覆盖表元素，请参阅 [#171](https://github.com/react-component/table/pull/171) 了解更多详细信息 |
+| components.ExpandIcon | `React.ComponentType<ExpandIconProps>` |  | 自定义行展开和全部展开图标。接收 `type`（`row` 或 `all`）、`prefixCls`、`expanded`、`expandable`、`onClick`，仅行图标接收 `record` |
 | sticky | boolean \| {offsetHeader?: number, offsetScroll?: number, getContainer?: () => Window \| HTMLElement } | false | 粘贴标题和滚动条 |
 | summary | (data: readonly RecordType[]) => React.ReactNode | - | `table` 组件中的 `summary` 属性用于定义汇总行。 |
 | rowHoverable | boolean | true | 表格 hover 交互 |

assets/index.less

@@ -230,13 +230,18 @@
   }
 
   &-row-expand-icon {
+    box-sizing: border-box;
     display: inline-block;
     width: 16px;
     height: 16px;
+    padding: 0;
     color: #aaa;
+    font: inherit;
     line-height: 16px;
     text-align: center;
     vertical-align: middle;
+    appearance: none;
+    background: transparent;
     border: 1px solid currentColor;
     cursor: pointer;
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/table",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "description": "📋 Data table component for React",
   "engines": {
     "node": ">=8.x"

src/Table.tsx

@@ -314,6 +314,7 @@ const Table = <RecordType extends DefaultRecordType>(
     mergedExpandIcon,
     mergedChildrenColumnName,
     onTriggerExpand,
+    expandAllInfo,
   ] = useExpand(props, mergedData, getRowKey);
 
   // ====================== Column ======================
@@ -331,6 +332,8 @@ const Table = <RecordType extends DefaultRecordType>(
       // https://github.com/ant-design/ant-design/issues/23894
       onTriggerExpand,
       expandIcon: mergedExpandIcon,
+      ExpandIcon: components?.ExpandIcon,
+      expandAllInfo,
       expandIconColumnIndex: expandableConfig.expandIconColumnIndex,
       direction,
       scrollWidth: useInternalHooks && tailor && typeof scrollX === 'number' ? scrollX : null,

src/hooks/useColumns/index.tsx

@@ -6,12 +6,16 @@ import type {
   ColumnsType,
   ColumnType,
   Direction,
+  ExpandColumnTitle,
+  ExpandIconComponent,
+  ExpandIconProps,
   FixedType,
   GetRowKey,
   Key,
   RenderExpandIcon,
   TriggerEventHandler,
 } from '../../interface';
+import { DefaultExpandIcon } from '../../utils/expandUtil';
 import { INTERNAL_COL_DEFINE } from '../../utils/legacyUtil';
 import useWidthColumns from './useWidthColumns';
 
@@ -102,6 +106,8 @@ function useColumns<RecordType>(
     getRowKey,
     onTriggerExpand,
     expandIcon,
+    ExpandIcon,
+    expandAllInfo,
     rowExpandable,
     expandIconColumnIndex,
     expandedRowOffset = 0,
@@ -117,10 +123,12 @@ function useColumns<RecordType>(
     children?: React.ReactNode;
     expandable: boolean;
     expandedKeys: Set<Key>;
-    columnTitle?: React.ReactNode;
+    columnTitle?: ExpandColumnTitle;
     getRowKey: GetRowKey<RecordType>;
     onTriggerExpand: TriggerEventHandler<RecordType>;
-    expandIcon?: RenderExpandIcon<RecordType>;
+    expandIcon: RenderExpandIcon<RecordType>;
+    ExpandIcon?: ExpandIconComponent<RecordType>;
+    expandAllInfo?: Pick<ExpandIconProps<RecordType>, 'expanded' | 'expandable' | 'onClick'>;
     rowExpandable?: (record: RecordType) => boolean;
     expandIconColumnIndex?: number;
     direction?: Direction;
@@ -190,13 +198,22 @@ function useColumns<RecordType>(
         fixedColumn = prevColumn ? prevColumn.fixed : null;
       }
 
+      const MergedExpandIcon = ExpandIcon || DefaultExpandIcon;
+      const expandAllNode = expandAllInfo ? (
+        <MergedExpandIcon type="all" prefixCls={prefixCls} {...expandAllInfo} />
+      ) : undefined;
+      const mergedColumnTitle =
+        typeof columnTitle === 'function'
+          ? columnTitle({ expandIcon: expandAllNode })
+          : (columnTitle ?? expandAllNode);
+
       // >>> Create expandable column
       const expandColumn = {
         [INTERNAL_COL_DEFINE]: {
           className: `${prefixCls}-expand-icon-col`,
           columnType: 'EXPAND_COLUMN',
         },
-        title: columnTitle,
+        title: mergedColumnTitle,
         fixed: fixedColumn,
         className: `${prefixCls}-row-expand-icon-cell`,
         width: columnWidth,
@@ -238,7 +255,18 @@ function useColumns<RecordType>(
 
     return baseColumns.filter(col => col !== EXPAND_COLUMN);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [expandable, baseColumns, getRowKey, expandedKeys, expandIcon, direction, expandedRowOffset]);
+  }, [
+    expandable,
+    baseColumns,
+    getRowKey,
+    expandedKeys,
+    expandIcon,
+    ExpandIcon,
+    expandAllInfo,
+    columnTitle,
+    direction,
+    expandedRowOffset,
+  ]);
 
   // ========================= Transform ========================
   const mergedColumns = React.useMemo(() => {

src/hooks/useExpand.ts

@@ -1,18 +1,24 @@
-import { warning } from '@rc-component/util';
+import { useEvent, warning } from '@rc-component/util';
 import * as React from 'react';
 import { INTERNAL_HOOKS } from '../constant';
 import type {
   ExpandableConfig,
   ExpandableType,
+  ExpandIconProps,
   GetRowKey,
   Key,
   RenderExpandIcon,
   TriggerEventHandler,
 } from '../interface';
 import type { TableProps } from '../Table';
-import { findAllChildrenKeys, renderExpandIcon } from '../utils/expandUtil';
+import { findAllChildrenKeys, renderExpandIcon, renderRowExpandIcon } from '../utils/expandUtil';
 import { getExpandableProps } from '../utils/legacyUtil';
 
+type ExpandAllInfo<RecordType> = Pick<
+  ExpandIconProps<RecordType>,
+  'expanded' | 'expandable' | 'onClick'
+>;
+
 export default function useExpand<RecordType>(
   props: TableProps<RecordType>,
   mergedData: readonly RecordType[],
@@ -24,6 +30,7 @@ export default function useExpand<RecordType>(
   expandIcon: RenderExpandIcon<RecordType>,
   childrenColumnName: string,
   onTriggerExpand: TriggerEventHandler<RecordType>,
+  expandAllInfo: ExpandAllInfo<RecordType> | undefined,
 ] {
   const expandableConfig = getExpandableProps(props);
 
@@ -34,11 +41,22 @@ export default function useExpand<RecordType>(
     defaultExpandAllRows,
     expandedRowRender,
     onExpand,
+    onExpandAll,
     onExpandedRowsChange,
     childrenColumnName,
+    rowExpandable,
+    showExpandAll,
   } = expandableConfig;
 
-  const mergedExpandIcon = expandIcon || renderExpandIcon;
+  const customizeExpandIcon = props.components?.ExpandIcon;
+  const componentExpandIcon = React.useMemo<RenderExpandIcon<RecordType> | undefined>(
+    () =>
+      customizeExpandIcon
+        ? iconProps => renderRowExpandIcon(customizeExpandIcon, iconProps)
+        : undefined,
+    [customizeExpandIcon],
+  );
+  const mergedExpandIcon = componentExpandIcon || expandIcon || renderExpandIcon;
   const mergedChildrenColumnName = childrenColumnName || 'children';
   const expandableType = React.useMemo<ExpandableType>(() => {
     if (expandedRowRender) {
@@ -81,6 +99,30 @@ export default function useExpand<RecordType>(
     [expandedRowKeys, innerExpandedKeys],
   );
 
+  const expandableRows = React.useMemo(() => {
+    if (!showExpandAll || expandableType !== 'row') {
+      return [];
+    }
+
+    return mergedData.reduce<{ key: Key; record: RecordType }[]>((rows, record, index) => {
+      if (!rowExpandable || rowExpandable(record)) {
+        rows.push({
+          key: getRowKey(record, index),
+          record,
+        });
+      }
+      return rows;
+    }, []);
+    // `rowExpandable` is intentionally omitted because it is commonly an unstable inline function.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [expandableType, getRowKey, mergedData, showExpandAll]);
+
+  const allExpanded = React.useMemo(
+    () =>
+      expandableRows.length > 0 && expandableRows.every(({ key }) => mergedExpandedKeys.has(key)),
+    [expandableRows, mergedExpandedKeys],
+  );
+
   const onTriggerExpand: TriggerEventHandler<RecordType> = React.useCallback(
     (record: RecordType) => {
       const key = getRowKey(record, mergedData.indexOf(record));
@@ -105,6 +147,41 @@ export default function useExpand<RecordType>(
     [getRowKey, mergedExpandedKeys, mergedData, onExpand, onExpandedRowsChange],
   );
 
+  const onTriggerExpandAll: React.MouseEventHandler<HTMLElement> = useEvent(event => {
+    event.stopPropagation();
+    if (!expandableRows.length) {
+      return;
+    }
+
+    const nextExpanded = !allExpanded;
+    const nextExpandedKeys = new Set(mergedExpandedKeys);
+
+    expandableRows.forEach(({ key }) => {
+      if (nextExpanded) {
+        nextExpandedKeys.add(key);
+      } else {
+        nextExpandedKeys.delete(key);
+      }
+    });
+
+    const keys = [...nextExpandedKeys];
+    setInnerExpandedKeys(keys);
+    onExpandAll?.(nextExpanded);
+    onExpandedRowsChange?.(keys);
+  });
+
+  const expandAllInfo = React.useMemo<ExpandAllInfo<RecordType> | undefined>(
+    () =>
+      showExpandAll && expandableType === 'row'
+        ? {
+            expanded: allExpanded,
+            expandable: expandableRows.length > 0,
+            onClick: onTriggerExpandAll,
+          }
+        : undefined,
+    [allExpanded, expandableRows.length, expandableType, onTriggerExpandAll, showExpandAll],
+  );
+
   // Warning if use `expandedRowRender` and nest children in the same time
   if (
     process.env.NODE_ENV !== 'production' &&
@@ -123,5 +200,6 @@ export default function useExpand<RecordType>(
     mergedExpandIcon,
     mergedChildrenColumnName,
     onTriggerExpand,
+    expandAllInfo,
   ];
 }

src/index.ts

@@ -4,6 +4,7 @@ import type {
   ColumnType,
   ColumnsType,
   DefaultRecordType,
+  ExpandIconProps,
   ExpandableConfig,
   FixedType,
   GetComponentProps,
@@ -37,6 +38,7 @@ export {
   type ColumnType,
   type ColumnsType,
   type DefaultRecordType,
+  type ExpandIconProps,
   type ExpandableConfig,
   type FixedType,
   type GetComponentProps,