@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.52 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/Box"),a=require("@mui/material/IconButton"),o=require("@mui/material/ListItemIcon"),r=require("@mui/material/ListItemText"),l=require("@mui/material/Menu"),n=require("@mui/material/MenuItem"),c=require("@mui/material/Stack"),s=require("@mui/material/Tooltip"),u=require("@mui/icons-material/MoreHoriz"),d=require("clsx"),m=require("lodash/uniqueId");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=p(i),f=p(a),h=p(o),v=p(r),j=p(l),q=p(n),$=p(c),I=p(s),b=p(u),M=p(d),P=p(m);const g="NexusActionGroup";exports.default=({actions:i=[],max:a=3,size:o,t:r,className:l,TooltipProps:n={},moreActionsTooltipProps:c={},...s})=>{const[u]=t.useState((()=>P.default(`${g}-`))),d=Math.max(a,1),m=i.length>d,[p,A]=t.useState(null),S=Boolean(p),N=e=>{e.stopPropagation(),A(null)};return e.jsxs($.default,{role:"group","aria-label":"Action Group",direction:"row",alignItems:"center",className:M.default(`${g}-root`,l),"data-testid":`${g}-root`,...s,children:[i.slice(0,m?d-1:d).map(((t,i)=>{const{active:a=!0,icon:r,inactiveIcon:l=r,onClick:c,...s}=t,u=e.jsx(f.default,{"aria-label":t.label,size:o,color:"inherit",onClick:e=>{c(e),e.stopPropagation()},"data-testid":"ActionGroup-iconButton",className:`${g}-iconButton${a?"Active":"Inactive"}`,sx:{"& .MuiSvgIcon-root":{fontSize:"inherit"}},...s,children:a?r:l});return e.jsx(I.default,{PopperProps:{disablePortal:!0},title:t.label,"data-testid":`${g}-iconTooltip`,className:`${g}-iconTooltip`,...n,children:u},`action-${i}-${a?"active":"inactive"}`)})),m&&e.jsxs(x.default,{sx:{display:"flex"},children:[e.jsx(I.default,{title:r("Show More Actions"),...n,...c,children:e.jsx(f.default,{id:u,"aria-label":r("Show More Actions"),size:o,onClick:e=>{e.stopPropagation(),A(e.currentTarget)},color:"inherit","data-testid":"ActionGroup-overflowButton",children:e.jsx(b.default,{fontSize:"inherit"})})}),e.jsx(j.default,{className:`${g}-menu`,"data-testid":`${g}-menu`,anchorEl:p,open:S,onClose:N,MenuListProps:{"aria-labelledby":u},children:i.slice(d-1).map(((t,i)=>{const{label:a,icon:o,inactiveIcon:r=o,active:l=!0,onClick:n,...c}=t;return e.jsxs(q.default,{onClick:e=>{n(e),e.stopPropagation(),N(e)},"data-testid":"ActionGroup-iconMenuItem",className:`${g}-iconMenuItem`,...c,children:[e.jsx(h.default,{children:l?o:r}),e.jsx(v.default,{sx:{ml:4},children:a})]},`action-${i}-${l?"active":"inactive"}`)}))})]})]})};