From 1662af5c51a8e3bcfdfcf746cc702ebeae2c3dd8 Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Thu, 6 Jul 2023 10:42:13 +0800 Subject: [PATCH] feat: ConfigProvider support Drawer className and style properties (#43396) --- .../config-provider/__tests__/style.test.tsx | 31 +++++++++++++++++++ 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/drawer/index.tsx | 16 ++++++---- 6 files changed, 47 insertions(+), 6 deletions(-) diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index 7f885f6a84..7bee2542e2 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -14,6 +14,7 @@ import Collapse from '../../collapse'; import ColorPicker from '../../color-picker'; import Descriptions from '../../descriptions'; import Divider from '../../divider'; +import Drawer from '../../drawer'; import Empty from '../../empty'; import Form from '../../form'; import Image from '../../image'; @@ -151,6 +152,36 @@ describe('ConfigProvider support style and className props', () => { expect(container.querySelector('.ant-divider'))?.toHaveStyle({ color: 'red', height: '80px' }); }); + it('Should Drawer className works', () => { + render( + + + , + ); + + expect(document.querySelector('.ant-drawer-content')).toHaveClass('test-class'); + }); + + it('Should Drawer style works', () => { + render( + + + , + ); + + expect(document.querySelector('.ant-drawer-content')).toHaveStyle( + 'color: red; font-size: 16px;', + ); + }); + it('Should Cascader className & style works', () => { const options = [ { diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index 03579bb773..69408f33a3 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -98,6 +98,7 @@ export interface ConfigConsumerProps { anchor?: ComponentStyleConfig; button?: ButtonConfig; divider?: ComponentStyleConfig; + drawer?: ComponentStyleConfig; calendar?: ComponentStyleConfig; cascader?: ComponentStyleConfig; collapse?: ComponentStyleConfig; diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 098db5f090..fcd9a87300 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -115,6 +115,7 @@ const { | colorPicker | Set ColorPicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | descriptions | Set Descriptions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| drawer | Set Drawer common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | empty | Set Empty common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | form | Set Form common props | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 | | image | Set Image 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 c6f22569ac..7ac7c3e828 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -145,6 +145,7 @@ export interface ConfigProviderProps { cascader?: ComponentStyleConfig; collapse?: ComponentStyleConfig; divider?: ComponentStyleConfig; + drawer?: ComponentStyleConfig; typography?: ComponentStyleConfig; skeleton?: ComponentStyleConfig; spin?: ComponentStyleConfig; @@ -279,6 +280,7 @@ const ProviderChildren: React.FC = (props) => { checkbox, descriptions, divider, + drawer, skeleton, steps, image, @@ -372,6 +374,7 @@ const ProviderChildren: React.FC = (props) => { checkbox, descriptions, divider, + drawer, skeleton, steps, image, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 7064f03723..01213d1600 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -117,6 +117,7 @@ const { | colorPicker | 设置 ColorPicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | descriptions | 设置 Descriptions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| drawer | 设置 Drawer 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | form | 设置 Form 组件的通用属性 | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 | | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index 8c19d95cfa..2eef1ebb17 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -1,18 +1,18 @@ import classNames from 'classnames'; -import RcDrawer from 'rc-drawer'; import type { DrawerProps as RcDrawerProps } from 'rc-drawer'; +import RcDrawer from 'rc-drawer'; import type { CSSMotionProps } from 'rc-motion'; import * as React from 'react'; -import { ConfigContext } from '../config-provider'; -import { NoFormStyle } from '../form/context'; import { getTransitionName } from '../_util/motion'; import warning from '../_util/warning'; -import DrawerPanel from './DrawerPanel'; +import { ConfigContext } from '../config-provider'; +import { NoFormStyle } from '../form/context'; import type { DrawerPanelProps } from './DrawerPanel'; +import DrawerPanel from './DrawerPanel'; // CSSINJS -import useStyle from './style'; import { NoCompactStyle } from '../space/Compact'; +import useStyle from './style'; const SizeTypes = ['default', 'large'] as const; type sizeType = typeof SizeTypes[number]; @@ -51,6 +51,8 @@ function Drawer(props: DrawerProps) { onClose, prefixCls: customizePrefixCls, getContainer: customizeGetContainer, + style, + className, // Deprecated visible, @@ -59,7 +61,7 @@ function Drawer(props: DrawerProps) { ...rest } = props; - const { getPopupContainer, getPrefixCls, direction } = React.useContext(ConfigContext); + const { getPopupContainer, getPrefixCls, direction, drawer } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('drawer', customizePrefixCls); // Style @@ -141,6 +143,8 @@ function Drawer(props: DrawerProps) { push={push} width={mergedWidth} height={mergedHeight} + style={{ ...drawer?.style, ...style }} + className={classNames(drawer?.className, className)} rootClassName={drawerClassName} getContainer={getContainer} afterOpenChange={afterOpenChange ?? afterVisibleChange}