@chayns-components/gallery 5.0.53 → 5.0.56
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +135 -72
- package/lib/cjs/components/Gallery.js +16 -329
- package/lib/cjs/components/Gallery.js.map +1 -1
- package/lib/cjs/components/Gallery.types.js +6 -0
- package/lib/cjs/components/Gallery.types.js.map +1 -0
- package/lib/cjs/components/gallery-editor/GalleryEditor.js +198 -0
- package/lib/cjs/components/gallery-editor/GalleryEditor.js.map +1 -0
- package/lib/cjs/components/gallery-editor/GalleryEditor.styles.js +20 -0
- package/lib/cjs/components/gallery-editor/GalleryEditor.styles.js.map +1 -0
- package/lib/cjs/components/gallery-editor/GalleryEditor.types.js +6 -0
- package/lib/cjs/components/gallery-editor/GalleryEditor.types.js.map +1 -0
- package/lib/cjs/components/gallery-editor/add-file/AddFile.js.map +1 -0
- package/lib/cjs/components/gallery-editor/add-file/AddFile.styles.js.map +1 -0
- package/lib/cjs/components/gallery-editor/add-file/AddFile.types.js +6 -0
- package/lib/cjs/components/gallery-editor/add-file/AddFile.types.js.map +1 -0
- package/lib/cjs/components/gallery-editor/gallery-editor-item/GalleryEditorItem.js +41 -0
- package/lib/cjs/components/gallery-editor/gallery-editor-item/GalleryEditorItem.js.map +1 -0
- package/lib/cjs/components/gallery-editor/gallery-editor-item/GalleryEditorItem.styles.js +37 -0
- package/lib/cjs/components/gallery-editor/gallery-editor-item/GalleryEditorItem.styles.js.map +1 -0
- package/lib/cjs/components/gallery-editor/gallery-editor-item/GalleryEditorItem.types.js +6 -0
- package/lib/cjs/components/gallery-editor/gallery-editor-item/GalleryEditorItem.types.js.map +1 -0
- package/lib/cjs/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.js +36 -0
- package/lib/cjs/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.js.map +1 -0
- package/lib/cjs/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.styles.js +15 -0
- package/lib/cjs/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.styles.js.map +1 -0
- package/lib/cjs/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.types.js +6 -0
- package/lib/cjs/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.types.js.map +1 -0
- package/lib/cjs/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.js +45 -0
- package/lib/cjs/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.js.map +1 -0
- package/lib/cjs/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.styles.js +44 -0
- package/lib/cjs/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.styles.js.map +1 -0
- package/lib/cjs/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.types.js +6 -0
- package/lib/cjs/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.types.js.map +1 -0
- package/lib/cjs/components/gallery-viewer/GalleryViewer.js +42 -0
- package/lib/cjs/components/gallery-viewer/GalleryViewer.js.map +1 -0
- package/lib/cjs/components/{Gallery.styles.js → gallery-viewer/GalleryViewer.styles.js} +13 -18
- package/lib/cjs/components/gallery-viewer/GalleryViewer.styles.js.map +1 -0
- package/lib/cjs/components/gallery-viewer/GalleryViewer.types.js +6 -0
- package/lib/cjs/components/gallery-viewer/GalleryViewer.types.js.map +1 -0
- package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.js +25 -0
- package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.js.map +1 -0
- package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.styles.js +30 -0
- package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.styles.js.map +1 -0
- package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.js +6 -0
- package/lib/cjs/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.js.map +1 -0
- package/lib/cjs/components/media-content/MediaContent.js +36 -0
- package/lib/cjs/components/media-content/MediaContent.js.map +1 -0
- package/lib/cjs/components/media-content/MediaContent.styles.js +56 -0
- package/lib/cjs/components/media-content/MediaContent.styles.js.map +1 -0
- package/lib/cjs/components/media-content/MediaContent.types.js +6 -0
- package/lib/cjs/components/media-content/MediaContent.types.js.map +1 -0
- package/lib/cjs/index.js +14 -0
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/types/gallery.js +9 -0
- package/lib/cjs/types/gallery.js.map +1 -1
- package/lib/cjs/utils/gallery.js +152 -0
- package/lib/cjs/utils/gallery.js.map +1 -0
- package/lib/esm/components/Gallery.js +16 -319
- package/lib/esm/components/Gallery.js.map +1 -1
- package/lib/esm/components/Gallery.types.js +2 -0
- package/lib/esm/components/Gallery.types.js.map +1 -0
- package/lib/esm/components/gallery-editor/GalleryEditor.js +189 -0
- package/lib/esm/components/gallery-editor/GalleryEditor.js.map +1 -0
- package/lib/esm/components/gallery-editor/GalleryEditor.styles.js +13 -0
- package/lib/esm/components/gallery-editor/GalleryEditor.styles.js.map +1 -0
- package/lib/esm/components/gallery-editor/GalleryEditor.types.js +2 -0
- package/lib/esm/components/gallery-editor/GalleryEditor.types.js.map +1 -0
- package/lib/esm/components/gallery-editor/add-file/AddFile.js.map +1 -0
- package/lib/esm/components/gallery-editor/add-file/AddFile.styles.js.map +1 -0
- package/lib/esm/components/gallery-editor/add-file/AddFile.types.js +2 -0
- package/lib/esm/components/gallery-editor/add-file/AddFile.types.js.map +1 -0
- package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.js +34 -0
- package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.js.map +1 -0
- package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.styles.js +30 -0
- package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.styles.js.map +1 -0
- package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.types.js +2 -0
- package/lib/esm/components/gallery-editor/gallery-editor-item/GalleryEditorItem.types.js.map +1 -0
- package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.js +29 -0
- package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.js.map +1 -0
- package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.styles.js +8 -0
- package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.styles.js.map +1 -0
- package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.types.js +2 -0
- package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.types.js.map +1 -0
- package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.js +38 -0
- package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.js.map +1 -0
- package/lib/esm/components/{gallery-item/preview-item/PreviewItem.styles.js → gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.styles.js} +7 -6
- package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.styles.js.map +1 -0
- package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.types.js +2 -0
- package/lib/esm/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.types.js.map +1 -0
- package/lib/esm/components/gallery-viewer/GalleryViewer.js +34 -0
- package/lib/esm/components/gallery-viewer/GalleryViewer.js.map +1 -0
- package/lib/esm/components/{Gallery.styles.js → gallery-viewer/GalleryViewer.styles.js} +12 -17
- package/lib/esm/components/gallery-viewer/GalleryViewer.styles.js.map +1 -0
- package/lib/esm/components/gallery-viewer/GalleryViewer.types.js +2 -0
- package/lib/esm/components/gallery-viewer/GalleryViewer.types.js.map +1 -0
- package/lib/esm/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.js +18 -0
- package/lib/esm/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.js.map +1 -0
- package/lib/esm/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.styles.js +23 -0
- package/lib/esm/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.styles.js.map +1 -0
- package/lib/esm/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.js +2 -0
- package/lib/esm/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.js.map +1 -0
- package/lib/esm/components/media-content/MediaContent.js +29 -0
- package/lib/esm/components/media-content/MediaContent.js.map +1 -0
- package/lib/esm/components/media-content/MediaContent.styles.js +49 -0
- package/lib/esm/components/media-content/MediaContent.styles.js.map +1 -0
- package/lib/esm/components/media-content/MediaContent.types.js +2 -0
- package/lib/esm/components/media-content/MediaContent.types.js.map +1 -0
- package/lib/esm/index.js +2 -0
- package/lib/esm/index.js.map +1 -1
- package/lib/esm/types/gallery.js +9 -0
- package/lib/esm/types/gallery.js.map +1 -1
- package/lib/esm/utils/gallery.js +132 -0
- package/lib/esm/utils/gallery.js.map +1 -0
- package/lib/types/components/Gallery.d.ts +1 -44
- package/lib/types/components/Gallery.types.d.ts +107 -0
- package/lib/types/components/gallery-editor/GalleryEditor.d.ts +4 -0
- package/lib/types/components/gallery-editor/GalleryEditor.styles.d.ts +4 -0
- package/lib/types/components/gallery-editor/GalleryEditor.types.d.ts +81 -0
- package/lib/types/components/gallery-editor/add-file/AddFile.d.ts +4 -0
- package/lib/types/components/gallery-editor/add-file/AddFile.types.d.ts +13 -0
- package/lib/types/components/gallery-editor/gallery-editor-item/GalleryEditorItem.d.ts +4 -0
- package/lib/types/components/gallery-editor/gallery-editor-item/GalleryEditorItem.styles.d.ts +4 -0
- package/lib/types/components/gallery-editor/gallery-editor-item/GalleryEditorItem.types.d.ts +40 -0
- package/lib/types/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.d.ts +4 -0
- package/lib/types/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.styles.d.ts +3 -0
- package/lib/types/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.types.d.ts +30 -0
- package/lib/types/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.d.ts +4 -0
- package/lib/types/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.styles.d.ts +10 -0
- package/lib/types/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.types.d.ts +22 -0
- package/lib/types/components/gallery-viewer/GalleryViewer.d.ts +4 -0
- package/lib/types/components/gallery-viewer/GalleryViewer.styles.d.ts +7 -0
- package/lib/types/components/gallery-viewer/GalleryViewer.types.d.ts +26 -0
- package/lib/types/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.d.ts +4 -0
- package/lib/types/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.styles.d.ts +2 -0
- package/lib/types/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.d.ts +41 -0
- package/lib/types/components/media-content/MediaContent.d.ts +4 -0
- package/lib/types/components/media-content/MediaContent.styles.d.ts +13 -0
- package/lib/types/components/media-content/MediaContent.types.d.ts +40 -0
- package/lib/types/index.d.ts +5 -0
- package/lib/types/types/gallery.d.ts +9 -0
- package/lib/types/utils/gallery.d.ts +12 -0
- package/package.json +3 -3
- package/lib/cjs/components/Gallery.styles.js.map +0 -1
- package/lib/cjs/components/add-file/AddFile.js.map +0 -1
- package/lib/cjs/components/add-file/AddFile.styles.js.map +0 -1
- package/lib/cjs/components/gallery-item/GalleryItem.js +0 -44
- package/lib/cjs/components/gallery-item/GalleryItem.js.map +0 -1
- package/lib/cjs/components/gallery-item/GalleryItem.styles.js +0 -51
- package/lib/cjs/components/gallery-item/GalleryItem.styles.js.map +0 -1
- package/lib/cjs/components/gallery-item/media-item/MediaItem.js +0 -52
- package/lib/cjs/components/gallery-item/media-item/MediaItem.js.map +0 -1
- package/lib/cjs/components/gallery-item/media-item/MediaItem.styles.js +0 -62
- package/lib/cjs/components/gallery-item/media-item/MediaItem.styles.js.map +0 -1
- package/lib/cjs/components/gallery-item/preview-item/PreviewItem.js +0 -45
- package/lib/cjs/components/gallery-item/preview-item/PreviewItem.js.map +0 -1
- package/lib/cjs/components/gallery-item/preview-item/PreviewItem.styles.js +0 -43
- package/lib/cjs/components/gallery-item/preview-item/PreviewItem.styles.js.map +0 -1
- package/lib/esm/components/Gallery.styles.js.map +0 -1
- package/lib/esm/components/add-file/AddFile.js.map +0 -1
- package/lib/esm/components/add-file/AddFile.styles.js.map +0 -1
- package/lib/esm/components/gallery-item/GalleryItem.js +0 -36
- package/lib/esm/components/gallery-item/GalleryItem.js.map +0 -1
- package/lib/esm/components/gallery-item/GalleryItem.styles.js +0 -44
- package/lib/esm/components/gallery-item/GalleryItem.styles.js.map +0 -1
- package/lib/esm/components/gallery-item/media-item/MediaItem.js +0 -42
- package/lib/esm/components/gallery-item/media-item/MediaItem.js.map +0 -1
- package/lib/esm/components/gallery-item/media-item/MediaItem.styles.js +0 -55
- package/lib/esm/components/gallery-item/media-item/MediaItem.styles.js.map +0 -1
- package/lib/esm/components/gallery-item/preview-item/PreviewItem.js +0 -38
- package/lib/esm/components/gallery-item/preview-item/PreviewItem.js.map +0 -1
- package/lib/esm/components/gallery-item/preview-item/PreviewItem.styles.js.map +0 -1
- package/lib/types/components/Gallery.styles.d.ts +0 -10
- package/lib/types/components/add-file/AddFile.d.ts +0 -9
- package/lib/types/components/gallery-item/GalleryItem.d.ts +0 -30
- package/lib/types/components/gallery-item/GalleryItem.styles.d.ts +0 -5
- package/lib/types/components/gallery-item/media-item/MediaItem.d.ts +0 -22
- package/lib/types/components/gallery-item/media-item/MediaItem.styles.d.ts +0 -16
- package/lib/types/components/gallery-item/preview-item/PreviewItem.d.ts +0 -14
- package/lib/types/components/gallery-item/preview-item/PreviewItem.styles.d.ts +0 -10
- /package/lib/cjs/components/{add-file → gallery-editor/add-file}/AddFile.js +0 -0
- /package/lib/cjs/components/{add-file → gallery-editor/add-file}/AddFile.styles.js +0 -0
- /package/lib/esm/components/{add-file → gallery-editor/add-file}/AddFile.js +0 -0
- /package/lib/esm/components/{add-file → gallery-editor/add-file}/AddFile.styles.js +0 -0
- /package/lib/types/components/{add-file → gallery-editor/add-file}/AddFile.styles.d.ts +0 -0
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _core = require("@chayns-components/core");
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var _MediaItem = require("./MediaItem.styles");
|
|
10
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
-
const MediaItem = ({
|
|
12
|
-
fileItem,
|
|
13
|
-
isEditMode,
|
|
14
|
-
openSelectedFile,
|
|
15
|
-
ratio
|
|
16
|
-
}) => {
|
|
17
|
-
var _fileItem$uploadedFil;
|
|
18
|
-
return /*#__PURE__*/_react.default.createElement(_MediaItem.StyledMotionMediaItem, {
|
|
19
|
-
animate: {
|
|
20
|
-
opacity: 1
|
|
21
|
-
},
|
|
22
|
-
initial: {
|
|
23
|
-
opacity: 0
|
|
24
|
-
},
|
|
25
|
-
exit: {
|
|
26
|
-
opacity: 0
|
|
27
|
-
},
|
|
28
|
-
transition: {
|
|
29
|
-
duration: 3.2
|
|
30
|
-
}
|
|
31
|
-
}, fileItem.uploadedFile && 'thumbnailUrl' in fileItem.uploadedFile ? /*#__PURE__*/_react.default.createElement(_MediaItem.StyledMediaItemVideoWrapper, {
|
|
32
|
-
onClick: () => openSelectedFile(fileItem),
|
|
33
|
-
$ratio: ratio
|
|
34
|
-
}, /*#__PURE__*/_react.default.createElement(_MediaItem.StyledMediaItemPlayIcon, null, /*#__PURE__*/_react.default.createElement(_core.Icon, {
|
|
35
|
-
size: isEditMode ? 30 : 50,
|
|
36
|
-
icons: ['fa fa-play']
|
|
37
|
-
})), /*#__PURE__*/_react.default.createElement(_MediaItem.StyledMediaItemVideo, {
|
|
38
|
-
poster: fileItem.uploadedFile.thumbnailUrl
|
|
39
|
-
}, /*#__PURE__*/_react.default.createElement("source", {
|
|
40
|
-
src: fileItem.uploadedFile.url,
|
|
41
|
-
type: "video/mp4"
|
|
42
|
-
}))) : /*#__PURE__*/_react.default.createElement(_MediaItem.StyledMediaItemImageWrapper, {
|
|
43
|
-
onClick: () => openSelectedFile(fileItem),
|
|
44
|
-
$ratio: ratio
|
|
45
|
-
}, /*#__PURE__*/_react.default.createElement(_MediaItem.StyledMediaItemImage, {
|
|
46
|
-
draggable: false,
|
|
47
|
-
src: (_fileItem$uploadedFil = fileItem.uploadedFile) === null || _fileItem$uploadedFil === void 0 ? void 0 : _fileItem$uploadedFil.url
|
|
48
|
-
})));
|
|
49
|
-
};
|
|
50
|
-
MediaItem.displayName = 'MediaItem';
|
|
51
|
-
var _default = exports.default = MediaItem;
|
|
52
|
-
//# sourceMappingURL=MediaItem.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MediaItem.js","names":["_core","require","_react","_interopRequireDefault","_MediaItem","e","__esModule","default","MediaItem","fileItem","isEditMode","openSelectedFile","ratio","_fileItem$uploadedFil","createElement","StyledMotionMediaItem","animate","opacity","initial","exit","transition","duration","uploadedFile","StyledMediaItemVideoWrapper","onClick","$ratio","StyledMediaItemPlayIcon","Icon","size","icons","StyledMediaItemVideo","poster","thumbnailUrl","src","url","type","StyledMediaItemImageWrapper","StyledMediaItemImage","draggable","displayName","_default","exports"],"sources":["../../../../../src/components/gallery-item/media-item/MediaItem.tsx"],"sourcesContent":["import { Icon, type InternalFileItem } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport {\n StyledMediaItemImage,\n StyledMediaItemImageWrapper,\n StyledMediaItemPlayIcon,\n StyledMediaItemVideo,\n StyledMediaItemVideoWrapper,\n StyledMotionMediaItem,\n} from './MediaItem.styles';\n\nexport type MediaItemProps = {\n /**\n * Images and videos which should be displayed\n */\n fileItem: InternalFileItem;\n /**\n * Whether images and videos can be edited\n */\n isEditMode: boolean;\n /**\n * Function to be executed when a file is selected\n */\n openSelectedFile: (file: InternalFileItem) => void;\n /**\n * The ratio of the image\n */\n ratio: number;\n};\n\nconst MediaItem: FC<MediaItemProps> = ({ fileItem, isEditMode, openSelectedFile, ratio }) => (\n <StyledMotionMediaItem\n animate={{ opacity: 1 }}\n initial={{ opacity: 0 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 3.2 }}\n >\n {fileItem.uploadedFile && 'thumbnailUrl' in fileItem.uploadedFile ? (\n <StyledMediaItemVideoWrapper onClick={() => openSelectedFile(fileItem)} $ratio={ratio}>\n <StyledMediaItemPlayIcon>\n <Icon size={isEditMode ? 30 : 50} icons={['fa fa-play']} />\n </StyledMediaItemPlayIcon>\n <StyledMediaItemVideo poster={fileItem.uploadedFile.thumbnailUrl}>\n <source src={fileItem.uploadedFile.url} type=\"video/mp4\" />\n </StyledMediaItemVideo>\n </StyledMediaItemVideoWrapper>\n ) : (\n <StyledMediaItemImageWrapper onClick={() => openSelectedFile(fileItem)} $ratio={ratio}>\n <StyledMediaItemImage draggable={false} src={fileItem.uploadedFile?.url} />\n </StyledMediaItemImageWrapper>\n )}\n </StyledMotionMediaItem>\n);\n\nMediaItem.displayName = 'MediaItem';\n\nexport default MediaItem;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAO4B,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAqB5B,MAAMG,SAA6B,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,UAAU;EAAEC,gBAAgB;EAAEC;AAAM,CAAC;EAAA,IAAAC,qBAAA;EAAA,oBACpFX,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAAW,qBAAqB;IAClBC,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxBC,OAAO,EAAE;MAAED,OAAO,EAAE;IAAE,CAAE;IACxBE,IAAI,EAAE;MAAEF,OAAO,EAAE;IAAE,CAAE;IACrBG,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,GAE7BZ,QAAQ,CAACa,YAAY,IAAI,cAAc,IAAIb,QAAQ,CAACa,YAAY,gBAC7DpB,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAAmB,2BAA2B;IAACC,OAAO,EAAEA,CAAA,KAAMb,gBAAgB,CAACF,QAAQ,CAAE;IAACgB,MAAM,EAAEb;EAAM,gBAClFV,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAAsB,uBAAuB,qBACpBxB,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACd,KAAA,CAAA2B,IAAI;IAACC,IAAI,EAAElB,UAAU,GAAG,EAAE,GAAG,EAAG;IAACmB,KAAK,EAAE,CAAC,YAAY;EAAE,CAAE,CACrC,CAAC,eAC1B3B,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAA0B,oBAAoB;IAACC,MAAM,EAAEtB,QAAQ,CAACa,YAAY,CAACU;EAAa,gBAC7D9B,MAAA,CAAAK,OAAA,CAAAO,aAAA;IAAQmB,GAAG,EAAExB,QAAQ,CAACa,YAAY,CAACY,GAAI;IAACC,IAAI,EAAC;EAAW,CAAE,CACxC,CACG,CAAC,gBAE9BjC,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAAgC,2BAA2B;IAACZ,OAAO,EAAEA,CAAA,KAAMb,gBAAgB,CAACF,QAAQ,CAAE;IAACgB,MAAM,EAAEb;EAAM,gBAClFV,MAAA,CAAAK,OAAA,CAAAO,aAAA,CAACV,UAAA,CAAAiC,oBAAoB;IAACC,SAAS,EAAE,KAAM;IAACL,GAAG,GAAApB,qBAAA,GAAEJ,QAAQ,CAACa,YAAY,cAAAT,qBAAA,uBAArBA,qBAAA,CAAuBqB;EAAI,CAAE,CACjD,CAEd,CAAC;AAAA,CAC3B;AAED1B,SAAS,CAAC+B,WAAW,GAAG,WAAW;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAlC,OAAA,GAErBC,SAAS","ignoreList":[]}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.StyledMotionMediaItem = exports.StyledMediaItemVideoWrapper = exports.StyledMediaItemVideo = exports.StyledMediaItemPlayIcon = exports.StyledMediaItemImageWrapper = exports.StyledMediaItemImage = void 0;
|
|
7
|
-
var _react = require("motion/react");
|
|
8
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
-
const StyledMotionMediaItem = exports.StyledMotionMediaItem = (0, _styledComponents.default)(_react.motion.div)`
|
|
11
|
-
display: flex;
|
|
12
|
-
width: 100%;
|
|
13
|
-
height: 100%;
|
|
14
|
-
`;
|
|
15
|
-
const StyledMediaItemVideoWrapper = exports.StyledMediaItemVideoWrapper = _styledComponents.default.div`
|
|
16
|
-
display: flex;
|
|
17
|
-
width: 100%;
|
|
18
|
-
height: 100%;
|
|
19
|
-
aspect-ratio: ${({
|
|
20
|
-
$ratio
|
|
21
|
-
}) => $ratio};
|
|
22
|
-
`;
|
|
23
|
-
const StyledMediaItemImageWrapper = exports.StyledMediaItemImageWrapper = _styledComponents.default.div`
|
|
24
|
-
display: flex;
|
|
25
|
-
width: 100%;
|
|
26
|
-
height: 100%;
|
|
27
|
-
aspect-ratio: ${({
|
|
28
|
-
$ratio
|
|
29
|
-
}) => $ratio};
|
|
30
|
-
`;
|
|
31
|
-
const StyledMediaItemImage = exports.StyledMediaItemImage = _styledComponents.default.img`
|
|
32
|
-
background-color: ${({
|
|
33
|
-
theme
|
|
34
|
-
}) => theme['101']};
|
|
35
|
-
box-shadow: 0 0 0 1px rgba(${({
|
|
36
|
-
theme
|
|
37
|
-
}) => theme['009-rgb']}, 0.08)
|
|
38
|
-
inset;
|
|
39
|
-
z-index: 1;
|
|
40
|
-
width: 100%;
|
|
41
|
-
height: 100%;
|
|
42
|
-
object-fit: cover;
|
|
43
|
-
`;
|
|
44
|
-
const StyledMediaItemVideo = exports.StyledMediaItemVideo = _styledComponents.default.video`
|
|
45
|
-
background-color: ${({
|
|
46
|
-
theme
|
|
47
|
-
}) => theme['101']};
|
|
48
|
-
box-shadow: 0 0 0 1px rgba(${({
|
|
49
|
-
theme
|
|
50
|
-
}) => theme['009-rgb']}, 0.08)
|
|
51
|
-
inset;
|
|
52
|
-
width: 100%;
|
|
53
|
-
object-fit: cover;
|
|
54
|
-
`;
|
|
55
|
-
const StyledMediaItemPlayIcon = exports.StyledMediaItemPlayIcon = _styledComponents.default.div`
|
|
56
|
-
position: absolute;
|
|
57
|
-
z-index: 2;
|
|
58
|
-
top: 50%;
|
|
59
|
-
left: 50%;
|
|
60
|
-
transform: translate(-50%, -50%);
|
|
61
|
-
`;
|
|
62
|
-
//# sourceMappingURL=MediaItem.styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MediaItem.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMotionMediaItem","exports","styled","motion","div","StyledMediaItemVideoWrapper","$ratio","StyledMediaItemImageWrapper","StyledMediaItemImage","img","theme","StyledMediaItemVideo","video","StyledMediaItemPlayIcon"],"sources":["../../../../../src/components/gallery-item/media-item/MediaItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionMediaItem = styled(motion.div)`\n display: flex;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledMediaItemVideoWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledMediaItemImageWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledMediaItemVideoProps = WithTheme<unknown>;\n\ntype StyledMediaItemImageProps = WithTheme<unknown>;\n\nexport const StyledMediaItemImage = styled.img<StyledMediaItemImageProps>`\n background-color: ${({ theme }: StyledMediaItemImageProps) => theme['101']};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemImageProps) => theme['009-rgb']}, 0.08)\n inset;\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nexport const StyledMediaItemVideo = styled.video<StyledMediaItemVideoProps>`\n background-color: ${({ theme }: StyledMediaItemVideoProps) => theme['101']};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemVideoProps) => theme['009-rgb']}, 0.08)\n inset;\n width: 100%;\n object-fit: cover;\n`;\n\nexport const StyledMediaItemPlayIcon = styled.div`\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AACvD;AACA;AACA;AACA,CAAC;AAEM,MAAMC,2BAA2B,GAAAJ,OAAA,CAAAI,2BAAA,GAAGH,yBAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAEM,MAAMC,2BAA2B,GAAAN,OAAA,CAAAM,2BAAA,GAAGL,yBAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAMM,MAAME,oBAAoB,GAAAP,OAAA,CAAAO,oBAAA,GAAGN,yBAAM,CAACO,GAA8B;AACzE,wBAAwB,CAAC;EAAEC;AAAiC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC9E,iCAAiC,CAAC;EAAEA;AAAiC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3F;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,oBAAoB,GAAAV,OAAA,CAAAU,oBAAA,GAAGT,yBAAM,CAACU,KAAgC;AAC3E,wBAAwB,CAAC;EAAEF;AAAiC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC9E,iCAAiC,CAAC;EAAEA;AAAiC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3F;AACA;AACA;AACA,CAAC;AAEM,MAAMG,uBAAuB,GAAAZ,OAAA,CAAAY,uBAAA,GAAGX,yBAAM,CAACE,GAAG;AACjD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _core = require("@chayns-components/core");
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var _PreviewItem = require("./PreviewItem.styles");
|
|
10
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
-
const PreviewItem = ({
|
|
12
|
-
fileItem,
|
|
13
|
-
ratio
|
|
14
|
-
}) => /*#__PURE__*/_react.default.createElement(_PreviewItem.StyledMotionPreviewItem, {
|
|
15
|
-
animate: {
|
|
16
|
-
opacity: 1
|
|
17
|
-
},
|
|
18
|
-
initial: {
|
|
19
|
-
opacity: 0
|
|
20
|
-
},
|
|
21
|
-
exit: {
|
|
22
|
-
opacity: 0,
|
|
23
|
-
transition: {
|
|
24
|
-
duration: 3.2,
|
|
25
|
-
delay: 3.2
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
transition: {
|
|
29
|
-
duration: 3.2
|
|
30
|
-
},
|
|
31
|
-
style: {
|
|
32
|
-
position: 'absolute'
|
|
33
|
-
}
|
|
34
|
-
}, /*#__PURE__*/_react.default.createElement(_PreviewItem.StyledPreviewItemImageWrapper, {
|
|
35
|
-
$ratio: ratio
|
|
36
|
-
}, /*#__PURE__*/_react.default.createElement(_PreviewItem.StyledPreviewItemLoadingIcon, null, /*#__PURE__*/_react.default.createElement(_core.SmallWaitCursor, {
|
|
37
|
-
shouldHideWaitCursor: false,
|
|
38
|
-
shouldHideBackground: true
|
|
39
|
-
})), /*#__PURE__*/_react.default.createElement(_PreviewItem.StyledPreviewItemImage, {
|
|
40
|
-
draggable: false,
|
|
41
|
-
src: fileItem.previewUrl
|
|
42
|
-
})));
|
|
43
|
-
PreviewItem.displayName = 'PreviewItem';
|
|
44
|
-
var _default = exports.default = PreviewItem;
|
|
45
|
-
//# sourceMappingURL=PreviewItem.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewItem.js","names":["_core","require","_react","_interopRequireDefault","_PreviewItem","e","__esModule","default","PreviewItem","fileItem","ratio","createElement","StyledMotionPreviewItem","animate","opacity","initial","exit","transition","duration","delay","style","position","StyledPreviewItemImageWrapper","$ratio","StyledPreviewItemLoadingIcon","SmallWaitCursor","shouldHideWaitCursor","shouldHideBackground","StyledPreviewItemImage","draggable","src","previewUrl","displayName","_default","exports"],"sources":["../../../../../src/components/gallery-item/preview-item/PreviewItem.tsx"],"sourcesContent":["import { InternalFileItem, SmallWaitCursor } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport {\n StyledMotionPreviewItem,\n StyledPreviewItemImage,\n StyledPreviewItemImageWrapper,\n StyledPreviewItemLoadingIcon,\n} from './PreviewItem.styles';\n\nexport type PreviewItemProps = {\n /**\n * Images and videos which should be displayed\n */\n fileItem: InternalFileItem;\n /**\n * The ratio of the image\n */\n ratio: number;\n};\n\nconst PreviewItem: FC<PreviewItemProps> = ({ fileItem, ratio }) => (\n <StyledMotionPreviewItem\n animate={{ opacity: 1 }}\n initial={{ opacity: 0 }}\n exit={{\n opacity: 0,\n transition: { duration: 3.2, delay: 3.2 },\n }}\n transition={{ duration: 3.2 }}\n style={{ position: 'absolute' }}\n >\n <StyledPreviewItemImageWrapper $ratio={ratio}>\n <StyledPreviewItemLoadingIcon>\n <SmallWaitCursor shouldHideWaitCursor={false} shouldHideBackground />\n </StyledPreviewItemLoadingIcon>\n <StyledPreviewItemImage draggable={false} src={fileItem.previewUrl} />\n </StyledPreviewItemImageWrapper>\n </StyledMotionPreviewItem>\n);\n\nPreviewItem.displayName = 'PreviewItem';\n\nexport default PreviewItem;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAK8B,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAa9B,MAAMG,WAAiC,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAM,CAAC,kBAC1DR,MAAA,CAAAK,OAAA,CAAAI,aAAA,CAACP,YAAA,CAAAQ,uBAAuB;EACpBC,OAAO,EAAE;IAAEC,OAAO,EAAE;EAAE,CAAE;EACxBC,OAAO,EAAE;IAAED,OAAO,EAAE;EAAE,CAAE;EACxBE,IAAI,EAAE;IACFF,OAAO,EAAE,CAAC;IACVG,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,KAAK,EAAE;IAAI;EAC5C,CAAE;EACFF,UAAU,EAAE;IAAEC,QAAQ,EAAE;EAAI,CAAE;EAC9BE,KAAK,EAAE;IAAEC,QAAQ,EAAE;EAAW;AAAE,gBAEhCnB,MAAA,CAAAK,OAAA,CAAAI,aAAA,CAACP,YAAA,CAAAkB,6BAA6B;EAACC,MAAM,EAAEb;AAAM,gBACzCR,MAAA,CAAAK,OAAA,CAAAI,aAAA,CAACP,YAAA,CAAAoB,4BAA4B,qBACzBtB,MAAA,CAAAK,OAAA,CAAAI,aAAA,CAACX,KAAA,CAAAyB,eAAe;EAACC,oBAAoB,EAAE,KAAM;EAACC,oBAAoB;AAAA,CAAE,CAC1C,CAAC,eAC/BzB,MAAA,CAAAK,OAAA,CAAAI,aAAA,CAACP,YAAA,CAAAwB,sBAAsB;EAACC,SAAS,EAAE,KAAM;EAACC,GAAG,EAAErB,QAAQ,CAACsB;AAAW,CAAE,CAC1C,CACV,CAC5B;AAEDvB,WAAW,CAACwB,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3B,OAAA,GAEzBC,WAAW","ignoreList":[]}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.StyledPreviewItemLoadingIcon = exports.StyledPreviewItemImageWrapper = exports.StyledPreviewItemImage = exports.StyledMotionPreviewItem = void 0;
|
|
7
|
-
var _react = require("motion/react");
|
|
8
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
-
const StyledMotionPreviewItem = exports.StyledMotionPreviewItem = (0, _styledComponents.default)(_react.motion.div)`
|
|
11
|
-
display: flex;
|
|
12
|
-
width: 100%;
|
|
13
|
-
height: 100%;
|
|
14
|
-
`;
|
|
15
|
-
const StyledPreviewItemImageWrapper = exports.StyledPreviewItemImageWrapper = _styledComponents.default.div`
|
|
16
|
-
display: flex;
|
|
17
|
-
width: 100%;
|
|
18
|
-
height: 100%;
|
|
19
|
-
aspect-ratio: ${({
|
|
20
|
-
$ratio
|
|
21
|
-
}) => $ratio};
|
|
22
|
-
`;
|
|
23
|
-
const StyledPreviewItemImage = exports.StyledPreviewItemImage = _styledComponents.default.img`
|
|
24
|
-
background-color: ${({
|
|
25
|
-
theme
|
|
26
|
-
}) => theme['101']};
|
|
27
|
-
box-shadow: 0 0 0 1px
|
|
28
|
-
rgba(${({
|
|
29
|
-
theme
|
|
30
|
-
}) => theme['009-rgb']}, 0.08) inset;
|
|
31
|
-
z-index: 1;
|
|
32
|
-
width: 100%;
|
|
33
|
-
height: 100%;
|
|
34
|
-
object-fit: cover;
|
|
35
|
-
`;
|
|
36
|
-
const StyledPreviewItemLoadingIcon = exports.StyledPreviewItemLoadingIcon = _styledComponents.default.div`
|
|
37
|
-
position: absolute;
|
|
38
|
-
z-index: 2;
|
|
39
|
-
top: 50%;
|
|
40
|
-
left: 50%;
|
|
41
|
-
transform: translate(-50%, -50%);
|
|
42
|
-
`;
|
|
43
|
-
//# sourceMappingURL=PreviewItem.styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewItem.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMotionPreviewItem","exports","styled","motion","div","StyledPreviewItemImageWrapper","$ratio","StyledPreviewItemImage","img","theme","StyledPreviewItemLoadingIcon"],"sources":["../../../../../src/components/gallery-item/preview-item/PreviewItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionPreviewItem = styled(motion.div)`\n display: flex;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledPreviewItemImageWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledPreviewItemImageProps = WithTheme<unknown>;\n\nexport const StyledPreviewItemImage = styled.img<StyledPreviewItemImageProps>`\n background-color: ${({ theme }: StyledPreviewItemImageProps) => theme['101']};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledPreviewItemImageProps) => theme['009-rgb']}, 0.08) inset;\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nexport const StyledPreviewItemLoadingIcon = styled.div`\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AACzD;AACA;AACA;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAAJ,OAAA,CAAAI,6BAAA,GAAGH,yBAAM,CAACE,GAAuB;AAC3E;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAIM,MAAMC,sBAAsB,GAAAN,OAAA,CAAAM,sBAAA,GAAGL,yBAAM,CAACM,GAAgC;AAC7E,wBAAwB,CAAC;EAAEC;AAAmC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAChF;AACA,eAAe,CAAC;EAAEA;AAAmC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3E;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,4BAA4B,GAAAT,OAAA,CAAAS,4BAAA,GAAGR,yBAAM,CAACE,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Gallery.styles.js","names":["styled","css","GalleryViewMode","StyledGallery","div","StyledGalleryItemWrapper","$viewMode","$uploadedFileLength","GRID","$ratio","StyledGalleryEditModeWrapper","$fileMinWidth"],"sources":["../../../src/components/Gallery.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { GalleryViewMode } from '../types/gallery';\n\nexport const StyledGallery = styled.div`\n width: 100%;\n`;\n\nexport const StyledGalleryItemWrapper = styled.div<{\n $uploadedFileLength: number;\n $ratio: number;\n $viewMode: GalleryViewMode;\n}>`\n display: grid;\n gap: 5px;\n\n ${({ $viewMode, $uploadedFileLength }) => {\n if ($viewMode === GalleryViewMode.GRID) {\n return css`\n > div:first-child {\n grid-column: 1 / -1;\n }\n\n ${() => {\n switch ($uploadedFileLength) {\n case 1:\n return css`\n grid-template-columns: 1fr;\n `;\n case 2:\n return css`\n grid-template-columns: repeat(2, 1fr);\n > div:first-child {\n grid-column: span 1;\n }\n `;\n case 3:\n return css`\n grid-template-columns: repeat(2, 1fr);\n > div:first-child {\n grid-column: span 2;\n }\n `;\n default:\n return css`\n grid-template-columns: repeat(3, minmax(0, 1fr));\n > div:not(:first-child) {\n grid-column: span 1;\n }\n `;\n }\n }}\n `;\n }\n\n switch ($uploadedFileLength) {\n case 1:\n return css`\n grid-template-columns: 1fr;\n `;\n case 2:\n return css`\n grid-template-columns: repeat(2, 1fr);\n `;\n case 3:\n return css`\n grid-template-columns: repeat(3, 1fr);\n `;\n default:\n return css`\n grid-template-columns: repeat(2, 1fr);\n > div:nth-child(-n + 2) {\n grid-row: 1;\n }\n `;\n }\n }}\n\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledGalleryEditModeWrapper = styled.div<{\n $fileMinWidth: number;\n}>`\n display: grid;\n grid-template-columns: ${({ $fileMinWidth }) =>\n `repeat(auto-fill, minmax(${$fileMinWidth}px, 1fr))`};\n grid-auto-rows: 1fr;\n gap: 6px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,eAAe,QAAQ,kBAAkB;AAElD,OAAO,MAAMC,aAAa,GAAGH,MAAM,CAACI,GAAG;AACvC;AACA,CAAC;AAED,OAAO,MAAMC,wBAAwB,GAAGL,MAAM,CAACI,GAI7C;AACF;AACA;AACA;AACA,MAAM,CAAC;EAAEE,SAAS;EAAEC;AAAoB,CAAC,KAAK;EACtC,IAAID,SAAS,KAAKJ,eAAe,CAACM,IAAI,EAAE;IACpC,OAAOP,GAAG;AACtB;AACA;AACA;AACA;AACA,kBAAkB,MAAM;MACJ,QAAQM,mBAAmB;QACvB,KAAK,CAAC;UACF,OAAON,GAAG;AACtC;AACA,6BAA6B;QACL,KAAK,CAAC;UACF,OAAOA,GAAG;AACtC;AACA;AACA;AACA;AACA,6BAA6B;QACL,KAAK,CAAC;UACF,OAAOA,GAAG;AACtC;AACA;AACA;AACA;AACA,6BAA6B;QACL;UACI,OAAOA,GAAG;AACtC;AACA;AACA;AACA;AACA,6BAA6B;MACT;IACJ,CAAC;AACjB,aAAa;EACL;EAEA,QAAQM,mBAAmB;IACvB,KAAK,CAAC;MACF,OAAON,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAK,CAAC;MACF,OAAOA,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAK,CAAC;MACF,OAAOA,GAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAOA,GAAG;AAC1B;AACA;AACA;AACA;AACA,iBAAiB;EACT;AACJ,CAAC;AACL;AACA,oBAAoB,CAAC;EAAEQ;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAED,OAAO,MAAMC,4BAA4B,GAAGV,MAAM,CAACI,GAEjD;AACF;AACA,6BAA6B,CAAC;EAAEO;AAAc,CAAC,KACvC,4BAA4BA,aAAa,WAAW;AAC5D;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AddFile.js","names":["Icon","selectFiles","React","useCallback","StyledAddFile","StyledAddFIleIconWrapper","AddFile","onAdd","openSelectDialog","files","multiple","type","createElement","key","onClick","size","icons","displayName"],"sources":["../../../../src/components/add-file/AddFile.tsx"],"sourcesContent":["import { Icon, selectFiles } from '@chayns-components/core';\nimport React, { FC, useCallback } from 'react';\nimport { StyledAddFile, StyledAddFIleIconWrapper } from './AddFile.styles';\n\nexport type AddFileProps = {\n /**\n * Function to be executed when files are added\n */\n onAdd: (files: File[]) => void;\n};\n\nconst AddFile: FC<AddFileProps> = ({ onAdd }) => {\n const openSelectDialog = useCallback(async () => {\n const files = await selectFiles({\n multiple: true,\n type: 'image/*, video/*',\n });\n\n onAdd(files);\n }, [onAdd]);\n\n return (\n <StyledAddFile key=\"addButton\">\n <StyledAddFIleIconWrapper onClick={() => void openSelectDialog()}>\n <Icon size={40} icons={['fa fa-plus']} />\n </StyledAddFIleIconWrapper>\n </StyledAddFile>\n );\n};\n\nAddFile.displayName = 'AddFile';\n\nexport default AddFile;\n"],"mappings":"AAAA,SAASA,IAAI,EAAEC,WAAW,QAAQ,yBAAyB;AAC3D,OAAOC,KAAK,IAAQC,WAAW,QAAQ,OAAO;AAC9C,SAASC,aAAa,EAAEC,wBAAwB,QAAQ,kBAAkB;AAS1E,MAAMC,OAAyB,GAAGA,CAAC;EAAEC;AAAM,CAAC,KAAK;EAC7C,MAAMC,gBAAgB,GAAGL,WAAW,CAAC,YAAY;IAC7C,MAAMM,KAAK,GAAG,MAAMR,WAAW,CAAC;MAC5BS,QAAQ,EAAE,IAAI;MACdC,IAAI,EAAE;IACV,CAAC,CAAC;IAEFJ,KAAK,CAACE,KAAK,CAAC;EAChB,CAAC,EAAE,CAACF,KAAK,CAAC,CAAC;EAEX,oBACIL,KAAA,CAAAU,aAAA,CAACR,aAAa;IAACS,GAAG,EAAC;EAAW,gBAC1BX,KAAA,CAAAU,aAAA,CAACP,wBAAwB;IAACS,OAAO,EAAEA,CAAA,KAAM,KAAKN,gBAAgB,CAAC;EAAE,gBAC7DN,KAAA,CAAAU,aAAA,CAACZ,IAAI;IAACe,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,YAAY;EAAE,CAAE,CAClB,CACf,CAAC;AAExB,CAAC;AAEDV,OAAO,CAACW,WAAW,GAAG,SAAS;AAE/B,eAAeX,OAAO","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AddFile.styles.js","names":["styled","StyledAddFile","div","StyledAddFIleIconWrapper","button","theme"],"sources":["../../../../src/components/add-file/AddFile.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledAddFile = styled.div`\n position: relative;\n`;\n\ntype StyledAddFIleIconWrapperProps = WithTheme<unknown>;\n\nexport const StyledAddFIleIconWrapper = styled.button<StyledAddFIleIconWrapperProps>`\n background-color: ${({ theme }: StyledAddFIleIconWrapperProps) => theme['101']};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledAddFIleIconWrapperProps) => theme['009-rgb']}, 0.08) inset;\n width: 100%;\n aspect-ratio: 1 / 1;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,aAAa,GAAGD,MAAM,CAACE,GAAG;AACvC;AACA,CAAC;AAID,OAAO,MAAMC,wBAAwB,GAAGH,MAAM,CAACI,MAAqC;AACpF,wBAAwB,CAAC;EAAEC;AAAqC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAClF;AACA,eAAe,CAAC;EAAEA;AAAqC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC7E;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { Icon } from '@chayns-components/core';
|
|
2
|
-
import { AnimatePresence } from 'motion/react';
|
|
3
|
-
import React, { useMemo } from 'react';
|
|
4
|
-
import { StyledGalleryItem, StyledGalleryItemDeleteButton, StyledGalleryItemMoreItemsIndicator } from './GalleryItem.styles';
|
|
5
|
-
import MediaItem from './media-item/MediaItem';
|
|
6
|
-
import PreviewItem from './preview-item/PreviewItem';
|
|
7
|
-
const GalleryItem = ({
|
|
8
|
-
fileItem,
|
|
9
|
-
handleDeleteFile,
|
|
10
|
-
isEditMode,
|
|
11
|
-
ratio = 1,
|
|
12
|
-
remainingItemsLength,
|
|
13
|
-
onClick
|
|
14
|
-
}) => useMemo(() => /*#__PURE__*/React.createElement(StyledGalleryItem, null, isEditMode && /*#__PURE__*/React.createElement(StyledGalleryItemDeleteButton, {
|
|
15
|
-
onClick: () => handleDeleteFile(fileItem.id)
|
|
16
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
17
|
-
size: 20,
|
|
18
|
-
icons: ['ts-wrong']
|
|
19
|
-
})), !fileItem.state || fileItem.state === 'none' || !fileItem.previewUrl && !fileItem.uploadedFile ? null : /*#__PURE__*/React.createElement(AnimatePresence, {
|
|
20
|
-
initial: false
|
|
21
|
-
}, fileItem.state === 'uploading' ? /*#__PURE__*/React.createElement(PreviewItem, {
|
|
22
|
-
ratio: ratio,
|
|
23
|
-
key: `uploading_${fileItem.id ?? ''}`,
|
|
24
|
-
fileItem: fileItem
|
|
25
|
-
}) : /*#__PURE__*/React.createElement(MediaItem, {
|
|
26
|
-
key: `uploaded_${fileItem.id ?? ''}`,
|
|
27
|
-
fileItem: fileItem,
|
|
28
|
-
isEditMode: isEditMode,
|
|
29
|
-
ratio: ratio,
|
|
30
|
-
openSelectedFile: onClick
|
|
31
|
-
})), remainingItemsLength && /*#__PURE__*/React.createElement(StyledGalleryItemMoreItemsIndicator, {
|
|
32
|
-
onClick: () => onClick(fileItem)
|
|
33
|
-
}, /*#__PURE__*/React.createElement("p", null, `+ ${remainingItemsLength - 3}`))), [fileItem, handleDeleteFile, isEditMode, onClick, ratio, remainingItemsLength]);
|
|
34
|
-
GalleryItem.displayName = 'GalleryItem';
|
|
35
|
-
export default GalleryItem;
|
|
36
|
-
//# sourceMappingURL=GalleryItem.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GalleryItem.js","names":["Icon","AnimatePresence","React","useMemo","StyledGalleryItem","StyledGalleryItemDeleteButton","StyledGalleryItemMoreItemsIndicator","MediaItem","PreviewItem","GalleryItem","fileItem","handleDeleteFile","isEditMode","ratio","remainingItemsLength","onClick","createElement","id","size","icons","state","previewUrl","uploadedFile","initial","key","openSelectedFile","displayName"],"sources":["../../../../src/components/gallery-item/GalleryItem.tsx"],"sourcesContent":["import { Icon, type InternalFileItem } from '@chayns-components/core';\nimport { AnimatePresence } from 'motion/react';\nimport React, { FC, useMemo } from 'react';\nimport {\n StyledGalleryItem,\n StyledGalleryItemDeleteButton,\n StyledGalleryItemMoreItemsIndicator,\n} from './GalleryItem.styles';\nimport MediaItem from './media-item/MediaItem';\nimport PreviewItem from './preview-item/PreviewItem';\n\nexport type GalleryItemProps = {\n /**\n * Images and videos which should be displayed\n */\n fileItem: InternalFileItem;\n /**\n * Whether images and videos can be edited\n */\n isEditMode: boolean;\n /**\n * Function to be executed when a file is deleted\n */\n handleDeleteFile: (id?: string) => void;\n /**\n * The ratio of the image\n */\n ratio?: number;\n /**\n * Length of the uploaded files\n */\n remainingItemsLength?: number;\n /**\n * Function to be executed if a file should be opened\n */\n onClick: (file: InternalFileItem) => void;\n};\n\nconst GalleryItem: FC<GalleryItemProps> = ({\n fileItem,\n handleDeleteFile,\n isEditMode,\n ratio = 1,\n remainingItemsLength,\n onClick,\n}) =>\n useMemo(\n () => (\n <StyledGalleryItem>\n {isEditMode && (\n <StyledGalleryItemDeleteButton onClick={() => handleDeleteFile(fileItem.id)}>\n <Icon size={20} icons={['ts-wrong']} />\n </StyledGalleryItemDeleteButton>\n )}\n {!fileItem.state ||\n fileItem.state === 'none' ||\n (!fileItem.previewUrl && !fileItem.uploadedFile) ? null : (\n <AnimatePresence initial={false}>\n {fileItem.state === 'uploading' ? (\n <PreviewItem\n ratio={ratio}\n key={`uploading_${fileItem.id ?? ''}`}\n fileItem={fileItem}\n />\n ) : (\n <MediaItem\n key={`uploaded_${fileItem.id ?? ''}`}\n fileItem={fileItem}\n isEditMode={isEditMode}\n ratio={ratio}\n openSelectedFile={onClick}\n />\n )}\n </AnimatePresence>\n )}\n {remainingItemsLength && (\n <StyledGalleryItemMoreItemsIndicator onClick={() => onClick(fileItem)}>\n <p>{`+ ${remainingItemsLength - 3}`}</p>\n </StyledGalleryItemMoreItemsIndicator>\n )}\n </StyledGalleryItem>\n ),\n [fileItem, handleDeleteFile, isEditMode, onClick, ratio, remainingItemsLength],\n );\n\nGalleryItem.displayName = 'GalleryItem';\n\nexport default GalleryItem;\n"],"mappings":"AAAA,SAASA,IAAI,QAA+B,yBAAyB;AACrE,SAASC,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAC1C,SACIC,iBAAiB,EACjBC,6BAA6B,EAC7BC,mCAAmC,QAChC,sBAAsB;AAC7B,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,OAAOC,WAAW,MAAM,4BAA4B;AA6BpD,MAAMC,WAAiC,GAAGA,CAAC;EACvCC,QAAQ;EACRC,gBAAgB;EAChBC,UAAU;EACVC,KAAK,GAAG,CAAC;EACTC,oBAAoB;EACpBC;AACJ,CAAC,KACGZ,OAAO,CACH,mBACID,KAAA,CAAAc,aAAA,CAACZ,iBAAiB,QACbQ,UAAU,iBACPV,KAAA,CAAAc,aAAA,CAACX,6BAA6B;EAACU,OAAO,EAAEA,CAAA,KAAMJ,gBAAgB,CAACD,QAAQ,CAACO,EAAE;AAAE,gBACxEf,KAAA,CAAAc,aAAA,CAAChB,IAAI;EAACkB,IAAI,EAAE,EAAG;EAACC,KAAK,EAAE,CAAC,UAAU;AAAE,CAAE,CACX,CAClC,EACA,CAACT,QAAQ,CAACU,KAAK,IAChBV,QAAQ,CAACU,KAAK,KAAK,MAAM,IACxB,CAACV,QAAQ,CAACW,UAAU,IAAI,CAACX,QAAQ,CAACY,YAAa,GAAG,IAAI,gBACnDpB,KAAA,CAAAc,aAAA,CAACf,eAAe;EAACsB,OAAO,EAAE;AAAM,GAC3Bb,QAAQ,CAACU,KAAK,KAAK,WAAW,gBAC3BlB,KAAA,CAAAc,aAAA,CAACR,WAAW;EACRK,KAAK,EAAEA,KAAM;EACbW,GAAG,EAAE,aAAad,QAAQ,CAACO,EAAE,IAAI,EAAE,EAAG;EACtCP,QAAQ,EAAEA;AAAS,CACtB,CAAC,gBAEFR,KAAA,CAAAc,aAAA,CAACT,SAAS;EACNiB,GAAG,EAAE,YAAYd,QAAQ,CAACO,EAAE,IAAI,EAAE,EAAG;EACrCP,QAAQ,EAAEA,QAAS;EACnBE,UAAU,EAAEA,UAAW;EACvBC,KAAK,EAAEA,KAAM;EACbY,gBAAgB,EAAEV;AAAQ,CAC7B,CAEQ,CACpB,EACAD,oBAAoB,iBACjBZ,KAAA,CAAAc,aAAA,CAACV,mCAAmC;EAACS,OAAO,EAAEA,CAAA,KAAMA,OAAO,CAACL,QAAQ;AAAE,gBAClER,KAAA,CAAAc,aAAA,YAAI,KAAKF,oBAAoB,GAAG,CAAC,EAAM,CACN,CAE1B,CACtB,EACD,CAACJ,QAAQ,EAAEC,gBAAgB,EAAEC,UAAU,EAAEG,OAAO,EAAEF,KAAK,EAAEC,oBAAoB,CACjF,CAAC;AAELL,WAAW,CAACiB,WAAW,GAAG,aAAa;AAEvC,eAAejB,WAAW","ignoreList":[]}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
export const StyledGalleryItem = styled.div`
|
|
3
|
-
display: flex;
|
|
4
|
-
position: relative;
|
|
5
|
-
height: 100%;
|
|
6
|
-
width: 100%;
|
|
7
|
-
`;
|
|
8
|
-
export const StyledGalleryItemDeleteButton = styled.button`
|
|
9
|
-
background-color: rgba(
|
|
10
|
-
${({
|
|
11
|
-
theme
|
|
12
|
-
}) => theme['000-rgb']},
|
|
13
|
-
0.75
|
|
14
|
-
);
|
|
15
|
-
box-shadow: 0 0 0 1px
|
|
16
|
-
rgba(${({
|
|
17
|
-
theme
|
|
18
|
-
}) => theme['009-rgb']}, 0.08) inset;
|
|
19
|
-
position: absolute;
|
|
20
|
-
top: 0;
|
|
21
|
-
right: 0;
|
|
22
|
-
z-index: 2;
|
|
23
|
-
height: 30px;
|
|
24
|
-
width: 30px;
|
|
25
|
-
display: flex;
|
|
26
|
-
justify-content: center;
|
|
27
|
-
align-items: center;
|
|
28
|
-
`;
|
|
29
|
-
export const StyledGalleryItemMoreItemsIndicator = styled.div`
|
|
30
|
-
position: absolute;
|
|
31
|
-
z-index: 2;
|
|
32
|
-
height: 100%;
|
|
33
|
-
width: 100%;
|
|
34
|
-
display: flex;
|
|
35
|
-
justify-content: center;
|
|
36
|
-
align-items: center;
|
|
37
|
-
backdrop-filter: brightness(40%);
|
|
38
|
-
|
|
39
|
-
p {
|
|
40
|
-
font-size: 40px;
|
|
41
|
-
color: white;
|
|
42
|
-
}
|
|
43
|
-
`;
|
|
44
|
-
//# sourceMappingURL=GalleryItem.styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GalleryItem.styles.js","names":["styled","StyledGalleryItem","div","StyledGalleryItemDeleteButton","button","theme","StyledGalleryItemMoreItemsIndicator"],"sources":["../../../../src/components/gallery-item/GalleryItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledGalleryItem = styled.div`\n display: flex;\n position: relative;\n height: 100%;\n width: 100%;\n`;\n\ntype StyledGalleryItemDeleteButtonProps = WithTheme<unknown>;\n\nexport const StyledGalleryItemDeleteButton = styled.button<StyledGalleryItemDeleteButtonProps>`\n background-color: rgba(\n ${({ theme }: StyledGalleryItemDeleteButtonProps) => theme['000-rgb']},\n 0.75\n );\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledGalleryItemDeleteButtonProps) => theme['009-rgb']}, 0.08) inset;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 2;\n height: 30px;\n width: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport const StyledGalleryItemMoreItemsIndicator = styled.div`\n position: absolute;\n z-index: 2;\n height: 100%;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n backdrop-filter: brightness(40%);\n\n p {\n font-size: 40px;\n color: white;\n }\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAAG;AAC3C;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACI,MAA0C;AAC9F;AACA,UAAU,CAAC;EAAEC;AAA0C,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC7E;AACA;AACA;AACA,eAAe,CAAC;EAAEA;AAA0C,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAClF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,mCAAmC,GAAGN,MAAM,CAACE,GAAG;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { Icon } from '@chayns-components/core';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { StyledMediaItemImage, StyledMediaItemImageWrapper, StyledMediaItemPlayIcon, StyledMediaItemVideo, StyledMediaItemVideoWrapper, StyledMotionMediaItem } from './MediaItem.styles';
|
|
4
|
-
const MediaItem = ({
|
|
5
|
-
fileItem,
|
|
6
|
-
isEditMode,
|
|
7
|
-
openSelectedFile,
|
|
8
|
-
ratio
|
|
9
|
-
}) => /*#__PURE__*/React.createElement(StyledMotionMediaItem, {
|
|
10
|
-
animate: {
|
|
11
|
-
opacity: 1
|
|
12
|
-
},
|
|
13
|
-
initial: {
|
|
14
|
-
opacity: 0
|
|
15
|
-
},
|
|
16
|
-
exit: {
|
|
17
|
-
opacity: 0
|
|
18
|
-
},
|
|
19
|
-
transition: {
|
|
20
|
-
duration: 3.2
|
|
21
|
-
}
|
|
22
|
-
}, fileItem.uploadedFile && 'thumbnailUrl' in fileItem.uploadedFile ? /*#__PURE__*/React.createElement(StyledMediaItemVideoWrapper, {
|
|
23
|
-
onClick: () => openSelectedFile(fileItem),
|
|
24
|
-
$ratio: ratio
|
|
25
|
-
}, /*#__PURE__*/React.createElement(StyledMediaItemPlayIcon, null, /*#__PURE__*/React.createElement(Icon, {
|
|
26
|
-
size: isEditMode ? 30 : 50,
|
|
27
|
-
icons: ['fa fa-play']
|
|
28
|
-
})), /*#__PURE__*/React.createElement(StyledMediaItemVideo, {
|
|
29
|
-
poster: fileItem.uploadedFile.thumbnailUrl
|
|
30
|
-
}, /*#__PURE__*/React.createElement("source", {
|
|
31
|
-
src: fileItem.uploadedFile.url,
|
|
32
|
-
type: "video/mp4"
|
|
33
|
-
}))) : /*#__PURE__*/React.createElement(StyledMediaItemImageWrapper, {
|
|
34
|
-
onClick: () => openSelectedFile(fileItem),
|
|
35
|
-
$ratio: ratio
|
|
36
|
-
}, /*#__PURE__*/React.createElement(StyledMediaItemImage, {
|
|
37
|
-
draggable: false,
|
|
38
|
-
src: fileItem.uploadedFile?.url
|
|
39
|
-
})));
|
|
40
|
-
MediaItem.displayName = 'MediaItem';
|
|
41
|
-
export default MediaItem;
|
|
42
|
-
//# sourceMappingURL=MediaItem.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MediaItem.js","names":["Icon","React","StyledMediaItemImage","StyledMediaItemImageWrapper","StyledMediaItemPlayIcon","StyledMediaItemVideo","StyledMediaItemVideoWrapper","StyledMotionMediaItem","MediaItem","fileItem","isEditMode","openSelectedFile","ratio","createElement","animate","opacity","initial","exit","transition","duration","uploadedFile","onClick","$ratio","size","icons","poster","thumbnailUrl","src","url","type","draggable","displayName"],"sources":["../../../../../src/components/gallery-item/media-item/MediaItem.tsx"],"sourcesContent":["import { Icon, type InternalFileItem } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport {\n StyledMediaItemImage,\n StyledMediaItemImageWrapper,\n StyledMediaItemPlayIcon,\n StyledMediaItemVideo,\n StyledMediaItemVideoWrapper,\n StyledMotionMediaItem,\n} from './MediaItem.styles';\n\nexport type MediaItemProps = {\n /**\n * Images and videos which should be displayed\n */\n fileItem: InternalFileItem;\n /**\n * Whether images and videos can be edited\n */\n isEditMode: boolean;\n /**\n * Function to be executed when a file is selected\n */\n openSelectedFile: (file: InternalFileItem) => void;\n /**\n * The ratio of the image\n */\n ratio: number;\n};\n\nconst MediaItem: FC<MediaItemProps> = ({ fileItem, isEditMode, openSelectedFile, ratio }) => (\n <StyledMotionMediaItem\n animate={{ opacity: 1 }}\n initial={{ opacity: 0 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 3.2 }}\n >\n {fileItem.uploadedFile && 'thumbnailUrl' in fileItem.uploadedFile ? (\n <StyledMediaItemVideoWrapper onClick={() => openSelectedFile(fileItem)} $ratio={ratio}>\n <StyledMediaItemPlayIcon>\n <Icon size={isEditMode ? 30 : 50} icons={['fa fa-play']} />\n </StyledMediaItemPlayIcon>\n <StyledMediaItemVideo poster={fileItem.uploadedFile.thumbnailUrl}>\n <source src={fileItem.uploadedFile.url} type=\"video/mp4\" />\n </StyledMediaItemVideo>\n </StyledMediaItemVideoWrapper>\n ) : (\n <StyledMediaItemImageWrapper onClick={() => openSelectedFile(fileItem)} $ratio={ratio}>\n <StyledMediaItemImage draggable={false} src={fileItem.uploadedFile?.url} />\n </StyledMediaItemImageWrapper>\n )}\n </StyledMotionMediaItem>\n);\n\nMediaItem.displayName = 'MediaItem';\n\nexport default MediaItem;\n"],"mappings":"AAAA,SAASA,IAAI,QAA+B,yBAAyB;AACrE,OAAOC,KAAK,MAAc,OAAO;AACjC,SACIC,oBAAoB,EACpBC,2BAA2B,EAC3BC,uBAAuB,EACvBC,oBAAoB,EACpBC,2BAA2B,EAC3BC,qBAAqB,QAClB,oBAAoB;AAqB3B,MAAMC,SAA6B,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,UAAU;EAAEC,gBAAgB;EAAEC;AAAM,CAAC,kBACpFX,KAAA,CAAAY,aAAA,CAACN,qBAAqB;EAClBO,OAAO,EAAE;IAAEC,OAAO,EAAE;EAAE,CAAE;EACxBC,OAAO,EAAE;IAAED,OAAO,EAAE;EAAE,CAAE;EACxBE,IAAI,EAAE;IAAEF,OAAO,EAAE;EAAE,CAAE;EACrBG,UAAU,EAAE;IAAEC,QAAQ,EAAE;EAAI;AAAE,GAE7BV,QAAQ,CAACW,YAAY,IAAI,cAAc,IAAIX,QAAQ,CAACW,YAAY,gBAC7DnB,KAAA,CAAAY,aAAA,CAACP,2BAA2B;EAACe,OAAO,EAAEA,CAAA,KAAMV,gBAAgB,CAACF,QAAQ,CAAE;EAACa,MAAM,EAAEV;AAAM,gBAClFX,KAAA,CAAAY,aAAA,CAACT,uBAAuB,qBACpBH,KAAA,CAAAY,aAAA,CAACb,IAAI;EAACuB,IAAI,EAAEb,UAAU,GAAG,EAAE,GAAG,EAAG;EAACc,KAAK,EAAE,CAAC,YAAY;AAAE,CAAE,CACrC,CAAC,eAC1BvB,KAAA,CAAAY,aAAA,CAACR,oBAAoB;EAACoB,MAAM,EAAEhB,QAAQ,CAACW,YAAY,CAACM;AAAa,gBAC7DzB,KAAA,CAAAY,aAAA;EAAQc,GAAG,EAAElB,QAAQ,CAACW,YAAY,CAACQ,GAAI;EAACC,IAAI,EAAC;AAAW,CAAE,CACxC,CACG,CAAC,gBAE9B5B,KAAA,CAAAY,aAAA,CAACV,2BAA2B;EAACkB,OAAO,EAAEA,CAAA,KAAMV,gBAAgB,CAACF,QAAQ,CAAE;EAACa,MAAM,EAAEV;AAAM,gBAClFX,KAAA,CAAAY,aAAA,CAACX,oBAAoB;EAAC4B,SAAS,EAAE,KAAM;EAACH,GAAG,EAAElB,QAAQ,CAACW,YAAY,EAAEQ;AAAI,CAAE,CACjD,CAEd,CAC1B;AAEDpB,SAAS,CAACuB,WAAW,GAAG,WAAW;AAEnC,eAAevB,SAAS","ignoreList":[]}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { motion } from 'motion/react';
|
|
2
|
-
import styled from 'styled-components';
|
|
3
|
-
export const StyledMotionMediaItem = styled(motion.div)`
|
|
4
|
-
display: flex;
|
|
5
|
-
width: 100%;
|
|
6
|
-
height: 100%;
|
|
7
|
-
`;
|
|
8
|
-
export const StyledMediaItemVideoWrapper = styled.div`
|
|
9
|
-
display: flex;
|
|
10
|
-
width: 100%;
|
|
11
|
-
height: 100%;
|
|
12
|
-
aspect-ratio: ${({
|
|
13
|
-
$ratio
|
|
14
|
-
}) => $ratio};
|
|
15
|
-
`;
|
|
16
|
-
export const StyledMediaItemImageWrapper = styled.div`
|
|
17
|
-
display: flex;
|
|
18
|
-
width: 100%;
|
|
19
|
-
height: 100%;
|
|
20
|
-
aspect-ratio: ${({
|
|
21
|
-
$ratio
|
|
22
|
-
}) => $ratio};
|
|
23
|
-
`;
|
|
24
|
-
export const StyledMediaItemImage = styled.img`
|
|
25
|
-
background-color: ${({
|
|
26
|
-
theme
|
|
27
|
-
}) => theme['101']};
|
|
28
|
-
box-shadow: 0 0 0 1px rgba(${({
|
|
29
|
-
theme
|
|
30
|
-
}) => theme['009-rgb']}, 0.08)
|
|
31
|
-
inset;
|
|
32
|
-
z-index: 1;
|
|
33
|
-
width: 100%;
|
|
34
|
-
height: 100%;
|
|
35
|
-
object-fit: cover;
|
|
36
|
-
`;
|
|
37
|
-
export const StyledMediaItemVideo = styled.video`
|
|
38
|
-
background-color: ${({
|
|
39
|
-
theme
|
|
40
|
-
}) => theme['101']};
|
|
41
|
-
box-shadow: 0 0 0 1px rgba(${({
|
|
42
|
-
theme
|
|
43
|
-
}) => theme['009-rgb']}, 0.08)
|
|
44
|
-
inset;
|
|
45
|
-
width: 100%;
|
|
46
|
-
object-fit: cover;
|
|
47
|
-
`;
|
|
48
|
-
export const StyledMediaItemPlayIcon = styled.div`
|
|
49
|
-
position: absolute;
|
|
50
|
-
z-index: 2;
|
|
51
|
-
top: 50%;
|
|
52
|
-
left: 50%;
|
|
53
|
-
transform: translate(-50%, -50%);
|
|
54
|
-
`;
|
|
55
|
-
//# sourceMappingURL=MediaItem.styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MediaItem.styles.js","names":["motion","styled","StyledMotionMediaItem","div","StyledMediaItemVideoWrapper","$ratio","StyledMediaItemImageWrapper","StyledMediaItemImage","img","theme","StyledMediaItemVideo","video","StyledMediaItemPlayIcon"],"sources":["../../../../../src/components/gallery-item/media-item/MediaItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionMediaItem = styled(motion.div)`\n display: flex;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledMediaItemVideoWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledMediaItemImageWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledMediaItemVideoProps = WithTheme<unknown>;\n\ntype StyledMediaItemImageProps = WithTheme<unknown>;\n\nexport const StyledMediaItemImage = styled.img<StyledMediaItemImageProps>`\n background-color: ${({ theme }: StyledMediaItemImageProps) => theme['101']};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemImageProps) => theme['009-rgb']}, 0.08)\n inset;\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nexport const StyledMediaItemVideo = styled.video<StyledMediaItemVideoProps>`\n background-color: ${({ theme }: StyledMediaItemVideoProps) => theme['101']};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemVideoProps) => theme['009-rgb']}, 0.08)\n inset;\n width: 100%;\n object-fit: cover;\n`;\n\nexport const StyledMediaItemPlayIcon = styled.div`\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,qBAAqB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AACvD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGH,MAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGL,MAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAMD,OAAO,MAAME,oBAAoB,GAAGN,MAAM,CAACO,GAA8B;AACzE,wBAAwB,CAAC;EAAEC;AAAiC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC9E,iCAAiC,CAAC;EAAEA;AAAiC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3F;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,oBAAoB,GAAGT,MAAM,CAACU,KAAgC;AAC3E,wBAAwB,CAAC;EAAEF;AAAiC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC9E,iCAAiC,CAAC;EAAEA;AAAiC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3F;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMG,uBAAuB,GAAGX,MAAM,CAACE,GAAG;AACjD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { SmallWaitCursor } from '@chayns-components/core';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { StyledMotionPreviewItem, StyledPreviewItemImage, StyledPreviewItemImageWrapper, StyledPreviewItemLoadingIcon } from './PreviewItem.styles';
|
|
4
|
-
const PreviewItem = ({
|
|
5
|
-
fileItem,
|
|
6
|
-
ratio
|
|
7
|
-
}) => /*#__PURE__*/React.createElement(StyledMotionPreviewItem, {
|
|
8
|
-
animate: {
|
|
9
|
-
opacity: 1
|
|
10
|
-
},
|
|
11
|
-
initial: {
|
|
12
|
-
opacity: 0
|
|
13
|
-
},
|
|
14
|
-
exit: {
|
|
15
|
-
opacity: 0,
|
|
16
|
-
transition: {
|
|
17
|
-
duration: 3.2,
|
|
18
|
-
delay: 3.2
|
|
19
|
-
}
|
|
20
|
-
},
|
|
21
|
-
transition: {
|
|
22
|
-
duration: 3.2
|
|
23
|
-
},
|
|
24
|
-
style: {
|
|
25
|
-
position: 'absolute'
|
|
26
|
-
}
|
|
27
|
-
}, /*#__PURE__*/React.createElement(StyledPreviewItemImageWrapper, {
|
|
28
|
-
$ratio: ratio
|
|
29
|
-
}, /*#__PURE__*/React.createElement(StyledPreviewItemLoadingIcon, null, /*#__PURE__*/React.createElement(SmallWaitCursor, {
|
|
30
|
-
shouldHideWaitCursor: false,
|
|
31
|
-
shouldHideBackground: true
|
|
32
|
-
})), /*#__PURE__*/React.createElement(StyledPreviewItemImage, {
|
|
33
|
-
draggable: false,
|
|
34
|
-
src: fileItem.previewUrl
|
|
35
|
-
})));
|
|
36
|
-
PreviewItem.displayName = 'PreviewItem';
|
|
37
|
-
export default PreviewItem;
|
|
38
|
-
//# sourceMappingURL=PreviewItem.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewItem.js","names":["SmallWaitCursor","React","StyledMotionPreviewItem","StyledPreviewItemImage","StyledPreviewItemImageWrapper","StyledPreviewItemLoadingIcon","PreviewItem","fileItem","ratio","createElement","animate","opacity","initial","exit","transition","duration","delay","style","position","$ratio","shouldHideWaitCursor","shouldHideBackground","draggable","src","previewUrl","displayName"],"sources":["../../../../../src/components/gallery-item/preview-item/PreviewItem.tsx"],"sourcesContent":["import { InternalFileItem, SmallWaitCursor } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport {\n StyledMotionPreviewItem,\n StyledPreviewItemImage,\n StyledPreviewItemImageWrapper,\n StyledPreviewItemLoadingIcon,\n} from './PreviewItem.styles';\n\nexport type PreviewItemProps = {\n /**\n * Images and videos which should be displayed\n */\n fileItem: InternalFileItem;\n /**\n * The ratio of the image\n */\n ratio: number;\n};\n\nconst PreviewItem: FC<PreviewItemProps> = ({ fileItem, ratio }) => (\n <StyledMotionPreviewItem\n animate={{ opacity: 1 }}\n initial={{ opacity: 0 }}\n exit={{\n opacity: 0,\n transition: { duration: 3.2, delay: 3.2 },\n }}\n transition={{ duration: 3.2 }}\n style={{ position: 'absolute' }}\n >\n <StyledPreviewItemImageWrapper $ratio={ratio}>\n <StyledPreviewItemLoadingIcon>\n <SmallWaitCursor shouldHideWaitCursor={false} shouldHideBackground />\n </StyledPreviewItemLoadingIcon>\n <StyledPreviewItemImage draggable={false} src={fileItem.previewUrl} />\n </StyledPreviewItemImageWrapper>\n </StyledMotionPreviewItem>\n);\n\nPreviewItem.displayName = 'PreviewItem';\n\nexport default PreviewItem;\n"],"mappings":"AAAA,SAA2BA,eAAe,QAAQ,yBAAyB;AAC3E,OAAOC,KAAK,MAAc,OAAO;AACjC,SACIC,uBAAuB,EACvBC,sBAAsB,EACtBC,6BAA6B,EAC7BC,4BAA4B,QACzB,sBAAsB;AAa7B,MAAMC,WAAiC,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAM,CAAC,kBAC1DP,KAAA,CAAAQ,aAAA,CAACP,uBAAuB;EACpBQ,OAAO,EAAE;IAAEC,OAAO,EAAE;EAAE,CAAE;EACxBC,OAAO,EAAE;IAAED,OAAO,EAAE;EAAE,CAAE;EACxBE,IAAI,EAAE;IACFF,OAAO,EAAE,CAAC;IACVG,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,KAAK,EAAE;IAAI;EAC5C,CAAE;EACFF,UAAU,EAAE;IAAEC,QAAQ,EAAE;EAAI,CAAE;EAC9BE,KAAK,EAAE;IAAEC,QAAQ,EAAE;EAAW;AAAE,gBAEhCjB,KAAA,CAAAQ,aAAA,CAACL,6BAA6B;EAACe,MAAM,EAAEX;AAAM,gBACzCP,KAAA,CAAAQ,aAAA,CAACJ,4BAA4B,qBACzBJ,KAAA,CAAAQ,aAAA,CAACT,eAAe;EAACoB,oBAAoB,EAAE,KAAM;EAACC,oBAAoB;AAAA,CAAE,CAC1C,CAAC,eAC/BpB,KAAA,CAAAQ,aAAA,CAACN,sBAAsB;EAACmB,SAAS,EAAE,KAAM;EAACC,GAAG,EAAEhB,QAAQ,CAACiB;AAAW,CAAE,CAC1C,CACV,CAC5B;AAEDlB,WAAW,CAACmB,WAAW,GAAG,aAAa;AAEvC,eAAenB,WAAW","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewItem.styles.js","names":["motion","styled","StyledMotionPreviewItem","div","StyledPreviewItemImageWrapper","$ratio","StyledPreviewItemImage","img","theme","StyledPreviewItemLoadingIcon"],"sources":["../../../../../src/components/gallery-item/preview-item/PreviewItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionPreviewItem = styled(motion.div)`\n display: flex;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledPreviewItemImageWrapper = styled.div<{ $ratio: number }>`\n display: flex;\n width: 100%;\n height: 100%;\n aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledPreviewItemImageProps = WithTheme<unknown>;\n\nexport const StyledPreviewItemImage = styled.img<StyledPreviewItemImageProps>`\n background-color: ${({ theme }: StyledPreviewItemImageProps) => theme['101']};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledPreviewItemImageProps) => theme['009-rgb']}, 0.08) inset;\n z-index: 1;\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nexport const StyledPreviewItemLoadingIcon = styled.div`\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AACzD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACE,GAAuB;AAC3E;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGL,MAAM,CAACM,GAAgC;AAC7E,wBAAwB,CAAC;EAAEC;AAAmC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAChF;AACA,eAAe,CAAC;EAAEA;AAAmC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3E;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,4BAA4B,GAAGR,MAAM,CAACE,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { GalleryViewMode } from '../types/gallery';
|
|
2
|
-
export declare const StyledGallery: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
3
|
-
export declare const StyledGalleryItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
4
|
-
$uploadedFileLength: number;
|
|
5
|
-
$ratio: number;
|
|
6
|
-
$viewMode: GalleryViewMode;
|
|
7
|
-
}>> & string;
|
|
8
|
-
export declare const StyledGalleryEditModeWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
9
|
-
$fileMinWidth: number;
|
|
10
|
-
}>> & string;
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { type InternalFileItem } from '@chayns-components/core';
|
|
2
|
-
import { FC } from 'react';
|
|
3
|
-
export type GalleryItemProps = {
|
|
4
|
-
/**
|
|
5
|
-
* Images and videos which should be displayed
|
|
6
|
-
*/
|
|
7
|
-
fileItem: InternalFileItem;
|
|
8
|
-
/**
|
|
9
|
-
* Whether images and videos can be edited
|
|
10
|
-
*/
|
|
11
|
-
isEditMode: boolean;
|
|
12
|
-
/**
|
|
13
|
-
* Function to be executed when a file is deleted
|
|
14
|
-
*/
|
|
15
|
-
handleDeleteFile: (id?: string) => void;
|
|
16
|
-
/**
|
|
17
|
-
* The ratio of the image
|
|
18
|
-
*/
|
|
19
|
-
ratio?: number;
|
|
20
|
-
/**
|
|
21
|
-
* Length of the uploaded files
|
|
22
|
-
*/
|
|
23
|
-
remainingItemsLength?: number;
|
|
24
|
-
/**
|
|
25
|
-
* Function to be executed if a file should be opened
|
|
26
|
-
*/
|
|
27
|
-
onClick: (file: InternalFileItem) => void;
|
|
28
|
-
};
|
|
29
|
-
declare const GalleryItem: FC<GalleryItemProps>;
|
|
30
|
-
export default GalleryItem;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
export declare const StyledGalleryItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
2
|
-
export declare const StyledGalleryItemDeleteButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
|
|
3
|
-
theme: import("@chayns-components/core").Theme;
|
|
4
|
-
}>> & string;
|
|
5
|
-
export declare const StyledGalleryItemMoreItemsIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { type InternalFileItem } from '@chayns-components/core';
|
|
2
|
-
import { FC } from 'react';
|
|
3
|
-
export type MediaItemProps = {
|
|
4
|
-
/**
|
|
5
|
-
* Images and videos which should be displayed
|
|
6
|
-
*/
|
|
7
|
-
fileItem: InternalFileItem;
|
|
8
|
-
/**
|
|
9
|
-
* Whether images and videos can be edited
|
|
10
|
-
*/
|
|
11
|
-
isEditMode: boolean;
|
|
12
|
-
/**
|
|
13
|
-
* Function to be executed when a file is selected
|
|
14
|
-
*/
|
|
15
|
-
openSelectedFile: (file: InternalFileItem) => void;
|
|
16
|
-
/**
|
|
17
|
-
* The ratio of the image
|
|
18
|
-
*/
|
|
19
|
-
ratio: number;
|
|
20
|
-
};
|
|
21
|
-
declare const MediaItem: FC<MediaItemProps>;
|
|
22
|
-
export default MediaItem;
|