myprojectpackageprav
Version:
My package in npm
116 lines • 8.01 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var actionbutton_1 = tslib_1.__importDefault(require("../buttons/actionbutton"));
var input_select_1 = tslib_1.__importDefault(require("../../utils/controls/input-select"));
var notification_items_1 = tslib_1.__importDefault(require("./notification-items"));
require("./notifications.css");
var tabs_1 = tslib_1.__importDefault(require("../tabs/tabs"));
var popupTop = '';
var xpositionvalue = '';
var offsetLeftValue = '';
var offsetTopValue = '';
var elementHeightValue = '';
var offsetWidthValue = '';
function Notifications() {
var notification_items = [
{
tabtitle: 'All (08)',
is_active: "true",
content: (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(notification_items_1.default, { tabId: "all" })))
},
{
tabtitle: 'Actions (02)',
is_active: "false",
content: (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(notification_items_1.default, { tabId: "actions" })))
},
{
tabtitle: 'Notifications (06)',
is_active: "false",
content: (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(notification_items_1.default, { tabId: "notifications" })))
}
];
/***** Responsive Popup Code Start*****/
var notification = (0, react_1.useRef)(null);
var popupbtnRef = (0, react_1.useRef)(null);
var _a = (0, react_1.useState)(''), xpositionvalueupdate = _a[0], setpopupwidthupdate = _a[1];
var _b = (0, react_1.useState)(''), popupheight = _b[0], setpopupheight = _b[1];
var _c = (0, react_1.useState)({
notification: false,
}), showActionPopups = _c[0], setShowActionPopups = _c[1];
var initialValues = ['notification'];
var _d = (0, react_1.useState)({
notification: false,
}), btnActionshowhide = _d[0], setActionbtnshowhide = _d[1];
(0, react_1.useEffect)(function () {
setpopupheight(window.innerHeight - (offsetTopValue + 58));
var popupwidthdata = popupbtnRef.current ? popupbtnRef.current.offsetWidth : 0;
// setpopupwidth(popupwidthdata)
if (popupwidthdata < xpositionvalue) {
xpositionvalue = xpositionvalue - popupwidthdata;
setpopupwidthupdate(xpositionvalue);
}
else if (popupwidthdata > offsetLeftValue && popupwidthdata < (window.innerWidth - (offsetLeftValue + offsetWidthValue))) {
xpositionvalue = offsetLeftValue;
setpopupwidthupdate(xpositionvalue);
}
else if (popupwidthdata > offsetLeftValue && popupwidthdata > (window.innerWidth - (offsetLeftValue + offsetWidthValue))) {
xpositionvalue = 0;
setpopupwidthupdate(xpositionvalue);
}
}, [showActionPopups]);
var showhide = tslib_1.__assign({}, btnActionshowhide);
function popupCloseOpenFunctionality(type, value, top, xposition, left, Ref, elementHeight, offsetWidth) {
var _a, _b;
popupTop = top;
xpositionvalue = xposition;
offsetLeftValue = left;
offsetTopValue = top;
elementHeightValue = elementHeight;
offsetWidthValue = offsetWidth;
initialValues.forEach(function (element) {
showhide[element] = false;
});
setActionbtnshowhide(showhide);
if (type) {
setActionbtnshowhide(tslib_1.__assign(tslib_1.__assign({}, showhide), (_a = {}, _a[type] = value, _a)));
setShowActionPopups(tslib_1.__assign(tslib_1.__assign({}, showhide), (_b = {}, _b[type] = value, _b)));
}
}
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "notification" },
react_1.default.createElement(actionbutton_1.default, { label: "Notifications", name: '', className: (btnActionshowhide === null || btnActionshowhide === void 0 ? void 0 : btnActionshowhide.notification) ? 'btn btn-sm p-0 p-relative popup-arrow' : 'btn btn-sm p-0 p-relative', icon: "icon-bell font-16 darktext bold", isClick: 'notification', type: "button", badgeinfo: "22", badge: "badge bgcolor-primary border-radius3 px-1 font-10 whitetext", ref: notification, popupCloseOpenFunctionality: popupCloseOpenFunctionality, showhide: showActionPopups.notification, props: undefined, inputProps: undefined, onClick: undefined, reference: undefined, btnclassName: undefined, id: undefined, ricon: undefined, "aria-label": undefined }),
(btnActionshowhide === null || btnActionshowhide === void 0 ? void 0 : btnActionshowhide.notification) ?
react_1.default.createElement("div", { className: 'popup', ref: popupbtnRef, style: { top: popupTop + 8, position: "absolute", overflow: "auto", left: xpositionvalueupdate, maxHeight: popupheight } },
react_1.default.createElement("div", { className: "d-flex w-100 p-relative align-items-center border-bottom1 pb-1" },
react_1.default.createElement("h2", { tabIndex: 0, "aria-label": "Alerts", className: "d-flex font-16" },
react_1.default.createElement("span", { className: "icon-bell pe-1" }),
" Alerts"),
react_1.default.createElement("div", { className: "d-flex align-items-center ms-auto" },
react_1.default.createElement("div", { className: "d-flex align-items-center ms-1" },
react_1.default.createElement(input_select_1.default, { inputProps: {
id: 'FilterBy',
name: 'Filter By',
placeholder: 'Select',
className: 'font-11'
}, label: 'Filter By', type: 'select', className: 'font-11 form-xs', formClassName: "ms-auto form-horizontal" })),
react_1.default.createElement("div", { className: "d-flex align-items-center ms-1 mb-1" },
react_1.default.createElement(input_select_1.default, { inputProps: {
id: 'Date',
name: 'Date',
placeholder: 'Select',
className: 'font-11'
}, label: 'Date', type: 'select', className: 'font-11 form-xs', formClassName: "form-horizontal" })),
react_1.default.createElement("div", { className: "font-11 links ms-1" }, "days")),
react_1.default.createElement("div", { className: 'close' },
react_1.default.createElement(actionbutton_1.default, { label: "Cancel", name: "", className: 'btn-bgcolor6 whitetext p-0 btn btn-sm font-0 btn-border-radius3', icon: "icon-close font-8 p-1", type: "button", isClick: 'notification', ref: notification, popupCloseOpenFunctionality: popupCloseOpenFunctionality, showhide: showActionPopups.notification, props: undefined, inputProps: undefined, onClick: undefined, reference: undefined, btnclassName: undefined, id: undefined, badgeinfo: undefined, badge: undefined, ricon: undefined, "aria-label": undefined }))),
react_1.default.createElement("div", null,
react_1.default.createElement(tabs_1.default, { items: notification_items, contentstyles: "pe-1", anchorclassName: "darktext", className: "latobold darktext", tablistclassName: "font-13" })))
: '')));
}
exports.default = Notifications;
//# sourceMappingURL=notifications.js.map