From 0ef093478752339ca1d7ad0d71fa063365b78bf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= <wangning4567@163.com>
Date: Thu, 17 Mar 2022 17:48:56 +0800
Subject: [PATCH 1/3] feat: add rootClassName

---
 src/Dialog/Mask.tsx      | 7 ++++---
 src/Dialog/index.tsx     | 2 ++
 src/IDialogPropTypes.tsx | 1 +
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/Dialog/Mask.tsx b/src/Dialog/Mask.tsx
index 67982218..88da14ea 100644
--- a/src/Dialog/Mask.tsx
+++ b/src/Dialog/Mask.tsx
@@ -8,10 +8,11 @@ export type MaskProps = {
   motionName?: string;
   style?: React.CSSProperties;
   maskProps?: React.HTMLAttributes<HTMLDivElement>;
-}
+  rootClassName?: string;
+};
 
 export default function Mask(props: MaskProps) {
-  const { prefixCls, style, visible, maskProps, motionName } = props;
+  const { prefixCls, style, visible, maskProps, motionName, rootClassName } = props;
 
   return (
     <CSSMotion
@@ -23,7 +24,7 @@ export default function Mask(props: MaskProps) {
       {({ className: motionClassName, style: motionStyle }) => (
         <div
           style={{ ...motionStyle, ...style }}
-          className={classNames(`${prefixCls}-mask`, motionClassName)}
+          className={classNames(`${prefixCls}-mask`, motionClassName, rootClassName)}
           {...maskProps}
         />
       )}
diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx
index 25bb5c3b..022b7185 100644
--- a/src/Dialog/index.tsx
+++ b/src/Dialog/index.tsx
@@ -47,6 +47,7 @@ export default function Dialog(props: IDialogChildProps) {
     maskClosable = true,
     maskStyle,
     maskProps,
+    rootClassName,
   } = props;
 
   const lastOutSideActiveElementRef = useRef<HTMLElement>();
@@ -172,6 +173,7 @@ export default function Dialog(props: IDialogChildProps) {
           zIndex,
           ...maskStyle,
         }}
+        rootClassName={rootClassName}
         maskProps={maskProps}
       />
       <div
diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx
index b01d02d3..042b2d63 100644
--- a/src/IDialogPropTypes.tsx
+++ b/src/IDialogPropTypes.tsx
@@ -33,6 +33,7 @@ export type IDialogPropTypes = {
   zIndex?: number;
   bodyProps?: any;
   maskProps?: any;
+  rootClassName?: string;
   wrapProps?: any;
   getContainer?: GetContainer | false;
   closeIcon?: ReactNode;

From 5cf8f758ba76c963422b5acfe5036667a725e8f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= <wangning4567@163.com>
Date: Fri, 18 Mar 2022 11:14:58 +0800
Subject: [PATCH 2/3] feat: update rootClassName

---
 src/Dialog/Mask.tsx  | 5 ++---
 src/Dialog/index.tsx | 6 ++++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/Dialog/Mask.tsx b/src/Dialog/Mask.tsx
index 88da14ea..bd8e4d37 100644
--- a/src/Dialog/Mask.tsx
+++ b/src/Dialog/Mask.tsx
@@ -8,11 +8,10 @@ export type MaskProps = {
   motionName?: string;
   style?: React.CSSProperties;
   maskProps?: React.HTMLAttributes<HTMLDivElement>;
-  rootClassName?: string;
 };
 
 export default function Mask(props: MaskProps) {
-  const { prefixCls, style, visible, maskProps, motionName, rootClassName } = props;
+  const { prefixCls, style, visible, maskProps, motionName } = props;
 
   return (
     <CSSMotion
@@ -24,7 +23,7 @@ export default function Mask(props: MaskProps) {
       {({ className: motionClassName, style: motionStyle }) => (
         <div
           style={{ ...motionStyle, ...style }}
-          className={classNames(`${prefixCls}-mask`, motionClassName, rootClassName)}
+          className={classNames(`${prefixCls}-mask`, motionClassName)}
           {...maskProps}
         />
       )}
diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx
index 022b7185..f33792c7 100644
--- a/src/Dialog/index.tsx
+++ b/src/Dialog/index.tsx
@@ -164,7 +164,10 @@ export default function Dialog(props: IDialogChildProps) {
 
   // ========================= Render =========================
   return (
-    <div className={`${prefixCls}-root`} {...pickAttrs(props, { data: true })}>
+    <div
+      className={classNames(`${prefixCls}-root`, rootClassName)}
+      {...pickAttrs(props, { data: true })}
+    >
       <Mask
         prefixCls={prefixCls}
         visible={mask && visible}
@@ -173,7 +176,6 @@ export default function Dialog(props: IDialogChildProps) {
           zIndex,
           ...maskStyle,
         }}
-        rootClassName={rootClassName}
         maskProps={maskProps}
       />
       <div

From 0c30956884f2aec740245be3d0d55ef4dfd29874 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= <wangning4567@163.com>
Date: Fri, 18 Mar 2022 14:18:01 +0800
Subject: [PATCH 3/3] feat: add test case

---
 tests/__snapshots__/index.spec.tsx.snap | 97 +++++++++++++++++++++++++
 tests/index.spec.tsx                    | 38 ++++++++--
 2 files changed, 130 insertions(+), 5 deletions(-)
 create mode 100644 tests/__snapshots__/index.spec.tsx.snap

diff --git a/tests/__snapshots__/index.spec.tsx.snap b/tests/__snapshots__/index.spec.tsx.snap
new file mode 100644
index 00000000..113560a9
--- /dev/null
+++ b/tests/__snapshots__/index.spec.tsx.snap
@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`dialog add rootClassName should render correct 1`] = `
+<div
+  class="rc-dialog-root customize-root-class"
+>
+  <div
+    class="rc-dialog-mask"
+  />
+  <div
+    class="rc-dialog-wrap"
+    role="dialog"
+    style="font-size: 10px;"
+    tabindex="-1"
+  >
+    <div
+      class="rc-dialog"
+      role="document"
+      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-body"
+        />
+      </div>
+      <div
+        aria-hidden="true"
+        style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`dialog should render correct 1`] = `
+<div
+  class="rc-dialog-root"
+>
+  <div
+    class="rc-dialog-mask"
+  />
+  <div
+    class="rc-dialog-wrap"
+    role="dialog"
+    tabindex="-1"
+  >
+    <div
+      class="rc-dialog"
+      role="document"
+    >
+      <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-body"
+        />
+      </div>
+      <div
+        aria-hidden="true"
+        style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 2f1c3d5b..687819b3 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -17,6 +17,34 @@ describe('dialog', () => {
     jest.useRealTimers();
   });
 
+  it('should render correct', () => {
+    const wrapper = mount(<Dialog visible />);
+    jest.runAllTimers();
+    wrapper.update();
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  it('add rootClassName should render correct', () => {
+    const wrapper = mount(
+      <Dialog
+        visible
+        rootClassName="customize-root-class"
+        style={{ width: 600 }}
+        height={903}
+        wrapStyle={{ fontSize: 10 }}
+      />,
+    );
+    jest.runAllTimers();
+    wrapper.update();
+
+    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.find('.customize-root-class').length).toBeTruthy();
+    expect(wrapper.find('.rc-dialog-wrap').props().style.fontSize).toBe(10);
+    expect(wrapper.find('.rc-dialog').props().style.height).toEqual(903);
+    expect(wrapper.find('.rc-dialog').props().style.width).toEqual(600);
+  });
+
   it('show', () => {
     const wrapper = mount(<Dialog visible />);
     jest.runAllTimers();
@@ -92,10 +120,10 @@ describe('dialog', () => {
       jest.runAllTimers();
       wrapper.update();
 
-      ((document.getElementsByClassName('.test-input') as unknown) as HTMLInputElement).value =
+      (document.getElementsByClassName('.test-input') as unknown as HTMLInputElement).value =
         'test';
       expect(
-        ((document.getElementsByClassName('.test-input') as unknown) as HTMLInputElement).value,
+        (document.getElementsByClassName('.test-input') as unknown as HTMLInputElement).value,
       ).toBe('test');
 
       // Hide
@@ -109,7 +137,7 @@ describe('dialog', () => {
       wrapper.update();
 
       expect(
-        ((document.getElementsByClassName('.test-input') as unknown) as HTMLInputElement).value,
+        (document.getElementsByClassName('.test-input') as unknown as HTMLInputElement).value,
       ).toBeUndefined();
       wrapper.unmount();
     });
@@ -208,9 +236,9 @@ describe('dialog', () => {
   describe('Tab should keep focus in dialog', () => {
     it('basic tabbing', () => {
       const wrapper = mount(<Dialog visible />, { attachTo: document.body });
-      const sentinelEnd = (document.querySelectorAll(
+      const sentinelEnd = document.querySelectorAll(
         '.rc-dialog-content + div',
-      )[0] as unknown) as HTMLDivElement;
+      )[0] as unknown as HTMLDivElement;
       sentinelEnd.focus();
 
       wrapper.find('.rc-dialog-wrap').simulate('keyDown', {