ant-design/components/modal/Modal.tsx

155 lines
3.7 KiB
TypeScript
Raw Normal View History

2016-07-07 20:25:03 +08:00
import { PropTypes } from 'react';
2016-09-21 11:54:53 +08:00
import React from 'react';
2016-01-12 17:07:24 +08:00
import Dialog from 'rc-dialog';
2016-06-16 22:34:54 +08:00
import addEventListener from 'rc-util/lib/Dom/addEventListener';
2016-01-12 17:07:24 +08:00
import Button from '../button';
let mousePosition;
let mousePositionEventBinded;
export interface ModalProps {
/** 对话框是否可见*/
visible?: boolean;
/** 确定按钮 loading*/
confirmLoading?: boolean;
/** 标题*/
title?: React.ReactNode | string;
/** 是否显示右上角的关闭按钮*/
closable?: boolean;
/** 点击确定回调*/
onOk?: () => void;
/** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调*/
2016-10-19 17:51:33 +08:00
onCancel?: (e: React.MouseEvent<any>) => void;
/** 宽度*/
width?: string | number;
/** 底部内容*/
footer?: React.ReactNode;
/** 确认按钮文字*/
okText?: string;
/** 取消按钮文字*/
cancelText?: string;
/** 点击蒙层是否允许关闭*/
maskClosable?: boolean;
style?: React.CSSProperties;
wrapClassName?: string;
maskTransitionName?: string;
transitionName?: string;
className?: string;
}
export interface ModalContext {
antLocale?: {
Modal?: any,
};
}
export default class Modal extends React.Component<ModalProps, any> {
static info: any;
static success: any;
static error: any;
static warn: any;
static warning: any;
static confirm: any;
static defaultProps = {
prefixCls: 'ant-modal',
width: 520,
transitionName: 'zoom',
2016-04-04 17:38:39 +08:00
maskTransitionName: 'fade',
confirmLoading: false,
visible: false,
2016-07-13 11:14:24 +08:00
};
2016-03-03 17:43:38 +08:00
static propTypes = {
prefixCls: PropTypes.string,
onOk: PropTypes.func,
onCancel: PropTypes.func,
okText: PropTypes.node,
cancelText: PropTypes.node,
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
};
static contextTypes = {
antLocale: React.PropTypes.object,
2016-07-13 11:14:24 +08:00
};
context: ModalContext;
handleCancel = (e) => {
2016-10-24 12:04:26 +08:00
const onCancel = this.props.onCancel;
if (onCancel) {
onCancel(e);
}
}
2016-01-12 17:07:24 +08:00
handleOk = () => {
2016-10-24 12:04:26 +08:00
const onOk = this.props.onOk;
if (onOk) {
onOk();
}
}
2016-01-12 17:07:24 +08:00
componentDidMount() {
if (mousePositionEventBinded) {
return;
}
// 只有点击事件支持从鼠标位置动画展开
2016-06-16 22:34:54 +08:00
addEventListener(document.documentElement, 'click', (e) => {
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-01-12 17:07:24 +08:00
render() {
2016-08-29 20:48:47 +08:00
let { okText, cancelText, confirmLoading, footer, visible } = this.props;
2016-03-03 17:43:38 +08:00
2016-03-05 16:39:27 +08:00
if (this.context.antLocale && this.context.antLocale.Modal) {
okText = okText || this.context.antLocale.Modal.okText;
cancelText = cancelText || this.context.antLocale.Modal.cancelText;
2016-03-03 17:43:38 +08:00
}
2016-08-29 20:48:47 +08:00
const defaultFooter = [
<Button
key="cancel"
2016-01-12 17:07:24 +08:00
type="ghost"
size="large"
onClick={this.handleCancel}
>
2016-03-07 12:08:52 +08:00
{cancelText || '取消'}
2016-01-12 17:07:24 +08:00
</Button>,
2016-08-29 20:48:47 +08:00
<Button
key="confirm"
2016-01-12 17:07:24 +08:00
type="primary"
size="large"
2016-08-29 20:48:47 +08:00
loading={confirmLoading}
onClick={this.handleOk}
>
2016-03-07 12:08:52 +08:00
{okText || '确定'}
2016-05-11 09:32:33 +08:00
</Button>,
2016-01-12 17:07:24 +08:00
];
2016-08-29 20:48:47 +08:00
2016-01-13 22:22:33 +08:00
return (
2016-08-29 20:48:47 +08:00
<Dialog
onClose={this.handleCancel}
footer={footer || defaultFooter}
{...this.props}
visible={visible}
mousePosition={mousePosition}
/>
2016-01-13 22:22:33 +08:00
);
2016-01-12 17:07:24 +08:00
}
}