Skip to content

Commit 2248edc

Browse files
thinkasanythinkasany
authored
feat: support section and title (#468)
1 parent c920f3f commit 2248edc

File tree

8 files changed

+38
-43
lines changed

8 files changed

+38
-43
lines changed

‎assets/bootstrap/Dialog.less‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,11 @@
3434
margin: 10px;
3535

3636
// Actual rc-dialog
37-
&-content {
37+
&-section {
3838
position: relative;
39-
background-color: @modal-content-bg;
40-
border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
41-
border: 1px solid @modal-content-border-color;
39+
background-color: @modal-section-bg;
40+
border: 1px solid @modal-section-fallback-border-color; //old browsers fallback (ie8 etc)
41+
border: 1px solid @modal-section-border-color;
4242
border-radius: @border-radius-large;
4343
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
4444
background-clip: padding-box;
@@ -124,7 +124,7 @@
124124
width: @modal-md;
125125
margin: 30px auto;
126126

127-
&-content {
127+
&-section {
128128
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
129129
}
130130
}

‎assets/bootstrap/variables.less‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -596,11 +596,11 @@
596596
@modal-title-line-height: @line-height-base;
597597

598598
//** Background color of modal content area
599-
@modal-content-bg: #fff;
599+
@modal-section-bg: #fff;
600600
//** Modal content border color
601-
@modal-content-border-color: rgba(0,0,0,.2);
601+
@modal-section-border-color: rgba(0,0,0,.2);
602602
//** Modal content border color **for IE8**
603-
@modal-content-fallback-border-color: #999;
603+
@modal-section-fallback-border-color: #999;
604604

605605
//** Modal backdrop background color
606606
@modal-backdrop-bg: #000;
@@ -866,4 +866,4 @@
866866
//** Point at which .dl-horizontal becomes horizontal
867867
@dl-horizontal-breakpoint: @grid-float-breakpoint;
868868
//** Horizontal line color.
869-
@hr-border: @gray-lighter;
869+
@hr-border: @gray-lighter;

‎assets/index/Dialog.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
font-weight: bold;
2323
}
2424

25-
&-content {
25+
&-section {
2626
position: relative;
2727
background-color: #ffffff;
2828
border: none;

‎src/Dialog/Content/Panel.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,11 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
9494
className={classNames(`${prefixCls}-header`, modalClassNames?.header)}
9595
style={{ ...modalStyles?.header }}
9696
>
97-
<div className={`${prefixCls}-title`} id={ariaId}>
97+
<div
98+
className={classNames(`${prefixCls}-title`, modalClassNames?.title)}
99+
id={ariaId}
100+
style={{ ...modalStyles?.title }}
101+
>
98102
{title}
99103
</div>
100104
</div>
@@ -111,7 +115,7 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
111115
}, [closable, closeIcon, prefixCls]);
112116

113117
const ariaProps = pickAttrs(closableObj, true);
114-
const closeBtnIsDisabled = typeof(closable) === 'object' && closable.disabled;
118+
const closeBtnIsDisabled = typeof closable === 'object' && closable.disabled;
115119

116120
const closerNode = closable ? (
117121
<button
@@ -128,8 +132,8 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
128132

129133
const content = (
130134
<div
131-
className={classNames(`${prefixCls}-content`, modalClassNames?.content)}
132-
style={modalStyles?.content}
135+
className={classNames(`${prefixCls}-section`, modalClassNames?.section)}
136+
style={modalStyles?.section}
133137
>
134138
{closerNode}
135139
{headerNode}

‎src/IDialogPropTypes.tsx‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,11 @@
11
import type { GetContainer } from 'rc-util/lib/PortalWrapper';
22
import type { CSSProperties, ReactNode, SyntheticEvent } from 'react';
33

4-
export interface ModalClassNames {
5-
header?: string;
6-
body?: string;
7-
footer?: string;
8-
mask?: string;
9-
content?: string;
10-
wrapper?: string;
11-
}
4+
export type SemanticName = 'header' | 'body' | 'footer' | 'section' | 'title' | 'wrapper' | 'mask';
125

13-
export interface ModalStyles {
14-
header?: CSSProperties;
15-
body?: CSSProperties;
16-
footer?: CSSProperties;
17-
mask?: CSSProperties;
18-
wrapper?: CSSProperties;
19-
content?: CSSProperties;
20-
}
6+
export type ModalClassNames = Partial<Record<SemanticName, string>>;
7+
8+
export type ModalStyles = Partial<Record<SemanticName, CSSProperties>>;
219

2210
export type IDialogPropTypes = {
2311
className?: string;
@@ -28,7 +16,7 @@ export type IDialogPropTypes = {
2816
afterClose?: () => any;
2917
afterOpenChange?: (open: boolean) => void;
3018
onClose?: (e: SyntheticEvent) => any;
31-
closable?: boolean | ({ closeIcon?: React.ReactNode; disabled?: boolean } & React.AriaAttributes);
19+
closable?: boolean | ({ closeIcon?: React.ReactNode; disabled?: boolean } & React.AriaAttributes);
3220
maskClosable?: boolean;
3321
visible?: boolean;
3422
destroyOnClose?: boolean;

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ exports[`dialog add rootClassName should render correct 1`] = `
2323
tabindex="0"
2424
>
2525
<div
26-
class="rc-dialog-content"
26+
class="rc-dialog-section"
2727
>
2828
<button
2929
aria-label="Close"
@@ -70,7 +70,7 @@ exports[`dialog should render correct 1`] = `
7070
tabindex="0"
7171
>
7272
<div
73-
class="rc-dialog-content"
73+
class="rc-dialog-section"
7474
>
7575
<button
7676
aria-label="Close"
@@ -128,7 +128,7 @@ exports[`dialog should support classNames 1`] = `
128128
tabindex="0"
129129
>
130130
<div
131-
class="rc-dialog-content custom-content"
131+
class="rc-dialog-section custom-section"
132132
>
133133
<button
134134
aria-label="Close"
@@ -193,7 +193,7 @@ exports[`dialog should support styles 1`] = `
193193
tabindex="0"
194194
>
195195
<div
196-
class="rc-dialog-content"
196+
class="rc-dialog-section"
197197
style="background: orange;"
198198
>
199199
<button
@@ -212,6 +212,7 @@ exports[`dialog should support styles 1`] = `
212212
<div
213213
class="rc-dialog-title"
214214
id="test-id"
215+
style="background: orange;"
215216
>
216217
Default
217218
</div>

‎tests/index.spec.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -399,7 +399,7 @@ describe('dialog', () => {
399399
}
400400
/>,
401401
);
402-
expect(modalRender.find('.rc-dialog-content').props().style.background).toEqual('#1890ff');
402+
expect(modalRender.find('.rc-dialog-section').props().style.background).toEqual('#1890ff');
403403
});
404404

405405
describe('focusTriggerAfterClose', () => {
@@ -589,7 +589,7 @@ describe('dialog', () => {
589589
footer: 'custom-footer',
590590
mask: 'custom-mask',
591591
wrapper: 'custom-wrapper',
592-
content: 'custom-content',
592+
section: 'custom-section',
593593
}}
594594
style={{ width: 600 }}
595595
height={903}
@@ -604,7 +604,7 @@ describe('dialog', () => {
604604
expect(wrapper.find('.rc-dialog-header').props().className).toContain('custom-header');
605605
expect(wrapper.find('.rc-dialog-footer').props().className).toContain('custom-footer');
606606
expect(wrapper.find('.rc-dialog-mask').props().className).toContain('custom-mask');
607-
expect(wrapper.find('.rc-dialog-content').props().className).toContain('custom-content');
607+
expect(wrapper.find('.rc-dialog-section').props().className).toContain('custom-section');
608608
});
609609

610610
it('should support styles', () => {
@@ -619,7 +619,8 @@ describe('dialog', () => {
619619
footer: { background: 'blue' },
620620
mask: { background: 'yellow' },
621621
wrapper: { background: 'pink' },
622-
content: { background: 'orange' },
622+
section: { background: 'orange' },
623+
title: { background: 'orange' },
623624
}}
624625
style={{ width: 600 }}
625626
height={903}
@@ -634,7 +635,8 @@ describe('dialog', () => {
634635
expect(wrapper.find('.rc-dialog-header').props().style.background).toBe('red');
635636
expect(wrapper.find('.rc-dialog-footer').props().style.background).toBe('blue');
636637
expect(wrapper.find('.rc-dialog-mask').props().style.background).toBe('yellow');
637-
expect(wrapper.find('.rc-dialog-content').props().style.background).toBe('orange');
638+
expect(wrapper.find('.rc-dialog-section').props().style.background).toBe('orange');
639+
expect(wrapper.find('.rc-dialog-title').props().style.background).toBe('orange');
638640
});
639641
it('should warning', () => {
640642
const spy = jest.spyOn(console, 'error').mockImplementation(() => {});

‎tests/portal.spec.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ describe('Dialog.Portal', () => {
3333
jest.runAllTimers();
3434
});
3535

36-
wrapper.find('.rc-dialog-content').simulate('mousedown');
36+
wrapper.find('.rc-dialog-section').simulate('mousedown');
3737
wrapper.find('.rc-select-item-option-content').simulate('click');
38-
wrapper.find('.rc-dialog-content').simulate('mouseup');
38+
wrapper.find('.rc-dialog-section').simulate('mouseup');
3939
expect(onClose).not.toHaveBeenCalled();
4040
});
4141

@@ -52,7 +52,7 @@ describe('Dialog.Portal', () => {
5252
jest.runAllTimers();
5353
});
5454

55-
wrapper.find('.rc-dialog-content').simulate('mousedown');
55+
wrapper.find('.rc-dialog-section').simulate('mousedown');
5656
wrapper.find('.rc-dialog-wrap').simulate('mouseup');
5757
expect(onClose).not.toHaveBeenCalled();
5858
});

0 commit comments

Comments
 (0)