@smitch/fluid
Version:
A Next/React ui-component libray.
83 lines (82 loc) • 3.81 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useRef, useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
import { CloseButton } from '..';
var backgrounds = {
info: 'bg-info',
success: 'bg-success',
warning: 'bg-warning',
danger: 'bg-error',
primary: 'bg-primary',
secondary: 'bg-secondary',
accent: 'bg-accent',
};
var colors = {
dark: 'text-dark',
light: 'text-light',
};
var horizontals = {
left: 'left-4',
center: 'left-1/2 -translate-x-1/2',
right: 'right-4',
};
var verticals = {
top: 'top-4',
middle: 'top-1/2 -translate-y-1/2',
bottom: 'bottom-4',
};
var roundeds = {
none: 'rounded-none',
md: 'rounded-md',
lg: 'rounded-lg',
xl: 'rounded-xl',
full: 'rounded-full',
};
var Toast = function (_a) {
var _b = _a.toastBackground, toastBackground = _b === void 0 ? 'warning' : _b, _c = _a.toastColor, toastColor = _c === void 0 ? 'light' : _c, _d = _a.rounded, rounded = _d === void 0 ? 'md' : _d, _e = _a.open, open = _e === void 0 ? false : _e, body = _a.body, _f = _a.horizontal, horizontal = _f === void 0 ? 'center' : _f, _g = _a.vertical, vertical = _g === void 0 ? 'top' : _g, _h = _a.autohide, autohide = _h === void 0 ? true : _h, _j = _a.autohideDuration, autohideDuration = _j === void 0 ? 3000 : _j, _k = _a.className, className = _k === void 0 ? '' : _k, style = _a.style, onClose = _a.onClose, onClick = _a.onClick, _l = _a.closeOnBlur, closeOnBlur = _l === void 0 ? true : _l;
var _m = useState(false), show = _m[0], setShow = _m[1];
var toastRef = useRef(null);
useEffect(function () {
var _a;
if (open) {
setShow(true);
(_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.focus();
if (autohide) {
var timer_1 = setTimeout(function () {
setShow(false);
onClose && onClose();
}, autohideDuration);
return function () { return clearTimeout(timer_1); };
}
}
else {
setShow(false);
}
return function () {
setShow(false);
};
}, [open, autohide, autohideDuration, onClose]);
var animationClasses = useMemo(function () {
return "transition-opacity duration-500 ".concat(show ? 'visible opacity-100' : 'invisible opacity-0');
}, [show]);
var otherClasses = useMemo(function () {
var horizontalClasses = horizontals[horizontal];
var verticalClasses = verticals[vertical];
var backgroundClasses = backgrounds[toastBackground];
var colorClasses = colors[toastColor];
var roundedClasses = roundeds[rounded];
return "".concat(horizontalClasses, " ").concat(verticalClasses, " ").concat(backgroundClasses, " ").concat(colorClasses, " ").concat(roundedClasses);
}, [horizontal, vertical, toastColor, toastBackground, rounded]);
var handleClick = onClick || onClose;
return (_jsxs("aside", { className: twMerge("toast fixed z-100 min-w-80 py-4 px-6 ".concat(className, " ").concat(otherClasses, " ").concat(animationClasses), className), style: style, id: 'toast', role: 'alert', tabIndex: -1, ref: toastRef, onClick: handleClick, onBlur: function () {
if (!closeOnBlur)
return;
setShow(false);
onClose && onClose();
}, children: [_jsx("div", { className: 'toast-body whitespace-nowrap', children: body }), !autohide && (_jsx(CloseButton, { layout: 'circle', size: 'md', onClick: function () {
setShow(false);
onClose && onClose();
}, className: 'absolute top-1 right-1' }))] }));
};
export default Toast;