ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
176 lines (175 loc) • 8.24 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 { TransitionGroup, CSSTransition } from 'react-transition-group';
import { EventEmitter, Call, HasValue } from 'basic-helper';
import { Icon } from '../icon';
import positionFilter from '../position-filter';
import { UkePureComponent } from '../utils/uke-component';
import { tipIcons } from '../utils/icon-mapper';
var TRANSFORM_TIMER = 300;
var defaultTimeToClose = 7;
export var NotifyEvent = 'NOTIFY';
var Notification = /** @class */ (function (_super) {
__extends(Notification, _super);
function Notification(props) {
var _this = _super.call(this, props) || this;
_this.timers = {};
_this.IDIncrement = 0;
_this.receiveNotify = function (notifyConfig, _position) {
var nextNotifyConfig = _this.notifyConfigFilter(notifyConfig);
var id = nextNotifyConfig.id;
if (!id)
return 0;
_this.setState(function (_a) {
var _b;
var notifyItems = _a.notifyItems, position = _a.position;
return ({
notifyItems: __assign(__assign({}, notifyItems), (_b = {}, _b[id.toString()] = nextNotifyConfig, _b)),
position: _position || position
});
});
_this.startTargetTimer(nextNotifyConfig);
return id;
};
_this.clearAllNotify = function () {
Object.keys(_this.timers).forEach(function (timerID) { return clearTimeout(+timerID); });
_this.setState({
notifyItems: {}
});
};
_this.state = {
notifyItems: {},
position: 'top,right'
};
EventEmitter.on(NotifyEvent, _this.receiveNotify);
return _this;
}
/**
* receiveNotify 参数说明
* notifyConfig = {
* text: '',
* id: '',
* title: '',
* type: [success error normal warn black white] default 'desc'
* lifecycle: 7 sec,
* onClickTip: func,
* actionText: string,
* navigateConfig: {
* type: 'MANAGER',
* activeMenu: {
* code: 'ZHMX'
* }
* },
* }
*/
Notification.prototype.componentWillUnmount = function () {
EventEmitter.rm(NotifyEvent, this.receiveNotify);
};
Notification.prototype.notifyConfigFilter = function (notifyConfig) {
++this.IDIncrement;
var nextConfig = Object.assign({}, notifyConfig);
if (!nextConfig.id) {
nextConfig.id = "" + this.IDIncrement;
}
return nextConfig;
};
Notification.prototype.clickTip = function (clickTarget, msgID) {
var handleClick = this.props.handleClick;
var navigateConfig = clickTarget.navigateConfig, onClickTip = clickTarget.onClickTip;
this.closeTip(msgID);
Call(handleClick, navigateConfig);
Call(onClickTip, clickTarget);
};
Notification.prototype.closeTip = function (msgID) {
this.setState(function (_a) {
var notifyItems = _a.notifyItems;
var nextState = Object.assign({}, notifyItems);
delete nextState[msgID];
return {
notifyItems: nextState
};
});
};
Notification.prototype.clearTargetTimer = function (msgID) {
if (this.timers[msgID])
clearTimeout(this.timers[msgID]);
};
Notification.prototype.startTargetTimer = function (msgObj) {
if (this.timers[msgObj.id])
this.clearTargetTimer(msgObj.id);
this.setTipHideTimer(msgObj);
};
Notification.prototype.setTipHideTimer = function (msgObj) {
var _this = this;
var id = msgObj.id, _a = msgObj.timer, timer = _a === void 0 ? defaultTimeToClose : _a, _b = msgObj.lifecycle, lifecycle = _b === void 0 ? defaultTimeToClose : _b;
var _timer;
if (HasValue(lifecycle))
_timer = lifecycle;
if (HasValue(timer))
_timer = timer;
if (!id || _timer <= 0)
return;
this.timers[id.toString()] = setTimeout(function () {
_this.closeTip(id);
}, _timer * 1000);
};
Notification.prototype.render = function () {
var _this = this;
var handleClick = this.props.handleClick;
var _a = this.state, position = _a.position, notifyItems = _a.notifyItems;
var notifyItemsKeys = Object.keys(notifyItems);
var notifyItemsKeysLen = notifyItemsKeys.length;
var hasMsg = notifyItemsKeysLen > 0;
var needClearAllBtn = notifyItemsKeysLen > 3;
var $T_UKE = this.$T_UKE;
var container = (React.createElement("div", { className: "notify-group " + positionFilter(position) + " " + (hasMsg ? 'has-msg' : 'no-msg') },
React.createElement("div", { className: "msg-panel scroll-content" },
needClearAllBtn && (React.createElement("div", { className: "notify-item", onClick: this.clearAllNotify }, "\u6E05\u9664\u6240\u6709\u901A\u77E5")),
React.createElement(TransitionGroup, { component: null }, notifyItemsKeys.map(function (msgID) {
var item = notifyItems[msgID];
var _a = item.type, type = _a === void 0 ? 'normal' : _a, title = item.title, text = item.text, onClickTip = item.onClickTip, _b = item.actionText, actionText = _b === void 0 ? $T_UKE('点击查看详情') : _b;
return (React.createElement(CSSTransition, { key: msgID, timeout: TRANSFORM_TIMER, classNames: "notify" },
React.createElement("div", { className: "notify-item " + type, ref: function (e) {
if (e) {
e.style.height = e.offsetHeight + "px";
}
}, onMouseEnter: function (e) { return _this.clearTargetTimer(msgID); }, onMouseLeave: function (e) { return _this.startTargetTimer(item); } },
tipIcons[type] && (React.createElement("div", { className: "notify-type-tip" },
React.createElement(Icon, { n: tipIcons[type] }))),
React.createElement("div", { className: "content" },
React.createElement("div", { className: "title" }, title || $T_UKE('新消息')),
React.createElement("div", { className: "text" }, text || ''),
(onClickTip || handleClick) ? (React.createElement("div", { className: "action", onClick: function (e) { return _this.clickTip(item, msgID); } },
React.createElement("span", { className: "flex" }),
React.createElement("span", { className: "action-btn" }, actionText))) : null,
React.createElement("div", { className: "_close-btn", onClick: function (e) { return _this.closeTip(msgID); } },
React.createElement(Icon, { n: "close" }))))));
})))));
return container;
};
return Notification;
}(UkePureComponent));
export default Notification;