2017-11-17 14:38:54 +08:00
|
|
|
import * as React from 'react';
|
2016-01-12 17:07:24 +08:00
|
|
|
import Dialog from 'rc-dialog';
|
2018-08-07 21:07:52 +08:00
|
|
|
import * as PropTypes from 'prop-types';
|
2018-07-31 17:05:07 +08:00
|
|
|
import classNames from 'classnames';
|
2016-06-16 22:34:54 +08:00
|
|
|
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
2017-07-17 09:40:55 +08:00
|
|
|
import Button from '../button';
|
2018-06-22 19:56:42 +08:00
|
|
|
import { ButtonType, NativeButtonProps } from '../button/button';
|
2017-10-20 14:54:38 +08:00
|
|
|
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
2017-09-26 23:12:47 +08:00
|
|
|
import { getConfirmLocale } from './locale';
|
2018-08-02 18:02:43 +08:00
|
|
|
import Icon from '../icon';
|
2016-01-12 17:07:24 +08:00
|
|
|
|
2017-11-21 17:16:48 +08:00
|
|
|
let mousePosition: { x: number, y: number } | null;
|
|
|
|
let mousePositionEventBinded: boolean;
|
2016-01-12 17:07:24 +08:00
|
|
|
|
2016-08-15 12:00:05 +08:00
|
|
|
export interface ModalProps {
|
|
|
|
/** 对话框是否可见*/
|
|
|
|
visible?: boolean;
|
|
|
|
/** 确定按钮 loading*/
|
|
|
|
confirmLoading?: boolean;
|
|
|
|
/** 标题*/
|
2016-09-19 10:17:07 +08:00
|
|
|
title?: React.ReactNode | string;
|
2016-08-15 12:00:05 +08:00
|
|
|
/** 是否显示右上角的关闭按钮*/
|
|
|
|
closable?: boolean;
|
|
|
|
/** 点击确定回调*/
|
2017-02-24 16:07:39 +08:00
|
|
|
onOk?: (e: React.MouseEvent<any>) => void;
|
2016-09-20 08:58:20 +08:00
|
|
|
/** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调*/
|
2016-10-19 17:51:33 +08:00
|
|
|
onCancel?: (e: React.MouseEvent<any>) => void;
|
2017-01-05 12:08:43 +08:00
|
|
|
afterClose?: () => void;
|
2018-07-31 17:05:07 +08:00
|
|
|
/** 居中 */
|
|
|
|
centered?: boolean;
|
2016-08-15 12:00:05 +08:00
|
|
|
/** 宽度*/
|
|
|
|
width?: string | number;
|
|
|
|
/** 底部内容*/
|
|
|
|
footer?: React.ReactNode;
|
|
|
|
/** 确认按钮文字*/
|
|
|
|
okText?: string;
|
2017-07-16 17:42:02 +08:00
|
|
|
/** 确认按钮类型*/
|
|
|
|
okType?: ButtonType;
|
2016-08-15 12:00:05 +08:00
|
|
|
/** 取消按钮文字*/
|
|
|
|
cancelText?: string;
|
|
|
|
/** 点击蒙层是否允许关闭*/
|
|
|
|
maskClosable?: boolean;
|
2018-06-22 19:56:42 +08:00
|
|
|
okButtonProps?: NativeButtonProps;
|
|
|
|
cancelButtonProps?: NativeButtonProps;
|
2017-12-28 15:13:06 +08:00
|
|
|
destroyOnClose?: boolean;
|
2016-08-15 12:00:05 +08:00
|
|
|
style?: React.CSSProperties;
|
|
|
|
wrapClassName?: string;
|
|
|
|
maskTransitionName?: string;
|
|
|
|
transitionName?: string;
|
|
|
|
className?: string;
|
2017-05-24 10:00:59 +08:00
|
|
|
getContainer?: (instance: React.ReactInstance) => HTMLElement;
|
2017-09-15 21:41:32 +08:00
|
|
|
zIndex?: number;
|
2017-12-01 10:29:48 +08:00
|
|
|
bodyStyle?: React.CSSProperties;
|
|
|
|
maskStyle?: React.CSSProperties;
|
|
|
|
mask?: boolean;
|
2018-02-11 13:44:59 +08:00
|
|
|
keyboard?: boolean;
|
2018-06-15 03:08:51 +08:00
|
|
|
wrapProps?: any;
|
2018-08-02 18:02:43 +08:00
|
|
|
prefixCls?: string;
|
2016-08-15 12:00:05 +08:00
|
|
|
}
|
|
|
|
|
2017-03-03 11:40:54 +08:00
|
|
|
export interface ModalFuncProps {
|
2017-11-21 17:16:48 +08:00
|
|
|
prefixCls?: string;
|
|
|
|
className?: string;
|
2017-03-03 11:40:54 +08:00
|
|
|
visible?: boolean;
|
2017-11-21 17:16:48 +08:00
|
|
|
title?: React.ReactNode;
|
|
|
|
content?: React.ReactNode;
|
|
|
|
onOk?: (...args: any[]) => any | PromiseLike<any>;
|
|
|
|
onCancel?: (...args: any[]) => any | PromiseLike<any>;
|
2018-09-30 14:50:03 +08:00
|
|
|
okButtonProps?: NativeButtonProps;
|
|
|
|
cancelButtonProps?: NativeButtonProps;
|
2018-07-31 17:05:07 +08:00
|
|
|
centered?: boolean;
|
2017-03-03 11:40:54 +08:00
|
|
|
width?: string | number;
|
|
|
|
iconClassName?: string;
|
|
|
|
okText?: string;
|
2017-07-16 17:42:02 +08:00
|
|
|
okType?: ButtonType;
|
2017-03-03 11:40:54 +08:00
|
|
|
cancelText?: string;
|
|
|
|
iconType?: string;
|
2017-07-17 15:26:37 +08:00
|
|
|
maskClosable?: boolean;
|
2017-09-15 22:51:03 +08:00
|
|
|
zIndex?: number;
|
2017-11-21 17:16:48 +08:00
|
|
|
okCancel?: boolean;
|
|
|
|
style?: React.CSSProperties;
|
2018-10-27 18:54:52 +08:00
|
|
|
maskStyle?: React.CSSProperties;
|
2017-11-21 17:16:48 +08:00
|
|
|
type?: string;
|
2018-02-11 13:44:59 +08:00
|
|
|
keyboard?: boolean;
|
2018-08-25 21:24:18 +08:00
|
|
|
getContainer?: (instance: React.ReactInstance) => HTMLElement;
|
2018-09-29 17:00:01 +08:00
|
|
|
autoFocusButton?: null | 'ok' | 'cancel';
|
2017-03-03 11:40:54 +08:00
|
|
|
}
|
2017-11-21 17:16:48 +08:00
|
|
|
|
2017-03-03 11:40:54 +08:00
|
|
|
export type ModalFunc = (props: ModalFuncProps) => {
|
2017-03-23 21:15:49 +08:00
|
|
|
destroy: () => void,
|
2018-09-23 00:58:04 +08:00
|
|
|
update: (newConfig: ModalFuncProps) => void,
|
2017-03-23 21:15:49 +08:00
|
|
|
};
|
2017-03-03 11:40:54 +08:00
|
|
|
|
2017-11-21 17:16:48 +08:00
|
|
|
export interface ModalLocale {
|
|
|
|
okText: string;
|
|
|
|
cancelText: string;
|
|
|
|
justOkText: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export default class Modal extends React.Component<ModalProps, {}> {
|
2017-03-03 11:40:54 +08:00
|
|
|
static info: ModalFunc;
|
|
|
|
static success: ModalFunc;
|
|
|
|
static error: ModalFunc;
|
|
|
|
static warn: ModalFunc;
|
|
|
|
static warning: ModalFunc;
|
|
|
|
static confirm: ModalFunc;
|
2016-08-15 12:00:05 +08:00
|
|
|
|
2016-03-29 17:33:37 +08:00
|
|
|
static defaultProps = {
|
|
|
|
prefixCls: 'ant-modal',
|
|
|
|
width: 520,
|
|
|
|
transitionName: 'zoom',
|
2016-04-04 17:38:39 +08:00
|
|
|
maskTransitionName: 'fade',
|
2016-03-29 17:33:37 +08:00
|
|
|
confirmLoading: false,
|
|
|
|
visible: false,
|
2018-04-10 10:50:59 +08:00
|
|
|
okType: 'primary' as ButtonType,
|
2018-06-22 19:56:42 +08:00
|
|
|
okButtonDisabled: false,
|
|
|
|
cancelButtonDisabled: false,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-03 17:43:38 +08:00
|
|
|
|
2016-03-29 17:33:37 +08:00
|
|
|
static propTypes = {
|
2016-03-14 11:46:48 +08:00
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
onOk: PropTypes.func,
|
|
|
|
onCancel: PropTypes.func,
|
|
|
|
okText: PropTypes.node,
|
|
|
|
cancelText: PropTypes.node,
|
2018-07-31 17:05:07 +08:00
|
|
|
centered: PropTypes.bool,
|
2016-03-14 11:46:48 +08:00
|
|
|
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
|
|
confirmLoading: PropTypes.bool,
|
|
|
|
visible: PropTypes.bool,
|
|
|
|
align: PropTypes.object,
|
|
|
|
footer: PropTypes.node,
|
|
|
|
title: PropTypes.node,
|
|
|
|
closable: PropTypes.bool,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-14 11:46:48 +08:00
|
|
|
|
2017-11-21 17:16:48 +08:00
|
|
|
handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
|
2016-10-24 12:04:26 +08:00
|
|
|
const onCancel = this.props.onCancel;
|
|
|
|
if (onCancel) {
|
|
|
|
onCancel(e);
|
|
|
|
}
|
2016-03-29 17:33:37 +08:00
|
|
|
}
|
2016-01-12 17:07:24 +08:00
|
|
|
|
2017-11-21 17:16:48 +08:00
|
|
|
handleOk = (e: React.MouseEvent<HTMLButtonElement>) => {
|
2016-10-24 12:04:26 +08:00
|
|
|
const onOk = this.props.onOk;
|
|
|
|
if (onOk) {
|
2017-02-24 16:07:39 +08:00
|
|
|
onOk(e);
|
2016-10-24 12:04:26 +08:00
|
|
|
}
|
2016-03-29 17:33:37 +08:00
|
|
|
}
|
2016-01-12 17:07:24 +08:00
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
if (mousePositionEventBinded) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
// 只有点击事件支持从鼠标位置动画展开
|
2017-07-29 14:17:02 +08:00
|
|
|
addEventListener(document.documentElement, 'click', (e: MouseEvent) => {
|
2016-01-12 17:07:24 +08:00
|
|
|
mousePosition = {
|
|
|
|
x: e.pageX,
|
2016-05-11 09:32:33 +08:00
|
|
|
y: e.pageY,
|
2016-01-12 17:07:24 +08:00
|
|
|
};
|
2016-10-07 18:00:40 +08:00
|
|
|
// 100ms 内发生过点击事件,则从点击位置动画展示
|
2016-01-12 17:07:24 +08:00
|
|
|
// 否则直接 zoom 展示
|
|
|
|
// 这样可以兼容非点击方式展开
|
2016-10-07 18:00:40 +08:00
|
|
|
setTimeout(() => mousePosition = null, 100);
|
2016-01-12 17:07:24 +08:00
|
|
|
});
|
|
|
|
mousePositionEventBinded = true;
|
2016-03-29 17:33:37 +08:00
|
|
|
}
|
2016-01-12 17:07:24 +08:00
|
|
|
|
2017-11-21 17:16:48 +08:00
|
|
|
renderFooter = (locale: ModalLocale) => {
|
2017-10-20 14:54:38 +08:00
|
|
|
const { okText, okType, cancelText, confirmLoading } = this.props;
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<Button
|
|
|
|
onClick={this.handleCancel}
|
2018-06-22 19:56:42 +08:00
|
|
|
{...this.props.cancelButtonProps}
|
2017-10-20 14:54:38 +08:00
|
|
|
>
|
|
|
|
{cancelText || locale.cancelText}
|
|
|
|
</Button>
|
|
|
|
<Button
|
|
|
|
type={okType}
|
|
|
|
loading={confirmLoading}
|
|
|
|
onClick={this.handleOk}
|
2018-06-22 19:56:42 +08:00
|
|
|
{...this.props.okButtonProps}
|
2017-10-20 14:54:38 +08:00
|
|
|
>
|
|
|
|
{okText || locale.okText}
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2016-03-03 17:43:38 +08:00
|
|
|
|
2017-10-20 14:54:38 +08:00
|
|
|
render() {
|
2018-08-01 10:50:34 +08:00
|
|
|
const { footer, visible, wrapClassName, centered, prefixCls, ...restProps } = this.props;
|
2016-03-03 17:43:38 +08:00
|
|
|
|
2017-10-20 14:54:38 +08:00
|
|
|
const defaultFooter = (
|
|
|
|
<LocaleReceiver
|
|
|
|
componentName="Modal"
|
|
|
|
defaultLocale={getConfirmLocale()}
|
2016-06-06 13:54:10 +08:00
|
|
|
>
|
2017-10-20 14:54:38 +08:00
|
|
|
{this.renderFooter}
|
|
|
|
</LocaleReceiver>
|
|
|
|
);
|
2016-08-29 20:48:47 +08:00
|
|
|
|
2018-08-02 18:02:43 +08:00
|
|
|
const closeIcon = (
|
|
|
|
<span className={`${prefixCls}-close-x`}>
|
|
|
|
<Icon className={`${prefixCls}-close-icon`} type={'close'}/>
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
|
2016-01-13 22:22:33 +08:00
|
|
|
return (
|
2016-08-29 20:48:47 +08:00
|
|
|
<Dialog
|
2018-07-31 17:05:07 +08:00
|
|
|
{...restProps}
|
2018-07-31 18:38:07 +08:00
|
|
|
prefixCls={prefixCls}
|
2018-08-01 10:50:34 +08:00
|
|
|
wrapClassName={classNames({ [`${prefixCls}-centered`]: !!centered }, wrapClassName)}
|
2017-11-30 17:24:51 +08:00
|
|
|
footer={footer === undefined ? defaultFooter : footer}
|
2016-08-29 20:48:47 +08:00
|
|
|
visible={visible}
|
|
|
|
mousePosition={mousePosition}
|
2017-11-30 17:24:51 +08:00
|
|
|
onClose={this.handleCancel}
|
2018-08-02 18:02:43 +08:00
|
|
|
closeIcon={closeIcon}
|
2016-06-06 13:54:10 +08:00
|
|
|
/>
|
2016-01-13 22:22:33 +08:00
|
|
|
);
|
2016-01-12 17:07:24 +08:00
|
|
|
}
|
2016-03-29 17:33:37 +08:00
|
|
|
}
|