@trackunit/react-compound-components 0.0.230 → 0.0.232

package/index.cjs.js

@@ -10,6 +10,7 @@ var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities
 var ImageGallery = require('react-image-gallery');
 var tailwindMerge = require('tailwind-merge');
 var reactFormComponents = require('@trackunit/react-form-components');
+var dateAndTimeUtils = require('@trackunit/date-and-time-utils');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -178,6 +179,7 @@ const cvaGallery = cssClassVarianceUtilities.cvaMerge([
     // This centers thumbnails and makes the clickable area independent of image size
     "[&_.image-gallery-thumbnail]:h-[100px]",
 ]);
+const titleStyle = "absolute top-3 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white bg-black/50 text-sm px-1 rounded-md backdrop-blur-sm";
 /**
  * Show and manage images
  *
@@ -186,25 +188,28 @@ const cvaGallery = cssClassVarianceUtilities.cvaMerge([
  * Reduces bandwidth usage by lazy loading thumbnails and loading smaller versions of images depending on screen size.
  */
 const ImageCollection = (props) => {
-    var _a;
-    const { imageIds, actions, emptyPlaceholderActionLabel, additionalItemClassName, uploading } = props;
-    const [openImageId, setOpenImageId] = React.useState(imageIds[0]);
+    var _a, _b;
+    const { imagesData, actions, emptyPlaceholderActionLabel, additionalItemClassName, uploading } = props;
+    const [openImageId, setOpenImageId] = React.useState((_a = imagesData[0]) === null || _a === void 0 ? void 0 : _a.id);
     const [isDeleting, setIsDeleting] = React.useState(false);
     const { isLg } = reactComponents.useViewportSize();
     const fileInputRef = React.useRef(null);
     const imageGalleryRef = React.useRef(null);
     const uploadButton = React.useMemo(() => (actions === null || actions === void 0 ? void 0 : actions.upload) ? (jsxRuntime.jsx("div", { className: "flex justify-end", children: jsxRuntime.jsx(reactComponents.Button, { loading: uploading, onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: actions.upload.label }) })) : null, [actions === null || actions === void 0 ? void 0 : actions.upload, uploading]);
-    const items = React.useMemo(() => imageIds.map(imageId => ({
-        id: imageId,
-        original: createOriginalUrl(imageId),
-        thumbnail: createThumbnailUrl(imageId),
-        srcSet: createSrcSet(imageId),
-    })), [imageIds]);
+    const items = React.useMemo(() => imagesData.map(image => ({
+        id: image.id,
+        original: createOriginalUrl(image.id),
+        thumbnail: createThumbnailUrl(image.id),
+        srcSet: createSrcSet(image.id),
+        name: image.name,
+        timestamp: dateAndTimeUtils.formatDateUtil(new Date(image.timestamp), { dateFormat: "medium", timeFormat: "medium" })
+    })), [imagesData]);
     React.useEffect(() => {
-        if ((!openImageId || !imageIds.includes(openImageId)) && imageIds.length > 0) {
-            setOpenImageId(imageIds[0]);
+        var _a;
+        if ((!openImageId || !imagesData.map(x => x.id).includes(openImageId)) && imagesData.length > 0) {
+            setOpenImageId((_a = imagesData[0]) === null || _a === void 0 ? void 0 : _a.id);
         }
-    }, [imageIds, openImageId]);
+    }, [imagesData, openImageId]);
     const onRemove = React.useCallback(async () => {
         var _a;
         if (!(((_a = actions === null || actions === void 0 ? void 0 : actions.remove) === null || _a === void 0 ? void 0 : _a.onRemove) && openImageId)) {
@@ -212,9 +217,9 @@ const ImageCollection = (props) => {
         }
         try {
             let nextIndex;
-            const indexToDelete = imageIds.indexOf(openImageId);
-            const deletingLastImage = indexToDelete === imageIds.length - 1;
-            if (imageIds.length === 1) {
+            const indexToDelete = imagesData.map(x => x.id).indexOf(openImageId);
+            const deletingLastImage = indexToDelete === imagesData.length - 1;
+            if (imagesData.length === 1) {
                 nextIndex = undefined;
             }
             else if (deletingLastImage) {
@@ -233,20 +238,24 @@ const ImageCollection = (props) => {
         finally {
             setIsDeleting(false);
         }
-    }, [actions === null || actions === void 0 ? void 0 : actions.remove, imageIds, openImageId]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [imageIds.length > 0 ? (jsxRuntime.jsxs("div", { className: "flex h-[100vh] max-h-[100vh] flex-col", "data-testid": "image-collection", children: [jsxRuntime.jsx(ImageGallery, { additionalClass: cvaGallery(), items: items, onBeforeSlide: index => { var _a; return setOpenImageId((_a = items[index]) === null || _a === void 0 ? void 0 : _a.id); }, 
+    }, [actions === null || actions === void 0 ? void 0 : actions.remove, imagesData, openImageId]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [imagesData.length > 0 ? (jsxRuntime.jsxs("div", { className: "flex h-[100vh] max-h-[100vh] flex-col", "data-testid": "image-collection", children: [jsxRuntime.jsx(ImageGallery, { additionalClass: cvaGallery(), items: items, onBeforeSlide: index => { var _a; return setOpenImageId((_a = items[index]) === null || _a === void 0 ? void 0 : _a.id); }, 
                         // Library typing is wrong, this is fired when a gallery image is clicked (library typing says div)
                         onClick: e => window.open(e.target.src, "_blank"), ref: imageGalleryRef, renderItem: ({ original, srcSet, 
                         // Typing of the library is not flexible enough to add id, which is only used for the unit tests
                         // @ts-ignore
-                        id, }) => (jsxRuntime.jsx("img", { alt: "full", className: tailwindMerge.twMerge(additionalItemClassName, "w-[100%]", "object-contain"), "data-testid": `image-${id}`, loading: "lazy", sizes: "(max-width: 480px) 480px, 800px", src: original, srcSet: srcSet })), renderThumbInner: ({ thumbnail, 
+                        id, 
+                        // @ts-ignore
+                        name, 
+                        // @ts-ignore
+                        timestamp, }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { alt: "full", className: tailwindMerge.twMerge(additionalItemClassName, "w-[100%]", "object-contain"), "data-testid": `image-${id}`, loading: "lazy", sizes: "(max-width: 480px) 480px, 800px", src: original, srcSet: srcSet }), jsxRuntime.jsx("div", { className: titleStyle, "data-testid": `image-title-${id}`, onClick: (e) => e.stopPropagation(), children: `${name} - ${timestamp}` })] })), renderThumbInner: ({ thumbnail, 
                         // Typing of the library is not flexible enough to add id, which is only used for the unit tests
                         // @ts-ignore
                         id, }) => jsxRuntime.jsx("img", { alt: "thumbnail", "data-testid": `thumbnail-${id}`, loading: "lazy", src: thumbnail }), showFullscreenButton: false, showPlayButton: false, showThumbnails: isLg, 
                         // reduce sliding around during deletion
-                        slideDuration: isDeleting ? 0 : 200, ...props }), uploadButton, (actions === null || actions === void 0 ? void 0 : actions.remove) ? (jsxRuntime.jsx(reactComponents.Button, { className: "absolute right-2 top-2", loading: isDeleting, onClick: onRemove, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "Trash", size: "small" }), variant: "secondary-danger", children: actions.remove.label })) : null] })) : ((_a = actions === null || actions === void 0 ? void 0 : actions.upload) === null || _a === void 0 ? void 0 : _a.onUpload) ? (uploading ? (jsxRuntime.jsx(reactComponents.Spinner, {})) : (jsxRuntime.jsx(reactFormComponents.DropZone, { accept: ACCEPT_FOR_IMAGES, className: "h-screen", dataTestId: "site-images-dropzone", filesSelected: actions.upload.onUpload, label: emptyPlaceholderActionLabel, multiple: true }))) : null, jsxRuntime.jsx("input", { 
+                        slideDuration: isDeleting ? 0 : 200, ...props }), uploadButton, (actions === null || actions === void 0 ? void 0 : actions.remove) ? (jsxRuntime.jsx(reactComponents.Button, { className: "absolute right-2 top-2", loading: isDeleting, onClick: onRemove, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "Trash", size: "small" }), variant: "secondary-danger", children: actions.remove.label })) : null] })) : ((_b = actions === null || actions === void 0 ? void 0 : actions.upload) === null || _b === void 0 ? void 0 : _b.onUpload) ? (uploading ? (jsxRuntime.jsx(reactComponents.Spinner, {})) : (jsxRuntime.jsx(reactFormComponents.DropZone, { accept: ACCEPT_FOR_IMAGES, className: "h-screen", dataTestId: "site-images-dropzone", filesSelected: actions.upload.onUpload, label: emptyPlaceholderActionLabel, multiple: true }))) : null, jsxRuntime.jsx("input", { 
                 // Users can still select other files on mobile devices
-                accept: ACCEPT_FOR_IMAGES, hidden: true, multiple: true, onChange: async (e) => {
+                accept: ACCEPT_FOR_IMAGES, "data-testid": "site-images-input-files", hidden: true, multiple: true, onChange: async (e) => {
                     if (!(e.target.files && (actions === null || actions === void 0 ? void 0 : actions.upload))) {
                         return;
                     }

package/index.esm.js

@@ -9,6 +9,7 @@ import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import ImageGallery from 'react-image-gallery';
 import { twMerge } from 'tailwind-merge';
 import { DropZone } from '@trackunit/react-form-components';
+import { formatDateUtil } from '@trackunit/date-and-time-utils';
 
 var defaultTranslations = {
 	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this course of action?",
@@ -158,6 +159,7 @@ const cvaGallery = cvaMerge([
     // This centers thumbnails and makes the clickable area independent of image size
     "[&_.image-gallery-thumbnail]:h-[100px]",
 ]);
+const titleStyle = "absolute top-3 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white bg-black/50 text-sm px-1 rounded-md backdrop-blur-sm";
 /**
  * Show and manage images
  *
@@ -166,25 +168,28 @@ const cvaGallery = cvaMerge([
  * Reduces bandwidth usage by lazy loading thumbnails and loading smaller versions of images depending on screen size.
  */
 const ImageCollection = (props) => {
-    var _a;
-    const { imageIds, actions, emptyPlaceholderActionLabel, additionalItemClassName, uploading } = props;
-    const [openImageId, setOpenImageId] = useState(imageIds[0]);
+    var _a, _b;
+    const { imagesData, actions, emptyPlaceholderActionLabel, additionalItemClassName, uploading } = props;
+    const [openImageId, setOpenImageId] = useState((_a = imagesData[0]) === null || _a === void 0 ? void 0 : _a.id);
     const [isDeleting, setIsDeleting] = useState(false);
     const { isLg } = useViewportSize();
     const fileInputRef = useRef(null);
     const imageGalleryRef = useRef(null);
     const uploadButton = useMemo(() => (actions === null || actions === void 0 ? void 0 : actions.upload) ? (jsx("div", { className: "flex justify-end", children: jsx(Button, { loading: uploading, onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: actions.upload.label }) })) : null, [actions === null || actions === void 0 ? void 0 : actions.upload, uploading]);
-    const items = useMemo(() => imageIds.map(imageId => ({
-        id: imageId,
-        original: createOriginalUrl(imageId),
-        thumbnail: createThumbnailUrl(imageId),
-        srcSet: createSrcSet(imageId),
-    })), [imageIds]);
+    const items = useMemo(() => imagesData.map(image => ({
+        id: image.id,
+        original: createOriginalUrl(image.id),
+        thumbnail: createThumbnailUrl(image.id),
+        srcSet: createSrcSet(image.id),
+        name: image.name,
+        timestamp: formatDateUtil(new Date(image.timestamp), { dateFormat: "medium", timeFormat: "medium" })
+    })), [imagesData]);
     useEffect(() => {
-        if ((!openImageId || !imageIds.includes(openImageId)) && imageIds.length > 0) {
-            setOpenImageId(imageIds[0]);
+        var _a;
+        if ((!openImageId || !imagesData.map(x => x.id).includes(openImageId)) && imagesData.length > 0) {
+            setOpenImageId((_a = imagesData[0]) === null || _a === void 0 ? void 0 : _a.id);
         }
-    }, [imageIds, openImageId]);
+    }, [imagesData, openImageId]);
     const onRemove = useCallback(async () => {
         var _a;
         if (!(((_a = actions === null || actions === void 0 ? void 0 : actions.remove) === null || _a === void 0 ? void 0 : _a.onRemove) && openImageId)) {
@@ -192,9 +197,9 @@ const ImageCollection = (props) => {
         }
         try {
             let nextIndex;
-            const indexToDelete = imageIds.indexOf(openImageId);
-            const deletingLastImage = indexToDelete === imageIds.length - 1;
-            if (imageIds.length === 1) {
+            const indexToDelete = imagesData.map(x => x.id).indexOf(openImageId);
+            const deletingLastImage = indexToDelete === imagesData.length - 1;
+            if (imagesData.length === 1) {
                 nextIndex = undefined;
             }
             else if (deletingLastImage) {
@@ -213,20 +218,24 @@ const ImageCollection = (props) => {
         finally {
             setIsDeleting(false);
         }
-    }, [actions === null || actions === void 0 ? void 0 : actions.remove, imageIds, openImageId]);
-    return (jsxs(Fragment, { children: [imageIds.length > 0 ? (jsxs("div", { className: "flex h-[100vh] max-h-[100vh] flex-col", "data-testid": "image-collection", children: [jsx(ImageGallery, { additionalClass: cvaGallery(), items: items, onBeforeSlide: index => { var _a; return setOpenImageId((_a = items[index]) === null || _a === void 0 ? void 0 : _a.id); }, 
+    }, [actions === null || actions === void 0 ? void 0 : actions.remove, imagesData, openImageId]);
+    return (jsxs(Fragment, { children: [imagesData.length > 0 ? (jsxs("div", { className: "flex h-[100vh] max-h-[100vh] flex-col", "data-testid": "image-collection", children: [jsx(ImageGallery, { additionalClass: cvaGallery(), items: items, onBeforeSlide: index => { var _a; return setOpenImageId((_a = items[index]) === null || _a === void 0 ? void 0 : _a.id); }, 
                         // Library typing is wrong, this is fired when a gallery image is clicked (library typing says div)
                         onClick: e => window.open(e.target.src, "_blank"), ref: imageGalleryRef, renderItem: ({ original, srcSet, 
                         // Typing of the library is not flexible enough to add id, which is only used for the unit tests
                         // @ts-ignore
-                        id, }) => (jsx("img", { alt: "full", className: twMerge(additionalItemClassName, "w-[100%]", "object-contain"), "data-testid": `image-${id}`, loading: "lazy", sizes: "(max-width: 480px) 480px, 800px", src: original, srcSet: srcSet })), renderThumbInner: ({ thumbnail, 
+                        id, 
+                        // @ts-ignore
+                        name, 
+                        // @ts-ignore
+                        timestamp, }) => (jsxs(Fragment, { children: [jsx("img", { alt: "full", className: twMerge(additionalItemClassName, "w-[100%]", "object-contain"), "data-testid": `image-${id}`, loading: "lazy", sizes: "(max-width: 480px) 480px, 800px", src: original, srcSet: srcSet }), jsx("div", { className: titleStyle, "data-testid": `image-title-${id}`, onClick: (e) => e.stopPropagation(), children: `${name} - ${timestamp}` })] })), renderThumbInner: ({ thumbnail, 
                         // Typing of the library is not flexible enough to add id, which is only used for the unit tests
                         // @ts-ignore
                         id, }) => jsx("img", { alt: "thumbnail", "data-testid": `thumbnail-${id}`, loading: "lazy", src: thumbnail }), showFullscreenButton: false, showPlayButton: false, showThumbnails: isLg, 
                         // reduce sliding around during deletion
-                        slideDuration: isDeleting ? 0 : 200, ...props }), uploadButton, (actions === null || actions === void 0 ? void 0 : actions.remove) ? (jsx(Button, { className: "absolute right-2 top-2", loading: isDeleting, onClick: onRemove, prefix: jsx(Icon, { name: "Trash", size: "small" }), variant: "secondary-danger", children: actions.remove.label })) : null] })) : ((_a = actions === null || actions === void 0 ? void 0 : actions.upload) === null || _a === void 0 ? void 0 : _a.onUpload) ? (uploading ? (jsx(Spinner, {})) : (jsx(DropZone, { accept: ACCEPT_FOR_IMAGES, className: "h-screen", dataTestId: "site-images-dropzone", filesSelected: actions.upload.onUpload, label: emptyPlaceholderActionLabel, multiple: true }))) : null, jsx("input", { 
+                        slideDuration: isDeleting ? 0 : 200, ...props }), uploadButton, (actions === null || actions === void 0 ? void 0 : actions.remove) ? (jsx(Button, { className: "absolute right-2 top-2", loading: isDeleting, onClick: onRemove, prefix: jsx(Icon, { name: "Trash", size: "small" }), variant: "secondary-danger", children: actions.remove.label })) : null] })) : ((_b = actions === null || actions === void 0 ? void 0 : actions.upload) === null || _b === void 0 ? void 0 : _b.onUpload) ? (uploading ? (jsx(Spinner, {})) : (jsx(DropZone, { accept: ACCEPT_FOR_IMAGES, className: "h-screen", dataTestId: "site-images-dropzone", filesSelected: actions.upload.onUpload, label: emptyPlaceholderActionLabel, multiple: true }))) : null, jsx("input", { 
                 // Users can still select other files on mobile devices
-                accept: ACCEPT_FOR_IMAGES, hidden: true, multiple: true, onChange: async (e) => {
+                accept: ACCEPT_FOR_IMAGES, "data-testid": "site-images-input-files", hidden: true, multiple: true, onChange: async (e) => {
                     if (!(e.target.files && (actions === null || actions === void 0 ? void 0 : actions.upload))) {
                         return;
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-compound-components",
-  "version": "0.0.230",
+  "version": "0.0.232",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -13,7 +13,8 @@
     "@trackunit/css-class-variance-utilities": "*",
     "@trackunit/react-form-components": "*",
     "tailwind-merge": "^2.0.0",
-    "react-image-gallery": "1.3.0"
+    "react-image-gallery": "1.3.0",
+    "@trackunit/date-and-time-utils": "*"
   },
   "engines": {
     "node": ">=20.x",

package/src/ImageCollection/ImageCollection.d.ts

@@ -1,7 +1,11 @@
 import { ComponentProps } from "react";
 import ImageGallery from "react-image-gallery";
 type Props = Omit<ComponentProps<typeof ImageGallery>, "items"> & {
-    imageIds: string[];
+    imagesData: {
+        id: string;
+        name: string;
+        timestamp: string;
+    }[];
     actions?: {
         upload?: {
             label: string;

package/src/ImageCollection/ImageCollection.stories.d.ts

@@ -63,6 +63,11 @@ export declare const Default: {
         additionalClass?: string | undefined;
         useTranslate3D?: boolean | undefined;
         isRTL?: boolean | undefined;
+        imagesData?: {
+            id: string;
+            name: string;
+            timestamp: string;
+        }[] | undefined;
         actions?: {
             upload?: {
                 label: string;
@@ -133,6 +138,11 @@ export declare const EmptyState: {
         additionalClass?: string | undefined;
         useTranslate3D?: boolean | undefined;
         isRTL?: boolean | undefined;
+        imagesData?: {
+            id: string;
+            name: string;
+            timestamp: string;
+        }[] | undefined;
         actions?: {
             upload?: {
                 label: string;