9s-fe-core
Version:
Core functionalities for authentication, configuration, and repository management.
72 lines (71 loc) • 3.96 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const antd_1 = require("antd");
const ImageDisplay = ({ fieldItem, showAllImage, }) => {
const imageValue = [];
if (typeof fieldItem.value === 'string') {
imageValue.push({
name: fieldItem.key,
networkFile: fieldItem.value,
});
}
else if (Array.isArray(fieldItem.value)) {
fieldItem.value.forEach(imageUrl => {
imageValue.push({
name: fieldItem.key,
networkFile: imageUrl,
});
});
}
const previewList = imageValue.map(item => {
var _a;
return (Object.assign(Object.assign({}, item), { previewUrl: (_a = item.networkFile) !== null && _a !== void 0 ? _a : (item.file ? URL.createObjectURL(item.file) : '') }));
});
// State to handle modal visibility and selected image
const [isModalVisible, setIsModalVisible] = (0, react_1.useState)(false);
const [selectedImage, setSelectedImage] = (0, react_1.useState)(null);
// Show modal with selected image
const handleImageClick = (imageUrl) => {
setSelectedImage(imageUrl);
setIsModalVisible(true);
};
// Handle modal close
const handleModalClose = () => {
setIsModalVisible(false);
setSelectedImage(null);
};
return ((0, jsx_runtime_1.jsxs)("div", { children: [!showAllImage && previewList.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: 60, height: 60 }, children: [(0, jsx_runtime_1.jsx)("img", { src: imageValue[0].file != null ? URL.createObjectURL(imageValue[0].file) : imageValue[0].networkFile, alt: imageValue[0].name, style: {
width: '100%',
height: '100%',
objectFit: 'cover',
borderRadius: 6,
border: '0.1px solid blue',
}, onClick: () => handleImageClick(previewList[0].previewUrl) }), previewList.length > 1 && ((0, jsx_runtime_1.jsx)(antd_1.Tooltip, { title: `${previewList.length} images`, children: (0, jsx_runtime_1.jsx)("div", { style: {
position: 'absolute',
top: -7,
right: -7,
background: 'blue',
color: '#fff',
padding: '0px',
borderRadius: '50%',
aspectRatio: 1 / 1,
fontSize: 12,
textAlign: 'center',
width: '20px',
height: '20px',
}, children: previewList.length }) }))] })), showAllImage && ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: '5px', flexWrap: 'wrap' }, children: previewList.map((item, index) => ((0, jsx_runtime_1.jsx)("img", { src: item.previewUrl, alt: item.name || `image-${index}`, style: {
width: '60px',
height: '60px',
objectFit: 'cover',
borderRadius: '6px',
border: '0.1px solid blue',
}, onClick: () => handleImageClick(item.previewUrl) }, index))) })), (0, jsx_runtime_1.jsx)(antd_1.Modal, { visible: isModalVisible, onCancel: handleModalClose, footer: null, width: "80%", centered: true, children: (0, jsx_runtime_1.jsx)("img", { src: selectedImage || '', alt: "Selected", style: {
width: '100%',
height: 'auto',
objectFit: 'contain',
} }) })] }, fieldItem.key));
};
exports.default = ImageDisplay;