add collapsed property

Author: iamfaran

client/packages/lowcoder/src/comps/comps/layout/layoutMenuItemComp.tsx

@@ -1,6 +1,7 @@
 import { MultiBaseComp } from "lowcoder-core";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
-import { valueComp } from "comps/generators";
+import { BoolControl } from "comps/controls/boolControl";
+import { valueComp, withPropertyViewFn } from "comps/generators";
 import { list } from "comps/generators/list";
 import {
   parseChildrenFromValueAndChildrenMap,
@@ -16,16 +17,21 @@ import { genRandomKey } from "comps/utils/idGenerator";
 import { LayoutActionComp } from "comps/comps/layout/layoutActionComp";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 
+// BoolControl without property view (internal state only)
+const CollapsedControl = withPropertyViewFn(BoolControl, () => null);
+
 const childrenMap = {
   label: StringControl,
   hidden: BoolCodeControl,
   action: LayoutActionComp,
+  collapsed: CollapsedControl, // tree editor collapsed state
   itemKey: valueComp<string>(""),
   icon: IconControl,
 };
 
 type ChildrenType = ToInstanceType<typeof childrenMap> & {
   items: InstanceType<typeof LayoutMenuItemListComp>;
+  collapsed: InstanceType<typeof CollapsedControl>;
 };
 
 /**
@@ -73,6 +79,14 @@ export class LayoutMenuItemComp extends MultiBaseComp<ChildrenType> {
   getItemKey() {
     return this.children.itemKey.getView();
   }
+
+  getCollapsed(): boolean {
+    return this.children.collapsed.getView();
+  }
+
+  setCollapsed(collapsed: boolean) {
+    this.children.collapsed.dispatchChangeValueAction(collapsed);
+  }
 }
 
 const LayoutMenuItemCompMigrate = migrateOldData(LayoutMenuItemComp, (oldData: any) => {

client/packages/lowcoder/src/comps/comps/navComp/components/MenuItemList.tsx

@@ -2,7 +2,7 @@ import { SortableTree, TreeItems, TreeItemComponentProps, SimpleTreeItemWrapper
 import LinkPlusButton from "components/LinkPlusButton";
 import { BluePlusIcon, controlItem, ScrollBar } from "lowcoder-design";
 import { trans } from "i18n";
-import React, { useMemo, useCallback, createContext, useContext, useState } from "react";
+import React, { useMemo, useCallback, createContext, useContext } from "react";
 import styled from "styled-components";
 import { NavCompType, NavListCompType, NavTreeItemData } from "./types";
 import MenuItem from "./MenuItem";
@@ -105,68 +105,42 @@ interface IMenuItemListProps {
 
 const menuItemLabel = trans("navigation.itemsDesc");
 
-type TreeChangeReason = { type: string };
-
 // Convert NavCompType[] to TreeItems format for dnd-kit-sortable-tree
 function convertToTreeItems(
   items: NavCompType[],
-  basePath: number[] = [],
-  collapsedIds: Set<string> = new Set()
+  basePath: number[] = []
 ): 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,
-      collapsed: collapsedIds.has(id),
+      collapsed,
       comp: item,
       path: path,
       children: subItems.length > 0 
-        ? convertToTreeItems(subItems, path, collapsedIds) 
+        ? convertToTreeItems(subItems, path) 
         : [],
     };
   });
 }
 
-function extractCollapsedIds(treeItems: TreeItems<NavTreeItemData>): Set<string> {
-  const ids = new Set<string>();
-  const walk = (items: TreeItems<NavTreeItemData>) => {
-    items.forEach((item) => {
-      if (item.collapsed) {
-        ids.add(String(item.id));
-      }
-      if (item.children?.length) {
-        walk(item.children);
-      }
-    });
-  };
-  walk(treeItems);
-  return ids;
-}
-
 function MenuItemList(props: IMenuItemListProps) {
   const { items, onAddItem, onDeleteItem, onAddSubItem, onReorderItems } = props;
 
-  const [collapsedIds, setCollapsedIds] = useState<Set<string>>(() => new Set());
-
   // Convert items to tree format
-  const treeItems = useMemo(() => convertToTreeItems(items, [], collapsedIds), [items, collapsedIds]);
+  const treeItems = useMemo(() => convertToTreeItems(items), [items]);
 
-  // Handle tree changes from drag and drop
+  // Handle all tree changes (drag/drop, collapse/expand)
   const handleItemsChanged = useCallback(
-    (newItems: TreeItems<NavTreeItemData>, reason: TreeChangeReason) => {
-      // Persist collapsed/expanded state locally (SortableTree is controlled by `items` prop)
-      setCollapsedIds(extractCollapsedIds(newItems));
-
-      // Only rewrite the underlying nav structure when the tree structure actually changed.
-      // (If we rebuild on collapsed/expanded, it immediately resets the UI and looks like "toggle does nothing".)
-      if (reason.type === "dropped" || reason.type === "removed") {
-        onReorderItems(newItems);
-      }
+    (newItems: TreeItems<NavTreeItemData>) => {
+      onReorderItems(newItems);
     },
     [onReorderItems]
   );
@@ -227,14 +201,14 @@ export function menuPropertyView(itemsComp: NavListCompType) {
     return getItemListByPath(path.slice(1), root.getView()[path[0]].children.items);
   };
 
-  // Convert flat tree structure back to nested comp structure
+  // Convert tree structure back to nested comp structure
   const handleReorderItems = (newItems: TreeItems<NavTreeItemData>) => {
-    // Build the new order from tree items
     const buildJsonFromTree = (treeItems: TreeItems<NavTreeItemData>): any[] => {
       return treeItems.map((item) => {
         const jsonValue = item.comp.toJsonValue() as Record<string, any>;
         return {
           ...jsonValue,
+          collapsed: item.collapsed ?? false, // sync collapsed from tree item
           items: item.children && item.children.length > 0
             ? buildJsonFromTree(item.children)
             : [],
@@ -243,9 +217,6 @@ export function menuPropertyView(itemsComp: NavListCompType) {
     };
 
     const newJson = buildJsonFromTree(newItems);
-    
-    // Use setChildrensAction for atomic update instead of delete-all/add-all
-    // This is more efficient and prevents UI glitches from multiple re-renders
     itemsComp.dispatch(itemsComp.setChildrensAction(newJson));
   };
 

client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx

@@ -1,6 +1,7 @@
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
+import { BoolControl } from "comps/controls/boolControl";
 import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
-import { valueComp } from "comps/generators";
+import { valueComp, withPropertyViewFn } from "comps/generators";
 import { list } from "comps/generators/list";
 import { parseChildrenFromValueAndChildrenMap, ToViewReturn } from "comps/generators/multi";
 import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
@@ -14,12 +15,16 @@ import { IconControl } from "comps/controls/iconControl";
 
 const events = [clickEvent];
 
+// BoolControl without property view (internal state only)
+const CollapsedControl = withPropertyViewFn(BoolControl, () => null);
+
 const childrenMap = {
   label: StringControl,
   icon: IconControl,
   hidden: BoolCodeControl,
   disabled: BoolCodeControl,
   active: BoolCodeControl,
+  collapsed: CollapsedControl, // tree editor collapsed state
   itemKey: valueComp<string>(""),
   onEvent: withDefault(eventHandlerControl(events), [
     {
@@ -38,6 +43,7 @@ type ChildrenType = {
   hidden: InstanceType<typeof BoolCodeControl>;
   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>>;
@@ -80,6 +86,14 @@ export class NavItemComp extends MultiBaseComp<ChildrenType> {
     return this.children.itemKey.getView();
   }
 
+  getCollapsed(): boolean {
+    return this.children.collapsed.getView();
+  }
+
+  setCollapsed(collapsed: boolean) {
+    this.children.collapsed.dispatchChangeValueAction(collapsed);
+  }
+
   exposingNode(): RecordNode<NavItemExposing> {
     return fromRecord({
       label: this.children.label.exposingNode(),