@chayns-components/gallery 5.0.55 → 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 +2 -2
- 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
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import type { FileItem } from '@chayns-components/core';
|
|
2
|
+
/**
|
|
3
|
+
* Props for the editable gallery component.
|
|
4
|
+
*/
|
|
5
|
+
export interface GalleryEditorProps {
|
|
6
|
+
/**
|
|
7
|
+
* Enables drag and drop file selection inside the editor grid.
|
|
8
|
+
* @description
|
|
9
|
+
* When enabled, users can drop local image or video files onto the editor grid to start the upload flow.
|
|
10
|
+
* @default false
|
|
11
|
+
* @example
|
|
12
|
+
* <GalleryEditor allowDragAndDrop files={files} />
|
|
13
|
+
* @optional
|
|
14
|
+
*/
|
|
15
|
+
allowDragAndDrop?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Defines the dialog message that is shown when a duplicate upload is detected.
|
|
18
|
+
* @description
|
|
19
|
+
* The message is shown when a newly uploaded file resolves to a URL that already exists in the editor state.
|
|
20
|
+
* @default 'Diese Datei ist bereits vorhanden'
|
|
21
|
+
* @example
|
|
22
|
+
* <GalleryEditor doubleFileDialogMessage="This file already exists." files={files} />
|
|
23
|
+
* @optional
|
|
24
|
+
*/
|
|
25
|
+
doubleFileDialogMessage?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Defines the minimum width of one tile in the editor grid.
|
|
28
|
+
* @description
|
|
29
|
+
* The editor uses this value to size the responsive grid columns that hold uploaded items and the add-tile.
|
|
30
|
+
* @default 100
|
|
31
|
+
* @example
|
|
32
|
+
* <GalleryEditor fileMinWidth={140} files={files} />
|
|
33
|
+
* @optional
|
|
34
|
+
*/
|
|
35
|
+
fileMinWidth?: number;
|
|
36
|
+
/**
|
|
37
|
+
* Provides already uploaded media items that should be merged into the editor state.
|
|
38
|
+
* @description
|
|
39
|
+
* These files represent the externally known uploaded baseline. The editor may additionally hold local pending uploads.
|
|
40
|
+
* @example
|
|
41
|
+
* <GalleryEditor files={files} />
|
|
42
|
+
* @optional
|
|
43
|
+
*/
|
|
44
|
+
files?: FileItem[];
|
|
45
|
+
/**
|
|
46
|
+
* Limits how many files can be managed by the editor.
|
|
47
|
+
* @description
|
|
48
|
+
* After the limit is reached, the add-tile is hidden and additional file selection is ignored.
|
|
49
|
+
* @example
|
|
50
|
+
* <GalleryEditor files={files} maxFiles={6} />
|
|
51
|
+
* @optional
|
|
52
|
+
*/
|
|
53
|
+
maxFiles?: number;
|
|
54
|
+
/**
|
|
55
|
+
* Is called after a file has been uploaded successfully.
|
|
56
|
+
* @description
|
|
57
|
+
* The callback receives the uploaded file representation so the consuming state can persist it externally.
|
|
58
|
+
* @example
|
|
59
|
+
* <GalleryEditor onAdd={(file) => setFiles((prev) => [...prev, file])} />
|
|
60
|
+
* @optional
|
|
61
|
+
*/
|
|
62
|
+
onAdd?: (file: FileItem) => void;
|
|
63
|
+
/**
|
|
64
|
+
* Is called whenever the internal item count changes, including local pending uploads.
|
|
65
|
+
* @description
|
|
66
|
+
* Use this callback when surrounding UI needs to react to the number of currently managed items.
|
|
67
|
+
* @example
|
|
68
|
+
* <GalleryEditor onFileCountChange={(count) => console.log(count)} />
|
|
69
|
+
* @optional
|
|
70
|
+
*/
|
|
71
|
+
onFileCountChange?: (fileCount: number) => void;
|
|
72
|
+
/**
|
|
73
|
+
* Is called after an uploaded file has been removed.
|
|
74
|
+
* @description
|
|
75
|
+
* The callback receives the removed uploaded file so the consuming state can remove it from its controlled `files` array.
|
|
76
|
+
* @example
|
|
77
|
+
* <GalleryEditor onRemove={(file) => removeFile(file.id)} />
|
|
78
|
+
* @optional
|
|
79
|
+
*/
|
|
80
|
+
onRemove?: (file: FileItem) => void;
|
|
81
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Props for the add-file tile inside the gallery editor.
|
|
3
|
+
*/
|
|
4
|
+
export interface AddFileProps {
|
|
5
|
+
/**
|
|
6
|
+
* Is called with the selected local files.
|
|
7
|
+
* @description
|
|
8
|
+
* The editor add-tile uses this callback after the file picker resolves with the selected local image or video files.
|
|
9
|
+
* @example
|
|
10
|
+
* <AddFile onAdd={(files) => console.log(files)} />
|
|
11
|
+
*/
|
|
12
|
+
onAdd: (files: File[]) => void;
|
|
13
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const StyledGalleryEditorItem: 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 StyledGalleryEditorItemDeleteButton: 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;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import type { InternalFileItem } from '@chayns-components/core';
|
|
2
|
+
/**
|
|
3
|
+
* Props for a single editable gallery tile.
|
|
4
|
+
*/
|
|
5
|
+
export interface GalleryEditorItemProps {
|
|
6
|
+
/**
|
|
7
|
+
* Provides the media item that should be rendered inside the tile.
|
|
8
|
+
* @description
|
|
9
|
+
* The item may represent a pending local upload or an already uploaded media file managed by the editor.
|
|
10
|
+
* @example
|
|
11
|
+
* <GalleryEditorItem fileItem={fileItem} handleDeleteFile={handleDeleteFile} onClick={handleOpen} />
|
|
12
|
+
*/
|
|
13
|
+
fileItem: InternalFileItem;
|
|
14
|
+
/**
|
|
15
|
+
* Is called when the delete button is clicked in edit mode.
|
|
16
|
+
* @description
|
|
17
|
+
* The callback receives the internal item identifier so the editor can remove the item from its local state.
|
|
18
|
+
* @example
|
|
19
|
+
* <GalleryEditorItem handleDeleteFile={(id) => console.log(id)} fileItem={fileItem} onClick={handleOpen} />
|
|
20
|
+
*/
|
|
21
|
+
handleDeleteFile: (id?: string) => void;
|
|
22
|
+
/**
|
|
23
|
+
* Defines the aspect ratio that should be reserved for the rendered media.
|
|
24
|
+
* @description
|
|
25
|
+
* Use this when the editor item should reserve a fixed tile ratio for uploaded previews.
|
|
26
|
+
* @default 1
|
|
27
|
+
* @example
|
|
28
|
+
* <GalleryEditorItem fileItem={fileItem} handleDeleteFile={handleDeleteFile} onClick={handleOpen} ratio={1.5} />
|
|
29
|
+
* @optional
|
|
30
|
+
*/
|
|
31
|
+
ratio?: number;
|
|
32
|
+
/**
|
|
33
|
+
* Is called when the tile is clicked.
|
|
34
|
+
* @description
|
|
35
|
+
* The editor uses this callback to open the currently selected media within the slideshow flow.
|
|
36
|
+
* @example
|
|
37
|
+
* <GalleryEditorItem fileItem={fileItem} handleDeleteFile={handleDeleteFile} onClick={handleOpen} />
|
|
38
|
+
*/
|
|
39
|
+
onClick: (file: InternalFileItem) => void;
|
|
40
|
+
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare const StyledMotionGalleryEditorMediaItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
|
|
2
|
+
ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
3
|
+
}, never>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { InternalFileItem } from '@chayns-components/core';
|
|
2
|
+
/**
|
|
3
|
+
* Props for a rendered uploaded media item.
|
|
4
|
+
*/
|
|
5
|
+
export interface GalleryEditorMediaItemProps {
|
|
6
|
+
/**
|
|
7
|
+
* Provides the uploaded media item that should be rendered.
|
|
8
|
+
* @description
|
|
9
|
+
* This item is expected to contain an `uploadedFile` because pending uploads are rendered by the preview component instead.
|
|
10
|
+
* @example
|
|
11
|
+
* <GalleryEditorMediaItem fileItem={fileItem} onClick={handleOpen} ratio={1} />
|
|
12
|
+
*/
|
|
13
|
+
fileItem: InternalFileItem;
|
|
14
|
+
/**
|
|
15
|
+
* Is called when the media tile is selected.
|
|
16
|
+
* @description
|
|
17
|
+
* The editor uses this callback to open the uploaded media in the slideshow flow.
|
|
18
|
+
* @example
|
|
19
|
+
* <GalleryEditorMediaItem fileItem={fileItem} openSelectedFile={handleOpen} ratio={1} />
|
|
20
|
+
*/
|
|
21
|
+
openSelectedFile: (file: InternalFileItem) => void;
|
|
22
|
+
/**
|
|
23
|
+
* Defines the aspect ratio that should be reserved for the media.
|
|
24
|
+
* @description
|
|
25
|
+
* The media tile keeps this ratio reserved so the editor grid remains visually stable.
|
|
26
|
+
* @example
|
|
27
|
+
* <GalleryEditorMediaItem fileItem={fileItem} openSelectedFile={handleOpen} ratio={1.5} />
|
|
28
|
+
*/
|
|
29
|
+
ratio: number;
|
|
30
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export declare const StyledMotionGalleryEditorPreviewItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
|
|
2
|
+
ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
3
|
+
}, never>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
|
|
4
|
+
export declare const StyledGalleryEditorPreviewItemImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
5
|
+
$ratio: number;
|
|
6
|
+
}>> & string;
|
|
7
|
+
export declare const StyledGalleryEditorPreviewItemImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
|
|
8
|
+
theme: import("@chayns-components/core").Theme;
|
|
9
|
+
}>> & string;
|
|
10
|
+
export declare const StyledGalleryEditorPreviewItemLoadingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { InternalFileItem } from '@chayns-components/core';
|
|
2
|
+
/**
|
|
3
|
+
* Props for a preview tile while a file is uploading.
|
|
4
|
+
*/
|
|
5
|
+
export interface GalleryEditorPreviewItemProps {
|
|
6
|
+
/**
|
|
7
|
+
* Provides the internal file item that contains the preview URL.
|
|
8
|
+
* @description
|
|
9
|
+
* This item is expected to describe a local upload that already has a generated preview image.
|
|
10
|
+
* @example
|
|
11
|
+
* <GalleryEditorPreviewItem fileItem={fileItem} ratio={1} />
|
|
12
|
+
*/
|
|
13
|
+
fileItem: InternalFileItem;
|
|
14
|
+
/**
|
|
15
|
+
* Defines the aspect ratio that should be reserved for the preview.
|
|
16
|
+
* @description
|
|
17
|
+
* The preview keeps this ratio reserved while the upload is still in progress.
|
|
18
|
+
* @example
|
|
19
|
+
* <GalleryEditorPreviewItem fileItem={fileItem} ratio={1.5} />
|
|
20
|
+
*/
|
|
21
|
+
ratio: number;
|
|
22
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { GalleryViewMode } from '../../types/gallery';
|
|
2
|
+
export declare const StyledGalleryViewer: 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 StyledGalleryViewerItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
4
|
+
$itemCount: number;
|
|
5
|
+
$ratio: number;
|
|
6
|
+
$viewMode: GalleryViewMode;
|
|
7
|
+
}>> & string;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { FileItem } from '@chayns-components/core';
|
|
2
|
+
import type { GalleryViewMode } from '../../types/gallery';
|
|
3
|
+
/**
|
|
4
|
+
* Props for the prop-driven read-only gallery viewer.
|
|
5
|
+
*/
|
|
6
|
+
export interface GalleryViewerProps {
|
|
7
|
+
/**
|
|
8
|
+
* Provides the already known media items that should be rendered without local upload state.
|
|
9
|
+
* @description
|
|
10
|
+
* The viewer renders these files directly from props and does not mirror them into local component state.
|
|
11
|
+
* @example
|
|
12
|
+
* <GalleryViewer files={files} />
|
|
13
|
+
* @optional
|
|
14
|
+
*/
|
|
15
|
+
files?: FileItem[];
|
|
16
|
+
/**
|
|
17
|
+
* Defines how the media tiles are arranged in read-only mode.
|
|
18
|
+
* @description
|
|
19
|
+
* Use this prop to switch between the supported viewer layouts for known media.
|
|
20
|
+
* @default GalleryViewMode.GRID
|
|
21
|
+
* @example
|
|
22
|
+
* <GalleryViewer files={files} viewMode={GalleryViewMode.SQUARE} />
|
|
23
|
+
* @optional
|
|
24
|
+
*/
|
|
25
|
+
viewMode?: GalleryViewMode;
|
|
26
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export declare const StyledGalleryViewerItem: 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 StyledGalleryViewerMoreItemsIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import type { FileItem } from '@chayns-components/core';
|
|
2
|
+
/**
|
|
3
|
+
* Props for a dedicated read-only gallery tile.
|
|
4
|
+
*/
|
|
5
|
+
export interface GalleryViewerItemProps {
|
|
6
|
+
/**
|
|
7
|
+
* Provides the uploaded media that should be rendered.
|
|
8
|
+
* @description
|
|
9
|
+
* The viewer item renders only already known media and never deals with upload-specific transient state.
|
|
10
|
+
* @example
|
|
11
|
+
* <GalleryViewerItem fileItem={file} onClick={handleOpen} />
|
|
12
|
+
*/
|
|
13
|
+
fileItem: FileItem;
|
|
14
|
+
/**
|
|
15
|
+
* Defines the aspect ratio that should be reserved for the tile.
|
|
16
|
+
* @description
|
|
17
|
+
* Use this prop to reserve a deterministic tile height for stable read-only rendering.
|
|
18
|
+
* @default 1
|
|
19
|
+
* @example
|
|
20
|
+
* <GalleryViewerItem fileItem={file} onClick={handleOpen} ratio={1.5} />
|
|
21
|
+
* @optional
|
|
22
|
+
*/
|
|
23
|
+
ratio?: number;
|
|
24
|
+
/**
|
|
25
|
+
* Provides the total item count when the last visible tile should show a remaining-items overlay.
|
|
26
|
+
* @description
|
|
27
|
+
* When this prop is set on the last visible viewer tile, the tile displays the `+n` overlay for hidden items.
|
|
28
|
+
* @example
|
|
29
|
+
* <GalleryViewerItem fileItem={file} onClick={handleOpen} remainingItemsLength={5} />
|
|
30
|
+
* @optional
|
|
31
|
+
*/
|
|
32
|
+
remainingItemsLength?: number;
|
|
33
|
+
/**
|
|
34
|
+
* Is called when the tile is selected.
|
|
35
|
+
* @description
|
|
36
|
+
* The viewer uses this callback to open the selected file inside the slideshow flow.
|
|
37
|
+
* @example
|
|
38
|
+
* <GalleryViewerItem fileItem={file} onClick={handleOpen} />
|
|
39
|
+
*/
|
|
40
|
+
onClick: (file: FileItem) => void;
|
|
41
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare const StyledMediaContentVideoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
2
|
+
$ratio: number;
|
|
3
|
+
}>> & string;
|
|
4
|
+
export declare const StyledMediaContentImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
5
|
+
$ratio: number;
|
|
6
|
+
}>> & string;
|
|
7
|
+
export declare const StyledMediaContentImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
|
|
8
|
+
theme: import("@chayns-components/core").Theme;
|
|
9
|
+
}>> & string;
|
|
10
|
+
export declare const StyledMediaContentVideo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, {
|
|
11
|
+
theme: import("@chayns-components/core").Theme;
|
|
12
|
+
}>> & string;
|
|
13
|
+
export declare const StyledMediaContentPlayIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import type { FileItem } from '@chayns-components/core';
|
|
2
|
+
/**
|
|
3
|
+
* Props for the low-level uploaded media renderer shared by viewer and editor.
|
|
4
|
+
*/
|
|
5
|
+
export interface MediaContentProps {
|
|
6
|
+
/**
|
|
7
|
+
* Provides the uploaded media item that should be rendered.
|
|
8
|
+
* @description
|
|
9
|
+
* This low-level renderer accepts already known image or video data and does not handle upload-specific state.
|
|
10
|
+
* @example
|
|
11
|
+
* <MediaContent file={file.file} onClick={handleOpen} ratio={1} />
|
|
12
|
+
*/
|
|
13
|
+
file: FileItem['file'];
|
|
14
|
+
/**
|
|
15
|
+
* Defines the aspect ratio that should be reserved for the media.
|
|
16
|
+
* @description
|
|
17
|
+
* The surrounding tile uses this value to reserve a deterministic media height before the asset finishes loading.
|
|
18
|
+
* @example
|
|
19
|
+
* <MediaContent file={file.file} onClick={handleOpen} ratio={1.5} />
|
|
20
|
+
*/
|
|
21
|
+
ratio: number;
|
|
22
|
+
/**
|
|
23
|
+
* Is called when the media tile is selected.
|
|
24
|
+
* @description
|
|
25
|
+
* Use this callback to react to clicks on the rendered image or video tile.
|
|
26
|
+
* @example
|
|
27
|
+
* <MediaContent file={file.file} onClick={() => console.log('open')} ratio={1} />
|
|
28
|
+
*/
|
|
29
|
+
onClick: () => void;
|
|
30
|
+
/**
|
|
31
|
+
* Defines the size of the video play icon.
|
|
32
|
+
* @description
|
|
33
|
+
* This prop only affects rendered videos. Image tiles ignore it.
|
|
34
|
+
* @default 50
|
|
35
|
+
* @example
|
|
36
|
+
* <MediaContent file={file.file} onClick={handleOpen} playIconSize={30} ratio={1} />
|
|
37
|
+
* @optional
|
|
38
|
+
*/
|
|
39
|
+
playIconSize?: number;
|
|
40
|
+
}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,2 +1,7 @@
|
|
|
1
1
|
export { default as Gallery } from './components/Gallery';
|
|
2
|
+
export { default as GalleryEditor } from './components/gallery-editor/GalleryEditor';
|
|
3
|
+
export { default as GalleryViewer } from './components/gallery-viewer/GalleryViewer';
|
|
4
|
+
export type { GalleryProps } from './components/Gallery.types';
|
|
5
|
+
export type { GalleryEditorProps } from './components/gallery-editor/GalleryEditor.types';
|
|
6
|
+
export type { GalleryViewerProps } from './components/gallery-viewer/GalleryViewer.types';
|
|
2
7
|
export { GalleryViewMode } from './types/gallery';
|
|
@@ -1,4 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Defines the available gallery layouts for read-only rendering.
|
|
3
|
+
*/
|
|
1
4
|
export declare enum GalleryViewMode {
|
|
5
|
+
/**
|
|
6
|
+
* Arranges visible items in a square-first layout.
|
|
7
|
+
*/
|
|
2
8
|
SQUARE = 0,
|
|
9
|
+
/**
|
|
10
|
+
* Arranges visible items in the gallery grid layout.
|
|
11
|
+
*/
|
|
3
12
|
GRID = 1
|
|
4
13
|
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { FileItem, InternalFileItem } from '@chayns-components/core';
|
|
2
|
+
import { GalleryViewMode } from '../types/gallery';
|
|
3
|
+
export declare const mapFilesToInternalItems: (files?: FileItem[]) => InternalFileItem[];
|
|
4
|
+
export declare const getGalleryViewerKey: (fileItem: FileItem, index: number) => string;
|
|
5
|
+
export declare const getGalleryRatio: (fileItems: FileItem[]) => number;
|
|
6
|
+
export declare const getReadOnlyItemRatio: ({ fileItems, index, viewMode, }: {
|
|
7
|
+
fileItems: FileItem[];
|
|
8
|
+
index: number;
|
|
9
|
+
viewMode: GalleryViewMode;
|
|
10
|
+
}) => number;
|
|
11
|
+
export declare const openFiles: (fileItems: InternalFileItem[], file: InternalFileItem) => void;
|
|
12
|
+
export declare const openKnownFiles: (fileItems: FileItem[], file: FileItem) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/gallery",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.56",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"publishConfig": {
|
|
85
85
|
"access": "public"
|
|
86
86
|
},
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "535a1c7ee9c6df81b3ca57167596f6ac2cd29138"
|
|
88
88
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Gallery.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_gallery","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledGallery","exports","styled","div","StyledGalleryItemWrapper","$viewMode","$uploadedFileLength","GalleryViewMode","GRID","css","$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,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAAmD,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAE5C,MAAMkB,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAGE,yBAAM,CAACC,GAAG;AACvC;AACA,CAAC;AAEM,MAAMC,wBAAwB,GAAAH,OAAA,CAAAG,wBAAA,GAAGF,yBAAM,CAACC,GAI7C;AACF;AACA;AACA;AACA,MAAM,CAAC;EAAEE,SAAS;EAAEC;AAAoB,CAAC,KAAK;EACtC,IAAID,SAAS,KAAKE,wBAAe,CAACC,IAAI,EAAE;IACpC,OAAO,IAAAC,qBAAG;AACtB;AACA;AACA;AACA;AACA,kBAAkB,MAAM;MACJ,QAAQH,mBAAmB;QACvB,KAAK,CAAC;UACF,OAAO,IAAAG,qBAAG;AACtC;AACA,6BAA6B;QACL,KAAK,CAAC;UACF,OAAO,IAAAA,qBAAG;AACtC;AACA;AACA;AACA;AACA,6BAA6B;QACL,KAAK,CAAC;UACF,OAAO,IAAAA,qBAAG;AACtC;AACA;AACA;AACA;AACA,6BAA6B;QACL;UACI,OAAO,IAAAA,qBAAG;AACtC;AACA;AACA;AACA;AACA,6BAA6B;MACT;IACJ,CAAC;AACjB,aAAa;EACL;EAEA,QAAQH,mBAAmB;IACvB,KAAK,CAAC;MACF,OAAO,IAAAG,qBAAG;AAC1B;AACA,iBAAiB;IACL,KAAK,CAAC;MACF,OAAO,IAAAA,qBAAG;AAC1B;AACA,iBAAiB;IACL,KAAK,CAAC;MACF,OAAO,IAAAA,qBAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAO,IAAAA,qBAAG;AAC1B;AACA;AACA;AACA;AACA,iBAAiB;EACT;AACJ,CAAC;AACL;AACA,oBAAoB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAEM,MAAMC,4BAA4B,GAAAV,OAAA,CAAAU,4BAAA,GAAGT,yBAAM,CAACC,GAEjD;AACF;AACA,6BAA6B,CAAC;EAAES;AAAc,CAAC,KACvC,4BAA4BA,aAAa,WAAW;AAC5D;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AddFile.js","names":["_core","require","_react","_interopRequireWildcard","_AddFile","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AddFile","onAdd","openSelectDialog","useCallback","files","selectFiles","multiple","type","createElement","StyledAddFile","key","StyledAddFIleIconWrapper","onClick","Icon","size","icons","displayName","_default","exports"],"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,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAA2E,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAS3E,MAAMkB,OAAyB,GAAGA,CAAC;EAAEC;AAAM,CAAC,KAAK;EAC7C,MAAMC,gBAAgB,GAAG,IAAAC,kBAAW,EAAC,YAAY;IAC7C,MAAMC,KAAK,GAAG,MAAM,IAAAC,iBAAW,EAAC;MAC5BC,QAAQ,EAAE,IAAI;MACdC,IAAI,EAAE;IACV,CAAC,CAAC;IAEFN,KAAK,CAACG,KAAK,CAAC;EAChB,CAAC,EAAE,CAACH,KAAK,CAAC,CAAC;EAEX,oBACIvB,MAAA,CAAAa,OAAA,CAAAiB,aAAA,CAAC5B,QAAA,CAAA6B,aAAa;IAACC,GAAG,EAAC;EAAW,gBAC1BhC,MAAA,CAAAa,OAAA,CAAAiB,aAAA,CAAC5B,QAAA,CAAA+B,wBAAwB;IAACC,OAAO,EAAEA,CAAA,KAAM,KAAKV,gBAAgB,CAAC;EAAE,gBAC7DxB,MAAA,CAAAa,OAAA,CAAAiB,aAAA,CAAChC,KAAA,CAAAqC,IAAI;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAE,CAAC,YAAY;EAAE,CAAE,CAClB,CACf,CAAC;AAExB,CAAC;AAEDf,OAAO,CAACgB,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3B,OAAA,GAEjBS,OAAO","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AddFile.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledAddFile","exports","styled","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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAGE,yBAAM,CAACC,GAAG;AACvC;AACA,CAAC;AAIM,MAAMC,wBAAwB,GAAAH,OAAA,CAAAG,wBAAA,GAAGF,yBAAM,CAACG,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,44 +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 = require("motion/react");
|
|
9
|
-
var _react2 = _interopRequireWildcard(require("react"));
|
|
10
|
-
var _GalleryItem = require("./GalleryItem.styles");
|
|
11
|
-
var _MediaItem = _interopRequireDefault(require("./media-item/MediaItem"));
|
|
12
|
-
var _PreviewItem = _interopRequireDefault(require("./preview-item/PreviewItem"));
|
|
13
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
-
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); }
|
|
15
|
-
const GalleryItem = ({
|
|
16
|
-
fileItem,
|
|
17
|
-
handleDeleteFile,
|
|
18
|
-
isEditMode,
|
|
19
|
-
ratio = 1,
|
|
20
|
-
remainingItemsLength,
|
|
21
|
-
onClick
|
|
22
|
-
}) => (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_GalleryItem.StyledGalleryItem, null, isEditMode && /*#__PURE__*/_react2.default.createElement(_GalleryItem.StyledGalleryItemDeleteButton, {
|
|
23
|
-
onClick: () => handleDeleteFile(fileItem.id)
|
|
24
|
-
}, /*#__PURE__*/_react2.default.createElement(_core.Icon, {
|
|
25
|
-
size: 20,
|
|
26
|
-
icons: ['ts-wrong']
|
|
27
|
-
})), !fileItem.state || fileItem.state === 'none' || !fileItem.previewUrl && !fileItem.uploadedFile ? null : /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
28
|
-
initial: false
|
|
29
|
-
}, fileItem.state === 'uploading' ? /*#__PURE__*/_react2.default.createElement(_PreviewItem.default, {
|
|
30
|
-
ratio: ratio,
|
|
31
|
-
key: `uploading_${fileItem.id ?? ''}`,
|
|
32
|
-
fileItem: fileItem
|
|
33
|
-
}) : /*#__PURE__*/_react2.default.createElement(_MediaItem.default, {
|
|
34
|
-
key: `uploaded_${fileItem.id ?? ''}`,
|
|
35
|
-
fileItem: fileItem,
|
|
36
|
-
isEditMode: isEditMode,
|
|
37
|
-
ratio: ratio,
|
|
38
|
-
openSelectedFile: onClick
|
|
39
|
-
})), remainingItemsLength && /*#__PURE__*/_react2.default.createElement(_GalleryItem.StyledGalleryItemMoreItemsIndicator, {
|
|
40
|
-
onClick: () => onClick(fileItem)
|
|
41
|
-
}, /*#__PURE__*/_react2.default.createElement("p", null, `+ ${remainingItemsLength - 3}`))), [fileItem, handleDeleteFile, isEditMode, onClick, ratio, remainingItemsLength]);
|
|
42
|
-
GalleryItem.displayName = 'GalleryItem';
|
|
43
|
-
var _default = exports.default = GalleryItem;
|
|
44
|
-
//# sourceMappingURL=GalleryItem.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GalleryItem.js","names":["_core","require","_react","_react2","_interopRequireWildcard","_GalleryItem","_MediaItem","_interopRequireDefault","_PreviewItem","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","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 '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":"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","ignoreList":[]}
|
|
@@ -1,51 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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":[]}
|