From 36c3d36f02c40615dbff9366732cb66906e43109 Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Thu, 6 Jul 2023 10:27:39 +0800 Subject: [PATCH] feat: ConfigProvider support Timeline className and style properties (#43392) --- .../config-provider/__tests__/style.test.tsx | 41 +++++++++++++++++++ components/config-provider/context.ts | 1 + components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 3 ++ components/config-provider/index.zh-CN.md | 3 +- components/timeline/Timeline.tsx | 11 +++-- 6 files changed, 55 insertions(+), 5 deletions(-) diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index 54e50027bf..7f885f6a84 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -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( + + + , + ); + + expect(container.querySelector('.ant-timeline')).toHaveClass('test-class'); + }); + + it('Should Timeline style works', () => { + const items = [ + { + children: 'test item', + }, + ]; + + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-timeline')).toHaveStyle('color: red; font-size: 16px;'); + }); + it('Should Transfer className works', () => { const mockData = [ { diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index 5f24449284..03579bb773 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -130,6 +130,7 @@ export interface ConfigConsumerProps { table?: ComponentStyleConfig; card?: ComponentStyleConfig; tabs?: ComponentStyleConfig; + timeline?: ComponentStyleConfig; upload?: ComponentStyleConfig; notification?: ComponentStyleConfig; tree?: ComponentStyleConfig; diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 2c5a9d470e..098db5f090 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -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 | diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 3d8cf7b11a..c6f22569ac 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -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 = (props) => { table, card, tabs, + timeline, upload, notification, tree, @@ -396,6 +398,7 @@ const ProviderChildren: React.FC = (props) => { table, card, tabs, + timeline, upload, notification, tree, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 941a80671d..7064f03723 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -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 | diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx index 6ffead4a5c..6df58f9dc6 100644 --- a/components/timeline/Timeline.tsx +++ b/components/timeline/Timeline.tsx @@ -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 & { }; 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(