@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) • 2.66 kB
JavaScript
import{jsxs as e,Fragment as i,jsx as r}from"react/jsx-runtime";import o from"@mui/icons-material/MoreVert";import t from"@mui/material/Tooltip";import a from"@mui/material/Divider";import l from"@mui/material/IconButton";import n from"@mui/material/Menu";import m from"@mui/material/MenuItem";import s from"@mui/material/Typography";import{useState as d}from"react";import c from"@mui/material/useMediaQuery";import{useTheme as p}from"@mui/material/styles";import u from"@mui/icons-material/Check";import h from"@mui/material/Stack";import{useTranslate as b}from"../../../locales/index.js";import{defaultLevels as f}from"../../model/index.js";import{PermissionButton as v}from"./PermissionButton.js";import{MobilePermissionSheet as x}from"../MobilePermissionSheet/MobilePermissionSheet.js";import g from"../../locale.json.js";const C="NexusPermissionPicker",y=y=>{const M=b(g),{useBottomsheet:k=!1,isMobile:$=!1,showPermissionLabel:j=!1,disabled:P=!1,disabledMessage:w="",...A}=y,{permissionLevels:B=f(M),permissionLevel:L,extraActions:I=[],editable:S,onPermissionChange:T}=A,W=p(),D=c(W.breakpoints.down("sm")),[E,N]=d(null),O=Boolean(E),Q=e=>{N(e.currentTarget)},R=()=>{N(null)},V=B.find((e=>e.value===L));return e(i,{children:[$?e(h,{"data-testid":`${C}-root`,direction:"row",flex:1,justifyContent:"flex-end",alignItems:"center",children:[j&&r(s,{noWrap:!0,children:L}),r(t,{title:w||V?.description,placement:"top",arrow:!0,children:r(s,{component:"span",children:r(l,{disabled:P,"aria-label":M("More Actions"),"data-testid":`${C}-permission-button`,edge:"end",onClick:Q,sx:{ml:2},children:r(o,{})})})})]}):e(i,{children:[!S&&r(s,{"data-testid":`${C}-readOnly`,variant:"caption",sx:{fontWeight:700},children:V?.label}),S&&r(v,{open:O,permission:V,onClick:Q,disabled:P,disabledMessage:w,sx:D?{maxWidth:"unset"}:{}}),!S&&I.length>0&&r(l,{"data-testid":`${C}-moreActions`,"aria-label":M("More Actions"),edge:"end",onClick:Q,sx:{ml:2},children:r(o,{})})]}),k?r(x,{open:O,shareConfig:A,handleClose:R}):(S||I.length>0)&&e(n,{"data-testid":`${C}-menu`,open:O,onClose:R,anchorEl:E,children:[S&&B.map((i=>e(m,{"data-testid":`${C}-permission-${i.value}`,dense:!0,value:i.value,onClick:()=>{T?.(i.value),R()},selected:L===i.value,children:[r(u,{sx:{mr:1,color:"grey.500",visibility:L===i.value?"visible":"hidden"}}),r(s,{variant:"body2",children:i.label})]},i.value))),S&&I.length>0&&r(a,{}),I.map((e=>r(m,{"data-testid":`${C}-extra-${e.label}`,dense:!0,onClick:()=>{e.onClick(),R()},children:r(s,{variant:"body2",sx:{color:e.label===M("Remove")||e.label===M("Leave")?"error.main":"text.primary"},children:e.label})},e.label)))]})]})};export{y as PermissionPicker};