nexpi-ui/lib/Toast.js

An elegant and minimalist Next.js 14 component library

"use client";
import styles from './styles/Toast.module.css';
import { useState, useEffect } from 'react';
import Button from './Button';
import Typography from './Typography';
import React from 'react';
var Toast = function (_a) {
    var title = _a.title, text = _a.text, action = _a.action, _b = _a.start, start = _b === void 0 ? false : _b, _c = _a.time, time = _c === void 0 ? 5000 : _c;
    var _d = useState(start), isOpen = _d[0], setOpen = _d[1];
    var _e = useState(true && !start), firstOpen = _e[0], setFirstOpen = _e[1];
    /**
     * The component works whenever change the state of the `start` value.
     * The value of start is important only in the mounting, 'cause defines
     * the initial state. The state 'firstOpen' ensures that when is the entry of the component
     * we are out of the rest of the logic.
     */
    useEffect(function () {
        if (!firstOpen) {
            setOpen(true);
        }
        setFirstOpen(false);
    }, [start]);
    useEffect(function () {
        var timer;
        if (!firstOpen) {
            timer = setTimeout(function () { return setOpen(false); }, time);
            start = !start;
        }
        setFirstOpen(false);
        return function () {
            if (timer)
                clearTimeout(timer);
        };
    }, [isOpen]);
    return ((isOpen ?
        React.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'space-around' }, className: styles.toast },
            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', marginLeft: '1rem' } },
                React.createElement(Typography, { variant: 'h1', style: { fontSize: '14px' } },
                    React.createElement("b", null, title)),
                React.createElement(Typography, { style: { marginTop: '-1rem', fontSize: '14px' } }, text)),
            React.createElement("div", { style: { flexShrink: 0, marginTop: '0.5rem' } }, action ? React.createElement(Button, { variant: 'primary', onClick: action === null || action === void 0 ? void 0 : action.onActionClick }, action.name)
                : null))
        : null));
};
export default Toast;
//# sourceMappingURL=Toast.js.map