Skip to content

Commit 4356e19

Browse files
author
mumiao
authored
refactor: optimize modal confirm button style and fix redundacy heade… (#810)
* refactor: optimize modal confirm button style and fix redundacy header for confirmDialog Component * fix: resolve modal.confirm can not destory problems * ci: fix closeModal rename problems * ci: fix lint error * test: fix test cases * test: correct test cases * fix: correct ActionButtonProps interface
1 parent f8451eb commit 4356e19

File tree

9 files changed

+62
-70
lines changed

9 files changed

+62
-70
lines changed

‎src/components/dialog/__tests__/__snapshots__/actionbutton.test.tsx.snap‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
exports[`Test ActionButton Component Match ActionButton Snapshot 1`] = `
44
<button
55
className="mo-btn mo-btn--normal"
6-
closeModal={[MockFunction]}
76
onClick={[Function]}
87
/>
98
`;

‎src/components/dialog/__tests__/actionbutton.test.tsx‎

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,48 +4,34 @@ import renderer from 'react-test-renderer';
44

55
import ActionButton from '../actionButton';
66

7-
const TEST_ID = 'test-id';
8-
97
describe('Test ActionButton Component', () => {
108
test('Match ActionButton Snapshot', () => {
119
const TEST_FN = jest.fn();
1210
const component = renderer.create(
13-
<ActionButton closeModal={TEST_FN}></ActionButton>
11+
<ActionButton close={TEST_FN}></ActionButton>
1412
);
1513
const tree = component.toJSON();
16-
1714
expect(tree).toMatchSnapshot();
1815
});
1916

2017
test('The ActionButton actionFn', () => {
2118
const ACTION_FN = jest.fn(() => false);
2219
const MODAL_FN = jest.fn();
23-
const wrapper = render(
24-
<ActionButton
25-
data-testid={TEST_ID}
26-
actionFn={ACTION_FN}
27-
closeModal={MODAL_FN}
28-
/>
20+
const { container } = render(
21+
<ActionButton actionFn={ACTION_FN} close={MODAL_FN} />
2922
);
30-
const button = wrapper.getByTestId(TEST_ID);
31-
32-
fireEvent.click(button);
23+
fireEvent.click(container.querySelector('.mo-btn')!);
3324
expect(ACTION_FN).toBeCalled();
3425
expect(MODAL_FN).toBeCalled();
3526
});
3627

37-
test('The ActionButton closeModal', () => {
28+
test('The ActionButton close', () => {
3829
const CLOSE_FN = jest.fn();
3930
const ACTION_FN = jest.fn(() => Promise.resolve(1));
40-
const wrapper = render(
41-
<ActionButton
42-
data-testid={TEST_ID}
43-
actionFn={ACTION_FN}
44-
closeModal={CLOSE_FN}
45-
/>
31+
const { container } = render(
32+
<ActionButton actionFn={ACTION_FN} close={CLOSE_FN} />
4633
);
47-
const button = wrapper.getByTestId(TEST_ID);
48-
34+
const button = container.querySelector('.mo-btn')!;
4935
fireEvent.click(button);
5036
expect(ACTION_FN).toBeCalled();
5137
});

‎src/components/dialog/__tests__/confirm.test.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,6 @@ describe('Test Confirm Component', () => {
6868
const icon = querySelector('.codicon-warning');
6969
expect(icon).not.toBeNull();
7070

71-
const title = querySelector('.mo-modal-title');
72-
expect(title?.textContent).toBe(TEST_TITLE);
73-
7471
const confirmTitle = querySelector(`.${textConfirmClassName}`);
7572
expect(confirmTitle?.textContent).toBe(TEST_TITLE);
7673

‎src/components/dialog/actionButton.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
import React, { useRef } from 'react';
22
import { Button, IButtonProps } from 'mo/components/button';
3-
export interface ActionButtonProps extends IButtonProps {
3+
export interface ActionButtonProps {
44
actionFn?: (...args: any[]) => any | PromiseLike<any>;
5-
closeModal: Function;
5+
close?: Function;
6+
buttonProps?: IButtonProps;
7+
children?: React.ReactNode;
68
}
79

810
const ActionButton: React.FC<ActionButtonProps> = (props) => {
911
const clickedRef = useRef<boolean>(false);
12+
const { close } = props;
1013

1114
const handlePromiseOnOk = (returnValueOfOnOk?: PromiseLike<any>) => {
12-
const { closeModal } = props;
1315
if (!returnValueOfOnOk || !returnValueOfOnOk.then) {
1416
return;
1517
}
1618
returnValueOfOnOk.then(
1719
(...args: any[]) => {
18-
closeModal(...args);
20+
close?.(...args);
1921
},
2022
(e: Error) => {
2123
// eslint-disable-next-line no-console
@@ -26,32 +28,32 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
2628
};
2729

2830
const onClick = () => {
29-
const { actionFn, closeModal } = props;
31+
const { actionFn, close } = props;
3032
if (clickedRef.current) {
3133
return;
3234
}
3335
clickedRef.current = true;
3436
if (!actionFn) {
35-
closeModal();
37+
close?.();
3638
return;
3739
}
3840
let returnValueOfOnOk;
3941
if (actionFn!.length) {
40-
returnValueOfOnOk = actionFn(closeModal);
42+
returnValueOfOnOk = actionFn(close);
4143
clickedRef.current = false;
4244
} else {
4345
returnValueOfOnOk = actionFn();
4446
if (!returnValueOfOnOk) {
45-
closeModal();
47+
close?.();
4648
return;
4749
}
4850
}
4951
handlePromiseOnOk(returnValueOfOnOk);
5052
};
5153

52-
const { children, ...resetProps } = props;
54+
const { children, buttonProps } = props;
5355
return (
54-
<Button onClick={onClick} {...resetProps}>
56+
<Button onClick={onClick} {...buttonProps}>
5557
{children}
5658
</Button>
5759
);

‎src/components/dialog/confirm.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function confirm(config: IModalFuncProps) {
1818
const div = document.createElement('div');
1919
document.body.appendChild(div);
2020
// eslint-disable-next-line @typescript-eslint/no-use-before-define
21-
let currentConfig = { ...config, close, visible: true } as any;
21+
const currentConfig = { ...config, close, visible: true } as any;
2222

2323
function destroy(...args: any[]) {
2424
const triggerCancel = args.some(
@@ -46,21 +46,16 @@ export default function confirm(config: IModalFuncProps) {
4646
function render({ okText, cancelText, ...props }: any) {
4747
renderUtils(
4848
<ConfirmDialog
49-
{...props}
5049
okText={okText}
5150
cancelText={cancelText}
51+
{...props}
5252
/>,
5353
div
5454
);
5555
}
5656

5757
function close(...args: any[]) {
58-
currentConfig = {
59-
...currentConfig,
60-
visible: false,
61-
afterClose: () => destroy(...args),
62-
};
63-
render(currentConfig);
58+
destroy(...args);
6459
}
6560

6661
render(currentConfig);

‎src/components/dialog/confirmDialog.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -29,26 +29,25 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
2929
onOk,
3030
close,
3131
maskStyle,
32-
okText = 'delete',
32+
okText = 'Ok',
3333
okButtonProps,
34-
cancelText = 'cancel',
34+
cancelText = 'Cancel',
3535
cancelButtonProps,
36+
okCancel,
3637
bodyStyle,
37-
closable = true,
38+
closable = false,
3839
className,
39-
okCancel,
4040
width = 520,
4141
style = {},
4242
mask = true,
4343
maskClosable = false,
4444
transitionName = 'zoom',
4545
maskTransitionName = 'fade',
4646
type,
47-
...resetProps
47+
visible,
4848
} = props;
4949

5050
const confirmDescriperClassName = iconConfirmClassName(type);
51-
5251
const classString = classNames(
5352
confirmClassName,
5453
confirmDescriperClassName,
@@ -58,8 +57,8 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
5857
const cancelButton = okCancel && (
5958
<ActionButton
6059
actionFn={onCancel}
61-
closeModal={close}
62-
{...cancelButtonProps}
60+
close={close}
61+
buttonProps={cancelButtonProps}
6362
>
6463
{cancelText}
6564
</ActionButton>
@@ -73,16 +72,17 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
7372
[centeredConfirmClassName]: !!props.centered,
7473
})}
7574
onCancel={() => close({ triggerCancel: true })}
76-
title=""
7775
transitionName={transitionName}
78-
footer=""
7976
maskTransitionName={maskTransitionName}
8077
mask={mask}
8178
maskClosable={maskClosable}
8279
style={style}
8380
width={width}
8481
closable={closable}
85-
{...resetProps}
82+
footer=""
83+
title=""
84+
maskStyle={maskStyle}
85+
visible={visible}
8686
>
8787
<div className={containerConfirmClassName} style={bodyStyle}>
8888
<div className={contentConfirmClassName}>
@@ -105,8 +105,8 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
105105
{
106106
<ActionButton
107107
actionFn={onOk}
108-
closeModal={close}
109-
{...okButtonProps}
108+
close={close}
109+
buttonProps={okButtonProps}
110110
>
111111
{okText}
112112
</ActionButton>

‎src/components/dialog/modal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,8 @@ export const Modal: React.FC<IModalProps> = (props: IModalProps) => {
8989
centered,
9090
getContainer,
9191
closeIcon,
92-
cancelText = 'cancel',
93-
okText = 'ok',
92+
cancelText = 'Cancel',
93+
okText = 'Ok',
9494
...restProps
9595
} = props;
9696

‎src/components/dialog/style.scss‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,14 @@
6767
}
6868

6969
&-footer {
70+
border-radius: 0 0 2px 2px;
7071
display: flex;
71-
font-size: 13px;
72+
flex-direction: row;
7273
justify-content: flex-end;
73-
padding: 20px 10px 10px;
74+
padding: 10px 16px;
7475

75-
.mo-botton {
76+
.mo-btn {
77+
margin-left: 8px;
7678
width: fit-content;
7779
}
7880
}
@@ -98,10 +100,10 @@
98100
&--x {
99101
display: block;
100102
font-size: 16px;
101-
height: 40px;
103+
height: 54px;
102104
line-height: 40px;
103105
text-align: center;
104-
width: 40px;
106+
width: 54px;
105107
}
106108
}
107109
}
@@ -155,7 +157,13 @@
155157

156158
&__btns {
157159
display: flex;
160+
flex-direction: row;
158161
justify-content: flex-end;
159-
padding: 20px 10px 10px;
162+
padding: 10px 16px;
163+
164+
.mo-btn {
165+
margin-left: 8px;
166+
width: fit-content;
167+
}
160168
}
161169
}

‎stories/components/17-Dialog.stories.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,19 @@ stories.add('Basic Usage', () => {
2424

2525
function showConfirm() {
2626
confirm({
27-
title: 'Are you sure you want to permanently delete ?',
28-
content: 'This action is irreversible!',
29-
cancelButtonProps: { disabled: true },
27+
title: 'Tweet us your feedback',
28+
content: (
29+
<div>
30+
<p>Some contents...</p>
31+
<p>Some contents...</p>
32+
<p>Some contents...</p>
33+
</div>
34+
),
3035
onOk() {
31-
console.log('OK');
36+
console.log('onOk');
3237
},
3338
onCancel() {
34-
console.log('Cancel');
39+
console.log('onCancel');
3540
},
3641
});
3742
}

0 commit comments

Comments
 (0)