feat: CP support Table expandIcon (#47225)

* feat: CP support Table expandIcon

* fix: fix

* type: fix type
This commit is contained in:
lijianan 2024-01-30 13:57:49 +08:00 committed by GitHub
parent 18e85a7b81
commit 5031ca9032
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 21 additions and 5 deletions

View File

@ -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', () => {

View File

@ -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;

View File

@ -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 |

View File

@ -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;

View File

@ -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 |

View File

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