@nexusui/components/cjs/core/ProductCard/ProductCard.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"),t=require("react"),a=require("@mui/material/Box"),i=require("@mui/material/Card"),r=require("@mui/material/IconButton"),s=require("@mui/material/Menu"),l=require("@mui/material/MenuItem"),d=require("@mui/material/Stack"),n=require("@mui/material/Typography"),o=require("@mui/material/ListItemText"),u=require("@mui/icons-material/MoreVert"),c=require("@mui/material/List"),m=require("lodash/uniqueId"),$=require("@mui/material/ListItem"),h=require("@mui/material/ListItemButton"),x=require("@mui/material/Divider"),f=require("@mui/material/Tooltip"),j=require("clsx"),g=require("../util/functions/index.js"),p=require("./ProductCard.styles.js"),y=require("../Card/hooks/useCardLoading.js"),I=require("../Card/components/LoadingManager.js"),b=require("./ProductCard.skeleton.js");function N(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var q=N(a),M=N(i),C=N(r),k=N(s),S=N(l),v=N(d),P=N(n),A=N(o),L=N(u),w=N(c),B=N(m),T=N($),D=N(h),W=N(x),R=N(f),F=N(j);const _="NexusProductCard";exports.ProductCardComponent=a=>{const[i]=t.useState((()=>B.default(`${_}-`))),{sx:r,menuActions:s,listActions:l,icon:d,loading:n,loadingMode:o="spinner",subheading:u,headline:c,content:m}=a,[$,h]=t.useState(null),{renderLoadingPanel:x,cardLoadingStyle:f}=y.useCardLoading(n,o),j=t.useMemo((()=>e.jsx(q.default,{"data-testid":`${_}-icon`,className:`${_}-icon`,children:d})),[d]),N=t.useMemo((()=>"string"==typeof c?e.jsx(R.default,{arrow:!0,title:c,children:e.jsx(P.default,{color:"textPrimary",variant:"body2",fontWeight:"bold","data-testid":`${_}-headline`,className:`${_}-headline`,children:c})}):e.jsx(R.default,{arrow:!0,title:c,children:e.jsx(q.default,{"data-testid":`${_}-headline`,className:`${_}-headline`,children:c})})),[c]),z=t.useMemo((()=>u?"string"==typeof u?e.jsx(R.default,{title:u,arrow:!0,children:e.jsx(P.default,{color:"textSecondary",variant:"caption",fontWeight:"bold","data-testid":`${_}-subheading`,className:`${_}-subheading`,children:u})}):e.jsx(R.default,{title:u,arrow:!0,children:e.jsx(q.default,{"data-testid":`${_}-subheading`,className:`${_}-subheading`,children:u})}):null),[u]),E=t.useCallback(((t,a)=>{let i=null;return g.isReactNode(t)?i=e.jsx(S.default,{"data-testid":`${_}-menuItem-${a}`,className:`${_}-menuItem`,children:t},`${_}-menuItem-${a}`):"object"==typeof t&&"children"in t&&(i=e.jsx(S.default,{"data-testid":`${_}-menuItem-${a}`,className:`${_}-menuItem`,...t},`${_}-menuItem-${a}`)),i}),[]),O=t.useMemo((()=>g.isReactNode(s)?s:Array.isArray(s)?s.map(E):null),[s,E]),V=t.useMemo((()=>!s||Array.isArray(s)&&0===s.length?null:e.jsxs(e.Fragment,{children:[e.jsx(C.default,{id:i,onClick:e=>h(e.currentTarget),"data-testid":`${_}-actionDropdownButton`,className:`${_}-actionDropdownButton`,"aria-label":"more",size:"small",children:e.jsx(L.default,{})}),e.jsx(k.default,{"data-testid":`${_}-actionDropdownMenu`,className:`${_}-actionDropdownMenu`,anchorEl:$,open:Boolean($),onClose:()=>h(null),MenuListProps:{"aria-labelledby":i},children:O})]})),[s,i,$,O]),G=t.useMemo((()=>e.jsxs(v.default,{"data-testid":`${_}-basicInfoStack`,className:`${_}-basicInfoStack`,direction:"row",spacing:4,alignItems:"center",children:[j,e.jsxs(v.default,{"data-testid":`${_}-headlineSubheadingStack`,className:`${_}-headlineSubheadingStack`,direction:"column",spacing:1,flex:1,children:[N,z]}),V]})),[V,j,N,z]),H=t.useMemo((()=>m?"string"==typeof m?e.jsx(P.default,{color:"textSecondary",variant:"body2",fontWeight:"bold","data-testid":`${_}-content`,className:`${_}-content`,children:m}):e.jsx(q.default,{"data-testid":`${_}-content`,className:`${_}-content`,children:m}):null),[m]),J=t.useCallback(((t,a)=>{const{text:i,icon:r,onClick:s,...l}=t;return e.jsx(T.default,{"data-testid":`${_}-listItem-${a}`,className:`${_}-listItem`,secondaryAction:e.jsx(q.default,{"data-testid":`${_}-listItem-icon-${a}`,className:F.default(`${_}-listItemIcon`,`${_}-listItem-icon`),children:r}),disablePadding:!0,divider:!0,...l,children:e.jsx(D.default,{dense:!0,onClick:s,children:e.jsx(A.default,{"data-testid":`${_}-listItem-text-${a}`,className:F.default(`${_}-listItemText`,`${_}-listItem-text`),primaryTypographyProps:{variant:"body2",fontWeight:"bold",color:"primary.main"},children:i})})},`${_}-listItem-${a}`)}),[]),K=t.useCallback(((t,a)=>{let i=null;return g.isReactNode(t)?i=e.jsx(T.default,{"data-testid":`${_}-listItem-${a}`,className:`${_}-listItem`,disablePadding:!0,divider:!0,children:e.jsx(D.default,{children:t})},`${_}-listItem-${a}`):"object"==typeof t&&"children"in t?i=e.jsx(T.default,{"data-testid":`${_}-listItem-${a}`,className:`${_}-listItem`,divider:!0,...t},`${_}-listItem-${a}`):"object"==typeof t&&"text"in t&&(i=J(t,a)),i}),[J]),Q=t.useMemo((()=>!l||Array.isArray(l)&&0===l.length?null:e.jsxs(e.Fragment,{children:[e.jsx(W.default,{}),e.jsx(w.default,{"data-testid":`${_}-list`,className:`${_}-list`,sx:{padding:0},children:l.map(K)})]})),[l,K]);return e.jsx(M.default,{"data-testid":`${_}-root`,className:`${_}-root`,sx:[p.rootStyles,f,...Array.isArray(r)?r:[r]],variant:"outlined",children:e.jsxs(I.LoadingManager,{loading:n,loadingMode:o,skeleton:b.ProductCardSkeleton,children:[e.jsxs(v.default,{"data-testid":`${_}-stack`,className:`${_}-stack`,direction:"column",spacing:4,children:[G,H]}),Q,x]})})};