[Feat]: #1109 add menu tree + animation + fallback fixes

iamfaran · iamfaran · commit 1b07123b2789 · 2026-01-02T18:46:30.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx
@@ -204,6 +204,12 @@ let NavTmpLayout = (function () {
       {
         label: trans("menuItem") + " 1",
         itemKey: genRandomKey(),
+        items: [
+          {
+            label: trans("subMenuItem") + " 1",
+            itemKey: genRandomKey(),
+          },
+        ],
       },
     ]),
     jsonItems: jsonControl(convertTreeData, jsonMenuItems),
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/components/MenuItem.tsx b/client/packages/lowcoder/src/comps/comps/navComp/components/MenuItem.tsx
@@ -66,8 +66,12 @@ const MenuItem: React.FC<IMenuItemProps> = (props) => {
         visible={isConfigPopShow}
         setVisible={showConfigPop}
       >
-        <MenuItemContent onClick={(e) => e.stopPropagation()}>
-          {item.children.label.getView()}
+        <MenuItemContent 
+          onClick={(e) => e.stopPropagation()}
+          onMouseDown={(e) => e.stopPropagation()}
+          onPointerDown={(e) => e.stopPropagation()}
+        >
+          {item.children.label.getView() || trans("untitled")}
         </MenuItemContent>
       </SimplePopover>
       <EditPopover
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/components/MenuItemList.tsx b/client/packages/lowcoder/src/comps/comps/navComp/components/MenuItemList.tsx
@@ -6,7 +6,7 @@ import React, { useMemo, useCallback, createContext, useContext } from "react";
 import styled from "styled-components";
 import { NavCompType, NavListCompType, NavTreeItemData } from "./types";
 import MenuItem from "./MenuItem";
-const MAX_DEPTH = 3;
+const MAX_DEPTH = 10;
 const Wrapper = styled.div`
   .menu-title {
     display: flex;
@@ -56,9 +56,8 @@ const NavTreeItemComponent = React.forwardRef<
 
   const handlers = useContext(MenuItemHandlersContext);
 
-  const hasChildren = item.children && item.children.length > 0;
   // allow adding sub-menu only if we are above the max depth (depth is 0-indexed)
-  const canAddSubMenu = depth < MAX_DEPTH - 1;
+  const canAddSubMenu = depth < MAX_DEPTH - 1 ;
 
   const handleDelete = () => {
     handlers?.onDeleteItem(path);
@@ -78,13 +77,19 @@ const NavTreeItemComponent = React.forwardRef<
       item={item}
       depth={depth}
       collapsed={collapsed}
+
+      
     >
-      <TreeItemContent onClick={(e) => e.stopPropagation()}>
+      <TreeItemContent 
+        onClick={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
+        onPointerDown={(e) => e.stopPropagation()}
+      >
         <MenuItem
           item={comp}
           onDelete={handleDelete}
           onAddSubMenu={handleAddSubMenu}
-          showAddSubMenu={(!hasChildren || depth === 0) && canAddSubMenu}
+          showAddSubMenu={canAddSubMenu}
         />
       </TreeItemContent>
     </SimpleTreeItemWrapper>
@@ -99,7 +104,6 @@ interface IMenuItemListProps {
   onAddItem: (path: number[], value?: any) => number;
   onDeleteItem: (path: number[]) => void;
   onAddSubItem: (path: number[], value: any, unshift?: boolean) => number;
-  onMoveItem: (path: number[], from: number, to: number) => void;
   onReorderItems: (newOrder: TreeItems<NavTreeItemData>) => void;
 }
 
@@ -112,15 +116,12 @@ function convertToTreeItems(
 ): TreeItems<NavTreeItemData> {
   return items.map((item, index) => {
     const path = [...basePath, index];
-    // Use stable itemKey if available, fallback to path-based ID for backwards compatibility
-    const itemKey = item.getItemKey?.() || "";
-    const id = itemKey || path.join("_");
     const subItems = item.getView().items || [];
     // Read collapsed state from the item itself
     const collapsed = item.getCollapsed?.() ?? false;
     
     return {
-      id,
+      id: path.join("_"),
       collapsed,
       comp: item,
       path: path,
@@ -170,6 +171,7 @@ function MenuItemList(props: IMenuItemListProps) {
               onItemsChanged={handleItemsChanged}
               TreeItemComponent={NavTreeItemComponent}
               indentationWidth={20}
+              sortableProps={{ animateLayoutChanges: () => false }}
             />
           </MenuItemHandlersContext.Provider>
         </ScrollBar>
@@ -237,9 +239,6 @@ export function menuPropertyView(itemsComp: NavListCompType) {
         item.addSubItem(value);
         return item.children.items.getView().length;
       }}
-      onMoveItem={(path: number[], from: number, to: number) => {
-        getItemListByPath(path).moveItem(from, to);
-      }}
       onReorderItems={handleReorderItems}
     />
   );
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
@@ -29,9 +29,6 @@ import {
   NavLayoutItemStyle,
   NavLayoutItemHoverStyle,
   NavLayoutItemActiveStyle,
-  NavSubMenuItemStyle,
-  NavSubMenuItemHoverStyle,
-  NavSubMenuItemActiveStyle,
 } from "comps/controls/styleControlConstants";
 import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
@@ -390,9 +387,7 @@ function renderAdvancedSection(children: any) {
 function renderStyleSections(
   children: any,
   styleSegment: MenuItemStyleOptionValue,
-  setStyleSegment: (k: MenuItemStyleOptionValue) => void,
-  subStyleSegment: MenuItemStyleOptionValue,
-  setSubStyleSegment: (k: MenuItemStyleOptionValue) => void
+  setStyleSegment: (k: MenuItemStyleOptionValue) => void
 ) {
   const isHamburger = children.displayMode.getView() === 'hamburger';
   return (
@@ -415,19 +410,6 @@ function renderStyleSections(
         {styleSegment === "hover" && children.navItemHoverStyle.getPropertyView()}
         {styleSegment === "active" && children.navItemActiveStyle.getPropertyView()}
       </Section>
-      <Section name={"Submenu Item Style"}>
-        {controlItem({}, (
-          <Segmented
-            block
-            options={menuItemStyleOptions as any}
-            value={subStyleSegment}
-            onChange={(k) => setSubStyleSegment(k as MenuItemStyleOptionValue)}
-          />
-        ))}
-        {subStyleSegment === "normal" && children.subNavItemStyle.getPropertyView()}
-        {subStyleSegment === "hover" && children.subNavItemHoverStyle.getPropertyView()}
-        {subStyleSegment === "active" && children.subNavItemActiveStyle.getPropertyView()}
-      </Section>
       {isHamburger && (
         <>
           <Section name={"Hamburger Button Style"}>
@@ -475,14 +457,30 @@ const childrenMap = {
   hamburgerButtonStyle: styleControl(HamburgerButtonStyle, 'hamburgerButtonStyle'),
   drawerContainerStyle: styleControl(DrawerContainerStyle, 'drawerContainerStyle'),
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
-  subNavItemStyle: styleControl(NavSubMenuItemStyle, 'subNavItemStyle'),
-  subNavItemHoverStyle: styleControl(NavSubMenuItemHoverStyle, 'subNavItemHoverStyle'),
-  subNavItemActiveStyle: styleControl(NavSubMenuItemActiveStyle, 'subNavItemActiveStyle'),
   items: withDefault(migrateOldData(createNavItemsControl(), fixOldItemsData), {
     optionType: "manual",
     manual: [
       {
         label: trans("menuItem") + " 1",
+        items: [  
+          {
+            label: trans("subMenuItem") + " 1",
+            items: [
+              {
+                label: trans("subMenuItem") + " 1-1",
+              },
+              {
+                label: trans("subMenuItem") + " 1-2",
+              },
+            ],
+          },
+          {
+            label: trans("subMenuItem") + " 2",
+          },
+          {
+            label: trans("subMenuItem") + " 3",
+          }, 
+        ],
       },
     ],
   }),
@@ -505,7 +503,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
           return null;
         }
 
-        const label = view?.label;
+        const label = view?.label || trans("untitled");
         const icon = hasIcon(view?.icon) ? view.icon : undefined;
         const active = !!view?.active;
         const onEvent = view?.onEvent;
@@ -524,7 +522,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
               const children = buildSubMenuItems(subItem.getView()?.items, key);
               return {
                 key,
-                label: subItem.children.label.getView(),
+                label: subItem.children.label.getView() || trans("untitled"),
                 icon: subIcon,
                 disabled: !!subItem.children.disabled.getView(),
                 ...(children.length > 0 ? { children } : {}),
@@ -566,7 +564,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
         );
         if (subMenuItems.length > 0) {
           const subMenu = (
-            <ScrollBar style={{ height: "200px" }}>
+            <ScrollBar style={{ height: "200px", minWidth: "200px" }}>
               <StyledMenu
                 onClick={(e) => {
                   if (disabled) return;
@@ -588,22 +586,22 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
                   ...item,
                   icon: item.icon || undefined,
                 }))}
-                $color={(props.subNavItemStyle && props.subNavItemStyle.text) || props.style.text}
-                $hoverColor={(props.subNavItemHoverStyle && props.subNavItemHoverStyle.text) || props.style.accent}
-                $activeColor={(props.subNavItemActiveStyle && props.subNavItemActiveStyle.text) || props.style.accent}
-                $bg={(props.subNavItemStyle && props.subNavItemStyle.background) || undefined}
-                $hoverBg={(props.subNavItemHoverStyle && props.subNavItemHoverStyle.background) || undefined}
-                $activeBg={(props.subNavItemActiveStyle && props.subNavItemActiveStyle.background) || undefined}
-                $border={(props.subNavItemStyle && props.subNavItemStyle.border) || undefined}
-                $hoverBorder={(props.subNavItemHoverStyle && props.subNavItemHoverStyle.border) || undefined}
-                $activeBorder={(props.subNavItemActiveStyle && props.subNavItemActiveStyle.border) || undefined}
-                $radius={(props.subNavItemStyle && props.subNavItemStyle.radius) || undefined}
+                $color={props.style.text}
+                $hoverColor={props.style.accent}
+                $activeColor={props.style.accent}
+                $bg={undefined}
+                $hoverBg={undefined}
+                $activeBg={undefined}
+                $border={undefined}
+                $hoverBorder={undefined}
+                $activeBorder={undefined}
+                $radius={undefined}
                 $fontFamily={props.style.fontFamily}
                 $fontStyle={props.style.fontStyle}
                 $textWeight={props.style.textWeight}
                 $textSize={props.style.textSize}
-                $padding={(props.subNavItemStyle && props.subNavItemStyle.padding) || props.style.padding}
-                $margin={(props.subNavItemStyle && props.subNavItemStyle.margin) || props.style.margin}
+                $padding={props.style.padding}
+                $margin={props.style.margin}
                 $textTransform={props.style.textTransform}
                 $textDecoration={props.style.textDecoration}
               />
@@ -708,15 +706,14 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
     const showLogic = mode === "logic" || mode === "both";
     const showLayout = mode === "layout" || mode === "both";
     const [styleSegment, setStyleSegment] = useState<MenuItemStyleOptionValue>("normal");
-    const [subStyleSegment, setSubStyleSegment] = useState<MenuItemStyleOptionValue>("normal");
 
     return (
       <>
         {renderBasicSection(children)}
         {showLogic && renderInteractionSection(children)}
         {showLayout && renderLayoutSection(children)}
         {showLogic && renderAdvancedSection(children)}
-        {showLayout && renderStyleSections(children, styleSegment, setStyleSegment, subStyleSegment, setSubStyleSegment)}
+        {showLayout && renderStyleSections(children, styleSegment, setStyleSegment)}
       </>
     );
   })
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx
@@ -1,12 +1,11 @@
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
-import { valueComp, withPropertyViewFn } from "comps/generators";
+import { withPropertyViewFn } from "comps/generators";
 import { list } from "comps/generators/list";
 import { parseChildrenFromValueAndChildrenMap, ToViewReturn } from "comps/generators/multi";
 import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
-import { genRandomKey } from "comps/utils/idGenerator";
 import { trans } from "i18n";
 import _ from "lodash";
 import { fromRecord, MultiBaseComp, Node, RecordNode, RecordNodeToValue } from "lowcoder-core";
@@ -25,7 +24,6 @@ const childrenMap = {
   disabled: BoolCodeControl,
   active: BoolCodeControl,
   collapsed: CollapsedControl, // tree editor collapsed state
-  itemKey: valueComp<string>(""),
   onEvent: withDefault(eventHandlerControl(events), [
     {
       // name: "click",
@@ -44,7 +42,6 @@ type ChildrenType = {
   disabled: InstanceType<typeof BoolCodeControl>;
   active: InstanceType<typeof BoolCodeControl>;
   collapsed: InstanceType<typeof CollapsedControl>;
-  itemKey: InstanceType<ReturnType<typeof valueComp<string>>>;
   onEvent: InstanceType<ReturnType<typeof eventHandlerControl>>;
   items: InstanceType<ReturnType<typeof navListComp>>;
 };
@@ -82,10 +79,6 @@ export class NavItemComp extends MultiBaseComp<ChildrenType> {
     this.children.items.addItem(value);
   }
 
-  getItemKey(): string {
-    return this.children.itemKey.getView();
-  }
-
   getCollapsed(): boolean {
     return this.children.collapsed.getView();
   }
@@ -115,42 +108,31 @@ type NavItemExposing = {
   items: Node<RecordNodeToValue<NavItemExposing>[]>;
 };
 
-// Migrate old nav items to ensure they have a stable itemKey
+// Migrate old nav items to strip out deprecated itemKey field
 function migrateNavItemData(oldData: any): any {
   if (!oldData) return oldData;
   
-  const migrated = {
-    ...oldData,
-    itemKey: oldData.itemKey || genRandomKey(),
-  };
+  const { itemKey, ...rest } = oldData;
   
   // Also migrate nested items recursively
-  if (Array.isArray(oldData.items)) {
-    migrated.items = oldData.items.map((item: any) => migrateNavItemData(item));
+  if (Array.isArray(rest.items)) {
+    rest.items = rest.items.map((item: any) => migrateNavItemData(item));
   }
   
-  return migrated;
+  return rest;
 }
 
-const NavItemCompMigrate = migrateOldData(NavItemComp, migrateNavItemData);
+const NavItemCompMigrated = migrateOldData(NavItemComp, migrateNavItemData);
 
 export function navListComp() {
-  const NavItemListCompBase = list(NavItemCompMigrate);
+  const NavItemListCompBase = list(NavItemCompMigrated);
 
   return class NavItemListComp extends NavItemListCompBase {
     addItem(value?: any) {
       const data = this.getView();
       this.dispatch(
         this.pushAction(
-          value
-            ? {
-                ...value,
-                itemKey: value.itemKey || genRandomKey(),
-              }
-            : {
-                label: trans("menuItem") + " " + (data.length + 1),
-                itemKey: genRandomKey(),
-              }
+          value || { label: trans("menuItem") + " " + (data.length + 1) }
         )
       );
     }
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
