@ducor/react
Version:
admin template ui interface
79 lines (78 loc) • 4.29 kB
JavaScript
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useContext, createContext } from "react";
import { twMerge } from "tailwind-merge";
// Icon mapping for each notification type
var ICONS = {
success: "✅",
info: "ℹ️",
warning: "⚠️",
error: "❌",
};
// Styling for each notification type
var TYPE_STYLES = {
success: "bg-green-100 border-green-500 text-green-700",
info: "bg-blue-100 border-blue-500 text-blue-700",
warning: "bg-yellow-100 border-yellow-500 text-yellow-700",
error: "bg-red-100 border-red-500 text-red-700",
};
// Position styling for notifications
var POSITION_STYLES = {
top: "top-4 left-1/2 transform -translate-x-1/2",
bottom: "bottom-4 left-1/2 transform -translate-x-1/2",
topLeft: "top-4 left-5",
topRight: "top-4 right-5",
bottomLeft: "bottom-4 left-5",
bottomRight: "bottom-4 right-5",
};
var Notification = function (_a) {
var message = _a.message, description = _a.description, type = _a.type, position = _a.position, onClose = _a.onClose;
var _b = useState(false), isVisible = _b[0], setIsVisible = _b[1];
useEffect(function () {
setIsVisible(true);
var timer = setTimeout(function () {
setIsVisible(false); // Hide the notification after 3 seconds
setTimeout(onClose, 500); // Remove the notification after the fade-out
}, 3000); // Show the notification for 3 seconds
return function () { return clearTimeout(timer); }; // Cleanup the timer
}, [onClose]);
return (_jsxs("div", { className: twMerge("fixed z-[99999] p-4 border-l-4 rounded-md shadow-lg transition-all duration-500 ease-in-out\n ".concat(POSITION_STYLES[position], " ").concat(TYPE_STYLES[type], " \n ").concat(isVisible
? "opacity-100 translate-x-0 scale-100"
: "opacity-0 translate-x-[100%] scale-95")), children: [_jsxs("div", { className: 'flex items-center', children: [_jsx("span", { className: 'mr-3 text-lg', children: ICONS[type] }), _jsxs("div", { children: [_jsx("div", { className: 'font-semibold', children: message }), _jsx("div", { className: 'text-sm mt-1', children: description })] })] }), _jsx("button", { className: 'absolute top-2 right-2 text-lg text-gray-500 hover:text-gray-700', onClick: function () { return setIsVisible(false); }, children: "\u00D7" })] }));
};
var NotificationContext = createContext(undefined);
// Notification container that holds all notifications
var NotificationContainer = function () {
var _a = useState([]), notifications = _a[0], setNotifications = _a[1];
var addNotification = function (message, description, type, position) {
var id = Date.now();
var newNotification = (_jsx(Notification, { message: message, description: description, type: type, position: position, onClose: function () { return removeNotification(id); } }, id));
setNotifications(function (prev) { return __spreadArray(__spreadArray([], prev, true), [newNotification], false); });
};
var removeNotification = function (id) {
setNotifications(function (prev) {
return prev.filter(function (notification) {
return notification.key !== id.toString();
});
});
};
return (_jsx(NotificationContext.Provider, { value: { addNotification: addNotification }, children: _jsx("div", { className: 'fixed top-0 left-0 w-full h-full pointer-events-none', children: _jsx("div", { className: 'absolute', children: notifications }) }) }));
};
// Hook to use notifications globally
var useNotification = function () {
var context = useContext(NotificationContext);
if (!context) {
throw new Error("useNotification must be used within a NotificationProvider");
}
return context;
};
export { NotificationContainer, useNotification };
export default Notification;