Skip to content

Commit 8642a90

Browse files
mumiaomumiao
committed
feat: finish dialog interface
1 parent c8a7999 commit 8642a90

File tree

6 files changed

+211
-195
lines changed

6 files changed

+211
-195
lines changed

‎src/components/dialog/ConfirmDialog.tsx

+39-30
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import * as React from 'react';
2-
import { classNames, prefixClaName } from 'mo/common/className';
2+
import { classNames, getBEMElement, getBEMModifier, prefixClaName } from 'mo/common/className';
33
import Dialog, { IModalFuncProps } from './modal';
44
import ActionButton from './actionButton';
55

66
interface ConfirmDialogProps extends IModalFuncProps {
77
afterClose?: () => void;
88
close: (...args: any[]) => void;
9-
actions?: any;
9+
actions?: React.ReactNode;
1010
}
1111

12+
export const confirmClassName = prefixClaName('confirm');
13+
1214
const ConfirmDialog = (props: ConfirmDialogProps) => {
1315
const {
1416
actions,
@@ -23,30 +25,34 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
2325
centered,
2426
getContainer,
2527
maskStyle,
26-
okText = 'Save',
28+
okText = 'Ok',
2729
okButtonProps,
2830
cancelText = 'Cancel',
2931
cancelButtonProps,
30-
prefixCls,
3132
bodyStyle,
32-
closable = false,
33+
closable = true,
3334
closeIcon,
35+
className,
3436
okCancel,
37+
width = 520,
38+
style = {},
39+
mask = true,
40+
maskClosable = false,
41+
transitionName = 'zoom',
42+
maskTransitionName = 'fade',
3543
} = props;
36-
const contentPrefixCls = `${prefixCls}-confirm`;
37-
const width = props.width || 416;
38-
const style = props.style || {};
39-
const mask = props.mask === undefined ? true : props.mask;
40-
// 默认为 false，保持旧版默认行为
41-
const maskClosable =
42-
props.maskClosable === undefined ? false : props.maskClosable;
43-
const transitionName = props.transitionName || 'zoom';
44-
const maskTransitionName = props.maskTransitionName || 'fade';
44+
45+
const confirmDescriperClassName = getBEMElement(confirmClassName, `${props.type}`)
46+
const containerClassName = getBEMElement(confirmClassName, 'container');
47+
const indicatorClassName = getBEMElement(confirmClassName, 'indicator');
48+
const contentClassName = getBEMElement(confirmClassName, 'content');
49+
const messageClassName = getBEMElement(confirmClassName, 'message');
50+
const btnsClassName = getBEMElement(confirmClassName, 'btns');
4551

4652
const classString = classNames(
47-
contentPrefixCls,
48-
`${contentPrefixCls}-${props.type}`,
49-
props.className,
53+
confirmClassName,
54+
confirmDescriperClassName,
55+
className,
5056
);
5157

5258
const cancelButton = okCancel && (
@@ -58,12 +64,13 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
5864
{cancelText}
5965
</ActionButton>
6066
);
67+
6168
return (
6269
<Dialog
63-
prefixCls={prefixCls}
70+
prefixCls={confirmClassName}
6471
className={classString}
6572
wrapClassName={classNames({
66-
[`${contentPrefixCls}-centered`]: !!props.centered,
73+
[getBEMElement(confirmClassName, 'centered')]: !!props.centered,
6774
})}
6875
onCancel={() => close({ triggerCancel: true })}
6976
visible={visible}
@@ -84,19 +91,21 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
8491
closable={closable}
8592
closeIcon={closeIcon}
8693
>
87-
<div className={`${contentPrefixCls}-body`} style={bodyStyle}>
88-
<div className={`${contentPrefixCls}__icon`}> {icon} </div>
89-
<div className={`${contentPrefixCls}__message`}>
90-
{props.title !== undefined && (
91-
<span className={`${contentPrefixCls}__message--text`}>
92-
{props.title}
93-
</span>
94-
)}
95-
<div className={`${contentPrefixCls}__message--detail`}>
96-
{props.content}
94+
<div className={containerClassName} style={bodyStyle}>
95+
<div className={contentClassName}>
96+
<div className={indicatorClassName}> {icon} </div>
97+
<div className={messageClassName}>
98+
{props.title !== undefined && (
99+
<span className={getBEMModifier(messageClassName, 'text')}>
100+
{props.title}
101+
</span>
102+
)}
103+
<div className={`${getBEMModifier(messageClassName, 'detail')}`}>
104+
{props.content}
105+
</div>
97106
</div>
98107
</div>
99-
<div className={`${contentPrefixCls}__btns`}>
108+
<div className={btnsClassName}>
100109
{
101110
actions === undefined ? (
102111
<>

‎src/components/dialog/Modal.tsx

+29-21
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import * as React from 'react';
22
import Dialog from 'rc-dialog';
33
import { IDialogPropTypes } from 'rc-dialog/lib/IDialogPropTypes';
44

5-
import { classNames, prefixClaName, getBEMModifier } from 'mo/common/className';
5+
import { classNames, prefixClaName, getBEMElement ,getBEMModifier} from 'mo/common/className';
66
import { Icon } from 'mo/components/icon';
77
import { Button, IButton } from 'mo/components/button';
88

9-
let mousePosition;
9+
let mousePosition: any;
1010

1111
const getClickPosition = (e: MouseEvent) => {
1212
mousePosition = {
@@ -18,13 +18,15 @@ const getClickPosition = (e: MouseEvent) => {
1818
}, 100);
1919
};
2020

21-
// 只有点击事件支持从鼠标位置动画展开
2221
if (typeof window !== 'undefined' && window.document?.documentElement) {
2322
document.documentElement.addEventListener('click', getClickPosition, true);
2423
}
2524

2625
export const destroyFns: Array<() => void> = [];
2726

27+
export const modalClassName = prefixClaName('modal');
28+
29+
2830
export interface IModalProps extends IDialogPropTypes {
2931
onOk?: (e: React.MouseEvent<HTMLElement>) => void;
3032
onCancel?: (e: React.SyntheticEvent<Element, Event>) => void;
@@ -67,37 +69,43 @@ const Modal: React.FC<IModalProps> = (props) => {
6769
centered,
6870
getContainer,
6971
closeIcon,
70-
cancelText = 'Cancel',
72+
cancelText = 'Ok',
7173
okText = 'Save',
7274
...restProps
7375
} = props;
7476

75-
const prefixCls = prefixClaName('modal');
77+
const wrapClassNameExtended = classNames(wrapClassName, {
78+
[getBEMModifier(`${modalClassName}`, 'centered')]: !!centered,
79+
});
80+
81+
const closeClassName = getBEMElement(modalClassName, 'close');
82+
const closeDescriptorClassName = getBEMModifier(`${closeClassName}`, 'x');
7683

7784
const closeIconToRender = (
78-
<span className={getBEMModifier(`${prefixCls}-close`, 'x')}><Icon type="close"/></span>
85+
<span className={closeDescriptorClassName}><Icon type="close"/></span>
7986
);
8087

81-
const wrapClassNameExtended = classNames(wrapClassName, {
82-
[getBEMModifier(`${prefixCls}`, 'centered')]: !!centered,
83-
});
84-
console.log(props)
88+
const renderFooter = () => {
89+
const { footer, cancelButtonProps, okButtonProps } = props
90+
if (footer !== undefined) return footer
91+
return (
92+
<>
93+
<Button onClick={handleCancel} {...cancelButtonProps }>
94+
{cancelText}
95+
</Button>
96+
<Button onClick={handleOk} {...okButtonProps }>
97+
{okText}
98+
</Button>
99+
</>
100+
)
101+
}
85102
return (
86103
<Dialog
87104
{...restProps}
88105
getContainer={getContainer}
89-
prefixCls={prefixCls}
106+
prefixCls={modalClassName}
90107
wrapClassName={wrapClassNameExtended}
91-
footer={footer === undefined ? (
92-
<>
93-
<Button onClick={handleCancel} {...props.cancelButtonProps}>
94-
{cancelText}
95-
</Button>
96-
<Button onClick={handleOk} {...props.okButtonProps}>
97-
{okText}
98-
</Button>
99-
</>
100-
) : footer}
108+
footer={renderFooter()}
101109
visible={visible}
102110
mousePosition={mousePosition}
103111
onClose={handleCancel}

‎src/components/dialog/confirm.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import * as ReactDOM from 'react-dom';
33

4-
import { prefixClaName } from 'mo/common/className';
4+
import { Icon } from 'mo/components/icon';
55
import { IModalFuncProps, destroyFns } from './modal';
66
import ConfirmDialog from './ConfirmDialog';
77

@@ -49,7 +49,6 @@ export default function confirm(config: IModalFuncProps) {
4949
ReactDOM.render(
5050
<ConfirmDialog
5151
{...props}
52-
prefixCls={prefixClaName('modal')}
5352
okText={okText}
5453
cancelText={cancelText}
5554
/>,
@@ -62,7 +61,7 @@ export default function confirm(config: IModalFuncProps) {
6261
currentConfig = {
6362
...currentConfig,
6463
visible: false,
65-
afterClose: destroy.bind(this, ...args),
64+
// afterClose: destroy.bind(this, ...args),
6665
};
6766
render(currentConfig);
6867
}
@@ -80,6 +79,7 @@ export function withWarn(props: IModalFuncProps): IModalFuncProps {
8079
return {
8180
type: 'warning',
8281
okCancel: false,
82+
icon: <Icon type="warning"/>,
8383
...props,
8484
};
8585
}
@@ -88,6 +88,7 @@ export function withConfirm(props: IModalFuncProps): IModalFuncProps {
8888
return {
8989
type: 'confirm',
9090
okCancel: true,
91+
icon: <Icon type="warning"/>,
9192
...props,
9293
};
9394
}

0 commit comments

Comments
 (0)