@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
2 lines (1 loc) • 1.81 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("react"),r=require("@mui/material/Avatar"),a=require("@mui/material/Tooltip"),o=require("@mui/icons-material/Person"),i=require("@mui/material/styles"),s=require("./StatusAvatar.styles.js"),l=require("../util/functions/index.js");function u(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=u(r),d=u(a),c=u(o);const f="NexusStatusAvatar",g={available:"success.light",away:"grey.300",offline:"error.main"};exports.StatusAvatar=r=>{const{status:a,backgroundColor:o,textColor:u,disabled:m,"data-testid":p,id:v,email:x,firstName:b,lastName:h,avatar:y,tooltip:j,statusMapping:C=g,sx:q,...A}=r,S=i.useTheme(),$=l.getInitials(b,h),k=o||l.getHighlightColor(S,$),[N,T]=e.useState(l.getContrastTextColor(S,k,u));e.useEffect((()=>{"undefined"==typeof document||/^(#|rgb\(|rgba\(|hsl\(|hsla\()/.test(k)||T(l.getContrastTextColor(S,k,u))}),[S,k,u]);let M=t.jsx(n.default,{role:"img","aria-label":`${b} ${h}`,"data-testid":p||`${f}-root`,className:`${f}-root`,translate:"no",...A,sx:[{backgroundColor:k,color:N,...S.applyStyles("dark",{backgroundColor:k,color:N})},m?{opacity:.5,cursor:"default"}:{},...Array.isArray(q)?q:[q]],children:$||t.jsx(c.default,{"data-testid":`${f}-defaultIcon`,color:"inherit"})});return j&&(M=t.jsx(d.default,{slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[0,-6]}}]}},title:t.jsx("div",{translate:"no",children:j}),arrow:!0,children:M})),a?t.jsx(s.StyledBadge,{component:"div","data-testid":`${f}-badge`,overlap:"circular"===A.variant||void 0===A.variant?"circular":"rectangular",anchorOrigin:{vertical:"bottom",horizontal:"right"},variant:"dot",sx:[{"& .MuiBadge-badge":{bgcolor:a?C[a]:void 0}},m?{opacity:.5,cursor:"default"}:{}],children:M}):M};