Merge pull request #2105 from iamfaran/feat/1109-nav-tree-items

[Feat]: #1109 nav tree items + navigation fixes

Author: FalkWolsky

client/packages/lowcoder-design/src/components/option.tsx

@@ -9,7 +9,7 @@ import { CSS } from "@dnd-kit/utilities";
 import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { ConstructorToComp, MultiCompConstructor } from "lowcoder-core";
 import { ReactComponent as WarnIcon } from "icons/v1/icon-warning-white.svg";
-import { DndContext } from "@dnd-kit/core";
+import { DndContext, DragEndEvent } from "@dnd-kit/core";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { ActiveTextColor, GreyTextColor } from "constants/style";
 import { trans } from "i18n/design";
@@ -225,12 +225,12 @@ function Option<T extends ConstructorToComp<MultiCompConstructor>>(props: {
     }
     return -1;
   };
-  const handleDragEnd = (e: { active: { id: string }; over: { id: string } | null }) => {
+  const handleDragEnd = (e: DragEndEvent) => {
     if (!e.over) {
       return;
     }
-    const fromIndex = findIndex(e.active.id);
-    const toIndex = findIndex(e.over.id);
+    const fromIndex = findIndex(String(e.active.id));
+    const toIndex = findIndex(String(e.over.id));
     if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) {
       return;
     }

client/packages/lowcoder/package.json

@@ -16,10 +16,10 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-sql": "^6.5.4",
     "@codemirror/search": "^6.5.5",
-    "@dnd-kit/core": "^5.0.1",
+    "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^7.0.0",
-    "@dnd-kit/sortable": "^6.0.0",
-    "@dnd-kit/utilities": "^3.1.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
@@ -48,6 +48,7 @@
     "copy-to-clipboard": "^3.3.3",
     "core-js": "^3.25.2",
     "dayjs": "^1.11.13",
+    "dnd-kit-sortable-tree": "^0.1.73",
     "echarts": "^5.4.3",
     "echarts-for-react": "^3.0.2",
     "echarts-wordcloud": "^2.1.0",

client/packages/lowcoder/src/comps/comps/formComp/createForm.tsx

@@ -28,7 +28,7 @@ import log from "loglevel";
 import { Datasource } from "@lowcoder-ee/constants/datasourceConstants";
 import DataSourceIcon from "components/DataSourceIcon";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
-import { DndContext } from "@dnd-kit/core";
+import { DndContext, DragEndEvent } from "@dnd-kit/core";
 import { SortableContext, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 
@@ -599,7 +599,7 @@ const CreateFormBody = (props: { onCreate: CreateHandler }) => {
     setItems(initItems);
   }, [dataSourceTypeConfig, tableStructure, form]);
 
-  const handleDragEnd = useCallback((e: { active: { id: string }; over: { id: string } | null }) => {
+  const handleDragEnd = useCallback((e: DragEndEvent) => {
     if (!e.over) {
       return;
     }

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/layout/navLayout.tsx

@@ -247,6 +247,12 @@ let NavTmpLayout = (function () {
       {
         label: trans("menuItem") + " 1",
         itemKey: genRandomKey(),
+        items: [
+          {
+            label: trans("subMenuItem") + " 1",
+            itemKey: genRandomKey(),
+          },
+        ],
       },
     ]),
     jsonItems: jsonControl(convertTreeData, jsonMenuItems),

client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx

@@ -22,7 +22,7 @@ import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
 import { AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
-import { DndContext } from "@dnd-kit/core";
+import { DndContext, DragEndEvent } from "@dnd-kit/core";
 import { SortableContext, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
@@ -354,7 +354,7 @@ export function ListView(props: Props) {
 
   useMergeCompStyles(childrenProps, comp.dispatch);
 
-  const handleDragEnd = (e: { active: { id: string }; over: { id: string } | null }) => {
+  const handleDragEnd = (e: DragEndEvent) => {
     if (!e.over) {
       return;
     }