refactor: remove isPrerender prop and update ProductImage component to unify fullscreen handling in PrerenderProduct and ProductDetailPage
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -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 */}
|
||||||
|
|||||||
@@ -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 && (
|
||||||
|
|||||||
Reference in New Issue
Block a user