feat: classNames & styles support content (#368)

* feat: classNames & styles support content * feat: optimize code * feat: optimize code
react-component · Sep 22, 2023 · 956beac · 956beac
1 parent 9d0b1cd
commit 956beac
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx
@@ -104,7 +104,7 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
   }
 
   const content = (
-    <div className={`${prefixCls}-content`}>
+    <div className={classNames(`${prefixCls}-content`, modalClassNames?.content)} style={modalStyles?.content}>
       {closer}
       {headerNode}
       <div className={classNames(`${prefixCls}-body`, modalClassNames?.body)} style={{...bodyStyle, ...modalStyles?.body}} {...bodyProps}>

diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx
@@ -6,6 +6,7 @@ export interface ModalClassNames {
   body?: string;
   footer?: string;
   mask?: string;
+  content?: string;
   wrapper?: string;
 }
 
@@ -15,6 +16,7 @@ export interface ModalStyles {
   footer?: CSSProperties;
   mask?: CSSProperties;
   wrapper?: CSSProperties;
+  content?: CSSProperties;
 }
 
 export type IDialogPropTypes = {

diff --git a/tests/__snapshots__/index.spec.tsx.snap b/tests/__snapshots__/index.spec.tsx.snap
@@ -131,7 +131,7 @@ exports[`dialog should support classNames 1`] = `
         tabindex="0"
       />
       <div
-        class="rc-dialog-content"
+        class="rc-dialog-content custom-content"
       >
         <button
           aria-label="Close"
@@ -198,6 +198,7 @@ exports[`dialog should support styles 1`] = `
       />
       <div
         class="rc-dialog-content"
+        style="background: orange;"
       >
         <button
           aria-label="Close"

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -563,6 +563,7 @@ describe('dialog', () => {
           footer: 'custom-footer',
           mask: 'custom-mask',
           wrapper: 'custom-wrapper',
+          content: 'custom-content',
         }}
         style={{ width: 600 }}
         height={903}
@@ -577,6 +578,8 @@ describe('dialog', () => {
     expect(wrapper.find('.rc-dialog-header').props().className).toContain('custom-header');
     expect(wrapper.find('.rc-dialog-footer').props().className).toContain('custom-footer');
     expect(wrapper.find('.rc-dialog-mask').props().className).toContain('custom-mask');
+    expect(wrapper.find('.rc-dialog-content').props().className).toContain('custom-content');
+
   });
 
   it('should support styles', () => {
@@ -591,6 +594,7 @@ describe('dialog', () => {
           footer: { background: 'blue' },
           mask: { background: 'yellow' },
           wrapper: { background: 'pink' },
+          content: { background: 'orange' },
         }}
         style={{ width: 600 }}
         height={903}
@@ -605,6 +609,7 @@ describe('dialog', () => {
     expect(wrapper.find('.rc-dialog-header').props().style.background).toBe('red');
     expect(wrapper.find('.rc-dialog-footer').props().style.background).toBe('blue');
     expect(wrapper.find('.rc-dialog-mask').props().style.background).toBe('yellow');
+    expect(wrapper.find('.rc-dialog-content').props().style.background).toBe('orange');
   });
   it('should warning', () => {
     const spy = jest.spyOn(console, 'error').mockImplementation(() => {});