@yogiswara/honcho-editor-ui 2.11.1 → 2.11.3

package/dist/components/editor/HImageEditorMobile.d.ts

@@ -1,23 +1,52 @@
 import React from "react";
-type SubTab = {
-    value: string;
-    label: string;
-    inactiveIcon?: string;
-    activeIcon?: string;
+import { AdjustmentState } from '../../hooks/editor/type';
+type Preset = {
+    id: string;
+    name: string;
 };
 interface Props {
-    activePanelMobile: string;
+    presets: Preset[];
+    activePanel: string;
     activeSubPanel: string;
-    setActivePanelMobile: (tab: string) => void;
+    setActivePanel: (tab: string) => void;
     setActiveSubPanel: (subTab: string) => void;
-    subTabs: {
-        [key: string]: SubTab[];
-    };
-    panelContent: React.ReactNode;
+    innerRef?: React.Ref<HTMLDivElement>;
     panelRef: React.RefObject<HTMLDivElement>;
     contentRef: React.RefObject<HTMLDivElement | null>;
     panelHeight: number;
     handleDragStart: (e: React.MouseEvent | React.TouchEvent) => void;
+    onContentHeightChange: (height: number) => void;
+    tempScore: number;
+    tintScore: number;
+    vibranceScore: number;
+    saturationScore: number;
+    exposureScore: number;
+    highlightsScore: number;
+    shadowScore: number;
+    whiteScore: number;
+    blackScore: number;
+    contrastScore: number;
+    clarityScore: number;
+    sharpnessScore: number;
+    setTempScore: (field: keyof AdjustmentState, value: number) => void;
+    setTintScore: (field: keyof AdjustmentState, value: number) => void;
+    setVibranceScore: (field: keyof AdjustmentState, value: number) => void;
+    setSaturationScore: (field: keyof AdjustmentState, value: number) => void;
+    onExposureChange: (field: keyof AdjustmentState, value: number) => void;
+    onHighlightsChange: (field: keyof AdjustmentState, value: number) => void;
+    onShadowsChange: (field: keyof AdjustmentState, value: number) => void;
+    onWhitesChange: (field: keyof AdjustmentState, value: number) => void;
+    onBlacksChange: (field: keyof AdjustmentState, value: number) => void;
+    onContrastChange: (field: keyof AdjustmentState, value: number) => void;
+    onClarityChange: (field: keyof AdjustmentState, value: number) => void;
+    onSharpnessChange: (field: keyof AdjustmentState, value: number) => void;
+    isBatchMode: boolean;
+    onDragStart: () => void;
+    onDragEnd: () => void;
+    selectedPreset: string | null;
+    onSelectPreset: (id: string) => void;
+    onOpenPresetModal: () => void;
+    presetOptionModal: (event: React.MouseEvent<HTMLElement>, presetId: string) => void;
 }
 export default function HImageEditorMobile(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/editor/HImageEditorMobile.js

@@ -1,25 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Paper, Stack, BottomNavigation, BottomNavigationAction, CardMedia } from "@mui/material";
+import { BottomNavigation, BottomNavigationAction, Box, CardMedia, Paper, Stack } from "@mui/material";
+import useHonchoTypography from "../../themes/honchoTheme";
+import useColors from '../../themes/colors';
+import HTabColorAdjustmentMobile from "./HTabColorAdjustmentMobile";
+import HTabPresetMobile from "./HTabPresetMobile";
+// Data structure for the sub-navigation tabs
+const subTabs = {
+    colorAdjustment: [
+        { value: "color", label: "Color", inactiveIcon: "/v1/svg/new-mobile-coloAdjustment-notpress.svg", activeIcon: "/v1/svg/new-mobile-coloAdjustment-presssvg.svg" },
+        { value: "light", label: "Light", inactiveIcon: "/v1/svg/light-inactive-mobile.svg", activeIcon: "/v1/svg/light-active-mobile.svg" },
+        // { value: "details", label: "Details", inactiveIcon: "/v1/svg/details-inactive-mobile.svg", activeIcon: "/v1/svg/details-active-mobile.svg"},
+    ],
+    aspectRatio: [
+        { value: "portrait", label: "Portrait" },
+        { value: "square", label: "Square" },
+        { value: "wide", label: "Wide" },
+    ],
+    preset: [
+        { value: "Preset", label: "Preset", inactiveIcon: "/v1/svg/preset-inactive-mobile.svg", activeIcon: "/v1/svg/preset-active-mobile.svg" },
+    ],
+};
 export default function HImageEditorMobile(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    console.log(`[HImageEditorMobile TEMPERATURE] Rendering with tempScore: ${props.tempScore}, isBatchMode: ${props.isBatchMode}`);
     const handleChange = (event, newValue) => {
-        props.setActivePanelMobile(newValue);
+        props.setActivePanel(newValue);
     };
-    // This function is now back inside the component
-    const renderSubNavigation = () => {
-        const currentSubTabs = props.subTabs[props.activePanelMobile];
-        if (!currentSubTabs)
-            return null;
-        return (_jsx(Paper, { sx: { backgroundColor: 'black', borderRadius: "0px", px: "44px" }, elevation: 3, children: _jsx(BottomNavigation, { showLabels: true, sx: { backgroundColor: 'black', gap: '10px' }, children: currentSubTabs.map((tab) => {
-                    const isActive = props.activeSubPanel === tab.value;
-                    const iconSrc = isActive ? tab.activeIcon : tab.inactiveIcon;
-                    return (_jsx(BottomNavigationAction, { label: tab.label, value: tab.value, onClick: () => props.setActiveSubPanel(isActive ? '' : tab.value), icon: iconSrc && _jsx(CardMedia, { component: "img", image: iconSrc, sx: { width: "20px", height: "20px", mb: "5px" } }), sx: {
-                            color: isActive ? 'white' : 'grey',
-                            minWidth: 'auto', p: 0,
-                            '& .MuiBottomNavigationAction-label': {
-                                color: isActive ? 'white' : 'grey',
-                            }
-                        } }, tab.value));
-                }) }) }));
+    const currentSubTabs = subTabs[props.activePanel];
+    // Helper function to render the correct content inside the draggable panel
+    const renderPanelContent = () => {
+        switch (props.activePanel) {
+            case 'colorAdjustment':
+                return _jsx(HTabColorAdjustmentMobile, { activeSubPanel: props.activeSubPanel, innerRef: props.innerRef, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd, onExposureChange: props.onExposureChange, onContrastChange: props.onContrastChange, onHighlightsChange: props.onHighlightsChange, onShadowsChange: props.onShadowsChange, onWhitesChange: props.onWhitesChange, onBlacksChange: props.onBlacksChange, setTempScore: props.setTempScore, setTintScore: props.setTintScore, setVibranceScore: props.setVibranceScore, setSaturationScore: props.setSaturationScore, exposureScore: props.exposureScore, contrastScore: props.contrastScore, highlightsScore: props.highlightsScore, shadowScore: props.shadowScore, whiteScore: props.whiteScore, blackScore: props.blackScore, tempScore: props.tempScore, tintScore: props.tintScore, vibranceScore: props.vibranceScore, saturationScore: props.saturationScore, isBatchMode: props.isBatchMode, sharpnessScore: props.sharpnessScore, onSharpnessChange: props.onSharpnessChange, clarityScore: props.clarityScore, onClarityChange: props.onClarityChange });
+            case 'preset':
+                return _jsx(HTabPresetMobile, { ...props });
+            default:
+                return null;
+        }
     };
     return (_jsx(Paper, { elevation: 0, sx: {
             id: 'HImageEditorMobile',
@@ -53,5 +71,23 @@ export default function HImageEditorMobile(props) {
                                 overflowY: 'auto',
                                 scrollbarWidth: 'none',
                                 '&::-webkit-scrollbar': { display: 'none' },
-                            }, children: props.panelContent })] })), renderSubNavigation()] }) }));
+                            }, children: renderPanelContent() })] })), currentSubTabs && (_jsx(Paper, { sx: {
+                        backgroundColor: colors.onBackground,
+                        paddingTop: "10px",
+                        pb: "0px",
+                        mb: "0px",
+                        px: "44px",
+                        borderRadius: "0px",
+                    }, elevation: 3, children: _jsx(BottomNavigation, { showLabels: true, sx: { backgroundColor: colors.onBackground, gap: '10px' }, children: currentSubTabs.map((tab) => {
+                            const isActive = props.activeSubPanel === tab.value;
+                            const iconSrc = isActive ? tab.activeIcon : tab.inactiveIcon;
+                            return (_jsx(BottomNavigationAction, { label: tab.label, value: tab.value, onClick: () => props.setActiveSubPanel(isActive ? '' : tab.value), icon: iconSrc && _jsx(CardMedia, { component: "img", image: iconSrc, sx: { width: "20px", height: "20px", mb: "5px" } }), sx: {
+                                    color: isActive ? colors.surface : colors.onSurfaceVariant1,
+                                    minWidth: 'auto', p: 0,
+                                    '& .MuiBottomNavigationAction-label': {
+                                        ...typography.labelSmall,
+                                        color: isActive ? colors.surface : colors.onSurfaceVariant1,
+                                    }
+                                } }, tab.value));
+                        }) }) })), _jsx(Paper, { sx: { backgroundColor: colors.onBackground, borderRadius: "0px" }, elevation: 3, children: _jsx(Stack, { direction: "row", justifyContent: "center", alignItems: "center", sx: { pt: "0px", pb: "0px", mb: "0px", mr: "0px", ml: "0px" }, children: _jsxs(BottomNavigation, { value: props.activePanel, onChange: handleChange, sx: { backgroundColor: colors.onBackground }, children: [_jsx(BottomNavigationAction, { value: "colorAdjustment", sx: { px: '12px', py: '0px', minWidth: 'auto' }, icon: _jsx(CardMedia, { component: "img", image: props.activePanel === 'colorAdjustment' ? "/v1/svg/color-adjustment-active-mobile.svg" : "/v1/svg/color-adjustment-inactive-mobile.svg", sx: { width: "20px", height: "20px" } }) }), _jsx(BottomNavigationAction, { value: "preset", sx: { px: '12px', py: '0px', minWidth: 'auto' }, icon: _jsx(CardMedia, { component: "img", image: props.activePanel === 'preset' ? "/v1/svg/preset-and-watermark-active-mobile.svg" : "/v1/svg/preset-and-watermark-inactive-mobile.svg", sx: { width: "20px", height: "20px" } }) })] }) }) })] }) }));
 }

package/dist/components/editor/HSliderColorMobile.js

@@ -123,7 +123,7 @@ export default function HSliderColorMobile(props) {
                                 color: colors.surface,
                                 width: "40px", // Keep the fixed width for alignment
                                 textAlign: "right", // Keep the text alignment
-                            }, children: formatValue(props.tempScore) })] }), _jsx(Slider, { ref: tempSliderRef, sx: {
+                            }, children: formatValue(props.tempScore) })] }), _jsx(Slider, { sx: {
                         width: "100%",
                         color: colors.surface,
                         '& .MuiSlider-rail': {
@@ -140,12 +140,16 @@ export default function HSliderColorMobile(props) {
                             boxShadow: 'none',
                             pointerEvents: 'auto', // IMPORTANT: Re-enable interaction ONLY for the thumb
                         }
+                    }, slotProps: {
+                        thumb: {
+                            ref: tempSliderRef
+                        }
                     }, size: "small", value: props.tempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.setTempScore("tempScore", newValue), onDoubleClick: tempInput.handleDoubleClick }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: tintInput.handleDoubleClick, children: "Tint" }), _jsx(Typography, { sx: {
                                 ...typography.bodyMedium, // Use your standard typography
                                 color: colors.surface,
                                 width: "40px", // Keep the fixed width for alignment
                                 textAlign: "right", // Keep the text alignment
-                            }, children: formatValue(props.tintScore) })] }), _jsx(Slider, { ref: tintSliderRef, sx: {
+                            }, children: formatValue(props.tintScore) })] }), _jsx(Slider, { sx: {
                         width: "100%",
                         color: colors.surface,
                         '& .MuiSlider-rail': {
@@ -162,12 +166,16 @@ export default function HSliderColorMobile(props) {
                             boxShadow: 'none',
                             pointerEvents: 'auto',
                         }
+                    }, slotProps: {
+                        thumb: {
+                            ref: tintSliderRef
+                        }
                     }, size: "small", value: props.tintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.setTintScore("tintScore", newValue), onDoubleClick: tintInput.handleDoubleClick }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: vibranceInput.handleDoubleClick, children: "Vibrance" }), _jsx(Typography, { sx: {
                                 ...typography.bodyMedium, // Use your standard typography
                                 color: colors.surface,
                                 width: "40px", // Keep the fixed width for alignment
                                 textAlign: "right", // Keep the text alignment
-                            }, children: formatValue(props.vibranceScore) })] }), _jsx(Slider, { ref: vibranceSliderRef, sx: {
+                            }, children: formatValue(props.vibranceScore) })] }), _jsx(Slider, { sx: {
                         width: "100%",
                         color: colors.surface,
                         '& .MuiSlider-rail': {
@@ -184,12 +192,16 @@ export default function HSliderColorMobile(props) {
                             boxShadow: 'none',
                             pointerEvents: 'auto',
                         }
+                    }, slotProps: {
+                        thumb: {
+                            ref: vibranceSliderRef
+                        }
                     }, size: "small", value: props.vibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.setVibranceScore("vibranceScore", newValue), onDoubleClick: vibranceInput.handleDoubleClick }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: saturationInput.handleDoubleClick, children: "Saturation" }), _jsx(Typography, { sx: {
                                 ...typography.bodyMedium, // Use your standard typography
                                 color: colors.surface,
                                 width: "40px", // Keep the fixed width for alignment
                                 textAlign: "right", // Keep the text alignment
-                            }, children: formatValue(props.saturationScore) })] }), _jsx(Slider, { ref: saturationSliderRef, sx: {
+                            }, children: formatValue(props.saturationScore) })] }), _jsx(Slider, { sx: {
                         width: "100%",
                         color: colors.surface,
                         '& .MuiSlider-rail': {
@@ -206,5 +218,9 @@ export default function HSliderColorMobile(props) {
                             boxShadow: 'none',
                             pointerEvents: 'auto',
                         }
+                    }, slotProps: {
+                        thumb: {
+                            ref: saturationSliderRef
+                        }
                     }, size: "small", value: props.saturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.setSaturationScore("saturationScore", newValue), onDoubleClick: saturationInput.handleDoubleClick })] }) }));
 }

package/package.json

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