ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
171 lines (170 loc) • 8.02 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);
};
/* eslint-disable prefer-const */
import React from 'react';
import ReactDOM from 'react-dom';
import { Call, GenerteID } from 'basic-helper';
import { Provider, connect } from 'unistore/react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { $T_UKE, getIsMobile } from '../config';
import { Icon } from '../icon';
import ModalHelper from './modal-helper';
import Modal from './modal';
import setDOMById from '../set-dom';
import { windowManagerActions, windowManagerStore } from './window-manager';
var connectedStore;
var selector = function (state) { return state; };
var ModalEntity = /** @class */ (function (_super) {
__extends(ModalEntity, _super);
function ModalEntity() {
return _super !== null && _super.apply(this, arguments) || this;
}
ModalEntity.prototype.componentDidMount = function () {
// console.log(this)
this.setModal(__assign(__assign({}, this.props), { isOpen: true }));
};
ModalEntity.prototype.render = function () {
var _a = this.props, children = _a.children, onCloseModal = _a.onCloseModal;
return (React.createElement(Modal, __assign({}, this.state.modalSetting, this.props, { onCloseModal: onCloseModal || this.closeModal.bind(this) }), children));
};
return ModalEntity;
}(ModalHelper));
var ModalsManager = connect(selector, windowManagerActions)(function (props) {
connectedStore = props;
var sectionsList = props.sectionsList, closeWindow = props.closeWindow, selectWindow = props.selectWindow, sectionsQueue = props.sectionsQueue, minimizeWindow = props.minimizeWindow, minSecQueue = props.minSecQueue;
var sections = Array.isArray(sectionsQueue) && sectionsQueue.map(function (key) {
var currItem = sectionsList[key];
if (!currItem)
return null;
var id = currItem.id;
var animateType = Modal.animateTypeFilter(currItem);
var sectionId = id;
var currSectionIdx = sectionsQueue.indexOf(sectionId);
return (React.createElement(CSSTransition, { key: key, classNames: animateType, timeout: 300 },
React.createElement(ModalEntity, __assign({ idx: currSectionIdx, sectionId: sectionId, selectWindow: selectWindow, minimizeWindow: minimizeWindow, animation: false, isOpen: true }, currItem, { onCloseModal: function (e) { return closeWindow(sectionId); } }))));
});
return (React.createElement("div", { className: "modals-render" },
React.createElement(TransitionGroup, { component: null }, sections),
React.createElement("div", { className: "min-container" }, minSecQueue.map(function (minSectionId) {
var currItem = sectionsList[minSectionId];
return (React.createElement("div", { key: minSectionId, className: "min-item" },
React.createElement("span", { className: "title", onClick: function (e) { return selectWindow(minSectionId); } }, currItem.title),
React.createElement(Icon, { n: "close", onClick: function (e) { return closeWindow(minSectionId); } })));
}))));
});
var Entity = {};
function CloseModal(modalID) {
if (!modalID)
return;
connectedStore.closeWindow(modalID);
}
function CloseAllModal() {
connectedStore.closeAllWindow();
}
/**
* 给对应的 type 的 modal 返回默认的 width
* @param {string} modalType modal 的类型
*/
var getModalDefaultWidth = function (modalType) {
var widthConfig = {
confirm: 300,
side: 400
};
return widthConfig[modalType] || 600;
};
var getDefaultOptions = function (options) {
var width = options.width, type = options.type;
var isMobile = getIsMobile();
// const { isMobile } = window.$UKE;
return {
className: 'fixed',
topClassName: 'top-modal-opend',
showFuncBtn: false,
marginTop: isMobile ? '0' : undefined,
width: width || (isMobile ? '90%' : getModalDefaultWidth(type))
};
};
var hasModalContainer = false;
var checkModalContainer = function () {
if (!hasModalContainer) {
hasModalContainer = true;
var modalsManagerContainer = setDOMById('ModalsManager', 'modals-manager');
ReactDOM.render(React.createElement(Provider, { store: windowManagerStore },
React.createElement(ModalsManager, null)), modalsManagerContainer);
}
};
/**
* @param {ShowModalParams} params
*/
function ShowModal(params) {
/** 用于检查是否已经渲染了最外层 div */
checkModalContainer();
/** @type {ShowModalParams} */
var options = Object.assign({}, params);
var type = options.type, _a = options.confirmText, confirmText = _a === void 0 ? $T_UKE('确定') + "?" : _a, showFuncBtn = options.showFuncBtn, id = options.id, children = options.children, onConfirm = options.onConfirm, needHeader = options.needHeader;
var _showFuncBtn = type === 'confirm' || showFuncBtn;
var entityId = id || GenerteID();
options.id = entityId;
var modalTMPL;
function onClickBtn(confirm) {
confirm && Call(onConfirm, confirm);
CloseModal(entityId);
}
var btnGroupDOM = _showFuncBtn && (React.createElement("div", { className: "btn-group" },
React.createElement("span", { className: "btn flat default", onClick: function (e) { return onClickBtn(false); } }, $T_UKE('取消')),
React.createElement("span", { className: "btn flat theme", onClick: function (e) { return onClickBtn(true); } }, $T_UKE('确定'))));
switch (type) {
case 'confirm':
needHeader = false;
modalTMPL = (React.createElement("div", { className: "confirm-container" },
React.createElement("div", { className: "content" }, React.isValidElement(confirmText) ? confirmText : (React.createElement("h2", { className: "text-center" }, confirmText))),
btnGroupDOM));
break;
case 'side':
options = Object.assign({}, {
modalType: 'side',
clickBgToClose: true,
needMaxBtn: false,
needMinBtn: false,
}, options);
modalTMPL = (React.createElement("div", { className: "global-modal-container" },
React.createElement("div", { className: "content" }, children),
btnGroupDOM));
break;
default:
modalTMPL = (React.createElement("div", { className: "global-modal-container" },
React.createElement("div", { className: "content" }, children),
btnGroupDOM));
}
options.children = modalTMPL;
options = __assign(__assign(__assign({}, getDefaultOptions(options)), options), { needHeader: needHeader });
connectedStore.openWindow(options);
return entityId;
}
var ShowGlobalModal = ShowModal;
var CloseGlobalModal = CloseModal;
var ShowModalAPI = function (props) { return (React.createElement("div", null)); };
export { ShowModalAPI };
export { ShowModal, CloseModal, ShowGlobalModal, CloseGlobalModal, CloseAllModal };