@chayns-components/gallery 5.0.0-beta.98 → 5.0.0-beta.981
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/README.md +4 -15
- package/lib/cjs/components/Gallery.js +317 -0
- package/lib/cjs/components/Gallery.js.map +1 -0
- package/lib/cjs/components/Gallery.styles.js +92 -0
- package/lib/cjs/components/Gallery.styles.js.map +1 -0
- package/lib/cjs/components/add-file/AddFile.js +33 -0
- package/lib/cjs/components/add-file/AddFile.js.map +1 -0
- package/lib/cjs/components/add-file/AddFile.styles.js +23 -0
- package/lib/cjs/components/add-file/AddFile.styles.js.map +1 -0
- package/lib/cjs/components/gallery-item/GalleryItem.js +43 -0
- package/lib/cjs/components/gallery-item/GalleryItem.js.map +1 -0
- package/lib/cjs/components/gallery-item/GalleryItem.styles.js +51 -0
- package/lib/cjs/components/gallery-item/GalleryItem.styles.js.map +1 -0
- package/lib/cjs/components/gallery-item/media-item/MediaItem.js +52 -0
- package/lib/cjs/components/gallery-item/media-item/MediaItem.js.map +1 -0
- package/lib/cjs/components/gallery-item/media-item/MediaItem.styles.js +62 -0
- package/lib/cjs/components/gallery-item/media-item/MediaItem.styles.js.map +1 -0
- package/lib/cjs/components/gallery-item/preview-item/PreviewItem.js +45 -0
- package/lib/cjs/components/gallery-item/preview-item/PreviewItem.js.map +1 -0
- package/lib/cjs/components/gallery-item/preview-item/PreviewItem.styles.js +43 -0
- package/lib/cjs/components/gallery-item/preview-item/PreviewItem.styles.js.map +1 -0
- package/lib/cjs/index.js +21 -0
- package/lib/cjs/index.js.map +1 -0
- package/lib/cjs/types/gallery.js +12 -0
- package/lib/cjs/types/gallery.js.map +1 -0
- package/lib/cjs/utils/file.js +51 -0
- package/lib/cjs/utils/file.js.map +1 -0
- package/lib/esm/components/Gallery.js +307 -0
- package/lib/esm/components/Gallery.js.map +1 -0
- package/lib/esm/components/Gallery.styles.js +91 -0
- package/lib/esm/components/Gallery.styles.js.map +1 -0
- package/lib/esm/components/add-file/AddFile.js +26 -0
- package/lib/esm/components/add-file/AddFile.js.map +1 -0
- package/lib/esm/components/add-file/AddFile.styles.js +22 -0
- package/lib/esm/components/add-file/AddFile.styles.js.map +1 -0
- package/lib/esm/components/gallery-item/GalleryItem.js +37 -0
- package/lib/esm/components/gallery-item/GalleryItem.js.map +1 -0
- package/lib/esm/components/gallery-item/GalleryItem.styles.js +50 -0
- package/lib/esm/components/gallery-item/GalleryItem.styles.js.map +1 -0
- package/lib/esm/components/gallery-item/media-item/MediaItem.js +45 -0
- package/lib/esm/components/gallery-item/media-item/MediaItem.js.map +1 -0
- package/lib/esm/components/gallery-item/media-item/MediaItem.styles.js +73 -0
- package/lib/esm/components/gallery-item/media-item/MediaItem.styles.js.map +1 -0
- package/lib/esm/components/gallery-item/preview-item/PreviewItem.js +41 -0
- package/lib/esm/components/gallery-item/preview-item/PreviewItem.js.map +1 -0
- package/lib/esm/components/gallery-item/preview-item/PreviewItem.styles.js +45 -0
- package/lib/esm/components/gallery-item/preview-item/PreviewItem.styles.js.map +1 -0
- package/lib/esm/index.js +5 -0
- package/lib/esm/index.js.map +1 -0
- package/lib/esm/types/gallery.js +6 -0
- package/lib/esm/types/gallery.js.map +1 -0
- package/lib/esm/utils/file.js +47 -0
- package/lib/esm/utils/file.js.map +1 -0
- package/lib/types/components/Gallery.d.ts +47 -0
- package/lib/types/components/Gallery.styles.d.ts +10 -0
- package/lib/types/components/add-file/AddFile.d.ts +9 -0
- package/lib/types/components/add-file/AddFile.styles.d.ts +4 -0
- package/lib/types/components/gallery-item/GalleryItem.d.ts +30 -0
- package/lib/types/components/gallery-item/GalleryItem.styles.d.ts +5 -0
- package/lib/types/components/gallery-item/media-item/MediaItem.d.ts +22 -0
- package/lib/types/components/gallery-item/media-item/MediaItem.styles.d.ts +279 -0
- package/lib/types/components/gallery-item/preview-item/PreviewItem.d.ts +14 -0
- package/lib/types/components/gallery-item/preview-item/PreviewItem.styles.d.ts +273 -0
- package/lib/types/index.d.ts +2 -0
- package/lib/types/types/gallery.d.ts +4 -0
- package/lib/types/utils/file.d.ts +17 -0
- package/package.json +47 -28
- package/lib/components/gallery/Gallery.d.ts +0 -4
- package/lib/components/gallery/Gallery.js +0 -14
- package/lib/components/gallery/Gallery.js.map +0 -1
- package/lib/components/gallery/Gallery.styles.d.ts +0 -1
- package/lib/components/gallery/Gallery.styles.js +0 -11
- package/lib/components/gallery/Gallery.styles.js.map +0 -1
- package/lib/index.d.ts +0 -1
- package/lib/index.js +0 -14
- package/lib/index.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GalleryItem.js","names":["_core","require","_framerMotion","_react","_interopRequireWildcard","_GalleryItem","_MediaItem","_interopRequireDefault","_PreviewItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GalleryItem","fileItem","handleDeleteFile","isEditMode","ratio","remainingItemsLength","onClick","useMemo","createElement","StyledGalleryItem","StyledGalleryItemDeleteButton","id","Icon","size","icons","state","previewUrl","uploadedFile","AnimatePresence","initial","key","openSelectedFile","StyledGalleryItemMoreItemsIndicator","displayName","_default","exports"],"sources":["../../../../src/components/gallery-item/GalleryItem.tsx"],"sourcesContent":["import { Icon, type InternalFileItem } from '@chayns-components/core';\nimport { AnimatePresence } from 'framer-motion';\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>\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":"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","ignoreList":[]}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.StyledGalleryItemMoreItemsIndicator = exports.StyledGalleryItemDeleteButton = exports.StyledGalleryItem = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
+
const StyledGalleryItem = exports.StyledGalleryItem = _styledComponents.default.div`
|
|
10
|
+
display: flex;
|
|
11
|
+
position: relative;
|
|
12
|
+
height: 100%;
|
|
13
|
+
width: 100%;
|
|
14
|
+
`;
|
|
15
|
+
const StyledGalleryItemDeleteButton = exports.StyledGalleryItemDeleteButton = _styledComponents.default.button`
|
|
16
|
+
background-color: rgba(
|
|
17
|
+
${({
|
|
18
|
+
theme
|
|
19
|
+
}) => theme['000-rgb']},
|
|
20
|
+
0.75
|
|
21
|
+
);
|
|
22
|
+
box-shadow: 0 0 0 1px
|
|
23
|
+
rgba(${({
|
|
24
|
+
theme
|
|
25
|
+
}) => theme['009-rgb']}, 0.08) inset;
|
|
26
|
+
position: absolute;
|
|
27
|
+
top: 0;
|
|
28
|
+
right: 0;
|
|
29
|
+
z-index: 2;
|
|
30
|
+
height: 30px;
|
|
31
|
+
width: 30px;
|
|
32
|
+
display: flex;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
align-items: center;
|
|
35
|
+
`;
|
|
36
|
+
const StyledGalleryItemMoreItemsIndicator = exports.StyledGalleryItemMoreItemsIndicator = _styledComponents.default.div`
|
|
37
|
+
position: absolute;
|
|
38
|
+
z-index: 2;
|
|
39
|
+
height: 100%;
|
|
40
|
+
width: 100%;
|
|
41
|
+
display: flex;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
align-items: center;
|
|
44
|
+
backdrop-filter: brightness(40%);
|
|
45
|
+
|
|
46
|
+
p {
|
|
47
|
+
font-size: 40px;
|
|
48
|
+
color: white;
|
|
49
|
+
}
|
|
50
|
+
`;
|
|
51
|
+
//# sourceMappingURL=GalleryItem.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GalleryItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledGalleryItem","exports","styled","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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC3C;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,6BAA6B,GAAAH,OAAA,CAAAG,6BAAA,GAAGF,yBAAM,CAACG,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;AAEM,MAAMC,mCAAmC,GAAAN,OAAA,CAAAM,mCAAA,GAAGL,yBAAM,CAACC,GAAG;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,52 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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":[]}
|
|
@@ -0,0 +1,62 @@
|
|
|
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 _framerMotion = require("framer-motion");
|
|
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)(_framerMotion.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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MediaItem.styles.js","names":["_framerMotion","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 { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionMediaItem = styled(motion.div)<FramerMotionBugFix>`\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,aAAA,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,oBAAM,CAACC,GAAG,CAAqB;AAC3E;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":[]}
|
|
@@ -0,0 +1,45 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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":[]}
|
|
@@ -0,0 +1,43 @@
|
|
|
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 _framerMotion = require("framer-motion");
|
|
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)(_framerMotion.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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PreviewItem.styles.js","names":["_framerMotion","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 { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionPreviewItem = styled(motion.div)<FramerMotionBugFix>`\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,aAAA,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,oBAAM,CAACC,GAAG,CAAqB;AAC7E;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":[]}
|
package/lib/cjs/index.js
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "Gallery", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _Gallery.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "GalleryViewMode", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _gallery.GalleryViewMode;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
var _Gallery = _interopRequireDefault(require("./components/Gallery"));
|
|
19
|
+
var _gallery = require("./types/gallery");
|
|
20
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
21
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["_Gallery","_interopRequireDefault","require","_gallery","e","__esModule","default"],"sources":["../../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Gallery } from './components/Gallery';\nexport { GalleryViewMode } from './types/gallery';\n"],"mappings":";;;;;;;;;;;;;;;;;AAEA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAAkD,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.GalleryViewMode = void 0;
|
|
7
|
+
let GalleryViewMode = exports.GalleryViewMode = /*#__PURE__*/function (GalleryViewMode) {
|
|
8
|
+
GalleryViewMode[GalleryViewMode["SQUARE"] = 0] = "SQUARE";
|
|
9
|
+
GalleryViewMode[GalleryViewMode["GRID"] = 1] = "GRID";
|
|
10
|
+
return GalleryViewMode;
|
|
11
|
+
}({});
|
|
12
|
+
//# sourceMappingURL=gallery.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"gallery.js","names":["GalleryViewMode","exports"],"sources":["../../../src/types/gallery.ts"],"sourcesContent":["export enum GalleryViewMode {\n SQUARE,\n GRID,\n}\n"],"mappings":";;;;;;IAAYA,eAAe,GAAAC,OAAA,CAAAD,eAAA,0BAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA","ignoreList":[]}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.generateVideoThumbnail = exports.generatePreviewUrl = exports.filterDuplicateFile = void 0;
|
|
7
|
+
const filterDuplicateFile = ({
|
|
8
|
+
newFile,
|
|
9
|
+
files
|
|
10
|
+
}) => {
|
|
11
|
+
const duplicates = files.filter(({
|
|
12
|
+
file
|
|
13
|
+
}) => file && file.name === newFile.name && file.size === newFile.size);
|
|
14
|
+
return duplicates.length > 0;
|
|
15
|
+
};
|
|
16
|
+
exports.filterDuplicateFile = filterDuplicateFile;
|
|
17
|
+
const generatePreviewUrl = ({
|
|
18
|
+
callback,
|
|
19
|
+
file
|
|
20
|
+
}) => {
|
|
21
|
+
const reader = new FileReader();
|
|
22
|
+
reader.onload = event => {
|
|
23
|
+
var _event$target;
|
|
24
|
+
const previewUrl = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result;
|
|
25
|
+
callback(previewUrl);
|
|
26
|
+
};
|
|
27
|
+
reader.readAsDataURL(file);
|
|
28
|
+
};
|
|
29
|
+
exports.generatePreviewUrl = generatePreviewUrl;
|
|
30
|
+
const generateVideoThumbnail = ({
|
|
31
|
+
file,
|
|
32
|
+
callback
|
|
33
|
+
}) => {
|
|
34
|
+
const canvas = document.createElement('canvas');
|
|
35
|
+
const video = document.createElement('video');
|
|
36
|
+
|
|
37
|
+
// this is important
|
|
38
|
+
video.autoplay = true;
|
|
39
|
+
video.muted = true;
|
|
40
|
+
video.src = URL.createObjectURL(file);
|
|
41
|
+
video.onloadeddata = () => {
|
|
42
|
+
const ctx = canvas.getContext('2d');
|
|
43
|
+
canvas.width = video.videoWidth;
|
|
44
|
+
canvas.height = video.videoHeight;
|
|
45
|
+
ctx === null || ctx === void 0 || ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
|
|
46
|
+
video.pause();
|
|
47
|
+
callback(canvas.toDataURL('image/png'));
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
exports.generateVideoThumbnail = generateVideoThumbnail;
|
|
51
|
+
//# sourceMappingURL=file.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"file.js","names":["filterDuplicateFile","newFile","files","duplicates","filter","file","name","size","length","exports","generatePreviewUrl","callback","reader","FileReader","onload","event","_event$target","previewUrl","target","result","readAsDataURL","generateVideoThumbnail","canvas","document","createElement","video","autoplay","muted","src","URL","createObjectURL","onloadeddata","ctx","getContext","width","videoWidth","height","videoHeight","drawImage","pause","toDataURL"],"sources":["../../../src/utils/file.ts"],"sourcesContent":["import type { InternalFileItem } from '@chayns-components/core';\n\ninterface FilerDuplicateFileOptions {\n files: InternalFileItem[];\n newFile: File;\n}\n\nexport const filterDuplicateFile = ({ newFile, files }: FilerDuplicateFileOptions) => {\n const duplicates = files.filter(\n ({ file }) => file && file.name === newFile.name && file.size === newFile.size,\n );\n\n return duplicates.length > 0;\n};\n\ninterface GeneratePreviewUrlOptions {\n file: File;\n callback: (previewUrl: string) => void;\n}\n\nexport const generatePreviewUrl = ({ callback, file }: GeneratePreviewUrlOptions): void => {\n const reader = new FileReader();\n\n reader.onload = (event) => {\n const previewUrl = event.target?.result as string;\n\n callback(previewUrl);\n };\n\n reader.readAsDataURL(file);\n};\n\ninterface GenerateVideoThumbnailOptions {\n file: File;\n callback: (previewUrl: string) => void;\n}\n\nexport const generateVideoThumbnail = ({ file, callback }: GenerateVideoThumbnailOptions) => {\n const canvas = document.createElement('canvas');\n const video = document.createElement('video');\n\n // this is important\n video.autoplay = true;\n video.muted = true;\n video.src = URL.createObjectURL(file);\n\n video.onloadeddata = () => {\n const ctx = canvas.getContext('2d');\n\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n\n ctx?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);\n video.pause();\n\n callback(canvas.toDataURL('image/png'));\n };\n};\n"],"mappings":";;;;;;AAOO,MAAMA,mBAAmB,GAAGA,CAAC;EAAEC,OAAO;EAAEC;AAAiC,CAAC,KAAK;EAClF,MAAMC,UAAU,GAAGD,KAAK,CAACE,MAAM,CAC3B,CAAC;IAAEC;EAAK,CAAC,KAAKA,IAAI,IAAIA,IAAI,CAACC,IAAI,KAAKL,OAAO,CAACK,IAAI,IAAID,IAAI,CAACE,IAAI,KAAKN,OAAO,CAACM,IAC9E,CAAC;EAED,OAAOJ,UAAU,CAACK,MAAM,GAAG,CAAC;AAChC,CAAC;AAACC,OAAA,CAAAT,mBAAA,GAAAA,mBAAA;AAOK,MAAMU,kBAAkB,GAAGA,CAAC;EAAEC,QAAQ;EAAEN;AAAgC,CAAC,KAAW;EACvF,MAAMO,MAAM,GAAG,IAAIC,UAAU,CAAC,CAAC;EAE/BD,MAAM,CAACE,MAAM,GAAIC,KAAK,IAAK;IAAA,IAAAC,aAAA;IACvB,MAAMC,UAAU,IAAAD,aAAA,GAAGD,KAAK,CAACG,MAAM,cAAAF,aAAA,uBAAZA,aAAA,CAAcG,MAAgB;IAEjDR,QAAQ,CAACM,UAAU,CAAC;EACxB,CAAC;EAEDL,MAAM,CAACQ,aAAa,CAACf,IAAI,CAAC;AAC9B,CAAC;AAACI,OAAA,CAAAC,kBAAA,GAAAA,kBAAA;AAOK,MAAMW,sBAAsB,GAAGA,CAAC;EAAEhB,IAAI;EAAEM;AAAwC,CAAC,KAAK;EACzF,MAAMW,MAAM,GAAGC,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;EAC/C,MAAMC,KAAK,GAAGF,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;;EAE7C;EACAC,KAAK,CAACC,QAAQ,GAAG,IAAI;EACrBD,KAAK,CAACE,KAAK,GAAG,IAAI;EAClBF,KAAK,CAACG,GAAG,GAAGC,GAAG,CAACC,eAAe,CAACzB,IAAI,CAAC;EAErCoB,KAAK,CAACM,YAAY,GAAG,MAAM;IACvB,MAAMC,GAAG,GAAGV,MAAM,CAACW,UAAU,CAAC,IAAI,CAAC;IAEnCX,MAAM,CAACY,KAAK,GAAGT,KAAK,CAACU,UAAU;IAC/Bb,MAAM,CAACc,MAAM,GAAGX,KAAK,CAACY,WAAW;IAEjCL,GAAG,aAAHA,GAAG,eAAHA,GAAG,CAAEM,SAAS,CAACb,KAAK,EAAE,CAAC,EAAE,CAAC,EAAEA,KAAK,CAACU,UAAU,EAAEV,KAAK,CAACY,WAAW,CAAC;IAChEZ,KAAK,CAACc,KAAK,CAAC,CAAC;IAEb5B,QAAQ,CAACW,MAAM,CAACkB,SAAS,CAAC,WAAW,CAAC,CAAC;EAC3C,CAAC;AACL,CAAC;AAAC/B,OAAA,CAAAY,sBAAA,GAAAA,sBAAA","ignoreList":[]}
|