feat: CP support Table expandIcon (#47225)

* feat: CP support Table expandIcon * fix: fix * type: fix type
ant-design · Jan 30, 2024 · 5031ca9 · 5031ca9
1 parent 18e85a7
commit 5031ca9
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 5 deletions.
diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
@@ -961,7 +961,13 @@ describe('ConfigProvider support style and className props', () => {
 
   it('Should Table className & style works', () => {
     const { container } = render(
-      <ConfigProvider table={{ className: 'cp-table', style: { backgroundColor: 'blue' } }}>
+      <ConfigProvider
+        table={{
+          className: 'cp-table',
+          style: { backgroundColor: 'blue' },
+          expandable: { expandIcon: () => <span className="cp-test-icon">cp-test-icon</span> },
+        }}
+      >
         <Table
           columns={[{ title: 'Address', dataIndex: 'address', key: 'address 1', ellipsis: true }]}
           dataSource={[{ key: '1', name: 'Jim Green', age: 40, address: 'test', tags: ['loser'] }]}
@@ -971,6 +977,7 @@ describe('ConfigProvider support style and className props', () => {
     const element = container.querySelector<HTMLDivElement>('.ant-table-wrapper');
     expect(element).toHaveClass('cp-table');
     expect(element).toHaveStyle({ backgroundColor: 'blue' });
+    expect(container.querySelector<HTMLSpanElement>('.ant-table-tbody .cp-test-icon')).toBeTruthy();
   });
 
   it('Should Calendar className works', () => {

diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
@@ -13,6 +13,7 @@ import type { ModalProps } from '../modal';
 import type { PaginationProps } from '../pagination';
 import type { SelectProps } from '../select';
 import type { SpaceProps } from '../space';
+import type { TableProps } from '../table';
 import type { TabsProps } from '../tabs';
 import type { AliasToken, MappingAlgorithm, OverrideToken } from '../theme/interface';
 import type { TourProps } from '../tour/interface';
@@ -66,6 +67,12 @@ export interface ComponentStyleConfig {
   style?: React.CSSProperties;
 }
 
+export interface TableConfig extends ComponentStyleConfig {
+  expandable?: {
+    expandIcon?: NonNullable<TableProps['expandable']>['expandIcon'];
+  };
+}
+
 export type TourConfig = Pick<TourProps, 'closeIcon'>;
 
 export type ModalConfig = ComponentStyleConfig & Pick<ModalProps, 'classNames' | 'styles'>;
@@ -143,7 +150,7 @@ export interface ConfigConsumerProps {
   avatar?: ComponentStyleConfig;
   message?: ComponentStyleConfig;
   tag?: ComponentStyleConfig;
-  table?: ComponentStyleConfig;
+  table?: TableConfig;
   card?: ComponentStyleConfig;
   tabs?: ComponentStyleConfig & Pick<TabsProps, 'indicator' | 'indicatorSize'>;
   timeline?: ComponentStyleConfig;

diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
@@ -146,7 +146,7 @@ const {
 | spin | Set Spin common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | statistic | Set Statistic common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| table | Set Table common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| table | Set Table common props | { className?: string, style?: React.CSSProperties, expandable?: { expandIcon?: props => React.ReactNode } } | - | 5.7.0, expandable: 5.14.0 |
 | tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }} | - | 5.7.0 |
 | tag | Set Tag common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
@@ -31,6 +31,7 @@ import type {
   FlexConfig,
   ModalConfig,
   PopupOverflow,
+  TableConfig,
   Theme,
   ThemeConfig,
   TourConfig,
@@ -165,7 +166,7 @@ export interface ConfigProviderProps {
   avatar?: ComponentStyleConfig;
   message?: ComponentStyleConfig;
   tag?: ComponentStyleConfig;
-  table?: ComponentStyleConfig;
+  table?: TableConfig;
   card?: ComponentStyleConfig;
   tabs?: ComponentStyleConfig & Pick<TabsProps, 'indicator' | 'indicatorSize'>;
   timeline?: ComponentStyleConfig;

diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
@@ -148,7 +148,7 @@ const {
 | spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | statistic | 设置 Statistic 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties, expandable?: { expandIcon?: props => React.ReactNode } } | - | 5.7.0, expandable: 5.14.0 |
 | tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }} | - | 5.7.0 |
 | tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

diff --git a/components/table/InternalTable.tsx b/components/table/InternalTable.tsx
@@ -210,6 +210,7 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
     childrenColumnName: legacyChildrenColumnName,
     expandIconColumnIndex,
     ...expandable,
+    expandIcon: expandable?.expandIcon ?? table?.expandable?.expandIcon,
   };
   const { childrenColumnName = 'children' } = mergedExpandable;