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

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