feat: classNames & styles support content (#428)

react-component · Sep 22, 2023 · 2ea8730 · 2ea8730 · vercel · Sep 22, 2023
1 parent 0b0d4a0
commit 2ea8730
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/src/DrawerPopup.tsx b/src/DrawerPopup.tsx
@@ -313,8 +313,11 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
               id={id}
               containerRef={motionRef}
               prefixCls={prefixCls}
-              className={className}
-              style={style}
+              className={classNames(className, drawerClassNames?.content)}
+              style={{
+                ...style,
+                ...styles?.content,
+              }}
               {...eventHandlers}
             >
               {children}

diff --git a/src/inter.ts b/src/inter.ts
@@ -1,9 +1,11 @@
 export interface DrawerClassNames {
   mask?: string;
   wrapper?: string;
+  content?: string;
 }
 
 export interface DrawerStyles {
   mask?: React.CSSProperties;
   wrapper?: React.CSSProperties;
+  content?: React.CSSProperties;
 }
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -401,6 +401,7 @@ describe('rc-drawer-menu', () => {
       <Drawer classNames={{
         wrapper: 'customer-wrapper',
         mask: 'customer-mask',
+        content: 'customer-content',
       }} open />
     );
     expect(
@@ -409,13 +410,17 @@ describe('rc-drawer-menu', () => {
     expect(
       document.querySelector('.rc-drawer-mask')
     ).toHaveClass('customer-mask');
+    expect(
+      document.querySelector('.rc-drawer-content')
+    ).toHaveClass('customer-content');
     unmount();
   });
   it('should support styles', () => {
     const { unmount } = render(
       <Drawer styles={{
         wrapper: { background: 'red' },
         mask: { background: 'blue' },
+        content: { background: 'green' },
       }} open />
     );
     expect(
@@ -424,6 +429,9 @@ describe('rc-drawer-menu', () => {
     expect(
       document.querySelector('.rc-drawer-mask')
     ).toHaveStyle('background: blue');
+    expect(
+      document.querySelector('.rc-drawer-content')
+    ).toHaveStyle('background: green');
     unmount();
   });
 });