@yogiswara/honcho-editor-ui 2.2.5 → 2.2.7

package/dist/components/editor/GalleryAlbum/AlbumImageGallery.d.ts

@@ -1,16 +1,8 @@
 import React from "react";
-import { AdjustmentValues } from "../../../lib/editor/honcho-editor";
-import type { PhotoData as BulkPhotoData } from "../../../hooks/editor/useHonchoEditorBulk";
-export interface ExtendedPhotoData extends BulkPhotoData {
-    adjustments?: Partial<AdjustmentValues>;
-    frame?: string;
-}
+import type { PhotoData } from "../../../hooks/editor/useHonchoEditorBulk";
 interface ImageGalleryProps {
-    imageCollection: ExtendedPhotoData[];
-    isSelectedMode: boolean;
-    isHiddenGallery: boolean;
-    enableEditor: boolean;
-    onToggleSelect: (photo: ExtendedPhotoData) => void;
+    imageCollection: PhotoData[];
+    onToggleSelect: (photo: PhotoData) => void;
 }
 export declare const AlbumImageGallery: React.FC<ImageGalleryProps>;
 export {};

package/dist/components/editor/GalleryAlbum/AlbumImageGallery.js

@@ -4,9 +4,7 @@ import { Box, Stack } from "@mui/material";
 import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
 import GalleryImageItem from "./ImageItem";
 export const AlbumImageGallery = (props) => {
-    const { imageCollection, isSelectedMode, isHiddenGallery, enableEditor, // Destructure the new prop
-    onToggleSelect, } = props;
-    console.log("imageCollection: ", imageCollection);
+    const { imageCollection, onToggleSelect } = props;
     return (_jsx(Stack, { sx: { width: '100%', maxHeight: '100%', overflowY: 'auto' }, children: _jsx(ResponsiveMasonry, { columnsCountBreakPoints: { 750: 2, 900: 4 }, children: _jsx(Masonry, { children: imageCollection.map((photo, index) => {
                     // This guard clause is still important for runtime safety.
                     if (!photo.key || !photo.src) {
@@ -25,8 +23,6 @@ export const AlbumImageGallery = (props) => {
                         // in case ImageItem needs it for other operations.
                         photo: photo,
                     };
-                    return (_jsx(Box, { sx: { m: 0.5 }, children: _jsx(GalleryImageItem, { margin: "0px", index: index, 
-                            // UPDATED: Pass the new, correctly-typed object.
-                            photo: imageItemPhotoProps, direction: "column", isFullScreenMode: false, isSelected: photo.isSelected, isSelectedMode: isSelectedMode, isHiddenGallery: isHiddenGallery, onToggleSelect: () => { onToggleSelect(photo); }, enableEditor: enableEditor, adjustments: photo.adjustments, frame: photo.frame, data: photo }) }, photo.key));
+                    return (_jsx(Box, { sx: { m: 0.5 }, children: _jsx(GalleryImageItem, { margin: "0px", index: index, direction: "column", onToggleSelect: () => { onToggleSelect(photo); }, data: photo }) }, photo.key));
                 }) }) }) }));
 };

package/dist/components/editor/GalleryAlbum/ImageItem.d.ts

@@ -1,26 +1,10 @@
-import type { AdjustmentValues } from "../../../lib/editor/honcho-editor";
-import { GallerySetup } from "../../../hooks/editor/type";
-interface PhotoProps<T> {
-    src: string;
-    alt?: string;
-    width: number;
-    height: number;
-    key: string;
-}
+import { PhotoData } from "../../../hooks/editor/useHonchoEditorBulk";
 interface Props {
     margin?: any;
     index: number;
-    photo: PhotoProps<GallerySetup>;
-    data: GallerySetup;
+    data: PhotoData;
     direction: "row" | "column";
-    isSelectedMode: boolean;
-    isFullScreenMode: boolean;
-    isSelected?: boolean;
-    isHiddenGallery: boolean;
     onToggleSelect: () => void;
-    enableEditor?: boolean;
-    adjustments?: Partial<AdjustmentValues>;
-    frame?: string | null;
 }
 declare const GalleryImageItem: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default GalleryImageItem;

package/dist/components/editor/GalleryAlbum/ImageItem.js

@@ -1,8 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Box, CardMedia, useTheme } from "@mui/material";
-import { TickCircle } from "iconsax-react";
-import CustomTickIcon from "../svg/Tick";
 import { neutral } from "../../../color";
 const initialAdjustments = {
     temperature: 0, tint: 0, saturation: 0, vibrance: 0, exposure: 0, contrast: 0,
@@ -20,70 +18,32 @@ const selectedImgStyle = {
     // transition: "transform .135s cubic-bezier(0.0,0.0,0.2,1),opacity linear .15s"
 };
 const GalleryImageItem = (props) => {
-    const { photo, margin, adjustments, isSelected = false, data } = props;
+    const { margin, data } = props;
     const theme = useTheme();
     const imageData = data;
-    const hasAdjustments = useMemo(() => {
-        if (!adjustments)
-            return false;
-        return Object.keys(initialAdjustments).some(key => adjustments[key] !== initialAdjustments[key]);
-    }, [adjustments]);
-    const styleHiddenGallery = useMemo(() => {
-        if (props.isHiddenGallery) {
-            return { filter: "blur(20px)", pointerEvents: "none" };
-        }
-        else {
-            return {};
-        }
-    }, [props.isHiddenGallery]);
     const commonStyle = useMemo(() => {
         return {
             backgroundColor: neutral.white,
             overflow: "hidden",
             position: "relative",
             width: "100%",
-            aspectRatio: `${photo.width}/${photo.height}`,
+            aspectRatio: `${imageData.width}/${imageData.height}`,
         };
-    }, [props.direction, props.photo]);
-    const handleImageClick = () => {
-        console.debug({
-            isFullMode: props.isFullScreenMode,
-            isShowGallery: props.isHiddenGallery,
-        }, "handleImageClick");
-        if (!props.isFullScreenMode && !props.isHiddenGallery) {
-            if (props.isSelectedMode) {
-                console.debug("handleImageClick with toggle select");
-                props.onToggleSelect();
-            }
-            else {
-                console.debug("handleImageClick with preview");
-            }
-        }
-    };
-    const handleImageSelectedIconClick = () => {
-        console.debug("handleImageSelectedIconClick");
-        if (!props.isFullScreenMode) {
-            if (!props.isSelectedMode) {
-            }
-            props.onToggleSelect();
-        }
-    };
+    }, [props.direction, imageData]);
     const imageSx = useMemo(() => {
-        const baseStyles = isSelected ? {
+        const baseStyles = imageData.isSelected ? {
             ...imgStyle,
             ...selectedImgStyle,
-            ...styleHiddenGallery,
-            aspectRatio: `${photo.width}/${photo.height}`,
+            aspectRatio: `${imageData.width}/${imageData.height}`,
         } : {
             ...imgStyle,
-            ...styleHiddenGallery,
         };
         return {
             ...baseStyles,
             opacity: 1, // Previously depended on isProcessingComplete
             transition: 'opacity 0.3s ease-in-out',
         };
-    }, [isSelected, styleHiddenGallery, photo.width, photo.height]);
+    }, [props.data.isSelected, imageData.width, imageData.height]);
     const boxNotSelected = useMemo(() => ({
         margin,
         // height: photo.height,
@@ -91,17 +51,15 @@ const GalleryImageItem = (props) => {
         transition: ".3s",
         // "&:hover": { padding: "12px", backgroundColor: "primary.light1" },
         "&:-webkit-transition": { transition: ".3s" },
-        "&:hover > .checkbox": { display: props.isHiddenGallery ? "" : "block" },
-        cursor: props.isFullScreenMode || props.isHiddenGallery ? "inherit" : "pointer",
-        backgroundColor: props.isFullScreenMode
-            ? "rgba(0,0,0,0.1)"
-            : "transparent",
-    }), [margin, commonStyle, props.isHiddenGallery, props.isFullScreenMode]);
+        "&:hover > .checkbox": { display: "block" },
+        cursor: "pointer",
+        backgroundColor: "transparent",
+    }), [margin, commonStyle]);
     const boxSelected = useMemo(() => ({
         margin,
         // height: photo.height,
         ...commonStyle,
-        cursor: props.isFullScreenMode || props.isHiddenGallery ? "inherit" : "pointer",
+        cursor: "pointer",
         transition: ".3s",
         "&:-webkit-transition": { transition: ".3s" },
         padding: { xs: "13px 12px", sm: "21.31px 25.56px 21.32px 27.68px" },
@@ -109,55 +67,15 @@ const GalleryImageItem = (props) => {
         margin,
         commonStyle,
         theme.palette.light,
-        props.isFullScreenMode,
-        props.isHiddenGallery,
     ]);
     const boxOuterSx = useMemo(() => {
-        if (props.isFullScreenMode) {
-            return {
-                margin,
-                ...commonStyle,
-            };
+        if (props.data.isSelected) {
+            return { ...boxSelected };
         }
         else {
-            if (props.isSelected) {
-                return { ...boxSelected };
-            }
-            else {
-                return { ...boxNotSelected };
-            }
+            return { ...boxNotSelected };
         }
-    }, [
-        props.isFullScreenMode,
-        photo.height,
-        photo.width,
-        commonStyle,
-        boxSelected,
-        boxNotSelected,
-        margin,
-        props.isSelected,
-    ]);
-    return (_jsxs(Box, { id: "Box_image", sx: boxOuterSx, className: "image", children: [!props.isHiddenGallery &&
-                (hasAdjustments && isSelected ? (_jsx(Box, { color: "primary.dark1", onClick: handleImageSelectedIconClick, sx: {
-                        position: "absolute",
-                        width: "19px",
-                        height: "19px",
-                        zIndex: "2",
-                        left: "5px",
-                        top: "5px",
-                        borderRadius: { xs: "50%", sm: 0 },
-                    }, className: "checkbox", children: _jsx(CustomTickIcon, {}) })) : (_jsx(Box, { color: "neutral.light2", onClick: handleImageSelectedIconClick, sx: {
-                        position: "absolute",
-                        width: "19px",
-                        height: "19px",
-                        zIndex: "1",
-                        left: "5px",
-                        top: "5px",
-                        display: "none",
-                        visibility: {
-                            xs: props.isSelectedMode ? "visible" : "hidden",
-                            sm: "visible",
-                        },
-                    }, className: "checkbox", children: _jsx(TickCircle, { style: { width: "24px", height: "24px" }, color: "white" }) }))), _jsx(CardMedia, { id: "card_media", component: "img", className: "image", loading: "lazy", alt: imageData.alt ?? "Image", sx: imageSx, src: imageData.src, width: "100%", onClick: handleImageClick })] }, photo.key));
+    }, [imageData.height, imageData.width, commonStyle, boxSelected, boxNotSelected, margin]);
+    return (_jsx(Box, { id: "Box_image", sx: boxOuterSx, className: "image", children: _jsx(CardMedia, { id: "card_media", component: "img", className: "image", loading: "lazy", alt: imageData.alt ?? "Image", sx: imageSx, src: imageData.src, width: "100%", onClick: props.onToggleSelect }) }, imageData.key));
 };
 export default GalleryImageItem;

package/dist/hooks/editor/useHonchoEditor.d.ts

@@ -177,7 +177,7 @@ export declare function useHonchoEditor(controller: Controller, initImageId: str
     handleClosePresetModal: () => void;
     handleOpenPresetModalMobile: () => void;
     handleClosePresetModalMobile: () => void;
-    handleCreatePresetMobile: () => void;
+    handleCreatePresetMobile: () => Promise<void>;
     setPresetName: import("react").Dispatch<import("react").SetStateAction<string>>;
     handleNameChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     isRenameModalOpen: boolean;

package/dist/hooks/editor/useHonchoEditor.js

@@ -251,34 +251,47 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
     const handleCreatePreset = useCallback(async () => {
         if (!controller)
             return;
+        // The current adjustment state from the history hook
         const currentAdjustments = { ...currentAdjustmentsState };
         try {
-            const newPreset = await controller.createPreset(firebaseUid, presetName, currentAdjustments);
-            if (newPreset) {
-                // Add the new preset returned from the API to our local state
-                setPresets(prevPresets => [...prevPresets, newPreset]);
+            // Call the controller, which now calls the real API
+            const newPresetFromApi = await controller.createPreset(firebaseUid, presetName, currentAdjustments);
+            // If the API call was successful and returned a preset...
+            if (newPresetFromApi) {
+                // ...add the new preset from the API response to our local state
+                setPresets(prevPresets => [...prevPresets, newPresetFromApi]);
             }
         }
         catch (error) {
             console.error("Failed to create preset:", error);
+            // Optionally: show an error message to the user here
         }
-        console.log("Creating preset:", presetName);
-        const newPreset = { id: `preset${presets.length + 1}`, name: presetName };
-        setPresets(prevPresets => [...prevPresets, newPreset]);
+        // Close the modal and show a confirmation
         setIsPresetCreated(true);
         handleClosePresetModal();
-        setTimeout(() => setIsPresetCreated(false), 1000);
+        setTimeout(() => setIsPresetCreated(false), 1000); // Hide confirmation after 1s
     }, [controller, presetName, currentAdjustmentsState, firebaseUid]);
     const handleOpenPresetModalMobile = () => { setIsPresetCreated(false); setPresetModalOpenMobile(true); };
     const handleClosePresetModalMobile = () => setPresetModalOpenMobile(false);
-    const handleCreatePresetMobile = () => {
+    const handleCreatePresetMobile = useCallback(async () => {
+        if (!controller)
+            return;
         console.log("Creating mobile preset:", presetName);
-        const newPreset = { id: `preset${presets.length + 1}`, name: presetName };
-        setPresets(prevPresets => [...prevPresets, newPreset]);
+        const currentAdjustments = { ...currentAdjustmentsState };
+        try {
+            // RE-USE THE SAME LOGIC AS THE DESKTOP VERSION
+            const newPresetFromApi = await controller.createPreset(firebaseUid, presetName, currentAdjustments);
+            if (newPresetFromApi) {
+                setPresets(prevPresets => [...prevPresets, newPresetFromApi]);
+            }
+        }
+        catch (error) {
+            console.error("Failed to create mobile preset:", error);
+        }
         setIsPresetCreated(true);
         handleClosePresetModalMobile();
         setTimeout(() => setIsPresetCreated(false), 1000);
-    };
+    }, [controller, presetName, currentAdjustmentsState, firebaseUid]);
     const handleNameChange = (event) => setPresetName(event.target.value);
     // Watermark Handlers
     const handleOpenWatermarkView = () => setIsCreatingWatermark(true);

package/dist/hooks/editor/useHonchoEditorBulk.d.ts

@@ -22,7 +22,7 @@ export interface ControllerBulk {
     deletePreset(firebaseUid: string, presetId: string): Promise<void>;
 }
 export declare function useHonchoEditorBulk(controller: Controller, eventID: string, firebaseUid: string): {
-    imageCollection: PhotoData[];
+    imageData: PhotoData[];
     isLoading: boolean;
     error: string | null;
     selectedIds: string[];

package/dist/hooks/editor/useHonchoEditorBulk.js

@@ -1,8 +1,8 @@
 'use client';
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect, useMemo } from 'react';
 import { useAdjustmentHistoryBatch } from '../useAdjustmentHistoryBatch';
 // Helper function to map the API response to the format our UI component needs
-const mapGalleryToPhotoData = (gallery) => {
+const mapGalleryToPhotoData = (gallery, selectedIds) => {
     return {
         key: gallery.id,
         src: gallery.raw_thumbnail?.path ? gallery.raw_thumbnail.path : gallery.thumbnail?.path,
@@ -10,7 +10,7 @@ const mapGalleryToPhotoData = (gallery) => {
         width: gallery.thumbnail?.width,
         height: gallery.thumbnail?.height,
         alt: gallery.id || 'gallery image',
-        isSelected: false, // Default to not selected
+        isSelected: selectedIds.includes(gallery.id),
         adjustments: gallery.editor_config?.color_adjustment,
     };
 };
@@ -45,10 +45,18 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(null);
     const [selectedBulkPreset, setSelectedBulkPreset] = useState('preset1');
+    const imageData = useMemo(() => {
+        return imageCollection.map(item => {
+            return mapGalleryToPhotoData(item, selectedIds);
+        }).map(item => {
+            const adjustment = currentBatch.allImages[item.key];
+            return adjustment ? { ...item, ...adjustment } : item;
+        });
+    }, [imageCollection, selectedIds, currentBatch.allImages]);
     const handleBackCallbackBulk = useCallback(() => {
-        const lastSelectedId = selectedIds.length > 0 ? selectedIds[selectedIds.length - 1] : eventID;
+        const lastSelectedId = selectedIds.length > 0 ? selectedIds[selectedIds.length - 1] : "";
         controller.handleBack(firebaseUid, lastSelectedId);
-    }, [controller, firebaseUid, selectedIds, eventID]);
+    }, [controller, firebaseUid, selectedIds]);
     const handleSelectBulkPreset = (event) => setSelectedBulkPreset(event.target.value);
     // This factory creates functions that adjust a value for all selected images
     const createRelativeAdjuster = useCallback((key, amount) => () => {
@@ -110,9 +118,9 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
             setError(null);
             controller.getImageList(firebaseUid, eventID, 1)
                 .then(response => {
+                // TODO need do pagination for this one
                 batchActions.syncAdjustment(response.gallery.map(mapToImageAdjustmentConfig));
-                const mappedData = response.gallery.map(mapGalleryToPhotoData);
-                setImageCollection(mappedData);
+                setImageCollection(response.gallery);
             })
                 .catch(err => {
                 console.error("Failed to fetch image list:", err);
@@ -123,21 +131,8 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
             });
         }
     }, [eventID, firebaseUid, controller]);
-    useEffect(() => {
-        // react the changes in the batch state
-        if (currentBatch.allImages) {
-            setImageCollection((current) => {
-                const updated = current.map((image) => {
-                    const adjustment = currentBatch.allImages[image.key];
-                    return adjustment ? { ...image, ...adjustment } : image;
-                });
-                return updated;
-            });
-            console.log("Adjustment changed detected");
-        }
-    }, [currentBatch.allImages]);
     return {
-        imageCollection,
+        imageData,
         isLoading,
         error,
         selectedIds,

package/dist/index.d.ts

@@ -21,10 +21,8 @@ export { default as HWatermarkView } from './components/editor/HWatermarkView';
 export { default as HModalMobile } from './components/editor/HModalMobile';
 export { default as HPresetOptionsMenu } from './components/editor/HPresetOptionMenu';
 export { HAlertInternetBox, HAlertCopyBox, HAlertInternetConnectionBox, HAlertPresetSave } from './components/editor/HAlertBox';
-export { AlbumImageGallery, ExtendedPhotoData } from './components/editor/GalleryAlbum/AlbumImageGallery';
+export { AlbumImageGallery } from './components/editor/GalleryAlbum/AlbumImageGallery';
 export { default as GalleryImageItem } from './components/editor/GalleryAlbum/ImageItem';
-export { default as SimplifiedAlbumGallery } from './components/editor/GalleryAlbum/SimplifiedAlbumGallery';
-export { default as SimplifiedImageItem } from './components/editor/GalleryAlbum/SimplifiedImageItem';
 export { EditorProvider, useEditorContext } from './lib/context/EditorContext';
 export { useImageProcessor } from './lib/hooks/useImageProcessor';
 export { useEditorHeadless } from './lib/hooks/useEditorHeadless';

package/dist/index.js

@@ -20,8 +20,6 @@ export { default as HPresetOptionsMenu } from './components/editor/HPresetOption
 export { HAlertInternetBox, HAlertCopyBox, HAlertInternetConnectionBox, HAlertPresetSave } from './components/editor/HAlertBox';
 export { AlbumImageGallery } from './components/editor/GalleryAlbum/AlbumImageGallery';
 export { default as GalleryImageItem } from './components/editor/GalleryAlbum/ImageItem';
-export { default as SimplifiedAlbumGallery } from './components/editor/GalleryAlbum/SimplifiedAlbumGallery';
-export { default as SimplifiedImageItem } from './components/editor/GalleryAlbum/SimplifiedImageItem';
 export { EditorProvider, useEditorContext } from './lib/context/EditorContext';
 export { useImageProcessor } from './lib/hooks/useImageProcessor';
 export { useEditorHeadless } from './lib/hooks/useEditorHeadless';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yogiswara/honcho-editor-ui",
-  "version": "2.2.5",
+  "version": "2.2.7",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",