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