@yogiswara/honcho-editor-ui 2.11.0 → 2.11.2

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

@@ -1,9 +1,18 @@
 import React from "react";
+type SubTab = {
+    value: string;
+    label: string;
+    inactiveIcon?: string;
+    activeIcon?: string;
+};
 interface Props {
     activePanelMobile: string;
     activeSubPanel: string;
     setActivePanelMobile: (tab: string) => void;
-    subNavigation: React.ReactNode;
+    setActiveSubPanel: (subTab: string) => void;
+    subTabs: {
+        [key: string]: SubTab[];
+    };
     panelContent: React.ReactNode;
     panelRef: React.RefObject<HTMLDivElement>;
     contentRef: React.RefObject<HTMLDivElement | null>;

package/dist/components/editor/HImageEditorMobile.js

@@ -1,11 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Paper, Stack } from "@mui/material";
-// The hardcoded `subTabs` and `renderPanelContent` are now removed.
+import { Box, Paper, Stack, BottomNavigation, BottomNavigationAction, CardMedia } from "@mui/material";
 export default function HImageEditorMobile(props) {
-    // The handleChange function now only needs the renamed prop
     const handleChange = (event, newValue) => {
         props.setActivePanelMobile(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));
+                }) }) }));
+    };
     return (_jsx(Paper, { elevation: 0, sx: {
             id: 'HImageEditorMobile',
             position: 'fixed',
@@ -38,5 +53,5 @@ export default function HImageEditorMobile(props) {
                                 overflowY: 'auto',
                                 scrollbarWidth: 'none',
                                 '&::-webkit-scrollbar': { display: 'none' },
-                            }, children: props.panelContent })] })), props.subNavigation] }) }));
+                            }, children: props.panelContent })] })), renderSubNavigation()] }) }));
 }

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.0",
+  "version": "2.11.2",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",