@yogiswara/honcho-editor-ui 1.3.4 → 1.3.6

package/dist/components/editor/HDialogCopy.js

@@ -76,5 +76,5 @@ export function HDialogPreset(props) {
         color: colors.onSurface,
         '&.Mui-checked, &.Mui-indeterminate': { color: colors.onSurface },
     };
-    return (_jsxs(Stack, { direction: "column", spacing: 1, sx: { padding: 0, margin: 0, width: '100%' }, children: [_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: "Color", control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isColorParentChecked, indeterminate: isColorParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.labelMedium, color: colors.onSurface }, children: `${colorCheckedCount}/${colorValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('color'), size: "small", children: _jsx(ExpandMoreIcon, { sx: { colors: colors.background, transition: 'transform 0.3s', transform: props.expanded.color ? 'rotate(180deg)' : 'rotate(0deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.color, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: "Temperature", control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "temperature", checked: props.colorChecks.temperature, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: "Tint", control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "tint", checked: props.colorChecks.tint, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: "Vibrance", control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "vibrance", checked: props.colorChecks.vibrance, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: "Saturation", control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "saturation", checked: props.colorChecks.saturation, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: "Light", control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isLightParentChecked, indeterminate: isLightParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.labelMedium, color: colors.onSurface }, children: `${lightCheckedCount}/${lightValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('light'), size: "small", children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: props.expanded.light ? 'rotate(180deg)' : 'rotate(0deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.light, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: "Exposure", control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "exposure", checked: props.lightChecks.exposure, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: "Contrast", control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "contrast", checked: props.lightChecks.contrast, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: "Highlights", control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "highlights", checked: props.lightChecks.highlights, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: "Shadows", control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "shadows", checked: props.lightChecks.shadows, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: "Whites", control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "whites", checked: props.lightChecks.whites, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: "Blacks", control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "blacks", checked: props.lightChecks.blacks, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: "Details", control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isDetailsParentChecked, indeterminate: isDetailsParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setDetailsChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.labelMedium, color: colors.onSurface }, children: `${detailsCheckedCount}/${detailsValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('details'), size: "small", children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: props.expanded.details ? 'rotate(180deg)' : 'rotate(0deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.details, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: "Clarity", control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "clarity", checked: props.detailsChecks.clarity, onChange: (e) => props.onChildChange(e, props.setDetailsChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: "Sharpness", control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "sharpness", checked: props.detailsChecks.sharpness, onChange: (e) => props.onChildChange(e, props.setDetailsChecks), sx: checkboxStyle }) })] }) })] })] }));
+    return (_jsxs(Stack, { direction: "column", spacing: 1, sx: { padding: 0, margin: 0, width: '100%' }, children: [_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Color" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isColorParentChecked, indeterminate: isColorParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${colorCheckedCount}/${colorValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('color'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { colors: colors.background, transition: 'transform 0.3s', transform: props.expanded.color ? 'rotate(180deg)' : 'rotate(0deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.color, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Temperature" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "temperature", checked: props.colorChecks.temperature, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Tint" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "tint", checked: props.colorChecks.tint, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Vibrance" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "vibrance", checked: props.colorChecks.vibrance, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Saturation" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "saturation", checked: props.colorChecks.saturation, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Light" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isLightParentChecked, indeterminate: isLightParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${lightCheckedCount}/${lightValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('light'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: props.expanded.light ? 'rotate(180deg)' : 'rotate(0deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.light, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Exposure" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "exposure", checked: props.lightChecks.exposure, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Contrast" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "contrast", checked: props.lightChecks.contrast, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Highlights" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "highlights", checked: props.lightChecks.highlights, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Shadows" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "shadows", checked: props.lightChecks.shadows, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Whites" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "whites", checked: props.lightChecks.whites, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Blacks" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "blacks", checked: props.lightChecks.blacks, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Details" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isDetailsParentChecked, indeterminate: isDetailsParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setDetailsChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${detailsCheckedCount}/${detailsValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('details'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: props.expanded.details ? 'rotate(180deg)' : 'rotate(0deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.details, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Clarity" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "clarity", checked: props.detailsChecks.clarity, onChange: (e) => props.onChildChange(e, props.setDetailsChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Sharpness" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "sharpness", checked: props.detailsChecks.sharpness, onChange: (e) => props.onChildChange(e, props.setDetailsChecks), sx: checkboxStyle }) })] }) })] })] }));
 }

package/dist/hooks/editor/useHonchoEditor.js

@@ -292,6 +292,7 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
         }
     }, [controller, loadImageFromUrl]);
     const handlePrev = useCallback(async (firebaseUid) => {
+        console.log("[DEBUG] handlePrev function was called.");
         // Find the current image index
         const currentIndex = imageList.findIndex(img => img.id === currentImageId);
         // If not the first image, go to previous
@@ -303,6 +304,7 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
         }
     }, [imageList, currentImageId]);
     const handleNext = useCallback(async (firebaseUid) => {
+        console.log("[DEBUG] handleNext function was called.");
         const currentIndex = imageList.findIndex(img => img.id === currentImageId);
         // Condition 1: We are at the last image of the currently loaded list.
         if (currentIndex === imageList.length - 1) {

package/package.json

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