mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity

feat: ConfigProvider support Timeline className and style properties (#43392)

Browse Source
This commit is contained in:
JiaQi 2023-07-06 10:27:39 +08:00 committed by GitHub
parent 6dad4144e7
commit 36c3d36f02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 55 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
components/config-provider/__tests__/style.test.tsx
View File

@ -41,6 +41,7 @@ import Switch from '../../switch';
import Table from '../../table';
import Tabs from '../../tabs';
import Tag from '../../tag';
import Timeline from '../../timeline';
import Transfer from '../../transfer';
import Tree from '../../tree';
import Typography from '../../typography';
@ -966,6 +967,46 @@ describe('ConfigProvider support style and className props', () => {
expect(element).toHaveStyle({ color: 'blue' });
});
it('Should Timeline className works', () => {
const items = [
{
children: 'test item',
},
];
const { container } = render(
<ConfigProvider
timeline={{
className: 'test-class',
}}
>
<Timeline items={items} />
</ConfigProvider>,
);
expect(container.querySelector('.ant-timeline')).toHaveClass('test-class');
});
it('Should Timeline style works', () => {
const items = [
{
children: 'test item',
},
];
const { container } = render(
<ConfigProvider
timeline={{
style: { color: 'red' },
}}
>
<Timeline items={items} style={{ fontSize: '16px' }} />
</ConfigProvider>,
);
expect(container.querySelector('.ant-timeline')).toHaveStyle('color: red; font-size: 16px;');
});
it('Should Transfer className works', () => {
const mockData = [
{

1
components/config-provider/context.ts
View File

@ -130,6 +130,7 @@ export interface ConfigConsumerProps {
table?: ComponentStyleConfig;
card?: ComponentStyleConfig;
tabs?: ComponentStyleConfig;
timeline?: ComponentStyleConfig;
upload?: ComponentStyleConfig;
notification?: ComponentStyleConfig;
tree?: ComponentStyleConfig;

1
components/config-provider/index.en-US.md
View File

@ -142,6 +142,7 @@ const {
| table | Set Table common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties } | - | 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 |
| transfer | Set Transfer common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| tree | Set Tree common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

3
components/config-provider/index.tsx
View File

@ -174,6 +174,7 @@ export interface ConfigProviderProps {
table?: ComponentStyleConfig;
card?: ComponentStyleConfig;
tabs?: ComponentStyleConfig;
timeline?: ComponentStyleConfig;
upload?: ComponentStyleConfig;
notification?: ComponentStyleConfig;
tree?: ComponentStyleConfig;
@ -304,6 +305,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
table,
card,
tabs,
timeline,
upload,
notification,
tree,
@ -396,6 +398,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
table,
card,
tabs,
timeline,
upload,
notification,
tree,

3
components/config-provider/index.zh-CN.md
View File

@ -144,8 +144,9 @@ const {
| table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| transfer | 设置 Transfer 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| upload | 设置 Upload 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

11
components/timeline/Timeline.tsx
View File

@ -1,9 +1,10 @@
import classNames from 'classnames';
import * as React from 'react';
import warning from '../_util/warning';
import { ConfigContext } from '../config-provider';
import type { TimelineItemProps } from './TimelineItem';
import TimelineItemList from './TimelineItemList';
import TimelineItem from './TimelineItem';
import warning from '../_util/warning';
import TimelineItemList from './TimelineItemList';
import useItems from './useItems';
// CSSINJS
@ -28,8 +29,8 @@ type CompoundedComponent = React.FC<TimelineProps> & {
};
const Timeline: CompoundedComponent = (props) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const { prefixCls: customizePrefixCls, children, items, ...restProps } = props;
const { getPrefixCls, direction, timeline } = React.useContext(ConfigContext);
const { prefixCls: customizePrefixCls, children, items, className, style, ...restProps } = props;
const prefixCls = getPrefixCls('timeline', customizePrefixCls);
// =================== Warning =====================
@ -45,6 +46,8 @@ const Timeline: CompoundedComponent = (props) => {
return wrapSSR(
<TimelineItemList
{...restProps}
className={classNames(timeline?.className, className)}
style={{ ...timeline?.style, ...style }}
prefixCls={prefixCls}
direction={direction}
items={mergedItems}