From 1abdb9e0772abe2200fa83fdd2d65dd1f976297c Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Mon, 3 Jul 2023 22:42:46 +0800 Subject: [PATCH] feat: ConfigProvider support Tree className and style (#43060) --- .../config-provider/__tests__/style.test.tsx | 45 +++++++++++++++++++ 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 | 1 + components/tree/Tree.tsx | 6 ++- 6 files changed, 56 insertions(+), 1 deletion(-) diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index 43d64c49a4..f3ac885244 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -33,6 +33,7 @@ import Switch from '../../switch'; import Table from '../../table'; import Tabs from '../../tabs'; import Tag from '../../tag'; +import Tree from '../../tree'; import Typography from '../../typography'; import Upload from '../../upload'; @@ -721,4 +722,48 @@ describe('ConfigProvider support style and className props', () => { expect(element).toHaveClass('cp-notification'); expect(element).toHaveStyle({ color: 'blue' }); }); + + it('Should Tree className works', () => { + const treeData = [ + { + title: 'test-title', + key: '0-0', + }, + ]; + + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-tree')).toHaveClass('test-class'); + }); + + it('Should Tree style works', () => { + const treeData = [ + { + title: 'test-title', + key: '0-0', + }, + ]; + + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-tree-list')).toHaveStyle( + 'color: red; font-size: 16px; position: relative;', + ); + }); }); diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index eaaff177d8..643d13f825 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -124,6 +124,7 @@ export interface ConfigConsumerProps { tabs?: ComponentStyleConfig; upload?: ComponentStyleConfig; notification?: ComponentStyleConfig; + tree?: ComponentStyleConfig; } const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => { diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 4d0b243094..41690ae62a 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -134,6 +134,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 | +| 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 | | upload | Set Upload 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 df3c569d8b..7654eac009 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -168,6 +168,7 @@ export interface ConfigProviderProps { tabs?: ComponentStyleConfig; upload?: ComponentStyleConfig; notification?: ComponentStyleConfig; + tree?: ComponentStyleConfig; } interface ProviderChildrenProps extends ConfigProviderProps { @@ -288,6 +289,7 @@ const ProviderChildren: React.FC = (props) => { tabs, upload, notification, + tree, } = props; // =================================== Warning =================================== @@ -370,6 +372,7 @@ const ProviderChildren: React.FC = (props) => { tabs, upload, notification, + tree, }; const config = { diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index c50f785a50..0cc9e49512 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -136,6 +136,7 @@ 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 | | typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | upload | 设置 Upload 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx index b20ff29913..0c8227705b 100644 --- a/components/tree/Tree.tsx +++ b/components/tree/Tree.tsx @@ -156,7 +156,7 @@ export interface TreeProps } const Tree = React.forwardRef((props, ref) => { - const { getPrefixCls, direction, virtual } = React.useContext(ConfigContext); + const { getPrefixCls, direction, virtual, tree } = React.useContext(ConfigContext); const { prefixCls: customizePrefixCls, className, @@ -169,6 +169,7 @@ const Tree = React.forwardRef((props, ref) => { selectable = true, draggable, motion: customMotion, + style, } = props; const prefixCls = getPrefixCls('tree', customizePrefixCls); @@ -232,6 +233,8 @@ const Tree = React.forwardRef((props, ref) => { ref={ref} virtual={virtual} {...newProps} + // newProps may contain style so declare style below it + style={{ ...tree?.style, ...style }} prefixCls={prefixCls} className={classNames( { @@ -240,6 +243,7 @@ const Tree = React.forwardRef((props, ref) => { [`${prefixCls}-unselectable`]: !selectable, [`${prefixCls}-rtl`]: direction === 'rtl', }, + tree?.className, className, hashId, )}