refactor: remove isPrerender prop and update ProductImage component to unify fullscreen handling in PrerenderProduct and ProductDetailPage

This commit is contained in:
sebseb7
2025-07-20 01:16:44 +02:00
parent ea488982a7
commit bfd1803c6f
3 changed files with 7 additions and 49 deletions

View File

@@ -174,7 +174,11 @@ class PrerenderProduct extends React.Component {
ProductImage, ProductImage,
{ {
product: product, product: product,
isPrerender: true socket: null,
socketB: null,
fullscreenOpen: false,
onOpenFullscreen: null,
onCloseFullscreen: null
} }
), ),
// Product Details Section // Product Details Section

View File

@@ -677,7 +677,6 @@ class ProductDetailPage extends Component {
fullscreenOpen={this.state.imageDialogOpen} fullscreenOpen={this.state.imageDialogOpen}
onOpenFullscreen={this.handleOpenDialog} onOpenFullscreen={this.handleOpenDialog}
onCloseFullscreen={this.handleCloseDialog} onCloseFullscreen={this.handleCloseDialog}
isPrerender={false}
/> />
{/* Product Details */} {/* Product Details */}

View File

@@ -9,18 +9,9 @@ const ProductImage = ({
socketB, socketB,
fullscreenOpen, fullscreenOpen,
onOpenFullscreen, onOpenFullscreen,
onCloseFullscreen, onCloseFullscreen
isPrerender = false
}) => { }) => {
// For prerender, use static image path // Container styling - unified for all versions
const getImagePath = (pictureList) => {
if (!pictureList || !pictureList.trim()) {
return '/assets/images/nopicture.jpg';
}
return `/assets/images/prod${pictureList.split(',')[0].trim()}.jpg`;
};
// Container styling - same for both versions
const containerSx = { const containerSx = {
width: { xs: "100%", sm: "555px" }, width: { xs: "100%", sm: "555px" },
maxWidth: "100%", maxWidth: "100%",
@@ -32,42 +23,6 @@ const ProductImage = ({
justifyContent: "center", justifyContent: "center",
}; };
if (isPrerender) {
// Prerender version - use CardMedia with static paths
return (
<Box sx={containerSx}>
{!product.pictureList && (
<CardMedia
component="img"
height="400"
image="/assets/images/nopicture.jpg"
alt={product.name}
sx={{ objectFit: "cover" }}
/>
)}
{product.pictureList && (
<Box sx={{ position: 'relative', display: 'inline-block' }}>
<CardMedia
component="img"
height="400"
image={getImagePath(product.pictureList)}
alt={product.name}
sx={{
objectFit: 'contain',
cursor: 'pointer',
transition: 'transform 0.2s ease-in-out',
'&:hover': {
transform: 'scale(1.02)'
}
}}
/>
</Box>
)}
</Box>
);
}
// SPA version - use existing Images component
return ( return (
<Box sx={containerSx}> <Box sx={containerSx}>
{!product.pictureList && ( {!product.pictureList && (