ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
193 lines (192 loc) • 9.37 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React from 'react';
import { Call, IsFunc } from 'basic-helper';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import classnames from 'classnames';
import { DragPanelClass } from './drag-pabel-helper';
import { Icon } from '../icon';
var ESC_KEY = 27;
var classNameMap = {
side: 'side-modal',
normal: 'normal-modal'
};
var animateTypeFilter = function (props) {
var animateType = props.animateType, position = props.position, modalType = props.modalType;
if (animateType)
return animateType;
var res = 'modal';
switch (modalType) {
case 'side':
res = position + "-side-modal";
break;
}
return res;
};
var Modal = /** @class */ (function (_super) {
__extends(Modal, _super);
function Modal() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = __assign(__assign({}, _this.state), { isMaximize: false });
_this.toggleTopClass = function (isAdd) {
var topClassName = _this.props.topClassName;
topClassName && document.body.classList.toggle(topClassName, isAdd);
};
_this.setContentFocus = function () {
if (_this.props.isOpen && _this.ukeLayout) {
_this.ukeLayout.focus();
}
};
_this.handleKeyDown = function (event) {
if (_this.props.shouldCloseOnEsc
&& event.keyCode === ESC_KEY
&& _this.props.showCloseBtn !== false) {
event.preventDefault();
event.stopPropagation();
_this.closeModal();
}
};
_this.wrapPropsForTMPL = function () { return (__assign({}, _this.props)); };
_this.maximinzeWindow = function (isMaximize) {
_this.setState({
isMaximize: isMaximize
});
};
_this.closeModal = function () {
_this.props.onCloseModal();
};
return _this;
}
Modal.prototype.componentDidMount = function () {
this.setContentFocus();
this.__mount = true;
};
Modal.prototype.shouldComponentUpdate = function (nextProps, nextState, nextContext) {
return this.props != nextProps || this.state != nextState;
};
Modal.prototype.componentWillUnmount = function () {
var isOpen = this.props.isOpen;
this.toggleTopClass(false);
this.__mount = false;
/**
* 关闭窗口的 callback
*/
if (isOpen)
Call(this.props.onClose);
};
Modal.prototype.componentDidUpdate = function (preProps) {
var _a = this.props, draggable = _a.draggable, isMinimize = _a.isMinimize;
var isAdd = !isMinimize && !draggable;
this.toggleTopClass(isAdd);
if (this.props.isOpen !== preProps.isOpen) {
this.setContentFocus();
}
};
Modal.prototype.render = function () {
var _this = this;
var _a = this.props, children = _a.children, title = _a.title, isOpen = _a.isOpen, selectWindow = _a.selectWindow, sectionId = _a.sectionId, idx = _a.idx, width = _a.width, marginTop = _a.marginTop, style = _a.style, className = _a.className, modalLayoutDOM = _a.modalLayoutDOM, duration = _a.duration, id = _a.id, template = _a.template, showCloseBtn = _a.showCloseBtn, Header = _a.Header, needMask = _a.needMask, draggable = _a.draggable, animation = _a.animation, onCloseModal = _a.onCloseModal, maxHeightable = _a.maxHeightable, needHeader = _a.needHeader, needMaxBtn = _a.needMaxBtn, needMinBtn = _a.needMinBtn, minimizeWindow = _a.minimizeWindow, position = _a.position, modalType = _a.modalType, isMinimize = _a.isMinimize;
var _b = this.props.clickBgToClose, clickBgToClose = _b === void 0 ? modalType !== 'normal' : _b;
var animateType = animateTypeFilter(this.props);
var isMaximize = this.state.isMaximize;
var modalIdx = this.props.idx || 0;
var _needMark = draggable ? false : needMask;
var classNames = classnames(className, position, modalType && classNameMap[modalType], draggable ? 'drag-mode' : 'normal-mode', isMaximize && 'maximinze', isMinimize && 'miniminze');
var closeBtnDOM = showCloseBtn && (React.createElement("span", { className: "close _btn", onClick: function (e) { return onCloseModal(); } },
React.createElement(Icon, { n: "close" })));
var maxBtnDOM = needMaxBtn && (React.createElement("span", { className: "max _btn", onClick: function (e) { return _this.maximinzeWindow(!isMaximize); } },
React.createElement(Icon, { n: isMaximize ? "restore" : "max" })));
var minBtnDOM = !isMaximize && minimizeWindow && needMinBtn && (React.createElement("span", { className: "min _btn", onClick: function (e) { return sectionId && minimizeWindow(sectionId); } },
React.createElement(Icon, { n: "min" })));
var _style = Object.assign({}, style, {
width: width,
marginTop: marginTop,
outline: 'none'
});
var transitionKey = isOpen ? 'modal-open' : 'modal-close';
var sectionMark = _needMark && (React.createElement("div", { className: "section-mark", onClick: function (e) {
if (clickBgToClose)
_this.closeModal();
} }));
var sections;
if (isOpen) {
if (template && IsFunc(template)) {
sections = template(this.wrapPropsForTMPL());
}
else {
sections = (React.createElement("div", { className: "__modal-container " + classNames + " idx-" + (isMinimize ? '-1' : modalIdx), onMouseDown: function (e) {
/** 用于判断是否通过 ShowModal 打开的 Modal，如果有 idx != 0 的时候才触发选择窗口 */
id && idx && selectWindow && selectWindow(id);
} },
React.createElement("div", { className: "animate-layout" }, modalLayoutDOM || (React.createElement("div", { className: "__modal-layout", ref: function (c) {
if (!c)
return;
_this.ukeLayout = c;
draggable && _this.setLayoutInitPosition(c);
}, style: _style, onKeyDown: this.handleKeyDown, tabIndex: -1 },
needHeader && (Header && IsFunc(Header) ? Header({
closeModal: this.closeModal,
props: this.props
}) : (React.createElement("header", { className: "__modal-header" },
React.createElement("div", { onMouseDown: function (e) {
!isMaximize && draggable && _this.dragStart(e, _this.ukeLayout);
id && selectWindow && selectWindow(id);
} },
React.createElement("h5", { className: "title" }, title)),
React.createElement("span", { className: "btn-set" },
minBtnDOM,
maxBtnDOM,
closeBtnDOM)))),
React.createElement("div", { className: "__modal-content" + (maxHeightable ? ' max-height' : '') }, children)))),
sectionMark));
}
}
else {
sections = React.createElement("span", null);
}
return animation ? (React.createElement(TransitionGroup, { component: null },
React.createElement(CSSTransition, { key: transitionKey, classNames: animateType, timeout: duration }, sections))) : sections;
};
Modal.animateTypeFilter = animateTypeFilter;
Modal.defaultProps = {
shouldCloseOnEsc: true,
showCloseBtn: true,
needMaxBtn: true,
needMinBtn: true,
needHeader: true,
animation: true,
needMask: true,
draggable: false,
duration: 300,
marginTop: '2%',
modalType: 'normal',
title: 'Title',
className: '',
children: null,
topClassName: 'modal-opend',
maxHeightable: true,
};
return Modal;
}(DragPanelClass));
export default Modal;