Skip to content

Commit 8b5537c

Browse files
heiyu4585heiyu4585
authored
feat: add rootClassName (#284)
* feat: add rootClassName * feat: update rootClassName * feat: add test case
1 parent 65f1f8c commit 8b5537c

File tree

5 files changed

+137
-7
lines changed

5 files changed

+137
-7
lines changed

‎src/Dialog/Mask.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export type MaskProps = {
88
motionName?: string;
99
style?: React.CSSProperties;
1010
maskProps?: React.HTMLAttributes<HTMLDivElement>;
11-
}
11+
};
1212

1313
export default function Mask(props: MaskProps) {
1414
const { prefixCls, style, visible, maskProps, motionName } = props;

‎src/Dialog/index.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export default function Dialog(props: IDialogChildProps) {
4747
maskClosable = true,
4848
maskStyle,
4949
maskProps,
50+
rootClassName,
5051
} = props;
5152

5253
const lastOutSideActiveElementRef = useRef<HTMLElement>();
@@ -163,7 +164,10 @@ export default function Dialog(props: IDialogChildProps) {
163164

164165
// ========================= Render =========================
165166
return (
166-
<div className={`${prefixCls}-root`} {...pickAttrs(props, { data: true })}>
167+
<div
168+
className={classNames(`${prefixCls}-root`, rootClassName)}
169+
{...pickAttrs(props, { data: true })}
170+
>
167171
<Mask
168172
prefixCls={prefixCls}
169173
visible={mask && visible}

‎src/IDialogPropTypes.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export type IDialogPropTypes = {
3333
zIndex?: number;
3434
bodyProps?: any;
3535
maskProps?: any;
36+
rootClassName?: string;
3637
wrapProps?: any;
3738
getContainer?: GetContainer | false;
3839
closeIcon?: ReactNode;

‎tests/__snapshots__/index.spec.tsx.snap‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`dialog add rootClassName should render correct 1`] = `
4+
<div
5+
class="rc-dialog-root customize-root-class"
6+
>
7+
<div
8+
class="rc-dialog-mask"
9+
/>
10+
<div
11+
class="rc-dialog-wrap"
12+
role="dialog"
13+
style="font-size: 10px;"
14+
tabindex="-1"
15+
>
16+
<div
17+
class="rc-dialog"
18+
role="document"
19+
style="width: 600px; height: 903px;"
20+
>
21+
<div
22+
aria-hidden="true"
23+
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
24+
tabindex="0"
25+
/>
26+
<div
27+
class="rc-dialog-content"
28+
>
29+
<button
30+
aria-label="Close"
31+
class="rc-dialog-close"
32+
type="button"
33+
>
34+
<span
35+
class="rc-dialog-close-x"
36+
/>
37+
</button>
38+
<div
39+
class="rc-dialog-body"
40+
/>
41+
</div>
42+
<div
43+
aria-hidden="true"
44+
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
45+
tabindex="0"
46+
/>
47+
</div>
48+
</div>
49+
</div>
50+
`;
51+
52+
exports[`dialog should render correct 1`] = `
53+
<div
54+
class="rc-dialog-root"
55+
>
56+
<div
57+
class="rc-dialog-mask"
58+
/>
59+
<div
60+
class="rc-dialog-wrap"
61+
role="dialog"
62+
tabindex="-1"
63+
>
64+
<div
65+
class="rc-dialog"
66+
role="document"
67+
>
68+
<div
69+
aria-hidden="true"
70+
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
71+
tabindex="0"
72+
/>
73+
<div
74+
class="rc-dialog-content"
75+
>
76+
<button
77+
aria-label="Close"
78+
class="rc-dialog-close"
79+
type="button"
80+
>
81+
<span
82+
class="rc-dialog-close-x"
83+
/>
84+
</button>
85+
<div
86+
class="rc-dialog-body"
87+
/>
88+
</div>
89+
<div
90+
aria-hidden="true"
91+
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
92+
tabindex="0"
93+
/>
94+
</div>
95+
</div>
96+
</div>
97+
`;

‎tests/index.spec.tsx‎

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,34 @@ describe('dialog', () => {
1717
jest.useRealTimers();
1818
});
1919

20+
it('should render correct', () => {
21+
const wrapper = mount(<Dialog visible />);
22+
jest.runAllTimers();
23+
wrapper.update();
24+
25+
expect(wrapper.render()).toMatchSnapshot();
26+
});
27+
28+
it('add rootClassName should render correct', () => {
29+
const wrapper = mount(
30+
<Dialog
31+
visible
32+
rootClassName="customize-root-class"
33+
style={{ width: 600 }}
34+
height={903}
35+
wrapStyle={{ fontSize: 10 }}
36+
/>,
37+
);
38+
jest.runAllTimers();
39+
wrapper.update();
40+
41+
expect(wrapper.render()).toMatchSnapshot();
42+
expect(wrapper.find('.customize-root-class').length).toBeTruthy();
43+
expect(wrapper.find('.rc-dialog-wrap').props().style.fontSize).toBe(10);
44+
expect(wrapper.find('.rc-dialog').props().style.height).toEqual(903);
45+
expect(wrapper.find('.rc-dialog').props().style.width).toEqual(600);
46+
});
47+
2048
it('show', () => {
2149
const wrapper = mount(<Dialog visible />);
2250
jest.runAllTimers();
@@ -92,10 +120,10 @@ describe('dialog', () => {
92120
jest.runAllTimers();
93121
wrapper.update();
94122

95-
((document.getElementsByClassName('.test-input') as unknown) as HTMLInputElement).value =
123+
(document.getElementsByClassName('.test-input') as unknown as HTMLInputElement).value =
96124
'test';
97125
expect(
98-
((document.getElementsByClassName('.test-input') as unknown) as HTMLInputElement).value,
126+
(document.getElementsByClassName('.test-input') as unknown as HTMLInputElement).value,
99127
).toBe('test');
100128

101129
// Hide
@@ -109,7 +137,7 @@ describe('dialog', () => {
109137
wrapper.update();
110138

111139
expect(
112-
((document.getElementsByClassName('.test-input') as unknown) as HTMLInputElement).value,
140+
(document.getElementsByClassName('.test-input') as unknown as HTMLInputElement).value,
113141
).toBeUndefined();
114142
wrapper.unmount();
115143
});
@@ -208,9 +236,9 @@ describe('dialog', () => {
208236
describe('Tab should keep focus in dialog', () => {
209237
it('basic tabbing', () => {
210238
const wrapper = mount(<Dialog visible />, { attachTo: document.body });
211-
const sentinelEnd = (document.querySelectorAll(
239+
const sentinelEnd = document.querySelectorAll(
212240
'.rc-dialog-content + div',
213-
)[0] as unknown) as HTMLDivElement;
241+
)[0] as unknown as HTMLDivElement;
214242
sentinelEnd.focus();
215243

216244
wrapper.find('.rc-dialog-wrap').simulate('keyDown', {

0 commit comments

Comments
 (0)