@chayns-components/gallery
Version:
A set of beautiful React components for developing your own applications with chayns.
36 lines • 1.69 kB
JavaScript
import { Icon } from '@chayns-components/core';
import { AnimatePresence } from 'motion/react';
import React, { useMemo } from 'react';
import { StyledGalleryItem, StyledGalleryItemDeleteButton, StyledGalleryItemMoreItemsIndicator } from './GalleryItem.styles';
import MediaItem from './media-item/MediaItem';
import PreviewItem from './preview-item/PreviewItem';
const GalleryItem = ({
fileItem,
handleDeleteFile,
isEditMode,
ratio = 1,
remainingItemsLength,
onClick
}) => useMemo(() => /*#__PURE__*/React.createElement(StyledGalleryItem, null, isEditMode && /*#__PURE__*/React.createElement(StyledGalleryItemDeleteButton, {
onClick: () => handleDeleteFile(fileItem.id)
}, /*#__PURE__*/React.createElement(Icon, {
size: 20,
icons: ['ts-wrong']
})), !fileItem.state || fileItem.state === 'none' || !fileItem.previewUrl && !fileItem.uploadedFile ? null : /*#__PURE__*/React.createElement(AnimatePresence, {
initial: false
}, fileItem.state === 'uploading' ? /*#__PURE__*/React.createElement(PreviewItem, {
ratio: ratio,
key: `uploading_${fileItem.id ?? ''}`,
fileItem: fileItem
}) : /*#__PURE__*/React.createElement(MediaItem, {
key: `uploaded_${fileItem.id ?? ''}`,
fileItem: fileItem,
isEditMode: isEditMode,
ratio: ratio,
openSelectedFile: onClick
})), remainingItemsLength && /*#__PURE__*/React.createElement(StyledGalleryItemMoreItemsIndicator, {
onClick: () => onClick(fileItem)
}, /*#__PURE__*/React.createElement("p", null, `+ ${remainingItemsLength - 3}`))), [fileItem, handleDeleteFile, isEditMode, onClick, ratio, remainingItemsLength]);
GalleryItem.displayName = 'GalleryItem';
export default GalleryItem;
//# sourceMappingURL=GalleryItem.js.map