Merge branch 'dev' of github.com:lowcoder-org/lowcoder into feat/1289-customize-drawer-close

Author: iamfaran

client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx

@@ -30,7 +30,7 @@ import React, {
   useState,
   useContext,
 } from "react";
-import { arrayStringExposingStateControl } from "comps/controls/codeStateControl";
+import { arrayStringExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { RefControl } from "comps/controls/refControl";
 import { EditorContext } from "comps/editorState";
@@ -120,6 +120,7 @@ const BarcodeScannerComponent = React.lazy(
 const ScannerTmpComp = (function () {
   const childrenMap = {
     data: arrayStringExposingStateControl("data"),
+    value: stringExposingStateControl("value"),
     text: withDefault(StringControl, trans("scanner.text")),
     continuous: BoolControl,
     uniqueData: withDefault(BoolControl, true),
@@ -150,17 +151,27 @@ const ScannerTmpComp = (function () {
     }, [success, showModal]);
 
     const continuousValue = useRef<string[]>([]);
+    const seenSetRef = useRef<Set<string>>(new Set());
 
     const handleUpdate = (err: any, result: any) => {
       if (result) {
         if (props.continuous) {
-          continuousValue.current = [...continuousValue.current, result.text];
+          const scannedText: string = result.text;
+          if (props.uniqueData && seenSetRef.current.has(scannedText)) {
+            return;
+          }
+          continuousValue.current = [...continuousValue.current, scannedText];
+          if (props.uniqueData) {
+            seenSetRef.current.add(scannedText);
+          }
           const val = props.uniqueData
             ? [...new Set(continuousValue.current)]
             : continuousValue.current;
+          props.value.onChange(scannedText);
           props.data.onChange(val);
           props.onEvent("success");
         } else {
+          props.value.onChange(result.text);
           props.data.onChange([result.text]);
           setShowModal(false);
           setSuccess(true);
@@ -205,6 +216,7 @@ const ScannerTmpComp = (function () {
             props.onEvent("click");
             setShowModal(true);
             continuousValue.current = [];
+            seenSetRef.current = new Set();
           }}
         >
           <span>{props.text}</span>
@@ -317,6 +329,7 @@ const ScannerTmpComp = (function () {
 
 export const ScannerComp = withExposingConfigs(ScannerTmpComp, [
   new NameConfig("data", trans("data")),
+  new NameConfig("value", trans("value")),
   new NameConfig("text", trans("button.textDesc")),
   ...CommonNameConfig,
 ]);

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

@@ -390,15 +390,24 @@ let FormTmpComp = class extends FormBaseComp implements IForm {
         if (ret.children.initialData !== this.children.initialData) {
           // FIXME: kill setTimeout ?
           setTimeout(() => {
-            this.dispatch(
-              customAction<SetDataAction>(
-                {
-                  type: "setData",
-                  initialData: (action.value["initialData"] as ValueAndMsg<JSONObject>).value || {},
-                },
-                false
-              )
-            );
+            const newInitialData = (action.value["initialData"] as ValueAndMsg<JSONObject>)
+              .value;
+            // only setData when initialData has explicit keys.
+            if (
+              newInitialData &&
+              typeof newInitialData === "object" &&
+              Object.keys(newInitialData).length > 0
+            ) {
+              this.dispatch(
+                customAction<SetDataAction>(
+                  {
+                    type: "setData",
+                    initialData: newInitialData,
+                  },
+                  false
+                )
+              );
+            }
           }, 1000);
         }
         return ret;

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}
+        </>
+      );
+    }
+  };
+}
+
+

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") && (