@nexusui/components/cjs/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.

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