@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.64 kB
JavaScript
import{jsxs as e,Fragment as i,jsx as o}from"react/jsx-runtime";import{useState as r}from"react";import t from"@mui/material/Stack";import s from"@mui/material/Typography";import a from"@mui/material/List";import n from"@mui/material/ListItem";import l from"@mui/material/ListItemText";import m from"@mui/material/ListItemAvatar";import d from"@mui/material/Tooltip";import c from"@mui/material/Divider";import p from"@mui/icons-material/AccountCircle";import v from"@mui/material/Avatar";import{useTranslate as u}from"../../../locales/index.js";import h from"../../locale.json.js";import{Dialog as f}from"../../../Dialog/Dialog.container.js";import{PermissionType as b,defaultLevels as x}from"../../model/index.js";import{getFullName as L}from"../../../util/functions/index.js";import{PermissionPicker as g}from"../PermissionPicker/PermissionPicker.component.js";import{StatusAvatar as y}from"../../../StatusAvatar/StatusAvatar.container.js";const C="NexusAccessManager",k=k=>{const{users:M=[],onUserPermissionChange:P,onUserRemoved:j,onUserResend:w,onShowBottomSheet:A,isMobile:R,editable:S=!0,isMeOwner:I=!0,...T}=k,[$,B]=r(void 0),[O,D]=r(!1),U=u(h),z=M.length>0,E=e=>{const{isMe:i,disabled:o,id:r,permissionLevel:t=""}=e,s=[{label:U("Resend Invite"),onClick:()=>{w?.(r,t)}},{label:U(i?"Leave":"Remove"),onClick:()=>{B(e),D(!0)}}],a=i||I?[{label:U(i?"Leave":"Remove"),onClick:()=>{B(e),D(!0)}}]:[];return o?s:a};return e(i,{children:[o(t,{"data-testid":`${C}-root`,...T,children:z?e(i,{children:[o(c,{sx:{mb:2,mx:-4}}),o(a,{disablePadding:!0,children:M.map((i=>{const{id:r,email:t,disabled:a,permissionLevel:c=b.readOnly,permissionLevels:u,permissionEditable:h=!0,isOwner:f,isMe:k,...M}=i;let j=u||x(U);j=!S&&k?j.filter((e=>e.value===c)):j;const I=L(i)||t,T=j?.find((e=>e.value===c)),$=`${t} (${U("Invite sent")})`;return e(n,{"data-testid":`${C}-userInfo`,disableGutters:!0,sx:{cursor:a?"default":"pointer",pl:2},onClick:a?void 0:()=>(e=>{const i={user:e,extraActions:[{label:U("Resend Invite"),onClick:()=>{w?.(e?.id||"",e?.permissionLevel||"")}},{label:U(e.isMe?"Leave":"Remove"),onClick:()=>{B(e),D(!0)}}],editable:e.permissionEditable&&Boolean(P)||!1,permissionLevels:e.permissionLevels||x(U),permissionLevel:e.permissionLevel||b.readOnly,onPermissionChange:i=>P?.(e.id,i)};A&&A(i)})(i),children:[o(m,{children:a?o(v,{sx:{bgcolor:e=>`rgba(${e.vars.palette.text.primaryChannel} / 0.3)`},children:o(p,{sx:{color:"background.paper"},fontSize:"small"})}):o(y,{...M,disabled:a})}),o(l,{primary:o(d,{title:o("div",{translate:"no",children:a?$:t}),children:o(s,{variant:"body2",component:"span",translate:"no",children:a?$:I})}),secondary:R?T?.label:void 0,primaryTypographyProps:{sx:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",color:a?"text.disabled":"text.primary"}},secondaryTypographyProps:{variant:"body2",sx:{color:a?"text.disabled":"text.secondary"}}}),f?o(s,{sx:{fontSize:12,fontWeight:700,mr:2.5},color:"text.secondary",children:U("owner")}):o(g,{useBottomsheet:R,isMobile:R,disabled:!k&&!S,disabledMessage:S||k?"":U("UserPermissionTooltip"),user:i,permissionLevels:j,editable:Boolean(h)&&Boolean(P),permissionLevel:c,onPermissionChange:e=>P?.(r,e),extraActions:E(i)})]},r)}))})]}):o(i,{})}),o(f,{sx:{"& .NexusDialog-paper":{width:"430px"}},open:O,onClose:()=>D(!1),title:`${U($?.isMe?"Leave":"Remove access")}?`,rightActions:[{variant:"text",children:U("Cancel"),onClick:()=>{D(!1)}},{variant:"contained",children:U($?.isMe?"Leave":"Remove"),color:"error",onClick:()=>{j?.($?.id||""),D(!1)}}],children:o("p",{children:U("lose access",{0:$?.isMe?U("You"):$&&L($)||$?.email})})})]})};export{k as AccessManager};