@yogiswara/honcho-editor-ui 2.11.0 → 2.11.1

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/package.json

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