feat: classNames & styles support content

react-component · Sep 22, 2023 · e896a1b · e896a1b
1 parent 9d0b1cd
commit e896a1b
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
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/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(() => {});