nice-ui/lib/7-fullscreen/ToastCardManager/index.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToastCardManager = exports.ToastCardItems = exports.ToastCardItem = void 0;
const React = require("react");
const context_1 = require("./context");
const useBehaviorSubject_1 = require("../../hooks/useBehaviorSubject");
const ToastCardStack_1 = require("../../5-block/ToastCardStack");
const ToastCard_1 = require("../../4-card/ToastCard");
const useInterval_1 = require("react-use/lib/useInterval");
const css_animations_1 = require("../../misc/css-animations");
const ToastCardItem = ({ item }) => {
    const [hovered, setHovered] = React.useState(false);
    const durationConsumed = (0, useBehaviorSubject_1.useBehaviorSubject)(item.durationConsumed$);
    const softDeletedTime = (0, useBehaviorSubject_1.useBehaviorSubject)(item.softDeletedTime$);
    (0, useInterval_1.default)(() => {
        if (!hovered)
            item.consume(50);
    }, 50);
    const progress = item.opts.duration ? durationConsumed / item.opts.duration : undefined;
    return (React.createElement("div", { className: softDeletedTime ? css_animations_1.fadeOutScaleClass : undefined, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false) },
        React.createElement(ToastCard_1.ToastCard, { type: item.opts.type ?? '', title: item.opts.title, message: item.opts.message, progress: progress, glow: !hovered, onClose: () => {
                item.remove();
            } })));
};
exports.ToastCardItem = ToastCardItem;
const ToastCardItems = ({ stack, right, bottom }) => {
    const list = (0, useBehaviorSubject_1.useBehaviorSubject)(stack.stack$);
    if (!list || !list.length)
        return null;
    const elements = [];
    list.forEach((toast) => {
        if (toast.softDeletedTime$.getValue())
            return;
        elements.push(React.createElement(exports.ToastCardItem, { key: toast.opts.id, item: toast }));
    });
    return (React.createElement(ToastCardStack_1.ToastCardStack, { global: true, right: right, bottom: bottom }, elements));
};
exports.ToastCardItems = ToastCardItems;
const ToastCardManager = () => {
    const toasts = (0, context_1.useToasts)();
    return (React.createElement(React.Fragment, null,
        React.createElement(exports.ToastCardItems, { stack: toasts.topLeft }),
        React.createElement(exports.ToastCardItems, { stack: toasts.topRight, right: true }),
        React.createElement(exports.ToastCardItems, { stack: toasts.bottomLeft, bottom: true }),
        React.createElement(exports.ToastCardItems, { stack: toasts.bottomRight, right: true, bottom: true })));
};
exports.ToastCardManager = ToastCardManager;