@yogiswara/honcho-editor-ui 2.10.20 → 2.11.1

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

@@ -1,52 +1,23 @@
 import React from "react";
-import { AdjustmentState } from '../../hooks/editor/type';
-type Preset = {
-    id: string;
-    name: string;
+type SubTab = {
+    value: string;
+    label: string;
+    inactiveIcon?: string;
+    activeIcon?: string;
 };
 interface Props {
-    presets: Preset[];
-    activePanel: string;
+    activePanelMobile: string;
     activeSubPanel: string;
-    setActivePanel: (tab: string) => void;
+    setActivePanelMobile: (tab: string) => void;
     setActiveSubPanel: (subTab: string) => void;
-    innerRef?: React.Ref<HTMLDivElement>;
+    subTabs: {
+        [key: string]: SubTab[];
+    };
+    panelContent: React.ReactNode;
     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,43 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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" },
-    ],
-};
+import { Box, Paper, Stack, BottomNavigation, BottomNavigationAction, CardMedia } from "@mui/material";
 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.setActivePanel(newValue);
+        props.setActivePanelMobile(newValue);
     };
-    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;
-        }
+    // 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));
+                }) }) }));
     };
     return (_jsx(Paper, { elevation: 0, sx: {
             id: 'HImageEditorMobile',
@@ -71,23 +53,5 @@ export default function HImageEditorMobile(props) {
                                 overflowY: 'auto',
                                 scrollbarWidth: 'none',
                                 '&::-webkit-scrollbar': { display: 'none' },
-                            }, 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" } }) })] }) }) })] }) }));
+                            }, children: props.panelContent })] })), renderSubNavigation()] }) }));
 }

package/dist/index.d.ts

@@ -33,6 +33,8 @@ export { ImageSize, HonchoEditor, AdjustmentValues, AdjustmentRange, AdjustmentR
 export { default as HPresetDeleteDialog } from './components/editor/HPresetDelete';
 export { default as HModalDialog } from './components/modal/HModalDialog';
 export { default as HModalRename } from './components/modal/HModalRename';
+export { default as HTabColorAdjustmentMobile } from './components/editor/HTabColorAdjustmentMobile';
+export { default as HTabPresetMobile } from './components/editor/HTabPresetMobile';
 export { useAdjustmentHistory, type UseAdjustmentHistoryReturn, type HistoryInfo, type HistoryActions, type HistoryConfig } from './hooks/useAdjustmentHistory';
 export { useAdjustmentHistoryBatch, type UseAdjustmentHistoryBatchReturn, type BatchAdjustmentState, type ImageAdjustmentConfig, type BatchHistoryInfo, type BatchHistoryActions, type BatchHistoryConfig } from './hooks/useAdjustmentHistoryBatch';
 export { usePreset, type UsePresetReturn, type PresetInfo, type PresetActions, type PresetOptions } from './hooks/usePreset';

package/dist/index.js

@@ -32,6 +32,8 @@ export { HonchoEditor } from './lib/editor/honcho-editor';
 export { default as HPresetDeleteDialog } from './components/editor/HPresetDelete';
 export { default as HModalDialog } from './components/modal/HModalDialog';
 export { default as HModalRename } from './components/modal/HModalRename';
+export { default as HTabColorAdjustmentMobile } from './components/editor/HTabColorAdjustmentMobile';
+export { default as HTabPresetMobile } from './components/editor/HTabPresetMobile';
 // --- History Hooks ---
 export { useAdjustmentHistory } from './hooks/useAdjustmentHistory';
 export { useAdjustmentHistoryBatch } from './hooks/useAdjustmentHistoryBatch';

package/package.json

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