myprojectpackageprav
Version:
My package in npm
114 lines • 8.16 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("../../../components/buttons/actionbutton"));
var input_checkbox_1 = tslib_1.__importDefault(require("../../../utils/controls/input-checkbox"));
var team_members_data_1 = require("./team-members-data");
var react_router_dom_1 = require("react-router-dom");
require("./team-members.css");
var buttons_1 = tslib_1.__importDefault(require("../../../components/buttons/buttons"));
var input_text_1 = tslib_1.__importDefault(require("../../../utils/controls/input-text"));
var popupTop = '';
var xpositionvalue = '';
var offsetLeftValue = '';
var offsetTopValue = '';
var offsetWidthValue = '';
function Teammembers() {
/***** Responsive Popup Code Start*****/
var addfiles = (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)({
addfiles: false,
}), showActionPopups = _c[0], setShowActionPopups = _c[1];
var initialValues = ['addfiles'];
var _d = (0, react_1.useState)({
addfiles: false,
}), btnActionshowhide = _d[0], setActionbtnshowhide = _d[1];
(0, react_1.useEffect)(function () {
setpopupheight(window.innerHeight - (offsetTopValue + 30));
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;
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: "shadow card w-100 mt-3 p-relative" },
react_1.default.createElement("div", { className: 'card-header border-bottom1 gap-2 flex-wrap d-flex align-items-center' },
react_1.default.createElement(input_checkbox_1.default, { inputProps: {
id: 'team-members',
name: 'Team Members',
label: 'Team Members',
arialabel: 'Select All',
type: 'checkbox',
className: 'color-primary',
badgecount: "23",
badge: "badge bgcolor-primary whitetext px-1 border-radius3",
isInfo: 'true',
info: 'Team Members',
infoIcon: 'icon-info',
tooltip: 'tool-tip tooltip-top'
}, className: 'me-1 color-primary', formClassName: "d-flex align-items-center form-xs" }),
react_1.default.createElement("div", { className: "ms-auto d-flex align-items-center gap-1" },
react_1.default.createElement(actionbutton_1.default, { label: "Add", name: 'Add', className: (btnActionshowhide === null || btnActionshowhide === void 0 ? void 0 : btnActionshowhide.addfiles) ? 'btn-border btn btn-xs font-0 font-xl-14 color-primary btn-border-radius3 p-relative popup-arrow ms-auto' : 'btn-border btn btn-xs font-0 font-xl-14 color-primary btn-border-radius3 p-relative ms-auto', icon: "icon-add color-primary font-12 me-xl-1 bold", isClick: 'addfiles', type: "button", ref: addfiles, popupCloseOpenFunctionality: popupCloseOpenFunctionality, showhide: showActionPopups.addfiles }),
react_1.default.createElement(buttons_1.default, { label: "Delete", "aria-label": "Delete", icon: "icon-trashbin font-12", className: 'btn-xs font-0 btn-border color-primary uppercase text-nowrap border-radius4 px-2', type: "button" }))),
(btnActionshowhide === null || btnActionshowhide === void 0 ? void 0 : btnActionshowhide.addfiles) ?
react_1.default.createElement("div", { className: 'popup popup-sm', ref: popupbtnRef, style: { top: popupTop + 8, position: "absolute", overflow: "auto", left: xpositionvalueupdate, maxHeight: popupheight } },
react_1.default.createElement("h3", null, "Add Members"),
react_1.default.createElement("div", { className: "pt-2" },
react_1.default.createElement(input_text_1.default, { inputProps: {
id: 'teammember',
name: 'Team Member',
className: 'font-12',
placeholder: 'Subject',
}, label: 'Team Member', className: 'form-sm', isMandatory: true, formClassName: "ms-auto form-vertical" })),
react_1.default.createElement("div", { className: 'pt-2 d-flex gap-2' },
react_1.default.createElement(buttons_1.default, { label: "Ok", "aria-label": "Ok", icon: "icon-checked font-12 me-1", className: 'btn btn-sm btn-primary whitetext font-14 btn-border-radius3 ms-auto ' }),
react_1.default.createElement(actionbutton_1.default, { label: "Cancel", name: "Cancel", className: 'btn-bgcolor5 whitetext btn btn-sm font-14 btn-border-radius3', icon: "icon-close font-10 me-1", type: "button", isClick: 'addfiles', ref: addfiles, popupCloseOpenFunctionality: popupCloseOpenFunctionality, showhide: showActionPopups.addfiles })))
: '',
react_1.default.createElement("div", { className: "card-body " }, team_members_data_1.membersitems.map(function (membersdata) {
return react_1.default.createElement("div", { className: "d-flex align-items-center mb-2 pb-2 border-bottom1" },
react_1.default.createElement(input_checkbox_1.default, { inputProps: {
id: membersdata.title,
label: membersdata.title,
arialabel: membersdata.title,
type: 'checkbox',
className: 'form-xs font-0'
}, formClassName: "d-flex align-items-center me-2" }),
react_1.default.createElement("div", null,
react_1.default.createElement("div", { className: "color-primary" }, membersdata.title),
react_1.default.createElement("div", { className: "subtitle-color1 latoregular font-14" },
react_1.default.createElement(react_router_dom_1.Link, { className: "subtitle-color1 latoregular font-14", mailto: membersdata.mailid, title: membersdata.title }, membersdata.mailid))));
})))));
}
exports.default = Teammembers;
//# sourceMappingURL=team-members.js.map