feat: dialog support classNames (#365)

Author: kiner-tang

README.md

@@ -53,6 +53,7 @@ ReactDOM.render(
 | ---------------------- | ------------------------------ | --------- | ------------------------------------------------------------------------------- | ------- |
 | prefixCls              | String                         | rc-dialog | The dialog dom node's prefixCls                                                 |         |
 | className              | String                         |           | additional className for dialog                                                 |         |
+| classNames             | { mask?: string; wrapper?: string; header?: string; body?: string; footer?: string} |           | pass className to target area |         |
 | style                  | Object                         | {}        | Root style for dialog element.Such as width, height                             |         |
 | zIndex                 | Number                         |           |                                                                                 |         |
 | bodyStyle              | Object                         | {}        | body style for dialog body element.Such as height                               |         |

src/Dialog/Content/Panel.tsx

@@ -42,6 +42,7 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
     forceRender,
     width,
     height,
+    classNames: modalClassNames,
   } = props;
 
   // ================================= Refs =================================
@@ -78,13 +79,13 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
   // ================================ Render ================================
   let footerNode: React.ReactNode;
   if (footer) {
-    footerNode = <div className={`${prefixCls}-footer`}>{footer}</div>;
+    footerNode = <div className={classNames(`${prefixCls}-footer`, modalClassNames?.footer)}>{footer}</div>;
   }
 
   let headerNode: React.ReactNode;
   if (title) {
     headerNode = (
-      <div className={`${prefixCls}-header`}>
+      <div className={classNames(`${prefixCls}-header`, modalClassNames?.header)}>
         <div className={`${prefixCls}-title`} id={ariaId}>
           {title}
         </div>
@@ -105,7 +106,7 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
     <div className={`${prefixCls}-content`}>
       {closer}
       {headerNode}
-      <div className={`${prefixCls}-body`} style={bodyStyle} {...bodyProps}>
+      <div className={classNames(`${prefixCls}-body`, modalClassNames?.body)} style={bodyStyle} {...bodyProps}>
         {children}
       </div>
       {footerNode}

src/Dialog/Mask.tsx

@@ -8,10 +8,11 @@ export type MaskProps = {
   motionName?: string;
   style?: React.CSSProperties;
   maskProps?: React.HTMLAttributes<HTMLDivElement>;
+  className?: string;
 };
 
 export default function Mask(props: MaskProps) {
-  const { prefixCls, style, visible, maskProps, motionName } = props;
+  const { prefixCls, style, visible, maskProps, motionName, className } = props;
 
   return (
     <CSSMotion
@@ -24,7 +25,7 @@ export default function Mask(props: MaskProps) {
         <div
           ref={ref}
           style={{ ...motionStyle, ...style }}
-          className={classNames(`${prefixCls}-mask`, motionClassName)}
+          className={classNames(`${prefixCls}-mask`, motionClassName, className)}
           {...maskProps}
         />
       )}

src/Dialog/index.tsx

@@ -41,6 +41,7 @@ export default function Dialog(props: IDialogPropTypes) {
     maskStyle,
     maskProps,
     rootClassName,
+    classNames: modalClassNames,
   } = props;
 
   const lastOutSideActiveElementRef = useRef<HTMLElement>();
@@ -169,11 +170,12 @@ export default function Dialog(props: IDialogPropTypes) {
           ...maskStyle,
         }}
         maskProps={maskProps}
+        className={modalClassNames?.mask}
       />
       <div
         tabIndex={-1}
         onKeyDown={onWrapperKeyDown}
-        className={classNames(`${prefixCls}-wrap`, wrapClassName)}
+        className={classNames(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper)}
         ref={wrapperRef}
         onClick={onWrapperClick}
         style={{ zIndex, ...wrapStyle, display: !animatedVisible ? 'none' : null }}

src/IDialogPropTypes.tsx

@@ -1,6 +1,15 @@
 import type { GetContainer } from 'rc-util/lib/PortalWrapper';
 import type { CSSProperties, ReactNode, SyntheticEvent } from 'react';
 
+
+export interface ModalClassNames {
+  header: string;
+  body: string;
+  footer: string;
+  mask: string;
+  wrapper: string;
+}
+
 export type IDialogPropTypes = {
   className?: string;
   keyboard?: boolean;
@@ -35,6 +44,7 @@ export type IDialogPropTypes = {
   bodyProps?: any;
   maskProps?: any;
   rootClassName?: string;
+  classNames?: ModalClassNames;
   wrapProps?: any;
   getContainer?: GetContainer | false;
   closeIcon?: ReactNode;

tests/__snapshots__/index.spec.tsx.snap

@@ -106,3 +106,68 @@ exports[`dialog should render correct 1`] = `
   </div>
 </div>
 `;
+
+exports[`dialog should support classNames 1`] = `
+<div
+  class="rc-dialog-root"
+>
+  <div
+    class="rc-dialog-mask custom-mask"
+  />
+  <div
+    class="rc-dialog-wrap custom-wrapper"
+    style="font-size: 10px;"
+    tabindex="-1"
+  >
+    <div
+      aria-labelledby="test-id"
+      aria-modal="true"
+      class="rc-dialog"
+      role="dialog"
+      style="width: 600px; height: 903px;"
+    >
+      <div
+        aria-hidden="true"
+        style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+        tabindex="0"
+      />
+      <div
+        class="rc-dialog-content"
+      >
+        <button
+          aria-label="Close"
+          class="rc-dialog-close"
+          type="button"
+        >
+          <span
+            class="rc-dialog-close-x"
+          />
+        </button>
+        <div
+          class="rc-dialog-header custom-header"
+        >
+          <div
+            class="rc-dialog-title"
+            id="test-id"
+          >
+            Default
+          </div>
+        </div>
+        <div
+          class="rc-dialog-body custom-body"
+        />
+        <div
+          class="rc-dialog-footer custom-footer"
+        >
+          Footer
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;

tests/index.spec.tsx

@@ -548,4 +548,34 @@ describe('dialog', () => {
       expect(afterOpenChange).toHaveBeenCalledTimes(2);
     });
   });
+
+  it('should support classNames', () => {
+    const wrapper = mount(
+      <Dialog
+        visible
+        title='Default'
+        footer='Footer'
+        classNames={{
+          header: 'custom-header',
+          body: 'custom-body',
+          footer: 'custom-footer',
+          mask: 'custom-mask',
+          wrapper: 'custom-wrapper',
+        }}
+        style={{ width: 600 }}
+        height={903}
+        wrapStyle={{ fontSize: 10 }}
+      />,
+    );
+    jest.runAllTimers();
+    wrapper.update();
+
+    expect(wrapper.render()).toMatchSnapshot();
+    console.log(wrapper.find('.rc-dialog-wrap').html())
+    expect(wrapper.find('.rc-dialog-wrap').props().className).toContain('custom-wrapper');
+    expect(wrapper.find('.rc-dialog-body').props().className).toContain('custom-body');
+    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');
+  });
 });