zent
Version:
一套前端设计语言和基于React的实现
90 lines (89 loc) • 3.64 kB
JavaScript
import { __assign, __extends, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Component } from 'react';
import { CSSTransition } from 'react-transition-group';
import Portal from '../portal';
import isBrowser from '../utils/isBrowser';
import { DialogElWrapper, DialogInnerEl } from './DialogEl';
import { openDialog, closeDialog } from './open';
import { addEventListener } from '../utils/component/event-handler';
var TIMEOUT = 300;
var mousePosition = null;
if (isBrowser) {
addEventListener(document.documentElement, 'click', function (e) {
if (e.clientX === 0 || e.clientY === 0) {
return;
}
mousePosition = {
x: e.clientX,
y: e.clientY,
};
}, { capture: true });
}
var Dialog = (function (_super) {
__extends(Dialog, _super);
function Dialog(props) {
var _this = _super.call(this, props) || this;
_this.lastMousePosition = null;
_this.onClose = function (e) {
var onClose = _this.props.onClose;
onClose && onClose(e);
};
_this.onExited = function () {
var onClosed = _this.props.onClosed;
_this.setState({
exiting: false,
});
onClosed && onClosed();
};
_this.state = {
prevOpen: props.visible,
exiting: false,
};
return _this;
}
Dialog.getDerivedStateFromProps = function (props, _a) {
var prevOpen = _a.prevOpen;
if (props.visible === prevOpen) {
return null;
}
if (props.visible) {
return {
prevOpen: props.visible,
exiting: false,
};
}
return {
prevOpen: props.visible,
exiting: true,
};
};
Dialog.prototype.render = function () {
var _a = this.props, visible = _a.visible, closeBtn = _a.closeBtn, style = _a.style, position = _a.position, onOpened = _a.onOpened, onClosed = _a.onClosed, mask = _a.mask, maskClosable = _a.maskClosable, children = _a.children, props = __rest(_a, ["visible", "closeBtn", "style", "position", "onOpened", "onClosed", "mask", "maskClosable", "children"]);
var exiting = this.state.exiting;
if (visible) {
this.lastMousePosition = this.lastMousePosition || mousePosition;
}
else {
this.lastMousePosition = null;
}
return (_jsx(Portal, __assign({ visible: visible || exiting, onClose: this.onClose, className: "zent-dialog-r-anchor", closeOnESC: closeBtn, blockPageScroll: true }, { children: _jsx(DialogElWrapper, __assign({ mask: mask, maskClosable: maskClosable, visible: visible, onClose: this.onClose }, { children: _jsx(CSSTransition, __assign({ appear: true, mountOnEnter: true, unmountOnExit: true, in: visible, timeout: TIMEOUT, classNames: "zent-zoom", onEntered: onOpened, onExited: this.onExited }, { children: _jsx(DialogInnerEl, __assign({}, props, { style: style, closeBtn: closeBtn, position: position, mousePosition: this.lastMousePosition }, { children: children }), void 0) }), void 0) }), void 0) }), void 0));
};
Dialog.defaultProps = {
onClose: function () { },
visible: false,
className: '',
style: {},
position: "auto",
title: '',
closeBtn: true,
mask: true,
maskClosable: true,
footer: null,
};
Dialog.openDialog = openDialog;
Dialog.closeDialog = closeDialog;
return Dialog;
}(Component));
export { Dialog };
export default Dialog;