@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.62 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/styles"),r=require("@mui/material/Stack"),s=require("@mui/material/Typography"),a=require("@mui/material/Tooltip"),l=require("@mui/material/Box"),n=require("@mui/icons-material/Info"),d=require("@mui/icons-material/InfoOutlined"),c=require("@mui/material/IconButton"),o=require("@mui/material/useMediaQuery");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=u(r),m=u(s),f=u(a),h=u(l),p=u(n),j=u(d),y=u(c),g=u(o);const q="NexusGridHeader",w=()=>e.jsx(h.default,{sx:{flex:1}});exports.GridHeaderComponent=({icon:r,title:s,description:a,titleActions:l,primaryAction:n,search:d,children:c,sx:o,...u})=>{const $=i.useTheme(),b=g.default($.breakpoints.down("md")),[k,v]=t.useState(!1),A=null!=a&&""!==a,N="string"==typeof a?e.jsx(f.default,{title:a,children:e.jsx(m.default,{variant:"caption",className:`${q}-description`,"data-testid":`${q}-description`,color:"text.secondary",sx:{overflow:"hidden",textOverflow:"ellipsis",display:"-webkit-box",WebkitLineClamp:"2",WebkitBoxOrient:"vertical"},children:a})}):a;return e.jsxs(x.default,{direction:"column",spacing:4,className:`${q}-root`,sx:[{width:1,m:"0 auto"},...Array.isArray(o)?o:[o]],...u,children:[e.jsxs(x.default,{direction:"column",sx:{minHeight:40},children:[e.jsxs(x.default,{direction:"row",alignItems:"center",sx:{flex:"1 1"},children:[r&&e.jsx(h.default,{sx:{mr:3},className:`${q}-icon`,"data-testid":`${q}-icon`,children:r}),e.jsxs(x.default,{direction:"column",children:["string"==typeof s?e.jsx(f.default,{title:s,children:e.jsx(m.default,{noWrap:!0,variant:"h6",className:`${q}-title`,"data-testid":`${q}-title`,children:s})}):s,!b&&N]}),b&&e.jsx(w,{}),l&&e.jsx(h.default,{sx:{ml:4,flexShrink:0},className:`${q}-titleActions`,"data-testid":`${q}-titleActions`,children:l}),!b&&e.jsxs(e.Fragment,{children:[e.jsx(w,{}),e.jsx(h.default,{sx:{flexShrink:0},children:n})]}),b&&A&&e.jsx(y.default,{sx:{marginRight:2},onClick:()=>{v(!k)},"data-testid":`${q}-descriptionAction`,"aria-label":"Show description",children:k?e.jsx(p.default,{color:"primary"}):e.jsx(j.default,{sx:{color:"grey.600"}})})]}),b&&k&&e.jsx(h.default,{sx:{mt:2},children:N})]}),e.jsxs(x.default,{alignItems:{xs:"flex-start",md:"center"},direction:{xs:"column",md:"row"},spacing:{xs:4,md:0},children:[d,b?e.jsxs(x.default,{className:`${q}-mobileActions`,width:1,direction:"row",justifyContent:"space-between",alignItems:"center",children:[n,c]}):e.jsxs(e.Fragment,{children:[e.jsx(w,{}),c]})]})]})},exports.prefix=q;