@chayns-components/gallery 5.2.4 → 5.2.5

package/AGENTS.md

@@ -14,7 +14,10 @@ import { Gallery, GalleryEditor, GalleryViewer } from '@chayns-components/galler
 
 ```tsx
 <Gallery
-    files={galleryStoryFiles}
+    files={galleryStoryFiles.slice(0, 3)}
+    isEditMode={false}
+    shouldLoadImages
+    viewMode={GalleryViewMode.GRID}
 />
 ```
 
@@ -26,7 +29,7 @@ import { Gallery, GalleryEditor, GalleryViewer } from '@chayns-components/galler
 
 ## Gallery
 
-`Gallery` is exported by `@chayns-components/gallery` and should be imported from the public package entry point.
+Die Wrapper-Komponente entscheidet zwischen Viewer und Editor und steuert das optionale verzögerte Laden der finalen Medien. Die Stories zeigen die typischen Einsatzfälle sowie die neue Preview-first-Ladelogik.
 
 ### Import
 
@@ -38,9 +41,34 @@ import { Gallery } from '@chayns-components/gallery';
 
 #### General
 
+```tsx
+<Gallery
+    files={galleryStoryFiles.slice(0, 3)}
+    isEditMode={false}
+    shouldLoadImages
+    viewMode={GalleryViewMode.GRID}
+/>
+```
+
+#### Read Only Square
+
+```tsx
+<Gallery
+    files={galleryViewerSquareFiles}
+    isEditMode={false}
+    shouldLoadImages
+    viewMode={GalleryViewMode.SQUARE}
+/>
+```
+
+#### Deferred Load Preview First
+
 ```tsx
 <Gallery
     files={galleryStoryFiles}
+    isEditMode={false}
+    shouldLoadImages={false}
+    viewMode={GalleryViewMode.GRID}
 />
 ```
 
@@ -48,18 +76,23 @@ import { Gallery } from '@chayns-components/gallery';
 
 ```tsx
 <Gallery
-    files={galleryStoryFiles.slice(0, 3)}
+    files={galleryPreviewFiles.slice(0, 3)}
     isEditMode
+    shouldLoadImages
+    viewMode={GalleryViewMode.GRID}
     maxFiles={6}
 />
 ```
 
-#### Wrapper Read Only Square
+#### Edit Mode Max Files Reached
 
 ```tsx
 <Gallery
-    files={galleryViewerSquareFiles}
-    viewMode={GalleryViewMode.SQUARE}
+    files={galleryPreviewFiles.slice(0, 4)}
+    isEditMode
+    shouldLoadImages
+    viewMode={GalleryViewMode.GRID}
+    maxFiles={4}
 />
 ```
 
@@ -67,8 +100,10 @@ import { Gallery } from '@chayns-components/gallery';
 
 ```tsx
 <Gallery
-    files={galleryStoryFiles.slice(0, 3)}
+    files={galleryPreviewFiles.slice(0, 3)}
     isEditMode
+    shouldLoadImages
+    viewMode={GalleryViewMode.GRID}
     maxFiles={6}
     addFileIcon={'fa fa-image-circle-plus'}
 />
@@ -92,7 +127,7 @@ No additional exported types documented.
 - Avoid imports from internal paths such as `@chayns-components/gallery/src/...`; always use the public package export.
 ## GalleryEditor
 
-`GalleryEditor` is exported by `@chayns-components/gallery` and should be imported from the public package entry point.
+Der Editor verwaltet lokale und externe Medien, unterstützt Drag-and-Drop und kann die endgültige Medienladung über `shouldLoadImages` verzögern.
 
 ### Import
 
@@ -110,17 +145,31 @@ import { GalleryEditor } from '@chayns-components/gallery';
     fileMinWidth={100}
     files={galleryStoryFiles.slice(0, 3)}
     maxFiles={6}
+    shouldLoadImages
+/>
+```
+
+#### Dense Layout
+
+```tsx
+<GalleryEditor
+    allowDragAndDrop={false}
+    fileMinWidth={140}
+    files={galleryPreviewFiles.slice(0, 4)}
+    maxFiles={6}
+    shouldLoadImages
 />
 ```
 
-#### Reached Max Files
+#### Max Files Reached
 
 ```tsx
 <GalleryEditor
     allowDragAndDrop={false}
     fileMinWidth={100}
-    files={galleryStoryFiles.slice(0, 4)}
+    files={galleryPreviewFiles.slice(0, 4)}
     maxFiles={4}
+    shouldLoadImages
 />
 ```
 
@@ -130,12 +179,49 @@ import { GalleryEditor } from '@chayns-components/gallery';
 <GalleryEditor
     allowDragAndDrop={false}
     fileMinWidth={100}
-    files={galleryStoryFiles.slice(0, 3)}
+    files={galleryPreviewFiles.slice(0, 3)}
     maxFiles={6}
+    shouldLoadImages
     addFileIcon={'fa fa-image-circle-plus'}
 />
 ```
 
+#### Drag And Drop Enabled
+
+```tsx
+<GalleryEditor
+    allowDragAndDrop
+    fileMinWidth={100}
+    files={galleryPreviewFiles.slice(0, 3)}
+    maxFiles={6}
+    shouldLoadImages
+/>
+```
+
+#### Deferred Load Preview First
+
+```tsx
+<GalleryEditor
+    allowDragAndDrop={false}
+    fileMinWidth={100}
+    files={galleryPreviewFiles.slice(0, 4)}
+    maxFiles={6}
+    shouldLoadImages={false}
+/>
+```
+
+#### Video And Images
+
+```tsx
+<GalleryEditor
+    allowDragAndDrop={false}
+    fileMinWidth={100}
+    files={[...galleryStoryFiles.slice(0, 3), ...galleryVideoFiles]}
+    maxFiles={6}
+    shouldLoadImages
+/>
+```
+
 ### Props
 
 No prop documentation available.
@@ -154,7 +240,7 @@ No additional exported types documented.
 - Avoid imports from internal paths such as `@chayns-components/gallery/src/...`; always use the public package export.
 ## GalleryViewer
 
-`GalleryViewer` is exported by `@chayns-components/gallery` and should be imported from the public package entry point.
+Der read-only Viewer rendert bekannte Medien im Grid- oder Square-Layout und unterstützt das verzögerte Laden finaler Medien über `shouldLoadImages`.
 
 ### Import
 
@@ -168,7 +254,8 @@ import { GalleryViewer } from '@chayns-components/gallery';
 
 ```tsx
 <GalleryViewer
-    files={galleryStoryFiles}
+    files={galleryStoryFiles.slice(0, 3)}
+    shouldLoadImages
     viewMode={GalleryViewMode.GRID}
 />
 ```
@@ -178,10 +265,21 @@ import { GalleryViewer } from '@chayns-components/gallery';
 ```tsx
 <GalleryViewer
     files={galleryViewerSquareFiles}
+    shouldLoadImages
     viewMode={GalleryViewMode.SQUARE}
 />
 ```
 
+#### Mixed Media
+
+```tsx
+<GalleryViewer
+    files={galleryStoryFiles}
+    shouldLoadImages
+    viewMode={GalleryViewMode.GRID}
+/>
+```
+
 #### Single Item Fallback Ratio
 
 ```tsx
@@ -195,6 +293,27 @@ import { GalleryViewer } from '@chayns-components/gallery';
                 },
             },
         ]}
+    shouldLoadImages
+    viewMode={GalleryViewMode.GRID}
+/>
+```
+
+#### Deferred Load Preview First
+
+```tsx
+<GalleryViewer
+    files={galleryPreviewFiles}
+    shouldLoadImages={false}
+    viewMode={GalleryViewMode.GRID}
+/>
+```
+
+#### Video Focus
+
+```tsx
+<GalleryViewer
+    files={galleryVideoFiles}
+    shouldLoadImages
     viewMode={GalleryViewMode.GRID}
 />
 ```

package/lib/cjs/components/Gallery.js

@@ -21,6 +21,7 @@ const Gallery = /*#__PURE__*/(0, _react.forwardRef)(({
   onAdd,
   onFileCountChange,
   onRemove,
+  shouldLoadImages = true,
   viewMode = _gallery.GalleryViewMode.GRID
 }, ref) => {
   const editorRef = (0, _react.useRef)(null);
@@ -45,9 +46,11 @@ const Gallery = /*#__PURE__*/(0, _react.forwardRef)(({
     maxFiles: maxFiles,
     onAdd: onAdd,
     onFileCountChange: onFileCountChange,
-    onRemove: onRemove
+    onRemove: onRemove,
+    shouldLoadImages: shouldLoadImages
   }) : /*#__PURE__*/_react.default.createElement(_GalleryViewer.default, {
     files: files,
+    shouldLoadImages: shouldLoadImages,
     viewMode: viewMode
   });
 });

package/lib/cjs/components/Gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.js","names":["_react","_interopRequireWildcard","require","_GalleryEditor","_interopRequireDefault","_GalleryViewer","_gallery","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Gallery","forwardRef","allowDragAndDrop","addFileIcon","doubleFileDialogMessage","isEditMode","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","viewMode","GalleryViewMode","GRID","ref","editorRef","useRef","handleClear","useCallback","_editorRef$current","console","warn","current","clear","useImperativeHandle","createElement","displayName","_default","exports"],"sources":["../../../src/components/Gallery.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\nimport GalleryEditor from './gallery-editor/GalleryEditor';\nimport type { GalleryEditorRef } from './gallery-editor/GalleryEditor.types';\nimport GalleryViewer from './gallery-viewer/GalleryViewer';\nimport type { GalleryProps, GalleryRef } from './Gallery.types';\nimport { GalleryViewMode } from '../types/gallery';\n\nconst Gallery = forwardRef<GalleryRef, GalleryProps>(\n    (\n        {\n            allowDragAndDrop = false,\n            addFileIcon = 'fa fa-plus',\n            doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n            isEditMode = false,\n            fileMinWidth = 100,\n            files,\n            maxFiles,\n            onAdd,\n            onFileCountChange,\n            onRemove,\n            viewMode = GalleryViewMode.GRID,\n        },\n        ref,\n    ) => {\n        const editorRef = useRef<GalleryEditorRef>(null);\n\n        const handleClear = useCallback(() => {\n            if (!isEditMode) {\n                console.warn('Gallery.clear() can only be used in edit mode.');\n                return;\n            }\n\n            editorRef.current?.clear();\n        }, [isEditMode]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: handleClear,\n            }),\n            [handleClear],\n        );\n\n        return isEditMode ? (\n            <GalleryEditor\n                ref={editorRef}\n                allowDragAndDrop={allowDragAndDrop}\n                addFileIcon={addFileIcon}\n                doubleFileDialogMessage={doubleFileDialogMessage}\n                fileMinWidth={fileMinWidth}\n                files={files}\n                maxFiles={maxFiles}\n                onAdd={onAdd}\n                onFileCountChange={onFileCountChange}\n                onRemove={onRemove}\n            />\n        ) : (\n            <GalleryViewer files={files} viewMode={viewMode} />\n        );\n    },\n);\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,cAAA,GAAAD,sBAAA,CAAAF,OAAA;AAEA,IAAAI,QAAA,GAAAJ,OAAA;AAAmD,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAEnD,MAAMgB,OAAO,gBAAG,IAAAC,iBAAU,EACtB,CACI;EACIC,gBAAgB,GAAG,KAAK;EACxBC,WAAW,GAAG,YAAY;EAC1BC,uBAAuB,GAAG,mCAAmC;EAC7DC,UAAU,GAAG,KAAK;EAClBC,YAAY,GAAG,GAAG;EAClBC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,iBAAiB;EACjBC,QAAQ;EACRC,QAAQ,GAAGC,wBAAe,CAACC;AAC/B,CAAC,EACDC,GAAG,KACF;EACD,MAAMC,SAAS,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAEhD,MAAMC,WAAW,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAAA,IAAAC,kBAAA;IAClC,IAAI,CAACf,UAAU,EAAE;MACbgB,OAAO,CAACC,IAAI,CAAC,gDAAgD,CAAC;MAC9D;IACJ;IAEA,CAAAF,kBAAA,GAAAJ,SAAS,CAACO,OAAO,cAAAH,kBAAA,eAAjBA,kBAAA,CAAmBI,KAAK,CAAC,CAAC;EAC9B,CAAC,EAAE,CAACnB,UAAU,CAAC,CAAC;EAEhB,IAAAoB,0BAAmB,EACfV,GAAG,EACH,OAAO;IACHS,KAAK,EAAEN;EACX,CAAC,CAAC,EACF,CAACA,WAAW,CAChB,CAAC;EAED,OAAOb,UAAU,gBACb/B,MAAA,CAAAS,OAAA,CAAA2C,aAAA,CAACjD,cAAA,CAAAM,OAAa;IACVgC,GAAG,EAAEC,SAAU;IACfd,gBAAgB,EAAEA,gBAAiB;IACnCC,WAAW,EAAEA,WAAY;IACzBC,uBAAuB,EAAEA,uBAAwB;IACjDE,YAAY,EAAEA,YAAa;IAC3BC,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEA,KAAM;IACbC,iBAAiB,EAAEA,iBAAkB;IACrCC,QAAQ,EAAEA;EAAS,CACtB,CAAC,gBAEFrC,MAAA,CAAAS,OAAA,CAAA2C,aAAA,CAAC/C,cAAA,CAAAI,OAAa;IAACwB,KAAK,EAAEA,KAAM;IAACK,QAAQ,EAAEA;EAAS,CAAE,CACrD;AACL,CACJ,CAAC;AAEDZ,OAAO,CAAC2B,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA9C,OAAA,GAEjBiB,OAAO","ignoreList":[]}
+{"version":3,"file":"Gallery.js","names":["_react","_interopRequireWildcard","require","_GalleryEditor","_interopRequireDefault","_GalleryViewer","_gallery","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Gallery","forwardRef","allowDragAndDrop","addFileIcon","doubleFileDialogMessage","isEditMode","fileMinWidth","files","maxFiles","onAdd","onFileCountChange","onRemove","shouldLoadImages","viewMode","GalleryViewMode","GRID","ref","editorRef","useRef","handleClear","useCallback","_editorRef$current","console","warn","current","clear","useImperativeHandle","createElement","displayName","_default","exports"],"sources":["../../../src/components/Gallery.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\nimport GalleryEditor from './gallery-editor/GalleryEditor';\nimport type { GalleryEditorRef } from './gallery-editor/GalleryEditor.types';\nimport GalleryViewer from './gallery-viewer/GalleryViewer';\nimport type { GalleryProps, GalleryRef } from './Gallery.types';\nimport { GalleryViewMode } from '../types/gallery';\n\nconst Gallery = forwardRef<GalleryRef, GalleryProps>(\n    (\n        {\n            allowDragAndDrop = false,\n            addFileIcon = 'fa fa-plus',\n            doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',\n            isEditMode = false,\n            fileMinWidth = 100,\n            files,\n            maxFiles,\n            onAdd,\n            onFileCountChange,\n            onRemove,\n            shouldLoadImages = true,\n            viewMode = GalleryViewMode.GRID,\n        },\n        ref,\n    ) => {\n        const editorRef = useRef<GalleryEditorRef>(null);\n\n        const handleClear = useCallback(() => {\n            if (!isEditMode) {\n                console.warn('Gallery.clear() can only be used in edit mode.');\n                return;\n            }\n\n            editorRef.current?.clear();\n        }, [isEditMode]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: handleClear,\n            }),\n            [handleClear],\n        );\n\n        return isEditMode ? (\n            <GalleryEditor\n                ref={editorRef}\n                allowDragAndDrop={allowDragAndDrop}\n                addFileIcon={addFileIcon}\n                doubleFileDialogMessage={doubleFileDialogMessage}\n                fileMinWidth={fileMinWidth}\n                files={files}\n                maxFiles={maxFiles}\n                onAdd={onAdd}\n                onFileCountChange={onFileCountChange}\n                onRemove={onRemove}\n                shouldLoadImages={shouldLoadImages}\n            />\n        ) : (\n            <GalleryViewer files={files} shouldLoadImages={shouldLoadImages} viewMode={viewMode} />\n        );\n    },\n);\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/Gallery.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.types.js","names":[],"sources":["../../../src/components/Gallery.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport type { GalleryViewMode } from '../types/gallery';\n\n/**\n * Props for the public Gallery wrapper component.\n */\nexport type GalleryRef = {\n    /**\n     * Clears all locally managed gallery items in edit mode.\n     * @description\n     * When the gallery is rendered in read-only mode, calling this method only emits a console warning.\n     */\n    clear: () => void;\n};\n\nexport interface GalleryProps {\n    /**\n     * Enables drag and drop while the component is used in edit mode.\n     * @description\n     * This prop only affects the editor path. In read-only mode, drag and drop stays disabled regardless of this value.\n     * @default false\n     * @example\n     * <Gallery allowDragAndDrop isEditMode files={files} />\n     * @optional\n     */\n    allowDragAndDrop?: boolean;\n    /**\n     * Defines the dialog message that is shown when a duplicate upload is detected.\n     * @description\n     * The message is used by the editor when a locally added file resolves to an already known uploaded file.\n     * @default 'Diese Datei ist bereits vorhanden'\n     * @example\n     * <Gallery doubleFileDialogMessage=\"This file already exists.\" isEditMode files={files} />\n     * @optional\n     */\n    doubleFileDialogMessage?: string;\n    /**\n     * Defines the minimum width of one tile in edit mode.\n     * @description\n     * The editor uses this value to build its responsive grid. It has no effect in the read-only viewer.\n     * @default 100\n     * @example\n     * <Gallery fileMinWidth={140} isEditMode files={files} />\n     * @optional\n     */\n    fileMinWidth?: number;\n    /**\n     * Defines the icon that is shown in the add-file tile in edit mode.\n     * @description\n     * The icon is forwarded to the editor and replaces the default plus icon on the add-tile.\n     * @default 'fa fa-plus'\n     * @example\n     * <Gallery addFileIcon=\"fa fa-image-circle-plus\" isEditMode files={files} />\n     * @optional\n     */\n    addFileIcon?: string;\n    /**\n     * Provides already known media items that should be rendered by the gallery.\n     * @description\n     * In read-only mode, these files are rendered directly from props. In edit mode, they are used as the external baseline\n     * for already uploaded media while local uploads are managed internally.\n     * @example\n     * <Gallery files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Enables the editable upload mode instead of the read-only viewer mode.\n     * @description\n     * When set to `true`, the public wrapper renders `GalleryEditor`. Otherwise it renders `GalleryViewer`.\n     * @default false\n     * @example\n     * <Gallery isEditMode files={files} />\n     * @optional\n     */\n    isEditMode?: boolean;\n    /**\n     * Limits how many files can be managed in edit mode.\n     * @description\n     * Once the limit is reached, the editor hides the add-tile and does not accept more files.\n     * This prop has no effect in read-only mode.\n     * @example\n     * <Gallery isEditMode maxFiles={6} files={files} />\n     * @optional\n     */\n    maxFiles?: number;\n    /**\n     * Is called after a file has been uploaded successfully in edit mode.\n     * @description\n     * The callback receives the uploaded file representation that should be merged into the consuming state.\n     * It is never called by the read-only viewer.\n     * @example\n     * <Gallery isEditMode onAdd={(file) => setFiles((prev) => [...prev, file])} />\n     * @optional\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Is called whenever the internal item count changes in edit mode.\n     * @description\n     * This includes already uploaded files and locally pending uploads that are currently managed by the editor.\n     * It is useful when surrounding UI needs to know whether uploads are still in progress.\n     * @example\n     * <Gallery isEditMode onFileCountChange={(count) => console.log(count)} />\n     * @optional\n     */\n    onFileCountChange?: (fileCount: number) => void;\n    /**\n     * Is called after an uploaded file has been removed in edit mode.\n     * @description\n     * The callback receives the removed uploaded file so the consuming state can remove it as well.\n     * It is never called by the read-only viewer.\n     * @example\n     * <Gallery isEditMode onRemove={(file) => removeFile(file.id)} />\n     * @optional\n     */\n    onRemove?: (file: FileItem) => void;\n    /**\n     * Defines how known media items are arranged in read-only mode.\n     * @description\n     * This prop only affects the viewer path. The editor always uses its dedicated editable grid layout.\n     * @default GalleryViewMode.GRID\n     * @example\n     * <Gallery files={files} viewMode={GalleryViewMode.SQUARE} />\n     * @optional\n     */\n    viewMode?: GalleryViewMode;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"Gallery.types.js","names":[],"sources":["../../../src/components/Gallery.types.ts"],"sourcesContent":["import type { FileItem } from '@chayns-components/core';\nimport type { GalleryViewMode } from '../types/gallery';\n\n/**\n * Props for the public Gallery wrapper component.\n */\nexport type GalleryRef = {\n    /**\n     * Clears all locally managed gallery items in edit mode.\n     * @description\n     * When the gallery is rendered in read-only mode, calling this method only emits a console warning.\n     */\n    clear: () => void;\n};\n\nexport interface GalleryProps {\n    /**\n     * Enables drag and drop while the component is used in edit mode.\n     * @description\n     * This prop only affects the editor path. In read-only mode, drag and drop stays disabled regardless of this value.\n     * @default false\n     * @example\n     * <Gallery allowDragAndDrop isEditMode files={files} />\n     * @optional\n     */\n    allowDragAndDrop?: boolean;\n    /**\n     * Defines the dialog message that is shown when a duplicate upload is detected.\n     * @description\n     * The message is used by the editor when a locally added file resolves to an already known uploaded file.\n     * @default 'Diese Datei ist bereits vorhanden'\n     * @example\n     * <Gallery doubleFileDialogMessage=\"This file already exists.\" isEditMode files={files} />\n     * @optional\n     */\n    doubleFileDialogMessage?: string;\n    /**\n     * Defines the minimum width of one tile in edit mode.\n     * @description\n     * The editor uses this value to build its responsive grid. It has no effect in the read-only viewer.\n     * @default 100\n     * @example\n     * <Gallery fileMinWidth={140} isEditMode files={files} />\n     * @optional\n     */\n    fileMinWidth?: number;\n    /**\n     * Defines the icon that is shown in the add-file tile in edit mode.\n     * @description\n     * The icon is forwarded to the editor and replaces the default plus icon on the add-tile.\n     * @default 'fa fa-plus'\n     * @example\n     * <Gallery addFileIcon=\"fa fa-image-circle-plus\" isEditMode files={files} />\n     * @optional\n     */\n    addFileIcon?: string;\n    /**\n     * Provides already known media items that should be rendered by the gallery.\n     * @description\n     * In read-only mode, these files are rendered directly from props. In edit mode, they are used as the external baseline\n     * for already uploaded media while local uploads are managed internally.\n     * @example\n     * <Gallery files={files} />\n     * @optional\n     */\n    files?: FileItem[];\n    /**\n     * Enables the editable upload mode instead of the read-only viewer mode.\n     * @description\n     * When set to `true`, the public wrapper renders `GalleryEditor`. Otherwise it renders `GalleryViewer`.\n     * @default false\n     * @example\n     * <Gallery isEditMode files={files} />\n     * @optional\n     */\n    isEditMode?: boolean;\n    /**\n     * Limits how many files can be managed in edit mode.\n     * @description\n     * Once the limit is reached, the editor hides the add-tile and does not accept more files.\n     * This prop has no effect in read-only mode.\n     * @example\n     * <Gallery isEditMode maxFiles={6} files={files} />\n     * @optional\n     */\n    maxFiles?: number;\n    /**\n     * Controls when the gallery is allowed to load the final media assets.\n     * @description\n     * When set to `true`, the gallery loads the actual images immediately as before.\n     * When set to `false`, the gallery keeps rendering previews first and delays the final media load until this flag becomes `true`.\n     * This setting applies to the whole gallery wrapper and is intended for external loading control such as virtualized message lists.\n     * @default true\n     * @example\n     * <Gallery files={files} shouldLoadImages={false} />\n     * @optional\n     */\n    shouldLoadImages?: boolean;\n    /**\n     * Is called after a file has been uploaded successfully in edit mode.\n     * @description\n     * The callback receives the uploaded file representation that should be merged into the consuming state.\n     * It is never called by the read-only viewer.\n     * @example\n     * <Gallery isEditMode onAdd={(file) => setFiles((prev) => [...prev, file])} />\n     * @optional\n     */\n    onAdd?: (file: FileItem) => void;\n    /**\n     * Is called whenever the internal item count changes in edit mode.\n     * @description\n     * This includes already uploaded files and locally pending uploads that are currently managed by the editor.\n     * It is useful when surrounding UI needs to know whether uploads are still in progress.\n     * @example\n     * <Gallery isEditMode onFileCountChange={(count) => console.log(count)} />\n     * @optional\n     */\n    onFileCountChange?: (fileCount: number) => void;\n    /**\n     * Is called after an uploaded file has been removed in edit mode.\n     * @description\n     * The callback receives the removed uploaded file so the consuming state can remove it as well.\n     * It is never called by the read-only viewer.\n     * @example\n     * <Gallery isEditMode onRemove={(file) => removeFile(file.id)} />\n     * @optional\n     */\n    onRemove?: (file: FileItem) => void;\n    /**\n     * Defines how known media items are arranged in read-only mode.\n     * @description\n     * This prop only affects the viewer path. The editor always uses its dedicated editable grid layout.\n     * @default GalleryViewMode.GRID\n     * @example\n     * <Gallery files={files} viewMode={GalleryViewMode.SQUARE} />\n     * @optional\n     */\n    viewMode?: GalleryViewMode;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/components/gallery-editor/GalleryEditor.constants.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GALLERY_EDITOR_PREVIEW_FADE_DURATION_S = exports.GALLERY_EDITOR_MEDIA_FADE_DURATION_S = exports.GALLERY_EDITOR_ITEM_FADE_DURATION_S = exports.GALLERY_EDITOR_GRID_GAP_PX = exports.GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX = void 0;
+const GALLERY_EDITOR_GRID_GAP_PX = exports.GALLERY_EDITOR_GRID_GAP_PX = 6;
+const GALLERY_EDITOR_ITEM_FADE_DURATION_S = exports.GALLERY_EDITOR_ITEM_FADE_DURATION_S = 0.18;
+const GALLERY_EDITOR_PREVIEW_FADE_DURATION_S = exports.GALLERY_EDITOR_PREVIEW_FADE_DURATION_S = 0.16;
+const GALLERY_EDITOR_MEDIA_FADE_DURATION_S = exports.GALLERY_EDITOR_MEDIA_FADE_DURATION_S = 0.2;
+const GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX = exports.GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX = 3;
+//# sourceMappingURL=GalleryEditor.constants.js.map

package/lib/cjs/components/gallery-editor/GalleryEditor.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryEditor.constants.js","names":["GALLERY_EDITOR_GRID_GAP_PX","exports","GALLERY_EDITOR_ITEM_FADE_DURATION_S","GALLERY_EDITOR_PREVIEW_FADE_DURATION_S","GALLERY_EDITOR_MEDIA_FADE_DURATION_S","GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX"],"sources":["../../../../src/components/gallery-editor/GalleryEditor.constants.ts"],"sourcesContent":["export const GALLERY_EDITOR_GRID_GAP_PX = 6;\nexport const GALLERY_EDITOR_ITEM_FADE_DURATION_S = 0.18;\nexport const GALLERY_EDITOR_PREVIEW_FADE_DURATION_S = 0.16;\nexport const GALLERY_EDITOR_MEDIA_FADE_DURATION_S = 0.2;\nexport const GALLERY_EDITOR_DELETE_BUTTON_Z_INDEX = 3;\n"],"mappings":";;;;;;AAAO,MAAMA,0BAA0B,GAAAC,OAAA,CAAAD,0BAAA,GAAG,CAAC;AACpC,MAAME,mCAAmC,GAAAD,OAAA,CAAAC,mCAAA,GAAG,IAAI;AAChD,MAAMC,sCAAsC,GAAAF,OAAA,CAAAE,sCAAA,GAAG,IAAI;AACnD,MAAMC,oCAAoC,GAAAH,OAAA,CAAAG,oCAAA,GAAG,GAAG;AAChD,MAAMC,oCAAoC,GAAAJ,OAAA,CAAAI,oCAAA,GAAG,CAAC","ignoreList":[]}

package/lib/cjs/components/gallery-editor/GalleryEditor.js

@@ -4,18 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _core = require("@chayns-components/core");
-var _chaynsApi = require("chayns-api");
-var _react = _interopRequireWildcard(require("react"));
-var _uuid = require("uuid");
-var _file = require("../../utils/file");
-var _gallery = require("../../utils/gallery");
+var _react = require("motion/react");
+var _react2 = _interopRequireWildcard(require("react"));
 var _AddFile = _interopRequireDefault(require("./add-file/AddFile"));
-var _GalleryEditorItem = _interopRequireDefault(require("./gallery-editor-item/GalleryEditorItem"));
 var _GalleryEditor = require("./GalleryEditor.styles");
+var _GalleryEditorItem = _interopRequireDefault(require("./gallery-editor-item/GalleryEditorItem"));
+var _GalleryEditor2 = require("./GalleryEditor.constants");
+var _useGalleryEditorState = _interopRequireDefault(require("./useGalleryEditorState"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const GalleryEditor = /*#__PURE__*/(0, _react.forwardRef)(({
+const GalleryEditor = /*#__PURE__*/(0, _react2.forwardRef)(({
   allowDragAndDrop = false,
   addFileIcon = 'fa fa-plus',
   doubleFileDialogMessage = 'Diese Datei ist bereits vorhanden',
@@ -24,182 +22,46 @@ const GalleryEditor = /*#__PURE__*/(0, _react.forwardRef)(({
   maxFiles,
   onAdd,
   onFileCountChange,
-  onRemove
+  onRemove,
+  shouldLoadImages = true
 }, ref) => {
-  const [fileItems, setFileItems] = (0, _react.useState)(() => (0, _gallery.mapFilesToInternalItems)(files));
-  const handleClear = (0, _react.useCallback)(() => {
-    setFileItems([]);
-  }, []);
-  const handlePreviewUrlCallback = (0, _react.useCallback)((previewUrl, file) => {
-    setFileItems(prevState => prevState.map(prevFile => {
-      if (prevFile.id === file.id) {
-        return {
-          ...prevFile,
-          previewUrl
-        };
-      }
-      return prevFile;
-    }));
-  }, []);
-  const callDuplicateFileDialog = (0, _react.useCallback)(() => {
-    (0, _chaynsApi.createDialog)({
-      type: _chaynsApi.DialogType.ALERT,
-      text: doubleFileDialogMessage
-    });
-  }, [doubleFileDialogMessage]);
-  const handleUploadFileCallback = (0, _react.useCallback)((file, uploadedFile) => {
-    setFileItems(prevState => {
-      const updatedState = prevState.map(prevFile => {
-        var _prevFile$uploadedFil;
-        if (((_prevFile$uploadedFil = prevFile.uploadedFile) === null || _prevFile$uploadedFil === void 0 ? void 0 : _prevFile$uploadedFil.url) === uploadedFile.url) {
-          callDuplicateFileDialog();
-          return undefined;
-        }
-        if (prevFile.id === file.id) {
-          if (typeof onAdd === 'function') {
-            const prevElement = prevState.find(({
-              uploadedFile: nextUploadedFile
-            }) => (nextUploadedFile === null || nextUploadedFile === void 0 ? void 0 : nextUploadedFile.url) === (uploadedFile === null || uploadedFile === void 0 ? void 0 : uploadedFile.url));
-            if (!prevElement) {
-              onAdd({
-                file: uploadedFile,
-                id: file.id
-              });
-            }
-          }
-          return {
-            ...prevFile,
-            uploadedFile,
-            state: 'uploaded'
-          };
-        }
-        return prevFile;
-      });
-      return updatedState.filter(Boolean);
-    });
-  }, [callDuplicateFileDialog, onAdd]);
-  const handleAddFiles = (0, _react.useCallback)(filesToAdd => {
-    const newFileItems = [];
-    filesToAdd.forEach(file => {
-      if (file && !(0, _file.filterDuplicateFile)({
-        files: fileItems,
-        newFile: file
-      })) {
-        newFileItems.push({
-          id: (0, _uuid.v4)(),
-          file,
-          state: 'none'
-        });
-      }
-    });
-    let limitedFileItems = newFileItems;
-    if (maxFiles) {
-      limitedFileItems = newFileItems.slice(0, Math.max(maxFiles - fileItems.length, 0));
-    }
-    setFileItems(prevState => [...prevState, ...limitedFileItems]);
-  }, [fileItems, maxFiles]);
-  const handleDeleteFile = (0, _react.useCallback)(id => {
-    let fileToDelete;
-    const filteredFiles = fileItems.filter(file => {
-      if (file.id === id && file.uploadedFile) {
-        fileToDelete = {
-          file: file.uploadedFile,
-          id
-        };
-      }
-      return file.id !== id;
-    });
-    setFileItems(filteredFiles);
-    if (!fileToDelete || typeof onRemove !== 'function') {
-      return;
-    }
-    onRemove(fileToDelete);
-  }, [fileItems, onRemove]);
-  const handleDrop = (0, _react.useCallback)(event => {
-    if (!allowDragAndDrop) {
-      return;
-    }
-    event.preventDefault();
-    handleAddFiles(Array.from(event.dataTransfer.files));
-  }, [allowDragAndDrop, handleAddFiles]);
-  const handleOpenFiles = (0, _react.useCallback)(file => {
-    (0, _gallery.openFiles)(fileItems, file);
-  }, [fileItems]);
-  (0, _react.useImperativeHandle)(ref, () => ({
+  const {
+    fileItems,
+    handleAddFiles,
+    handleClear,
+    handleDeleteFile,
+    handleDrop,
+    handleOpenFiles
+  } = (0, _useGalleryEditorState.default)({
+    allowDragAndDrop,
+    doubleFileDialogMessage,
+    files,
+    maxFiles,
+    onAdd,
+    onFileCountChange,
+    onRemove
+  });
+  (0, _react2.useImperativeHandle)(ref, () => ({
     clear: handleClear
   }), [handleClear]);
-  (0, _react.useEffect)(() => {
-    if (typeof onFileCountChange === 'function') {
-      onFileCountChange(fileItems.length);
-    }
-  }, [fileItems.length, onFileCountChange]);
-  (0, _react.useEffect)(() => {
-    const filesToGeneratePreview = fileItems.filter(file => file.file && !file.previewUrl && (file.state === 'none' || !file.state));
-    const filesToUpload = fileItems.filter(file => file.file && !file.uploadedFile && file.state !== 'uploading');
-    filesToGeneratePreview.forEach(file => {
-      if (!file.file) {
-        return;
-      }
-      if (file.file.type.includes('video/')) {
-        (0, _file.generateVideoThumbnail)({
-          file: file.file,
-          callback: previewUrl => handlePreviewUrlCallback(previewUrl, file)
-        });
-        return;
-      }
-      (0, _file.generatePreviewUrl)({
-        file: file.file,
-        callback: previewUrl => handlePreviewUrlCallback(previewUrl, file)
-      });
-    });
-    filesToUpload.forEach(file => {
-      setFileItems(prevState => prevState.map(prevFile => {
-        if (prevFile.id === file.id) {
-          return {
-            ...prevFile,
-            state: 'uploading'
-          };
-        }
-        return prevFile;
-      }));
-      void (0, _core.uploadFile)({
-        fileToUpload: file,
-        callback: uploadedFile => handleUploadFileCallback(file, uploadedFile)
-      });
-    });
-  }, [fileItems, handlePreviewUrlCallback, handleUploadFileCallback]);
-  (0, _react.useEffect)(() => {
-    const externalFileItems = (0, _gallery.mapFilesToInternalItems)(files);
-    setFileItems(prevState => {
-      // Keep local-only items such as pending uploads while refreshing known external media.
-      const updatedItems = prevState.map(prevItem => {
-        const matchingItem = externalFileItems.find(item => item.uploadedFile && item.uploadedFile.url === (prevItem.uploadedFile && prevItem.uploadedFile.url));
-        return matchingItem || prevItem;
-      });
-      return updatedItems.concat(externalFileItems.filter(newItem => !prevState.some(prevItem => prevItem.uploadedFile && newItem.uploadedFile && prevItem.uploadedFile.url === newItem.uploadedFile.url)));
-    });
-  }, [files]);
-  const galleryItems = (0, _react.useMemo)(() => {
-    const items = fileItems.map(file => /*#__PURE__*/_react.default.createElement(_GalleryEditorItem.default, {
-      key: file.id,
-      fileItem: file,
-      onClick: handleOpenFiles,
-      handleDeleteFile: handleDeleteFile
-    }));
-    if (maxFiles && maxFiles <= fileItems.length) {
-      return items;
-    }
-    return [...items, /*#__PURE__*/_react.default.createElement(_AddFile.default, {
-      key: "add_file",
-      addFileIcon: addFileIcon,
-      onAdd: handleAddFiles
-    })];
-  }, [addFileIcon, fileItems, handleAddFiles, handleDeleteFile, handleOpenFiles, maxFiles]);
-  return /*#__PURE__*/_react.default.createElement(_GalleryEditor.StyledGalleryEditor, null, /*#__PURE__*/_react.default.createElement(_GalleryEditor.StyledGalleryEditorGrid, {
+  const shouldShowAddFileTile = !maxFiles || maxFiles > fileItems.length;
+  return /*#__PURE__*/_react2.default.createElement(_GalleryEditor.StyledGalleryEditor, null, /*#__PURE__*/_react2.default.createElement(_GalleryEditor.StyledGalleryEditorGrid, {
     $fileMinWidth: fileMinWidth,
+    $gap: _GalleryEditor2.GALLERY_EDITOR_GRID_GAP_PX,
     onDragOver: event => event.preventDefault(),
     onDrop: event => void handleDrop(event)
-  }, galleryItems));
+  }, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
+    initial: false
+  }, fileItems.map(file => /*#__PURE__*/_react2.default.createElement(_GalleryEditorItem.default, {
+    key: file.id,
+    fileItem: file,
+    handleDeleteFile: handleDeleteFile,
+    onClick: handleOpenFiles,
+    shouldLoadImages: shouldLoadImages
+  }))), shouldShowAddFileTile && /*#__PURE__*/_react2.default.createElement(_AddFile.default, {
+    addFileIcon: addFileIcon,
+    onAdd: handleAddFiles
+  })));
 });
 GalleryEditor.displayName = 'GalleryEditor';
 var _default = exports.default = GalleryEditor;