@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) • 4.15 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("@mui/material/Avatar"),r=require("@mui/material/ClickAwayListener"),i=require("@mui/material/List"),o=require("@mui/material/ListItem"),s=require("@mui/material/ListItemButton"),l=require("@mui/material/Paper"),n=require("@mui/material/Typography"),u=require("@mui/material/Skeleton"),d=require("@mui/material/Stack"),p=require("@mui/material/styles"),c=require("./AudienceGroup.styles.js"),m=require("../common/Popper/StyledPopper.js"),x=require("../locales/index.js"),g=require("./locale.json.js"),f=require("../StatusAvatar/StatusAvatar.container.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function b(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}var j=b(t),v=h(a),k=h(r),A=h(i),P=h(o),y=h(s),C=h(l),q=h(n),w=h(u),S=h(d);const M="NexusAudienceGroup",$={small:24,medium:32,large:40},G={available:"success.light",away:"grey.300",offline:"error.main"},N=t=>{const{user:a,onClick:r=()=>{},tooltip:i=!0,statusMapping:o=G,size:s=40,...l}=t,{"data-testid":n}=a,u=`${a?.firstName} ${a?.lastName}`,d=i&&!a.disabled;return e.jsx(f.StatusAvatar,{"data-testid":n||"avatar","aria-label":u,role:"button",tabIndex:0,...l,...a,statusMapping:o,tooltip:i?u:void 0,sx:[{width:s,height:s},d?{cursor:"pointer"}:{}],onClick:d?e=>{r(a),e.stopPropagation()}:e=>e.stopPropagation()})},T=t=>{const a=p.useTheme(),r=x.useTranslate(g.default),{users:i,max:o=2,onClick:s,statusMapping:l=G,menuTextColor:n=a.vars.palette.text.primary,menuBackgroundColor:u=a.vars.palette.background.paper,AvatarGroupProps:d={},anchorSize:c="large"}=t,[f,h]=j.useState(null),b=Math.max(o,2)-1,[w,S]=j.useState(null),T=Boolean(w),z=e=>{S(null),e.stopPropagation()},O=$[c];return e.jsxs(e.Fragment,{children:[e.jsx(v.default,{role:"button",tabIndex:0,"aria-label":r("Show More"),...d,"data-testid":"avatar",onClick:e=>{S(e.currentTarget),e.stopPropagation()},sx:{width:O,height:O,cursor:"pointer"},className:`${M}-showMore`,children:`+${i.length&&i.length-b}`}),e.jsx(m.StyledPopper,{anchorEl:w,open:T,menuBackgroundColor:u,disablePortal:!1,placement:"bottom",modifiers:[{name:"arrow",enabled:!0,options:{element:f}},{name:"flip",options:{fallbackPlacements:["top","left"]}}],children:e.jsx(k.default,{onClickAway:z,children:e.jsxs(C.default,{sx:{position:"relative",borderRadius:2,maxHeight:210,overflowY:"auto"},children:[e.jsx(m.StyledArrow,{ref:h,className:"MuiPopper-arrow"}),e.jsx(A.default,{"data-testid":"menuList",sx:{bgcolor:u,color:n,borderRadius:2},role:"menu","aria-label":"Audience list",children:i.map(((t,a)=>a>=b?e.jsx(P.default,{disableGutters:!0,disablePadding:!0,"data-testid":t["data-testid"],role:"menuitem",children:e.jsxs(y.default,{disableGutters:!0,sx:[{px:2},{".MuiAvatar-root":{width:24,height:24,fontSize:10}}],disabled:t.disabled,onClick:s?e=>{s(t),e.stopPropagation(),setTimeout((()=>z(e)),250)}:e=>{e.stopPropagation()},children:[e.jsx(N,{...d,user:t,onClick:s,statusMapping:l,tooltip:!1}),e.jsx(q.default,{sx:{ml:4},children:`${t.firstName} ${t.lastName}`})]})},`avatar-${a}`):""))})]})})})]})};exports.AudienceGroup=t=>{const{users:a,onClick:r,statusMapping:i,menuTextColor:o,menuBackgroundColor:s,loading:l,size:n="medium",max:u=2,...d}=t,p=$[n],m=e.jsx(S.default,{direction:"row",spacing:1,children:[...Array(u)].map(((t,a)=>e.jsx(w.default,{"data-testid":"avatar-skeleton",variant:"circular",width:p,height:p},`skeleton-${a}`)))});return e.jsx(c.StyledAudienceGroup,{max:u,...d,className:`${M}-root`,role:"group","aria-label":"Audience group",componentsProps:{additionalAvatar:{component:T,users:a,onClick:r,statusMapping:i,max:u,...d,menuTextColor:o,menuBackgroundColor:s,AvatarGroupProps:{max:u,...d},anchorSize:n}},children:l?m:a.map(((t,a)=>e.jsx(N,{size:p,user:t,onClick:r,statusMapping:i},`avatar-${a}`)))})},exports.AvatarDropDown=T,exports.HexAvatar=N;