quantumai-design-system/dist/components/Base/Alert/Toast.js

퀀텀에이아이의 디자인 시스템

import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { createRoot } from 'react-dom/client';
import Alert from '.';
import { createContainer } from '../Portal';
import { TOAST_POSITIONS, TOAST_SPACING } from './options';
import { ToastContainer } from './style';
import { getId } from '../../../utils/getId';
var toastEl = createContainer('toast-root');
var Toast = /** @class */ (function () {
    function Toast() {
        this.root = createRoot(toastEl);
        this.messages = new Map();
        toastEl.style.position = 'fixed';
        toastEl.style.zIndex = '9999';
    }
    Toast.prototype.showMsg = function (type, msg, isFill, duration, position) {
        if (isFill === void 0) { isFill = false; }
        if (duration === void 0) { duration = 2.5; }
        if (position === void 0) { position = 'topRight'; }
        var id = getId();
        this.messages.set(id, {
            show: true,
            msg: msg,
            type: type,
            isFill: isFill,
            duration: duration,
            position: position,
        });
        this.renderToast();
        if (duration)
            this.autoCloseMsg(id, duration);
    };
    Toast.prototype.closeMsg = function (id) {
        ;
        this.messages.get(id).show = false;
        this.renderToast();
        this.messages.delete(id);
    };
    Toast.prototype.autoCloseMsg = function (id, duration) {
        var _this = this;
        setTimeout(function () {
            if (!_this.messages.get(id))
                return;
            _this.closeMsg(id);
        }, duration * 1000);
    };
    Toast.prototype.renderToast = function () {
        var _this = this;
        var positions = Object.keys(TOAST_POSITIONS);
        var getTransformValue = function (position) {
            var offsetSign = position.includes('Left') ? '-' : '+';
            return "translateX(calc(".concat(offsetSign, "100% ").concat(offsetSign, " ").concat(TOAST_SPACING, "))");
        };
        this.root.render(positions.map(function (position) { return (_jsx(ToastContainer, { position: position, children: Array.from(_this.messages).map(function (_a) {
                var id = _a[0], v = _a[1];
                return position === v.position && (_jsx(Alert, { type: v.type, show: v.show, label: v.msg, isFill: v.isFill, onClickClose: function () { return _this.closeMsg(id); }, duration: v.duration, style: {
                        transform: getTransformValue(position),
                    } }, id));
            }) }, position)); }));
    };
    Toast.prototype.success = function (msg, isFill) {
        this.showMsg('success', msg, isFill, 2);
    };
    Toast.prototype.warning = function (msg, isFill) {
        this.showMsg('warning', msg, isFill);
    };
    Toast.prototype.error = function (msg, isFill) {
        this.showMsg('error', msg, isFill);
    };
    Toast.prototype.info = function (msg, isFill) {
        this.showMsg('info', msg, isFill, 4);
    };
    return Toast;
}());
export var toast = new Toast();