feat: Drawer support classNames

components/config-provider/context.ts

@@ -16,6 +16,7 @@ import type { TabsProps } from '../tabs';
 import type { AliasToken, MappingAlgorithm, OverrideToken } from '../theme/interface';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
 import type { SizeType } from './SizeContext';
+import type { DrawerProps } from '../drawer';
 
 export const defaultIconPrefixCls = 'anticon';
 
@@ -68,6 +69,11 @@ export interface ButtonConfig extends ComponentStyleConfig {
   styles?: ButtonProps['styles'];
 }
 
+export interface DrawerConfig extends ComponentStyleConfig {
+  classNames?: DrawerProps['classNames'];
+  styles?: DrawerProps['styles'];
+}
+
 export interface FlexConfig extends ComponentStyleConfig {
   vertical?: FlexProps['vertical'];
 }
@@ -123,7 +129,7 @@ export interface ConfigConsumerProps {
   anchor?: ComponentStyleConfig;
   button?: ButtonConfig;
   divider?: ComponentStyleConfig;
-  drawer?: ComponentStyleConfig;
+  drawer?: DrawerConfig;
   calendar?: ComponentStyleConfig;
   carousel?: ComponentStyleConfig;
   cascader?: ComponentStyleConfig;

components/config-provider/index.en-US.md

@@ -120,7 +120,7 @@ const {
 | datePicker | Set datePicker 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 |
+| drawer | Set Drawer common props | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer-cn#api), styles?: [DrawerProps\["styles"\]](/components/drawer-cn#api) } | - | 5.7.0, `classNames` and `styles`: 5.10.0 |
 | empty | Set Empty common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | flex | Set Flex common props | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.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 |

components/config-provider/index.tsx

@@ -24,6 +24,7 @@ import defaultSeedToken from '../theme/themes/seed';
 import type {
   BadgeConfig,
   ButtonConfig,
+  DrawerConfig,
   ComponentStyleConfig,
   ConfigConsumerProps,
   CSPConfig,
@@ -159,7 +160,7 @@ export interface ConfigProviderProps {
   cascader?: ComponentStyleConfig;
   collapse?: ComponentStyleConfig;
   divider?: ComponentStyleConfig;
-  drawer?: ComponentStyleConfig;
+  drawer?: DrawerConfig;
   typography?: ComponentStyleConfig;
   skeleton?: ComponentStyleConfig;
   spin?: ComponentStyleConfig;

components/config-provider/index.zh-CN.md

@@ -122,7 +122,7 @@ const {
 | datePicker | 设置 DatePicker 组件的通用属性 | { 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 |
+| drawer | 设置 Drawer 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer-cn#api), styles?: [DrawerProps\["styles"\]](/components/drawer-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.10.0 |
 | empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | flex | 设置 Flex 组件的通用属性 | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.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 |

components/drawer/DrawerPanel.tsx

@@ -2,6 +2,23 @@ import classNames from 'classnames';
 import type { DrawerProps as RCDrawerProps } from 'rc-drawer';
 import * as React from 'react';
 import useClosable from '../_util/hooks/useClosable';
+import { ConfigContext } from '../config-provider';
+
+export interface DrawerClassNames {
+  header?: string;
+  body?: string;
+  footer?: string;
+  mask?: string;
+  content?: string;
+}
+
+export interface DrawerStyles {
+  header?: React.CSSProperties;
+  body?: React.CSSProperties;
+  footer?: React.CSSProperties;
+  mask?: React.CSSProperties;
+  content?: React.CSSProperties;
+}
 
 export interface DrawerPanelProps {
   prefixCls: string;
@@ -22,10 +39,15 @@ export interface DrawerPanelProps {
 
   /** Wrapper dom node style of header and body */
   drawerStyle?: React.CSSProperties;
+  /** @deprecated Please use `styles.header` instead */
   headerStyle?: React.CSSProperties;
+  /** @deprecated Please use `styles.body` instead */
   bodyStyle?: React.CSSProperties;
+  /** @deprecated Please use `styles.footer` instead */
   footerStyle?: React.CSSProperties;
   children?: React.ReactNode;
+  classNames?: DrawerClassNames;
+  styles?: DrawerStyles;
 }
 
 const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
@@ -42,7 +64,10 @@ const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
     bodyStyle,
     footerStyle,
     children,
+    classNames: drawerClassNames,
+    styles: drawerStyles,
   } = props;
+  const { drawer: drawerContext } = React.useContext(ConfigContext);
 
   const customCloseIconRender = React.useCallback(
     (icon: React.ReactNode) => (
@@ -66,10 +91,19 @@ const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
     }
     return (
       <div
-        style={headerStyle}
-        className={classNames(`${prefixCls}-header`, {
-          [`${prefixCls}-header-close-only`]: mergedClosable && !title && !extra,
-        })}
+        style={{
+          ...drawerContext?.styles?.header,
+          ...headerStyle,
+          ...drawerStyles?.header,
+        }}
+        className={classNames(
+          `${prefixCls}-header`,
+          {
+            [`${prefixCls}-header-close-only`]: mergedClosable && !title && !extra,
+          },
+          drawerContext?.classNames?.header,
+          drawerClassNames?.header,
+        )}
       >
         <div className={`${prefixCls}-header-title`}>
           {mergedCloseIcon}
@@ -86,7 +120,18 @@ const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
     }
     const footerClassName = `${prefixCls}-footer`;
     return (
-      <div className={footerClassName} style={footerStyle}>
+      <div
+        className={classNames(
+          footerClassName,
+          drawerContext?.classNames?.footer,
+          drawerClassNames?.footer,
+        )}
+        style={{
+          ...drawerContext?.styles?.footer,
+          ...footerStyle,
+          ...drawerStyles?.footer,
+        }}
+      >
         {footer}
       </div>
     );
@@ -95,7 +140,18 @@ const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
   return (
     <div className={`${prefixCls}-wrapper-body`} style={drawerStyle}>
       {headerNode}
-      <div className={`${prefixCls}-body`} style={bodyStyle}>
+      <div
+        className={classNames(
+          `${prefixCls}-body`,
+          drawerClassNames?.body,
+          drawerContext?.classNames?.body,
+        )}
+        style={{
+          ...drawerContext?.styles?.body,
+          ...bodyStyle,
+          ...drawerStyles?.body,
+        }}
+      >
         {children}
       </div>
       {footerNode}