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