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