@nexusui/components/core/ComplexCard/ComplexCard.component.js

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.

import{jsx as e,jsxs as t,Fragment as o}from"react/jsx-runtime";import a,{useState as r,isValidElement as i}from"react";import l from"@mui/icons-material/MoreVert";import n from"@mui/icons-material/Photo";import d from"@mui/material/IconButton";import s from"@mui/material/Menu";import m from"@mui/material/MenuItem";import c from"@mui/material/Checkbox";import p from"@mui/material/Box";import u from"@mui/material/Card";import h from"@mui/material/CardActionArea";import x from"@mui/material/CardContent";import g from"@mui/material/CardMedia";import f from"@mui/material/Chip";import C from"@mui/material/Stack";import y from"@mui/material/Typography";import b from"@mui/material/Badge";import k from"@mui/material/Tooltip";import $ from"@mui/material/ListItemIcon";import w from"@mui/material/ListItemText";import I from"@mui/material/useMediaQuery";import M from"lodash/uniqueId";import N from"./hooks/useMenu.js";import{useCardLoading as v}from"../Card/hooks/useCardLoading.js";import{LoadingManager as S}from"../Card/components/LoadingManager.js";import{ComplexCardSkeleton as W,ComplexCardRectangleSkeleton as B}from"./ComplexCard.skeleton.js";import{getMenuOrigin as T}from"../util/functions/index.js";const j="NexusComplexCard",A=a.forwardRef(((a,A)=>{const{mode:L="square",image:P,imagePlaceholder:D=e(n,{fontSize:"inherit"}),primaryTag:z,loading:V,loadingMode:q="spinner",tags:G=[],primaryText:E,secondaryText:H,tertiaryText:R,children:F,statusBadgeColor:O,menuActions:Q=[],selectable:J,selected:K=!1,onSelectChange:U,sx:X,...Y}=a,[Z]=r((()=>M(`${j}-`))),_=Boolean(Y.onClick)||Q.length>0||J,{anchorEl:ee,open:te,handleOpen:oe,handleClose:ae}=N(),re="square"===L,ie=I((e=>e?.breakpoints?.down?.("md"))),{renderLoadingPanel:le,cardLoadingStyle:ne}=v(V,q),de=e=>e.stopPropagation(),se=J&&e(c,{"data-testid":`${j}-checkbox`,className:`${j}-checkbox`,checked:K,onChange:(e,t)=>{U?.(e,t),e.stopPropagation()},onClick:e=>e.stopPropagation(),onMouseDown:de,sx:{ml:re?0:2},inputProps:{"aria-label":"Select card","data-testid":`${j}-checkboxInput`}}),me=Q.length>0&&t(o,{children:[e(d,{id:Z,"aria-label":"Show Actions","data-testid":`${j}-menuButton`,className:`${j}-menuButton`,onClick:oe,onMouseDown:de,color:"inherit",sx:re?{backgroundColor:"background.paper"}:{flex:"0 0 auto",ml:2,mr:-2,backgroundColor:"background.paper"},children:e(l,{})}),e(s,{disableScrollLock:!0,onMouseDown:de,anchorEl:ee,open:te,onClose:ae,className:`${j}-menu`,"data-testid":`${j}-menu`,MenuListProps:{"aria-labelledby":Z},...T(ee),children:Q.map(((o,a)=>i(o)?o:((o,a)=>{const{label:r,icon:i,onClick:l,...n}=o;return t(m,{className:`${j}-menuItem`,"data-testid":`${j}-menuItem`,sx:{py:2},onClick:e=>{l&&(l(e),ae(e))},...n,children:[i&&e($,{sx:{mr:4},children:i}),e(w,{children:r})]},`action-${a}`)})(o,a)))})]}),ce=z&&e(f,{...z}),pe=(se||z||me)&&t(C,{direction:"row",alignItems:"center",sx:{position:"absolute",top:4,left:4,right:4},children:[se,ce,e(p,{sx:{flex:1}}),me]}),ue=G.length>0&&e(C,{"data-testid":`${j}-tagsWrapper`,className:`${j}-tagsWrapper`,sx:{mb:re?2:0,ml:{xs:0,md:re?0:2},mt:ce?0:-2},direction:"row",flexWrap:"wrap",children:G.map(((t,o)=>e(f,{size:"small",...t,sx:[{mr:2,mt:{xs:2,md:0}},...Array.isArray(t.sx)?t.sx:[t.sx]]},o)))}),he=e(k,{title:e("div",{translate:"no",children:E}),children:e(y,{"data-testid":`${j}-primaryText`,className:`${j}-primaryText`,component:"div",variant:"subtitle2",fontWeight:700,noWrap:!0,translate:"no",sx:{maxWidth:"100%"},children:E})}),xe=t(C,{direction:"row",justifyContent:"space-between",alignItems:"center",sx:{maxWidth:"100%"},children:[t(C,{alignItems:"flex-start",sx:{flex:"1 1 auto",overflow:"hidden",mr:4},children:[O?e(b,{"data-testid":`${j}-badge`,className:`${j}-badge`,variant:"dot",color:O,sx:{display:"block",maxWidth:"100%",pr:4,"& .MuiBadge-badge":{top:"50%",right:4}},children:he}):he,e(k,{title:H,children:e(y,{"data-testid":`${j}-secondaryText`,className:`${j}-secondaryText`,component:"div",variant:"caption",display:"block",noWrap:!0,sx:{maxWidth:"100%"},children:H})}),e(k,{title:R,children:e(y,{"data-testid":`${j}-tertiaryText`,className:`${j}-tertiaryText`,component:"div",variant:"caption",display:"block",color:"text.secondary",noWrap:!0,sx:{maxWidth:"100%"},children:a.tertiaryText})})]}),re&&e(p,{sx:{flex:"0 0 auto",overflow:"hidden"},onMouseDown:de,children:F})]}),ge=!P&&Boolean(D)&&e(C,{"data-testid":`${j}-placeholderImageWrapper`,className:`${j}-placeholderImageWrapper`,alignItems:"center",justifyContent:"center",sx:e=>re?{position:"absolute",top:0,left:0,bottom:0,right:0,fontSize:48,color:"text.disabled"}:{flex:"0 0 auto",fontSize:48,color:"text.disabled",alignSelf:J?"center":"stretch",width:120,height:96,mr:2,py:4,backgroundColor:"grey.50",...e.applyStyles("dark",{backgroundColor:"grey.700"})},children:D});return e(u,{ref:A,"data-testid":`${j}-root`,className:`${j}-root`,component:re?C:p,justifyContent:re?"space-between":void 0,sx:[{outlineColor:e=>e.vars.palette.primary.main,outlineWidth:K?"outlined"!==Y.variant?2:1:0,outlineStyle:"solid",borderColor:K&&"primary.main",cursor:Y.onClick?"pointer":"default","& .NexusComplexCard-menuButton":{display:!te&&re?"none":"flex"},"& .NexusComplexCard-checkbox":{display:K||te||!re?"flex":"none"},"&:hover":e=>({...K?{}:{outlineColor:"grey.300",outlineWidth:"outlined"!==Y.variant?1:0,outlineStyle:"solid",borderColor:"grey.300",...e.applyStyles("dark",{outlineColor:"grey.500",borderColor:"grey.500"})},"& .NexusComplexCard-menuButton, & .NexusComplexCard-checkbox":{display:"flex"}})},ne,...Array.isArray(X)?X:[X]],...Y,children:t(S,{loading:V,loadingMode:q,skeleton:re?W:B,children:[t(h,{"data-testid":`${j}-media`,className:`${j}-media`,component:"div",disableRipple:!Y.onClick,disabled:!_,"aria-label":"Clickable card area",role:void 0,sx:[re?{"&.Mui-focusVisible .MuiCardActionArea-focusHighlight":{opacity:.05},"&.Mui-focusVisible, &:focus-within":{"& .MuiCardMedia-root":{"& .NexusComplexCard-menuButton, & .NexusComplexCard-checkbox":{display:"flex"}}}}:{"&.Mui-focusVisible .MuiCardActionArea-focusHighlight":{opacity:.05}},{cursor:Y.onClick?"pointer":"default"}],children:[re&&t(p,{sx:e=>({backgroundColor:"grey.50",position:"relative",pt:"56.25%",...e.applyStyles("dark",{backgroundColor:"grey.700"})}),children:[e(g,{image:P,role:"img","aria-label":"Card Graphic",sx:{position:"absolute",top:16,left:16,right:16,bottom:16,backgroundSize:"contain"},children:ge}),pe]}),!re&&t(C,{direction:"row",alignItems:"center",justifyContent:"flex-start",children:[P&&e(C,{"data-testid":`${j}-rectangleImageBackground`,className:`${j}-rectangleImageBackground`,alignItems:"center",justifyContent:"center",sx:e=>({flex:"0 0 auto",alignSelf:"stretch",width:120,mr:2,backgroundColor:"grey.50",...e.applyStyles("dark",{backgroundColor:"grey.700"})}),children:e(p,{"data-testid":`${j}-rectangleImage`,className:`${j}-rectangleImage`,component:"img",role:"img",alt:"Card Graphic","aria-label":"Card Graphic",src:P,sx:{objectFit:"contain",width:"100%",height:96}})}),ge,se,t(x,{component:C,flexDirection:"row",alignItems:"center",sx:{flex:"1 1 0px",overflow:"hidden","&:last-child":{paddingBottom:4}},children:[t(C,{"data-testid":`${j}-textStackWrapper`,className:`${j}-textStackWrapper`,sx:{flex:"1 1 0px",overflow:"hidden",alignItems:"flex-start"},children:[ie&&t(o,{children:[ce,ue]}),xe]}),!ie&&t(o,{children:[ce,ue]}),e(p,{sx:{flex:"0 0 auto",overflow:"hidden",ml:2},onMouseDown:de,children:F}),me]})]})]}),re&&t(x,{sx:{"&:last-child":{paddingBottom:4}},children:[ue,xe]}),le]})})}));export{A as default};