diff --git a/components/modal/Modal.jsx b/components/modal/Modal.jsx new file mode 100644 index 0000000000..997c9471d0 --- /dev/null +++ b/components/modal/Modal.jsx @@ -0,0 +1,76 @@ +import React from 'react'; +import Dialog from 'rc-dialog'; +import { Dom } from 'rc-util'; +import Button from '../button'; + +function noop() {} + +let mousePosition; +let mousePositionEventBinded; + +let AntModal = React.createClass({ + getDefaultProps() { + return { + prefixCls: 'ant-modal', + onOk: noop, + onCancel: noop, + okText: '确定', + cancelText: '取消', + width: 520, + transitionName: 'zoom', + maskAnimation: 'fade', + confirmLoading: false, + visible: false + }; + }, + + handleCancel() { + this.props.onCancel(); + }, + + handleOk() { + this.props.onOk(); + }, + + componentDidMount() { + if (mousePositionEventBinded) { + return; + } + // 只有点击事件支持从鼠标位置动画展开 + Dom.addEventListener(document.body, 'click', function onDocumentMousemove(e) { + mousePosition = { + x: e.pageX, + y: e.pageY + }; + // 20ms 内发生过点击事件,则从点击位置动画展示 + // 否则直接 zoom 展示 + // 这样可以兼容非点击方式展开 + setTimeout(() => mousePosition = null, 20); + }); + mousePositionEventBinded = true; + }, + + render() { + let props = this.props; + let defaultFooter = [ + , + + ]; + let footer = props.footer || defaultFooter; + return ; + } +}); + +export default AntModal; diff --git a/components/modal/confirm.jsx b/components/modal/confirm.jsx index 9b8eb43d46..70e9cfb884 100644 --- a/components/modal/confirm.jsx +++ b/components/modal/confirm.jsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import Dialog from './index'; +import Dialog from './modal'; import Icon from '../icon'; import Button from '../button'; diff --git a/components/modal/index.jsx b/components/modal/index.jsx index 9166a13e9a..79267824e1 100644 --- a/components/modal/index.jsx +++ b/components/modal/index.jsx @@ -1,78 +1,5 @@ -import React from 'react'; -import Dialog from 'rc-dialog'; -import { Dom } from 'rc-util'; +import AntModal from './Modal'; import confirm from './confirm'; -import Button from '../button'; - -function noop() {} - -let mousePosition; -let mousePositionEventBinded; - -let AntModal = React.createClass({ - getDefaultProps() { - return { - prefixCls: 'ant-modal', - onOk: noop, - onCancel: noop, - okText: '确定', - cancelText: '取消', - width: 520, - transitionName: 'zoom', - maskAnimation: 'fade', - confirmLoading: false, - visible: false - }; - }, - - handleCancel() { - this.props.onCancel(); - }, - - handleOk() { - this.props.onOk(); - }, - - componentDidMount() { - if (mousePositionEventBinded) { - return; - } - // 只有点击事件支持从鼠标位置动画展开 - Dom.addEventListener(document.body, 'click', function onDocumentMousemove(e) { - mousePosition = { - x: e.pageX, - y: e.pageY - }; - // 20ms 内发生过点击事件,则从点击位置动画展示 - // 否则直接 zoom 展示 - // 这样可以兼容非点击方式展开 - setTimeout(() => mousePosition = null, 20); - }); - mousePositionEventBinded = true; - }, - - render() { - let props = this.props; - let defaultFooter = [ - , - - ]; - let footer = props.footer || defaultFooter; - return ; - } -}); AntModal.info = function (props) { props.iconClassName = 'info-circle';