Browse Source

fix: cyclic reference in Modal

pull/850/head
Benjy Cui 9 years ago
parent
commit
7ae966873a
  1. 76
      components/modal/Modal.jsx
  2. 2
      components/modal/confirm.jsx
  3. 75
      components/modal/index.jsx

76
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 = [
<Button key="cancel"
type="ghost"
size="large"
onClick={this.handleCancel}>
{props.cancelText}
</Button>,
<Button key="confirm"
type="primary"
size="large"
loading={props.confirmLoading}
onClick={this.handleOk}>
{props.okText}
</Button>
];
let footer = props.footer || defaultFooter;
return <Dialog onClose={this.handleCancel} footer={footer} {...props}
visible={props.visible} mousePosition={mousePosition} />;
}
});
export default AntModal;

2
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';

75
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 = [
<Button key="cancel"
type="ghost"
size="large"
onClick={this.handleCancel}>
{props.cancelText}
</Button>,
<Button key="confirm"
type="primary"
size="large"
loading={props.confirmLoading}
onClick={this.handleOk}>
{props.okText}
</Button>
];
let footer = props.footer || defaultFooter;
return <Dialog onClose={this.handleCancel} footer={footer} {...props}
visible={props.visible} mousePosition={mousePosition} />;
}
});
AntModal.info = function (props) {
props.iconClassName = 'info-circle';

Loading…
Cancel
Save