react-next-toast
Version:
An easy to use library for toast notifications
78 lines (77 loc) • 3.09 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const interfaces_1 = require("./partials/interfaces");
const Icon_1 = require("./partials/Icon");
const typeToIconMap = {
[interfaces_1.ToastType.SUCCESS]: Icon_1.Icon.Success,
[interfaces_1.ToastType.ERROR]: Icon_1.Icon.Error,
[interfaces_1.ToastType.WARNING]: Icon_1.Icon.Warning,
[interfaces_1.ToastType.INFO]: Icon_1.Icon.Info,
};
const ToastNotification = ({ message, backgroundColor, textColor, type, position, }) => {
const IconComponent = typeToIconMap[type] || Icon_1.Icon.Info;
const defaultPositionStyle = {
top: "30px",
bottom: "30px",
right: "10px",
left: "10px",
};
const notificationStyle = {
position: "fixed",
top: position === "top-right" || position === "top-left" || !position
? defaultPositionStyle.top
: undefined,
bottom: position === "bottom-right" || position === "bottom-left" || !position
? defaultPositionStyle.bottom
: undefined,
right: position === "top-right" || position === "bottom-right" || !position
? defaultPositionStyle.right
: undefined,
left: position === "top-left" ||
position === "bottom-left" ||
position === "left"
? defaultPositionStyle.left
: undefined,
maxWidth: "30%",
minWidth: "320px",
maxHeight: "max-content",
backgroundColor: backgroundColor ||
(type === interfaces_1.ToastType.SUCCESS
? "#C2ECC1"
: type === interfaces_1.ToastType.ERROR
? "#FB8F6D"
: type === interfaces_1.ToastType.WARNING
? "#FFC107"
: type === interfaces_1.ToastType.INFO
? "#17A2B8"
: "#6C757D"),
border: "1px solid #000",
borderRadius: "8px",
display: "flex",
flexDirection: "column",
gap: "0.5rem",
paddingInline: "1rem",
paddingBlock: "0.5rem",
zIndex: "99999999"
};
const messageStyle = {
color: textColor || (type === interfaces_1.ToastType.SUCCESS ? "#3F3F3D" : "#FFF"),
fontSize: "14px",
maxHeight: "100px",
overflowX: "hidden",
overflowY: "visible",
textOverflow: "ellipsis",
whiteSpace: "pre-line",
};
return (react_1.default.createElement("div", { style: notificationStyle, "data-toast-container": true },
react_1.default.createElement("div", null,
react_1.default.createElement(IconComponent, null)),
react_1.default.createElement("p", { style: messageStyle, dangerouslySetInnerHTML: {
__html: message
} })));
};
exports.default = ToastNotification;