ukelli-ui/core/toast/toast.js

Base on React's UI lib. Make frontend's dev simpler and faster.

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, { PureComponent } from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { Icon } from '../icon';
import { tipIcons } from '../utils/icon-mapper';
var TRANSTION_TIME = 200;
/**
 * 简易的提示组件
 *
 * @export
 * @class Toast
 * @extends {PureComponent}
 */
var Toast = /** @class */ (function (_super) {
    __extends(Toast, _super);
    function Toast() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            descQueue: {}
        };
        _this.timerQueue = {};
        return _this;
    }
    Toast.prototype.componentWillUnmount = function () {
        this.__unmount = true;
        this.clearTimer();
    };
    /**
     * 用于打开一个 toast
     *
     * @param {*} desc
     * @param {string} [type='desc']
     * @memberof Toast
     * @public
     */
    Toast.prototype.show = function (desc, type, timer) {
        var _a;
        var _this = this;
        if (type === void 0) { type = 'desc'; }
        if (timer === void 0) { timer = 5000; }
        var descQueue = this.state.descQueue;
        var currDescId = Date.now();
        var nextQueue = Object.assign({}, descQueue, (_a = {},
            _a[currDescId] = {
                type: type,
                desc: desc
            },
            _a));
        this.setState({
            descQueue: nextQueue
        });
        var currTimer = setTimeout(function () {
            if (!_this.__unmount)
                _this.hideTip(currDescId);
        }, timer);
        this.timerQueue[currTimer.toString()] = true;
    };
    Toast.prototype.clearTimer = function () {
        Object.keys(this.timerQueue).forEach(function (timerID) {
            timerID && clearTimeout(+timerID);
        });
    };
    Toast.prototype.hideTip = function (tipID) {
        var nextQueue = __assign({}, this.state.descQueue);
        if (!nextQueue[tipID])
            return;
        delete nextQueue[tipID];
        this.setState({
            descQueue: nextQueue
        });
    };
    Toast.prototype.clearTip = function () {
        this.clearTimer();
        this.setState({ descQueue: {} });
    };
    Toast.prototype.render = function () {
        var _this = this;
        var descQueue = this.state.descQueue;
        var descQueueDOM = Object.keys(descQueue).map(function (tipID) {
            var _a = descQueue[tipID], _b = _a.type, type = _b === void 0 ? 'success' : _b, desc = _a.desc;
            return (React.createElement(CSSTransition, { classNames: "toast", timeout: TRANSTION_TIME, key: tipID },
                React.createElement("span", { className: "desc-item " + type },
                    tipIcons[type] && (React.createElement(Icon, { n: tipIcons[type] })),
                    React.createElement("span", { className: "text" }, desc),
                    React.createElement("span", { className: "_close-btn", onClick: function (e) { return _this.hideTip(tipID); } }, "x"))));
        });
        return (React.createElement("div", { className: "toast-container" },
            React.createElement(TransitionGroup, { component: null }, descQueueDOM)));
    };
    return Toast;
}(PureComponent));
export default Toast;