Merge pull request #2038 from iamfaran/fix/2021-nav-dropdown

raheeliftikhar5 · web-flow · commit 62e1afab9d0a · 2025-10-13T23:52:40.000-07:00
Add Map Mode for NavComponent
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/components/NavItemsControl.tsx b/client/packages/lowcoder/src/comps/comps/navComp/components/NavItemsControl.tsx
@@ -0,0 +1,77 @@
+import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
+import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
+import { MultiCompBuilder } from "comps/generators/multi";
+import { dropdownControl } from "comps/controls/dropdownControl";
+import { mapOptionsControl } from "comps/controls/optionsControl";
+import { trans } from "i18n";
+import { navListComp } from "../navItemComp";
+import { controlItem } from "lowcoder-design";
+import { menuPropertyView } from "./MenuItemList";
+
+export function createNavItemsControl() {
+  const OptionTypes = [
+    { label: trans("prop.manual"), value: "manual" },
+    { label: trans("prop.map"), value: "map" },
+  ] as const;
+
+  const NavMapOption = new MultiCompBuilder(
+    {
+      label: StringControl,
+      hidden: BoolCodeControl,
+      disabled: BoolCodeControl,
+      active: BoolCodeControl,
+      onEvent: eventHandlerControl([clickEvent]),
+    },
+    (props) => props
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.label.propertyView({ label: trans("label"), placeholder: "{{item}}" })}
+        {children.active.propertyView({ label: trans("navItemComp.active") })}
+        {children.hidden.propertyView({ label: trans("hidden") })}
+        {children.disabled.propertyView({ label: trans("disabled") })}
+        {children.onEvent.getPropertyView()}
+      </>
+    ))
+    .build();
+
+  const TmpNavItemsControl = new MultiCompBuilder(
+    {
+      optionType: dropdownControl(OptionTypes, "manual"),
+      manual: navListComp(),
+      mapData: mapOptionsControl(NavMapOption),
+    },
+    (props) => {
+      return props.optionType === "manual" ? props.manual : props.mapData;
+    }
+  )
+    .setPropertyViewFn(() => {
+      throw new Error("Method not implemented.");
+    })
+    .build();
+
+  return class NavItemsControl extends TmpNavItemsControl {
+    exposingNode() {
+      return this.children.optionType.getView() === "manual"
+        ? (this.children.manual as any).exposingNode()
+        : (this.children.mapData as any).exposingNode();
+    }
+
+    propertyView() {
+      const isManual = this.children.optionType.getView() === "manual";
+      const content = isManual
+        ? menuPropertyView(this.children.manual as any)
+        : this.children.mapData.getPropertyView();
+
+      return controlItem(
+        { searchChild: true },
+        <>
+          {this.children.optionType.propertyView({ radioButton: true, type: "oneline" })}
+          {content}
+        </>
+      );
+    }
+  };
+}
+
+
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
@@ -1,9 +1,10 @@
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
+import { MultiCompBuilder } from "comps/generators/multi";
 import { UICompBuilder, withDefault } from "comps/generators";
 import { Section, sectionNames } from "lowcoder-design";
 import styled from "styled-components";
 import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
-import { StringControl } from "comps/controls/codeControl";
+import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { alignWithJustifyControl } from "comps/controls/alignControl";
 import { navListComp } from "./navItemComp";
 import { menuPropertyView } from "./components/MenuItemList";
@@ -22,6 +23,8 @@ import { trans } from "i18n";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { controlItem } from "lowcoder-design";
+import { createNavItemsControl } from "./components/NavItemsControl";
 
 type IProps = {
   $justify: boolean;
@@ -63,11 +66,12 @@ const Item = styled.div<{
   $padding: string;
   $textTransform:string;
   $textDecoration:string;
+  $disabled?: boolean;
 }>`
   height: 30px;
   line-height: 30px;
   padding: ${(props) => props.$padding ? props.$padding : '0 16px'};
-  color: ${(props) => (props.$active ? props.$activeColor : props.$color)};
+  color: ${(props) => props.$disabled ? `${props.$color}80` : (props.$active ? props.$activeColor : props.$color)};
   font-weight: ${(props) => (props.$textWeight ? props.$textWeight : 500)};
   font-family:${(props) => (props.$fontFamily ? props.$fontFamily : 'sans-serif')};
   font-style:${(props) => (props.$fontStyle ? props.$fontStyle : 'normal')};
@@ -77,8 +81,8 @@ const Item = styled.div<{
   margin:${(props) => props.$margin ? props.$margin : '0px'};
   
   &:hover {
-    color: ${(props) => props.$activeColor};
-    cursor: pointer;
+    color: ${(props) => props.$disabled ? (props.$active ? props.$activeColor : props.$color) : props.$activeColor};
+    cursor: ${(props) => props.$disabled ? 'not-allowed' : 'pointer'};
   }
 
   .anticon {
@@ -131,41 +135,74 @@ function fixOldStyleData(oldData: any) {
   return oldData;
 }
 
+function fixOldItemsData(oldData: any) {
+  if (Array.isArray(oldData)) {
+    return {
+      optionType: "manual",
+      manual: oldData,
+    };
+  }
+  if (oldData && !oldData.optionType && Array.isArray(oldData.manual)) {
+    return {
+      optionType: "manual",
+      manual: oldData.manual,
+    };
+  }
+  return oldData;
+}
+
 const childrenMap = {
   logoUrl: StringControl,
   logoEvent: withDefault(eventHandlerControl(logoEventHandlers), [{ name: "click" }]),
   horizontalAlignment: alignWithJustifyControl(),
   style: migrateOldData(styleControl(NavigationStyle, 'style'), fixOldStyleData),
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
-  items: withDefault(navListComp(), [
-    {
-      label: trans("menuItem") + " 1",
-    },
-  ]),
+  items: withDefault(migrateOldData(createNavItemsControl(), fixOldItemsData), {
+    optionType: "manual",
+    manual: [
+      {
+        label: trans("menuItem") + " 1",
+      },
+    ],
+  }),
 };
 
 const NavCompBase = new UICompBuilder(childrenMap, (props) => {
   const data = props.items;
   const items = (
     <>
-      {data.map((menuItem, idx) => {
-        const { hidden, label, items, active, onEvent } = menuItem.getView();
+      {data.map((menuItem: any, idx: number) => {
+        const isCompItem = typeof menuItem?.getView === "function";
+        const view = isCompItem ? menuItem.getView() : menuItem;
+        const hidden = !!view?.hidden;
         if (hidden) {
           return null;
         }
-        const subMenuItems: Array<{ key: string; label: string }> = [];
+
+        const label = view?.label;
+        const active = !!view?.active;
+        const onEvent = view?.onEvent;
+        const disabled = !!view?.disabled;
+        const subItems = isCompItem ? view?.items : [];
+
+        const subMenuItems: Array<{ key: string; label: any; disabled?: boolean }> = [];
         const subMenuSelectedKeys: Array<string> = [];
-        items.forEach((subItem, originalIndex) => {
-          if (subItem.children.hidden.getView()) {
-            return;
-          }
-          const key = originalIndex + "";
-          subItem.children.active.getView() && subMenuSelectedKeys.push(key);
-          subMenuItems.push({
-            key: key,
-            label: subItem.children.label.getView(),
+
+        if (Array.isArray(subItems)) {
+          subItems.forEach((subItem: any, originalIndex: number) => {
+            if (subItem.children.hidden.getView()) {
+              return;
+            }
+            const key = originalIndex + "";
+            subItem.children.active.getView() && subMenuSelectedKeys.push(key);
+            subMenuItems.push({
+              key: key,
+              label: subItem.children.label.getView(),
+              disabled: !!subItem.children.disabled.getView(),
+            });
           });
-        });
+        }
+
         const item = (
           <Item
             key={idx}
@@ -180,18 +217,23 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
             $textTransform={props.style.textTransform}
             $textDecoration={props.style.textDecoration}
             $margin={props.style.margin}
-            onClick={() => onEvent("click")}
+            $disabled={disabled}
+            onClick={() => { if (!disabled && onEvent) onEvent("click"); }}
           >
             {label}
-            {items.length > 0 && <DownOutlined />}
+            {Array.isArray(subItems) && subItems.length > 0 && <DownOutlined />}
           </Item>
         );
         if (subMenuItems.length > 0) {
           const subMenu = (
             <StyledMenu
               onClick={(e) => {
-                const { onEvent: onSubEvent } = items[Number(e.key)]?.getView();
-                onSubEvent("click");
+                if (disabled) return;
+                const subItem = subItems[Number(e.key)];
+                const isSubDisabled = !!subItem?.children?.disabled?.getView?.();
+                if (isSubDisabled) return;
+                const onSubEvent = subItem?.getView()?.onEvent;
+                onSubEvent && onSubEvent("click");
               }}
               selectedKeys={subMenuSelectedKeys}
               items={subMenuItems}
@@ -201,6 +243,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
             <Dropdown
               key={idx}
               popupRender={() => subMenu}
+              disabled={disabled}
             >
               {item}
             </Dropdown>
@@ -237,7 +280,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
     return (
       <>
         <Section name={sectionNames.basic}>
-          {menuPropertyView(children.items)}
+          {children.items.propertyView()}
         </Section>
 
         {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx
@@ -3,7 +3,7 @@ import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerCont
 import { list } from "comps/generators/list";
 import { parseChildrenFromValueAndChildrenMap, ToViewReturn } from "comps/generators/multi";
 import { withDefault } from "comps/generators/simpleGenerators";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import _ from "lodash";
 import { fromRecord, MultiBaseComp, Node, RecordNode, RecordNodeToValue } from "lowcoder-core";
@@ -14,6 +14,7 @@ const events = [clickEvent];
 const childrenMap = {
   label: StringControl,
   hidden: BoolCodeControl,
+  disabled: BoolCodeControl,
   active: BoolCodeControl,
   onEvent: withDefault(eventHandlerControl(events), [
     {
@@ -29,6 +30,7 @@ const childrenMap = {
 type ChildrenType = {
   label: InstanceType<typeof StringControl>;
   hidden: InstanceType<typeof BoolCodeControl>;
+  disabled: InstanceType<typeof BoolCodeControl>;
   active: InstanceType<typeof BoolCodeControl>;
   onEvent: InstanceType<ReturnType<typeof eventHandlerControl>>;
   items: InstanceType<ReturnType<typeof navListComp>>;
@@ -45,6 +47,7 @@ export class NavItemComp extends MultiBaseComp<ChildrenType> {
         {this.children.label.propertyView({ label: trans("label") })}
         {hiddenPropertyView(this.children)}
         {this.children.active.propertyView({ label: trans("navItemComp.active") })}
+        {disabledPropertyView(this.children)}
         {this.children.onEvent.propertyView({ inline: true })}
       </>
     );
@@ -69,6 +72,7 @@ export class NavItemComp extends MultiBaseComp<ChildrenType> {
     return fromRecord({
       label: this.children.label.exposingNode(),
       hidden: this.children.hidden.exposingNode(),
+      disabled: this.children.disabled.exposingNode(),
       active: this.children.active.exposingNode(),
       items: this.children.items.exposingNode(),
     });
@@ -78,6 +82,7 @@ export class NavItemComp extends MultiBaseComp<ChildrenType> {
 type NavItemExposing = {
   label: Node<string>;
   hidden: Node<boolean>;
+  disabled: Node<boolean>;
   active: Node<boolean>;
   items: Node<RecordNodeToValue<NavItemExposing>[]>;
 };
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -26,6 +26,8 @@ export const en = {
   "text": "Text",
   "basic": "Basic",
   "label": "Label",
+  "hidden": "Hidden",
+  "disabled": "Disabled",
   "layout": "Layout",
   "color": "Color",
   "form": "Form",
@@ -3204,7 +3206,7 @@ export const en = {
     "logoURL": "Navigation Logo URL",
     "horizontalAlignment": "Horizontal Alignment",
     "logoURLDesc": "You can display a Logo on the left side by entering URI Value or Base64 String like data:image/png;base64,AAA... CCC",
-    "itemsDesc": "Hierarchical Navigation Menu Items"
+    "itemsDesc": "Menu Items"
   },
   "droppadbleMenuItem": {
     "subMenu": "Submenu {number}"
