@chayns-components/gallery/lib/cjs/components/gallery-item/GalleryItem.js

A set of beautiful React components for developing your own applications with chayns.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _core = require("@chayns-components/core");
var _react = require("motion/react");
var _react2 = _interopRequireWildcard(require("react"));
var _GalleryItem = require("./GalleryItem.styles");
var _MediaItem = _interopRequireDefault(require("./media-item/MediaItem"));
var _PreviewItem = _interopRequireDefault(require("./preview-item/PreviewItem"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const GalleryItem = ({
  fileItem,
  handleDeleteFile,
  isEditMode,
  ratio = 1,
  remainingItemsLength,
  onClick
}) => (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_GalleryItem.StyledGalleryItem, null, isEditMode && /*#__PURE__*/_react2.default.createElement(_GalleryItem.StyledGalleryItemDeleteButton, {
  onClick: () => handleDeleteFile(fileItem.id)
}, /*#__PURE__*/_react2.default.createElement(_core.Icon, {
  size: 20,
  icons: ['ts-wrong']
})), !fileItem.state || fileItem.state === 'none' || !fileItem.previewUrl && !fileItem.uploadedFile ? null : /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
  initial: false
}, fileItem.state === 'uploading' ? /*#__PURE__*/_react2.default.createElement(_PreviewItem.default, {
  ratio: ratio,
  key: `uploading_${fileItem.id ?? ''}`,
  fileItem: fileItem
}) : /*#__PURE__*/_react2.default.createElement(_MediaItem.default, {
  key: `uploaded_${fileItem.id ?? ''}`,
  fileItem: fileItem,
  isEditMode: isEditMode,
  ratio: ratio,
  openSelectedFile: onClick
})), remainingItemsLength && /*#__PURE__*/_react2.default.createElement(_GalleryItem.StyledGalleryItemMoreItemsIndicator, {
  onClick: () => onClick(fileItem)
}, /*#__PURE__*/_react2.default.createElement("p", null, `+ ${remainingItemsLength - 3}`))), [fileItem, handleDeleteFile, isEditMode, onClick, ratio, remainingItemsLength]);
GalleryItem.displayName = 'GalleryItem';
var _default = exports.default = GalleryItem;
//# sourceMappingURL=GalleryItem.js.map