chowa
Version:
UI component library based on React
162 lines (161 loc) • 6.05 kB
JavaScript
/**
* @license chowa v1.1.3
*
* Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const PropTypes = require("prop-types");
const classnames_1 = require("classnames");
const utils_1 = require("../utils");
const overlay_1 = require("../overlay");
const modal_header_1 = require("./modal-header");
const modal_body_1 = require("./modal-body");
const modal_footer_1 = require("./modal-footer");
const alert_modal_1 = require("./alert-modal");
const confirm_modal_1 = require("./confirm-modal");
const prompt_modal_1 = require("./prompt-modal");
const _alert_1 = require("./$alert");
const _confirm_1 = require("./$confirm");
const _prompt_1 = require("./$prompt");
const mouse_pos_1 = require("./mouse-pos");
class Modal extends React.PureComponent {
constructor(props) {
super(props);
this.hasBindListener = false;
this.state = {
transformOrigin: 0
};
if (props.closeOnPressEsc) {
this.autoBindEscListener(props.visible);
}
[
'onMaskClickHandler',
'onEnterHandler',
'onLeaveHandler',
'autoBindEscListener',
'keyboardToClose'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
componentDidUpdate(preProps) {
if (this.props.closeOnPressEsc && preProps.visible !== this.props.visible) {
this.autoBindEscListener(this.props.visible);
}
}
componentWillUnmount() {
if (this.hasBindListener) {
utils_1.doms.off(window, 'keydown', this.keyboardToClose);
}
}
autoBindEscListener(visible) {
if (visible && !this.hasBindListener) {
utils_1.doms.on(window, 'keydown', this.keyboardToClose);
this.hasBindListener = true;
}
else if (!visible && this.hasBindListener) {
utils_1.doms.off(window, 'keydown', this.keyboardToClose);
this.hasBindListener = false;
}
}
keyboardToClose(e) {
if (e.keyCode === 27 && this.props.onClose) {
this.props.onClose();
}
}
onEnterHandler() {
const { scrollDisabled, onEnter } = this.props;
if (scrollDisabled) {
utils_1.doms.css(document.documentElement, 'overflow', 'hidden');
}
if (onEnter) {
onEnter();
}
const { top, left } = utils_1.doms.offset(this.modalElement);
const pos = this.props.mousePos || mouse_pos_1.globalMousePos;
const { x, y } = pos;
this.setState({
transformOrigin: `${x - left}px ${y - top}px 0px`
});
}
onLeaveHandler() {
const { scrollDisabled, onLeave } = this.props;
if (scrollDisabled) {
utils_1.doms.removeStyle(document.documentElement, 'overflow');
}
if (onLeave) {
onLeave();
}
}
onMaskClickHandler(e) {
if (this.props.onClose && e.target.isEqualNode(e.currentTarget)) {
this.props.onClose();
}
}
render() {
const { children, className, visible, align, justify, bordered, maskClosable, withMask, style, onShow, onHide } = this.props;
const { transformOrigin } = this.state;
const fragments = [];
const wrapperClass = classnames_1.default({
[utils_1.preClass('modal-wrapper')]: true,
[utils_1.preClass(`modal-${align}`)]: true,
[utils_1.preClass(`modal-${justify}`)]: true
});
const componentClass = classnames_1.default({
[utils_1.preClass('modal')]: true,
[utils_1.preClass('modal-bordered')]: bordered,
[className]: utils_1.isExist(className)
});
if (withMask) {
fragments.push(React.createElement(overlay_1.default, { key: 'model-mask', visible: visible, className: utils_1.preClass('modal-mask'), role: 'model-mask' }));
}
fragments.push(React.createElement(overlay_1.default, { role: 'modal', key: 'modal', visible: visible, externalWheelHide: false, onShow: onShow, onHide: onHide, onEnter: this.onEnterHandler, onLeave: this.onLeaveHandler, className: wrapperClass, onClick: maskClosable ? this.onMaskClickHandler : undefined, appear: utils_1.preClass('modal-appear'), enter: utils_1.preClass('modal-enter'), leave: utils_1.preClass('modal-leave') },
React.createElement("div", { className: componentClass, style: Object.assign({}, style, { transformOrigin }), ref: (ele) => {
this.modalElement = ele;
} }, children)));
return fragments;
}
}
Modal.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
visible: PropTypes.bool,
closeOnPressEsc: PropTypes.bool,
align: PropTypes.oneOf(['top', 'middle', 'bottom']),
justify: PropTypes.oneOf(['start', 'end', 'center']),
bordered: PropTypes.bool,
maskClosable: PropTypes.bool,
withMask: PropTypes.bool,
scrollDisabled: PropTypes.bool,
onClose: PropTypes.func,
mousePos: PropTypes.object,
onShow: PropTypes.func,
onHide: PropTypes.func,
onEnter: PropTypes.func,
onLeave: PropTypes.func
};
Modal.defaultProps = {
closeOnPressEsc: true,
visible: false,
align: 'middle',
justify: 'center',
bordered: true,
maskClosable: true,
withMask: true,
scrollDisabled: false
};
Modal.Header = modal_header_1.default;
Modal.Body = modal_body_1.default;
Modal.Footer = modal_footer_1.default;
Modal.AlertModal = alert_modal_1.default;
Modal.ConfirmModal = confirm_modal_1.default;
Modal.PromptModal = prompt_modal_1.default;
Modal.$alert = _alert_1.default;
Modal.$confirm = _confirm_1.default;
Modal.$prompt = _prompt_1.default;
exports.default = Modal;