@grandlinex/react-components
Version:
43 lines (42 loc) • 3.09 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.NotificationElement = NotificationElement;
const react_1 = __importDefault(require("react"));
const react_icons_1 = require("@grandlinex/react-icons");
const IconButton_1 = require("../button/IconButton");
const util_1 = require("../../util");
const DropDownIconMenu_1 = __importDefault(require("../menu/DropDownIconMenu"));
const Grid_1 = require("../Grid/Grid");
function NotificationElement({ el, onClick, button, icon, color, image, menu, fallbackIcon, }) {
return (react_1.default.createElement("div", { key: el.key, className: (0, util_1.cnx)('glx-notification', 'glx-flex-row', [el.selected, 'glx-notification--sel'], [el.active, ' glx-notification--unread']) },
react_1.default.createElement("div", { className: "glx-notification--color", style: color ? { backgroundColor: color } : undefined }),
react_1.default.createElement("div", { className: "glx-flex-column" },
react_1.default.createElement("div", { className: "glx-flex-row" },
icon ? react_1.default.createElement("div", { className: "glx-mr-2" }, icon) : null,
react_1.default.createElement("div", { className: "glx-bold", onClick: onClick }, el.title)),
react_1.default.createElement("div", { onClick: onClick }, el.message),
react_1.default.createElement("div", { className: "glx-flex-row glx-notification--button glx-flex-g-8" },
react_1.default.createElement("div", { className: "glx-notification--date" }, el.date),
react_1.default.createElement("div", { className: "glx-flex-r" },
button?.map((sel) => {
if (sel.show()) {
return (react_1.default.createElement("div", { key: `${el.key}_${sel.key}` },
react_1.default.createElement(IconButton_1.IconButton, { className: "glx-p-2", onClick: () => sel.onClick(), toolTip: {
text: sel.tooltip,
position: 'left',
} }, sel.content)));
}
return null;
}),
menu ? (react_1.default.createElement("div", null,
react_1.default.createElement(DropDownIconMenu_1.default, { left: true, menu: menu }))) : null))),
image ? (react_1.default.createElement("div", { className: "glx-notification--image", style: {
backgroundImage: `url(${image})`,
} })) : null,
!image && fallbackIcon ? (react_1.default.createElement(Grid_1.Grid, { flexR: true, center: true, className: "glx-notification--image", style: {
backgroundColor: fallbackIcon.color,
} }, (0, react_icons_1.getIcon)(fallbackIcon.icon)({ size: react_icons_1.ISize.MD }))) : null));
}