@ukpc-lib/react 0.2.4 → 0.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/index.cjs +23 -23
- package/dist/components/index.js +1699 -1689
- package/dist/{index.module-ebc563e0.js → index.module-34bab88b.js} +5086 -5089
- package/dist/{index.module-35d2f1ab.cjs → index.module-9c4fe97a.cjs} +75 -75
- package/dist/share/index.cjs +1 -1
- package/dist/share/index.js +2 -2
- package/package.json +1 -1
- package/web-components-bundle/global-topbar/index.cjs +2 -2
- package/web-components-bundle/global-topbar/index.js +72 -62
- package/web-components-bundle/has-permission/index.cjs +74 -74
- package/web-components-bundle/has-permission/index.js +5681 -5678
package/dist/share/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../index.module-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../index.module-9c4fe97a.cjs"),l=require("axios"),i=require("react/jsx-runtime"),g=require("react");require("@r2wc/react-to-web-component");const R=require("react-router-dom");require("react-dom");require("@mui/material");require("moment");function q({config:t,pushError:n=o.pushError}){const r=l.create(t);r.interceptors.request.use(async e=>(e.headers={Accept:"application/json","Content-Type":"application/json"},e),e=>Promise.reject(e)),r.interceptors.response.use(e=>e,async e=>s(e));async function s(e){var h,p,P;console.error("Error 🚨:",e);const u=e.config,a=(p=(h=e.response)==null?void 0:h.data)==null?void 0:p.errorMessage,m=a===o.ERROR_MESSAGE.TOKEN_EXPIRED;return((P=e.response)==null?void 0:P.status)===401?m&&!u._retry?(u._retry=!0,r.post("/authentication/api/v1/auth/refresh-token").then(()=>r(u)).catch(()=>o.login(t.baseURL))):((!a||!m)&&o.login(t.baseURL),Promise.reject("Unauthorized! Please login again.")):(n(a||"Something went wrong!"),Promise.reject(e.response.data))}return r}const d=t=>{const[n,r]=g.useState([]);return g.useEffect(()=>{l.get(`${t}/user-management/api/v1/users/my-account/permissions`,{withCredentials:!0}).then(s=>r(s.data)).catch(s=>{console.error("Getting user permission error:",s)})},[t]),n},c=t=>(n,r)=>{const s=d(t);return r?n.every(e=>s==null?void 0:s.includes(e)):n.some(e=>s==null?void 0:s.includes(e))},E=({baseUrl:t,accessWith:n,requireAll:r,children:s})=>c(t)(n,r)?i.jsx(i.Fragment,{children:s}):null,f=({accessWith:t,requireAll:n,baseUrl:r,unAuthorizedPath:s,children:e})=>c(r)(t,n)?i.jsx(i.Fragment,{children:e}):i.jsx(R.Navigate,{to:s,replace:!0});exports.AuthProvider=o.AuthProvider;exports.search=o.search;exports.useAuth=o.useAuth;exports.HasPermission=E;exports.PermissionRoute=f;exports.getAxiosInstance=q;exports.getUseHasPermission=c;exports.useGetPermission=d;
|
package/dist/share/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { t as h, p as E, E as g } from "../index.module-
|
|
2
|
-
import { A as H, i as L, u as N } from "../index.module-
|
|
1
|
+
import { t as h, p as E, E as g } from "../index.module-34bab88b.js";
|
|
2
|
+
import { A as H, i as L, u as N } from "../index.module-34bab88b.js";
|
|
3
3
|
import f from "axios";
|
|
4
4
|
import { jsx as a, Fragment as P } from "react/jsx-runtime";
|
|
5
5
|
import { useState as d, useEffect as R } from "react";
|
package/package.json
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../react-to-web-component-287abfaf.cjs");function
|
|
2
|
-
`;function j({logo:r,user:n,baseUrl:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../react-to-web-component-287abfaf.cjs");function g({primaryColor:r="#009d4f"}){return e.jsxRuntimeExports.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",children:[e.jsxRuntimeExports.jsx("path",{d:"M8.5 19.5H8C4 19.5 2 18.5 2 13.5V8.5C2 4.5 4 2.5 8 2.5H16C20 2.5 22 4.5 22 8.5V13.5C22 17.5 20 19.5 16 19.5H15.5C15.19 19.5 14.89 19.65 14.7 19.9L13.2 21.9C12.54 22.78 11.46 22.78 10.8 21.9L9.3 19.9C9.14 19.68 8.77 19.5 8.5 19.5Z",stroke:r,"stroke-width":"1.5","stroke-miterlimit":"10","stroke-linecap":"round","stroke-linejoin":"round"}),e.jsxRuntimeExports.jsx("path",{d:"M15.9965 11.5H16.0054",stroke:r,"stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),e.jsxRuntimeExports.jsx("path",{d:"M11.9955 11.5H12.0045",stroke:r,"stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),e.jsxRuntimeExports.jsx("path",{d:"M7.99451 11.5H8.00349",stroke:r,"stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})]})}function w({primaryColor:r="#009d4f"}){return e.jsxRuntimeExports.jsxs("svg",{width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsxRuntimeExports.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.7968 17.4705C16.5901 17.4705 18.8076 16.8556 19.0218 14.3874C19.0218 11.921 17.4757 12.0796 17.4757 9.05334C17.4757 6.68952 15.2352 4 11.7968 4C8.35833 4 6.1178 6.68952 6.1178 9.05334C6.1178 12.0796 4.57178 11.921 4.57178 14.3874C4.78679 16.8649 7.00428 17.4705 11.7968 17.4705Z",stroke:r,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e.jsxRuntimeExports.jsx("path",{d:"M13.8274 20.0286C12.6679 21.3161 10.8591 21.3313 9.68848 20.0286",stroke:r,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e.jsxRuntimeExports.jsx("circle",{cx:"16.928",cy:"7",r:"2",fill:"#E01B00",stroke:r})]})}const v=`.avatar-dropdown-item{padding:.5rem;font-size:.875rem;line-height:1.25rem;cursor:pointer;border-radius:.25rem}.avartarDropdownMenu{background-color:#fff;padding:.5rem;width:13rem;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);position:absolute;left:-10rem;top:3.2rem}.avartarDropdownMenu ul{list-style:none;padding-inline-start:0;margin-block-end:0}.navbar{position:fixed;display:flex;z-index:30;background:black;top:0;width:100%;padding-left:2.5rem;height:64px}.navbar-container{display:flex;flex-direction:row;align-items:center;width:100%;justify-content:space-between}.logo-container{padding:16px 0;height:100%}.right-side-container{display:flex;flex-direction:row;align-items:center;text-align:center;margin-right:2.5rem;gap:1rem}.userContainer{display:flex;align-items:center;gap:.5rem}.userFullName{color:#fff;font-weight:400;font-size:.875rem;line-height:1.25rem}.userAvatar{width:2.5rem;height:2.5rem;cursor:pointer;-o-object-fit:cover;object-fit:cover;border-radius:9999px;border:2px solid #FFFFFF}.userAvatarNull{width:2.5rem;height:2.5rem;background:#DDDDDD;border-radius:100%;color:#fff;font-size:20px;font-weight:400;display:flex;align-items:center;justify-content:center}.relative{position:relative}.cursor-pointer{cursor:pointer}
|
|
2
|
+
`;function j({logo:r,user:n,baseUrl:d,style:o,classNames:i="",customColors:t}){const s=r||"/public/assets/icons/logo-header.png",a={...o,color:(t==null?void 0:t.color)||"black",backgroundColor:(t==null?void 0:t.bgColor)||"black"},[x,l]=e.reactExports.useState(!1),p=()=>{window.location.href=`${d}/authentication/logout?callbackUrl=${window.location.href}`};return e.jsxRuntimeExports.jsxs(e.ShadowDomWrapper,{styles:[v],style:{zIndex:1202},children:[e.jsxRuntimeExports.jsx("nav",{className:`navbar ${i}`,style:t?a:o,children:e.jsxRuntimeExports.jsxs("div",{className:"navbar-container",children:[e.jsxRuntimeExports.jsx("div",{className:"logo-container",children:e.jsxRuntimeExports.jsx("img",{src:s,alt:"logo-header"})}),e.jsxRuntimeExports.jsxs("div",{className:"right-side-container",children:[e.jsxRuntimeExports.jsx("span",{className:"cursor-pointer",children:e.jsxRuntimeExports.jsx(w,{primaryColor:t==null?void 0:t.primaryColor})}),e.jsxRuntimeExports.jsx("span",{className:"cursor-pointer",children:e.jsxRuntimeExports.jsx(g,{primaryColor:t==null?void 0:t.primaryColor})}),e.jsxRuntimeExports.jsxs("div",{className:"userContainer",children:[e.jsxRuntimeExports.jsx(E,{primaryColor:t==null?void 0:t.primaryColor,avatarUrl:n==null?void 0:n.avatarUrl,userName:n==null?void 0:n.firstName,setShowConfirmModal:l}),e.jsxRuntimeExports.jsx("p",{className:"userFullName",children:`${(n==null?void 0:n.firstName)||"Unknown"} ${(n==null?void 0:n.lastName)||"User"}`})]})]})]})}),e.jsxRuntimeExports.jsx(e.LogoutConfirmModal,{isOpen:x,onClose:()=>l(!1),onConfirm:p})]})}function E({avatarUrl:r,userName:n,setShowConfirmModal:d,primaryColor:o="#009d4f"}){const[i,t]=e.reactExports.useState(!1),s=e.reactExports.useRef(null),a=e.reactExports.useRef(null),[x,l]=e.reactExports.useState(!1),[p,c]=e.reactExports.useState(!1),f={backgroundColor:x?o:"transparent"},m={backgroundColor:p?o:"transparent"};return e.reactExports.useEffect(()=>{const u=h=>{s.current&&!s.current.contains(h.target)&&t(!1),a.current&&!a.current.contains(h.target)&&t(!1)};return document.addEventListener("click",u,!0),()=>{document.removeEventListener("click",u,!0)}},[s]),e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:e.jsxRuntimeExports.jsxs("div",{style:{position:"relative"},children:[r?e.jsxRuntimeExports.jsx("img",{onClick:()=>t(!i),ref:s,alt:"user avatar",className:"userAvatar",src:r}):e.jsxRuntimeExports.jsx("div",{onClick:()=>t(!i),ref:s,className:"userAvatarNull",children:(n==null?void 0:n.charAt(0))??""}),e.jsxRuntimeExports.jsx("div",{style:{display:i?"block":"none"},className:"avartarDropdownMenu",ref:a,children:e.jsxRuntimeExports.jsxs("ul",{children:[e.jsxRuntimeExports.jsx("li",{onMouseEnter:()=>c(!0),onMouseLeave:()=>c(!1),style:m,className:"avatar-dropdown-item",children:"Profile"}),e.jsxRuntimeExports.jsx("li",{onMouseEnter:()=>l(!0),onMouseLeave:()=>l(!1),style:f,onClick:()=>d(!0),className:"avatar-dropdown-item",children:"Logout"})]})})]})})}{const r=e.s(j,{props:{logo:"string",user:"json",baseUrl:"string",classNames:"string",style:"json",customColors:"json"},shadow:"open"});customElements.define("global-topbar",r)}exports.TopBar=j;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { j as e, s as
|
|
2
|
-
function
|
|
1
|
+
import { j as e, s as u, r as a, S as j, L as k } from "../react-to-web-component-8933be15.js";
|
|
2
|
+
function m({ primaryColor: r = "#009d4f" }) {
|
|
3
3
|
return /* @__PURE__ */ e.jsxs(
|
|
4
4
|
"svg",
|
|
5
5
|
{
|
|
@@ -13,7 +13,7 @@ function k({ primaryColor: n = "#009d4f" }) {
|
|
|
13
13
|
"path",
|
|
14
14
|
{
|
|
15
15
|
d: "M8.5 19.5H8C4 19.5 2 18.5 2 13.5V8.5C2 4.5 4 2.5 8 2.5H16C20 2.5 22 4.5 22 8.5V13.5C22 17.5 20 19.5 16 19.5H15.5C15.19 19.5 14.89 19.65 14.7 19.9L13.2 21.9C12.54 22.78 11.46 22.78 10.8 21.9L9.3 19.9C9.14 19.68 8.77 19.5 8.5 19.5Z",
|
|
16
|
-
stroke:
|
|
16
|
+
stroke: r,
|
|
17
17
|
"stroke-width": "1.5",
|
|
18
18
|
"stroke-miterlimit": "10",
|
|
19
19
|
"stroke-linecap": "round",
|
|
@@ -24,7 +24,7 @@ function k({ primaryColor: n = "#009d4f" }) {
|
|
|
24
24
|
"path",
|
|
25
25
|
{
|
|
26
26
|
d: "M15.9965 11.5H16.0054",
|
|
27
|
-
stroke:
|
|
27
|
+
stroke: r,
|
|
28
28
|
"stroke-width": "2",
|
|
29
29
|
"stroke-linecap": "round",
|
|
30
30
|
"stroke-linejoin": "round"
|
|
@@ -34,7 +34,7 @@ function k({ primaryColor: n = "#009d4f" }) {
|
|
|
34
34
|
"path",
|
|
35
35
|
{
|
|
36
36
|
d: "M11.9955 11.5H12.0045",
|
|
37
|
-
stroke:
|
|
37
|
+
stroke: r,
|
|
38
38
|
"stroke-width": "2",
|
|
39
39
|
"stroke-linecap": "round",
|
|
40
40
|
"stroke-linejoin": "round"
|
|
@@ -44,7 +44,7 @@ function k({ primaryColor: n = "#009d4f" }) {
|
|
|
44
44
|
"path",
|
|
45
45
|
{
|
|
46
46
|
d: "M7.99451 11.5H8.00349",
|
|
47
|
-
stroke:
|
|
47
|
+
stroke: r,
|
|
48
48
|
"stroke-width": "2",
|
|
49
49
|
"stroke-linecap": "round",
|
|
50
50
|
"stroke-linejoin": "round"
|
|
@@ -54,8 +54,8 @@ function k({ primaryColor: n = "#009d4f" }) {
|
|
|
54
54
|
}
|
|
55
55
|
);
|
|
56
56
|
}
|
|
57
|
-
function
|
|
58
|
-
primaryColor:
|
|
57
|
+
function b({
|
|
58
|
+
primaryColor: r = "#009d4f"
|
|
59
59
|
}) {
|
|
60
60
|
return /* @__PURE__ */ e.jsxs(
|
|
61
61
|
"svg",
|
|
@@ -72,7 +72,7 @@ function v({
|
|
|
72
72
|
fillRule: "evenodd",
|
|
73
73
|
clipRule: "evenodd",
|
|
74
74
|
d: "M11.7968 17.4705C16.5901 17.4705 18.8076 16.8556 19.0218 14.3874C19.0218 11.921 17.4757 12.0796 17.4757 9.05334C17.4757 6.68952 15.2352 4 11.7968 4C8.35833 4 6.1178 6.68952 6.1178 9.05334C6.1178 12.0796 4.57178 11.921 4.57178 14.3874C4.78679 16.8649 7.00428 17.4705 11.7968 17.4705Z",
|
|
75
|
-
stroke:
|
|
75
|
+
stroke: r,
|
|
76
76
|
strokeWidth: "1.5",
|
|
77
77
|
strokeLinecap: "round",
|
|
78
78
|
strokeLinejoin: "round"
|
|
@@ -82,52 +82,53 @@ function v({
|
|
|
82
82
|
"path",
|
|
83
83
|
{
|
|
84
84
|
d: "M13.8274 20.0286C12.6679 21.3161 10.8591 21.3313 9.68848 20.0286",
|
|
85
|
-
stroke:
|
|
85
|
+
stroke: r,
|
|
86
86
|
strokeWidth: "1.5",
|
|
87
87
|
strokeLinecap: "round",
|
|
88
88
|
strokeLinejoin: "round"
|
|
89
89
|
}
|
|
90
90
|
),
|
|
91
|
-
/* @__PURE__ */ e.jsx("circle", { cx: "16.928", cy: "7", r: "2", fill: "#E01B00", stroke:
|
|
91
|
+
/* @__PURE__ */ e.jsx("circle", { cx: "16.928", cy: "7", r: "2", fill: "#E01B00", stroke: r })
|
|
92
92
|
]
|
|
93
93
|
}
|
|
94
94
|
);
|
|
95
95
|
}
|
|
96
|
-
const
|
|
96
|
+
const y = `.avatar-dropdown-item{padding:.5rem;font-size:.875rem;line-height:1.25rem;cursor:pointer;border-radius:.25rem}.avartarDropdownMenu{background-color:#fff;padding:.5rem;width:13rem;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);position:absolute;left:-10rem;top:3.2rem}.avartarDropdownMenu ul{list-style:none;padding-inline-start:0;margin-block-end:0}.navbar{position:fixed;display:flex;z-index:30;background:black;top:0;width:100%;padding-left:2.5rem;height:64px}.navbar-container{display:flex;flex-direction:row;align-items:center;width:100%;justify-content:space-between}.logo-container{padding:16px 0;height:100%}.right-side-container{display:flex;flex-direction:row;align-items:center;text-align:center;margin-right:2.5rem;gap:1rem}.userContainer{display:flex;align-items:center;gap:.5rem}.userFullName{color:#fff;font-weight:400;font-size:.875rem;line-height:1.25rem}.userAvatar{width:2.5rem;height:2.5rem;cursor:pointer;-o-object-fit:cover;object-fit:cover;border-radius:9999px;border:2px solid #FFFFFF}.userAvatarNull{width:2.5rem;height:2.5rem;background:#DDDDDD;border-radius:100%;color:#fff;font-size:20px;font-weight:400;display:flex;align-items:center;justify-content:center}.relative{position:relative}.cursor-pointer{cursor:pointer}
|
|
97
97
|
`;
|
|
98
98
|
function N({
|
|
99
|
-
logo:
|
|
99
|
+
logo: r,
|
|
100
100
|
user: t,
|
|
101
|
-
baseUrl:
|
|
102
|
-
style:
|
|
103
|
-
classNames:
|
|
104
|
-
customColors:
|
|
101
|
+
baseUrl: c,
|
|
102
|
+
style: o,
|
|
103
|
+
classNames: s = "",
|
|
104
|
+
customColors: n
|
|
105
105
|
}) {
|
|
106
|
-
const
|
|
107
|
-
...
|
|
108
|
-
color: (
|
|
109
|
-
backgroundColor: (
|
|
110
|
-
}, [
|
|
111
|
-
window.location.href = `${
|
|
106
|
+
const i = r || "/public/assets/icons/logo-header.png", l = {
|
|
107
|
+
...o,
|
|
108
|
+
color: (n == null ? void 0 : n.color) || "black",
|
|
109
|
+
backgroundColor: (n == null ? void 0 : n.bgColor) || "black"
|
|
110
|
+
}, [p, d] = a.useState(!1), h = () => {
|
|
111
|
+
window.location.href = `${c}/authentication/logout?callbackUrl=${window.location.href}`;
|
|
112
112
|
};
|
|
113
|
-
return /* @__PURE__ */ e.jsxs(j, { styles: [
|
|
113
|
+
return /* @__PURE__ */ e.jsxs(j, { styles: [y], style: { zIndex: 1202 }, children: [
|
|
114
114
|
/* @__PURE__ */ e.jsx(
|
|
115
115
|
"nav",
|
|
116
116
|
{
|
|
117
|
-
className: `navbar ${
|
|
118
|
-
style:
|
|
117
|
+
className: `navbar ${s}`,
|
|
118
|
+
style: n ? l : o,
|
|
119
119
|
children: /* @__PURE__ */ e.jsxs("div", { className: "navbar-container", children: [
|
|
120
|
-
/* @__PURE__ */ e.jsx("div", { className: "logo-container", children: /* @__PURE__ */ e.jsx("img", { src:
|
|
120
|
+
/* @__PURE__ */ e.jsx("div", { className: "logo-container", children: /* @__PURE__ */ e.jsx("img", { src: i, alt: "logo-header" }) }),
|
|
121
121
|
/* @__PURE__ */ e.jsxs("div", { className: "right-side-container", children: [
|
|
122
|
-
/* @__PURE__ */ e.jsx("span", { className: "cursor-pointer", children: /* @__PURE__ */ e.jsx(
|
|
123
|
-
/* @__PURE__ */ e.jsx("span", { className: "cursor-pointer", children: /* @__PURE__ */ e.jsx(
|
|
122
|
+
/* @__PURE__ */ e.jsx("span", { className: "cursor-pointer", children: /* @__PURE__ */ e.jsx(b, { primaryColor: n == null ? void 0 : n.primaryColor }) }),
|
|
123
|
+
/* @__PURE__ */ e.jsx("span", { className: "cursor-pointer", children: /* @__PURE__ */ e.jsx(m, { primaryColor: n == null ? void 0 : n.primaryColor }) }),
|
|
124
124
|
/* @__PURE__ */ e.jsxs("div", { className: "userContainer", children: [
|
|
125
125
|
/* @__PURE__ */ e.jsx(
|
|
126
|
-
|
|
126
|
+
L,
|
|
127
127
|
{
|
|
128
|
-
primaryColor:
|
|
128
|
+
primaryColor: n == null ? void 0 : n.primaryColor,
|
|
129
129
|
avatarUrl: t == null ? void 0 : t.avatarUrl,
|
|
130
|
-
|
|
130
|
+
userName: t == null ? void 0 : t.firstName,
|
|
131
|
+
setShowConfirmModal: d
|
|
131
132
|
}
|
|
132
133
|
),
|
|
133
134
|
/* @__PURE__ */ e.jsx("p", { className: "userFullName", children: `${(t == null ? void 0 : t.firstName) || "Unknown"} ${(t == null ? void 0 : t.lastName) || "User"}` })
|
|
@@ -137,56 +138,65 @@ function N({
|
|
|
137
138
|
}
|
|
138
139
|
),
|
|
139
140
|
/* @__PURE__ */ e.jsx(
|
|
140
|
-
|
|
141
|
+
k,
|
|
141
142
|
{
|
|
142
|
-
isOpen:
|
|
143
|
-
onClose: () =>
|
|
144
|
-
onConfirm:
|
|
143
|
+
isOpen: p,
|
|
144
|
+
onClose: () => d(!1),
|
|
145
|
+
onConfirm: h
|
|
145
146
|
}
|
|
146
147
|
)
|
|
147
148
|
] });
|
|
148
149
|
}
|
|
149
|
-
function
|
|
150
|
-
avatarUrl:
|
|
151
|
-
|
|
152
|
-
|
|
150
|
+
function L({
|
|
151
|
+
avatarUrl: r,
|
|
152
|
+
userName: t,
|
|
153
|
+
setShowConfirmModal: c,
|
|
154
|
+
primaryColor: o = "#009d4f"
|
|
153
155
|
}) {
|
|
154
|
-
const [
|
|
155
|
-
backgroundColor:
|
|
156
|
-
},
|
|
157
|
-
backgroundColor:
|
|
156
|
+
const [s, n] = a.useState(!1), i = a.useRef(null), l = a.useRef(null), [p, d] = a.useState(!1), [h, f] = a.useState(!1), w = {
|
|
157
|
+
backgroundColor: p ? o : "transparent"
|
|
158
|
+
}, v = {
|
|
159
|
+
backgroundColor: h ? o : "transparent"
|
|
158
160
|
};
|
|
159
|
-
return
|
|
160
|
-
const
|
|
161
|
-
|
|
161
|
+
return a.useEffect(() => {
|
|
162
|
+
const x = (g) => {
|
|
163
|
+
i.current && !i.current.contains(g.target) && n(!1), l.current && !l.current.contains(g.target) && n(!1);
|
|
162
164
|
};
|
|
163
|
-
return document.addEventListener("click",
|
|
164
|
-
document.removeEventListener("click",
|
|
165
|
+
return document.addEventListener("click", x, !0), () => {
|
|
166
|
+
document.removeEventListener("click", x, !0);
|
|
165
167
|
};
|
|
166
|
-
}, [
|
|
167
|
-
/* @__PURE__ */ e.jsx(
|
|
168
|
+
}, [i]), /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsxs("div", { style: { position: "relative" }, children: [
|
|
169
|
+
r ? /* @__PURE__ */ e.jsx(
|
|
168
170
|
"img",
|
|
169
171
|
{
|
|
170
|
-
onClick: () =>
|
|
171
|
-
ref:
|
|
172
|
+
onClick: () => n(!s),
|
|
173
|
+
ref: i,
|
|
172
174
|
alt: "user avatar",
|
|
173
175
|
className: "userAvatar",
|
|
174
|
-
src:
|
|
176
|
+
src: r
|
|
177
|
+
}
|
|
178
|
+
) : /* @__PURE__ */ e.jsx(
|
|
179
|
+
"div",
|
|
180
|
+
{
|
|
181
|
+
onClick: () => n(!s),
|
|
182
|
+
ref: i,
|
|
183
|
+
className: "userAvatarNull",
|
|
184
|
+
children: (t == null ? void 0 : t.charAt(0)) ?? ""
|
|
175
185
|
}
|
|
176
186
|
),
|
|
177
187
|
/* @__PURE__ */ e.jsx(
|
|
178
188
|
"div",
|
|
179
189
|
{
|
|
180
|
-
style: { display:
|
|
190
|
+
style: { display: s ? "block" : "none" },
|
|
181
191
|
className: "avartarDropdownMenu",
|
|
182
|
-
ref:
|
|
192
|
+
ref: l,
|
|
183
193
|
children: /* @__PURE__ */ e.jsxs("ul", { children: [
|
|
184
194
|
/* @__PURE__ */ e.jsx(
|
|
185
195
|
"li",
|
|
186
196
|
{
|
|
187
|
-
onMouseEnter: () =>
|
|
188
|
-
onMouseLeave: () =>
|
|
189
|
-
style:
|
|
197
|
+
onMouseEnter: () => f(!0),
|
|
198
|
+
onMouseLeave: () => f(!1),
|
|
199
|
+
style: v,
|
|
190
200
|
className: "avatar-dropdown-item",
|
|
191
201
|
children: "Profile"
|
|
192
202
|
}
|
|
@@ -197,7 +207,7 @@ function I({
|
|
|
197
207
|
onMouseEnter: () => d(!0),
|
|
198
208
|
onMouseLeave: () => d(!1),
|
|
199
209
|
style: w,
|
|
200
|
-
onClick: () =>
|
|
210
|
+
onClick: () => c(!0),
|
|
201
211
|
className: "avatar-dropdown-item",
|
|
202
212
|
children: "Logout"
|
|
203
213
|
}
|
|
@@ -208,7 +218,7 @@ function I({
|
|
|
208
218
|
] }) });
|
|
209
219
|
}
|
|
210
220
|
{
|
|
211
|
-
const
|
|
221
|
+
const r = u(N, {
|
|
212
222
|
props: {
|
|
213
223
|
logo: "string",
|
|
214
224
|
user: "json",
|
|
@@ -219,7 +229,7 @@ function I({
|
|
|
219
229
|
},
|
|
220
230
|
shadow: "open"
|
|
221
231
|
});
|
|
222
|
-
customElements.define("global-topbar",
|
|
232
|
+
customElements.define("global-topbar", r);
|
|
223
233
|
}
|
|
224
234
|
export {
|
|
225
235
|
N as TopBar
|