Merge branch 'dev' into doubleClick_event_component

kamal-qureshi · kamal-qureshi · commit fe1dedad60d0 · 2025-06-14T18:00:24.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx
@@ -4,7 +4,6 @@ import {
   ColumnTypeCompBuilder,
   ColumnTypeViewFn,
 } from "comps/comps/tableComp/column/columnTypeCompBuilder";
-import { ActionSelectorControlInContext } from "comps/controls/actionSelector/actionSelectorControl";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { trans } from "i18n";
 import { disabledPropertyView } from "comps/utils/propertyUtils";
@@ -13,15 +12,16 @@ import { styleControl } from "comps/controls/styleControl";
 import { TableColumnLinkStyle } from "comps/controls/styleControlConstants";
 import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
 import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
+import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators";
+import { fixOldActionData } from "comps/comps/tableComp/column/simpleColumnTypeComps";
 
 export const ColumnValueTooltip = trans("table.columnValueTooltip");
 
 const LinkEventOptions = [clickEvent, doubleClickEvent] as const;
 
 const childrenMap = {
   text: StringControl,
-  onClick: ActionSelectorControlInContext,
-  onEvent: eventHandlerControl(LinkEventOptions),
+  onClick: eventHandlerControl(LinkEventOptions),
   disabled: BoolCodeControl,
   style: styleControl(TableColumnLinkStyle),
 };
@@ -39,7 +39,7 @@ const StyledLink = styled.a<{ $disabled: boolean }>`
 `;
 
 // Memoized link component
-export const ColumnLink = React.memo(({ disabled, label, onClick, onEvent }: { disabled: boolean; label: string; onClick?: () => void; onEvent?: (eventName: string) => void }) => {
+export const ColumnLink = React.memo(({ disabled, label, onClick }: { disabled: boolean; label: string; onClick?: (eventName: string) => void }) => {
   const handleClick = useCallback(() => {
     if (!disabled && onEvent) {
       ComponentClickHandler({onEvent})();
@@ -49,6 +49,9 @@ export const ColumnLink = React.memo(({ disabled, label, onClick, onEvent }: { d
   //   onClick?.();
   //   // onEvent?.("click");
   // }, [disabled, onClick, onEvent]);
+  //   if (disabled) return;
+  //   onClick?.("click");
+  // }, [disabled, onClick]);
 
   return (
     <StyledLink
@@ -110,7 +113,7 @@ LinkEdit.displayName = 'LinkEdit';
 
 const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
 
-export const LinkComp = (function () {
+const LinkCompTmp = (function () {
   return new ColumnTypeCompBuilder(
     childrenMap,
     (props, dispatch) => {
@@ -134,11 +137,7 @@ export const LinkComp = (function () {
           tooltip: ColumnValueTooltip,
         })}
         {disabledPropertyView(children)}
-        {/* {children.onEvent.propertyView()} */}
-        {children.onClick.propertyView({
-          label: trans("table.action"),
-          placement: "table",
-        })}
+        {children.onClick.propertyView()}
       </>
     ))
     .setStylePropertyViewFn((children) => (
@@ -148,3 +147,5 @@ export const LinkComp = (function () {
     ))
     .build();
 })();
+
+export const LinkComp = migrateOldData(LinkCompTmp, fixOldActionData);
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
 import { default as Menu } from "antd/es/menu";
 import { ColumnTypeCompBuilder } from "comps/comps/tableComp/column/columnTypeCompBuilder";
-import { ActionSelectorControlInContext } from "comps/controls/actionSelector/actionSelectorControl";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { manualOptionsControl } from "comps/controls/optionsControl";
 import { MultiCompBuilder } from "comps/generators";
@@ -12,6 +11,8 @@ import { ColumnLink } from "comps/comps/tableComp/column/columnTypeComps/columnL
 import { LightActiveTextColor, PrimaryColor } from "constants/style";
 import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
 import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
+import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators";
+import { fixOldActionData } from "comps/comps/tableComp/column/simpleColumnTypeComps";
 
 const MenuLinkWrapper = styled.div`
   > a {
@@ -39,16 +40,35 @@ const MenuWrapper = styled.div`
   }  
 `;
 
-const LinksEventOptions = [clickEvent, doubleClickEvent] as const;
+const LinkEventOptions = [clickEvent, doubleClickEvent] as const;
 
-// Update OptionItem to include event handlers
-const OptionItem = new MultiCompBuilder(
+// Memoized menu item component
+const MenuItem = React.memo(({ option, index }: { option: any; index: number }) => {
+  const handleClick = useCallback(() => {
+    if (!option.disabled && option.onClick) {
+      option.onClick("click");
+    }
+  }, [option.disabled, option.onClick]);
+
+  return (
+    <MenuLinkWrapper>
+      <ColumnLink
+        disabled={option.disabled}
+        label={option.label}
+        onClick={handleClick}
+      />
+    </MenuLinkWrapper>
+  );
+});
+
+MenuItem.displayName = 'MenuItem';
+
+const OptionItemTmp = new MultiCompBuilder(
   {
     label: StringControl,
-    onClick: ActionSelectorControlInContext,
+    onClick: eventHandlerControl(LinkEventOptions),
     hidden: BoolCodeControl,
     disabled: BoolCodeControl,
-    onEvent: eventHandlerControl(LinksEventOptions),
   },
   (props) => {
     return props;
@@ -58,56 +78,18 @@ const OptionItem = new MultiCompBuilder(
     return (
       <>
         {children.label.propertyView({ label: trans("label") })}
-        {children.onClick.propertyView({
-          label: trans("table.action"),
-          placement: "table",
-        })}
         {hiddenPropertyView(children)}
         {disabledPropertyView(children)}
-        {/* {children.onEvent.propertyView()} */}
+        {children.onClick.propertyView()}
       </>
     );
   })
   .build();
 
-// Memoized menu item component
-const MenuItem = React.memo(({ option, index, onMainEvent }: { option: any; index: number; onMainEvent?: (eventName: string) => void }) => {
-  const handleClick = useCallback(() => {
-    if (!option.disabled) {
-      // Handle both option's event and main event through ComponentClickHandler
-      const combinedHandler = (event: "click" | "doubleClick") => {
-        option.onEvent?.(event);
-        onMainEvent?.(event);
-      };
-      ComponentClickHandler({onEvent: combinedHandler})();
-      // if (option.onClick) {
-      //   option.onClick();
-      // }
-      // // if (option.onEvent) {
-      // //   option.onEvent("click");
-      // // }
-      // // Trigger the main component's event handler
-      // if (onMainEvent) {
-      //   onMainEvent("click");
-      // }
-    }
-  }, [option.disabled, option.onEvent, onMainEvent]);
-
-  return (
-    <MenuLinkWrapper>
-      <ColumnLink
-        disabled={option.disabled}
-        label={option.label}
-        onEvent={handleClick}
-      />
-    </MenuLinkWrapper>
-  );
-});
-
-MenuItem.displayName = 'MenuItem';
+const OptionItem = migrateOldData(OptionItemTmp, fixOldActionData);
 
 // Memoized menu component
-const LinksMenu = React.memo(({ options, onEvent }: { options: any[]; onEvent?: (eventName: string) => void }) => {
+const LinksMenu = React.memo(({ options }: { options: any[] }) => {
   const mountedRef = useRef(true);
 
   // Cleanup on unmount
@@ -122,9 +104,9 @@ const LinksMenu = React.memo(({ options, onEvent }: { options: any[]; onEvent?:
       .filter((o) => !o.hidden)
       .map((option, index) => ({
         key: index,
-        label: <MenuItem option={option} index={index} onMainEvent={onEvent} />
+        label: <MenuItem option={option} index={index} />
       })),
-    [options, onEvent]
+    [options]
   );
 
   return (
@@ -136,17 +118,16 @@ const LinksMenu = React.memo(({ options, onEvent }: { options: any[]; onEvent?:
 
 LinksMenu.displayName = 'LinksMenu';
 
-export const ColumnLinksComp = (function () {
+const ColumnLinksCompTmp = (function () {
   const childrenMap = {
     options: manualOptionsControl(OptionItem, {
       initOptions: [{ label: trans("table.option1") }],
     }),
-    onEvent: eventHandlerControl(LinksEventOptions),
   };
   return new ColumnTypeCompBuilder(
     childrenMap,
     (props) => {
-      return <LinksMenu options={props.options} onEvent={props.onEvent} />;
+      return <LinksMenu options={props.options} />;
     },
     () => ""
   )
@@ -156,8 +137,9 @@ export const ColumnLinksComp = (function () {
           newOptionLabel: trans("table.option"),
           title: trans("table.optionList"),
         })}
-        {children.onEvent.propertyView()}
       </>
     ))
     .build();
 })();
+
+export const ColumnLinksComp = migrateOldData(ColumnLinksCompTmp, fixOldActionData);
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx
@@ -15,7 +15,21 @@ import { RecordConstructorToComp } from "lowcoder-core";
 import { ToViewReturn } from "@lowcoder-ee/comps/generators/multi";
 import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
 import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
+import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators";
 
+export const fixOldActionData = (oldData: any) => {
+  if (!oldData) return oldData;
+  if (Boolean(oldData.onClick)) {
+    return {
+      ...oldData,
+      onClick: [{
+        name: "click",
+        handler: oldData.onClick,
+      }],
+    };
+  }
+  return oldData;
+}
 export const ColumnValueTooltip = trans("table.columnValueTooltip");
 
 export const ButtonTypeOptions = [
@@ -38,8 +52,7 @@ const ButtonEventOptions = [clickEvent, doubleClickEvent] as const;
 const childrenMap = {
   text: StringControl,
   buttonType: dropdownControl(ButtonTypeOptions, "primary"),
-  onEvent: eventHandlerControl(ButtonEventOptions),
-  onClick: ActionSelectorControlInContext,
+  onClick: eventHandlerControl(ButtonEventOptions),
   loading: BoolCodeControl,
   disabled: BoolCodeControl,
   prefixIcon: IconControl,
@@ -59,6 +72,8 @@ const ButtonStyled = React.memo(({ props }: { props: ToViewReturn<RecordConstruc
   //   props.onClick?.();
   //   // props.onEvent?.("click");
   // }, [props.onClick, props.onEvent]);
+  //   props.onClick?.("click");
+  // }, [props.onClick]);
 
   const buttonStyle = useMemo(() => ({
     margin: 0,
@@ -84,7 +99,7 @@ const ButtonStyled = React.memo(({ props }: { props: ToViewReturn<RecordConstruc
   );
 });
 
-export const ButtonComp = (function () {
+const ButtonCompTmp = (function () {
   return new ColumnTypeCompBuilder(
     childrenMap,
     (props) => <ButtonStyled props={props} />,
@@ -108,12 +123,10 @@ export const ButtonComp = (function () {
         })}
         {loadingPropertyView(children)}
         {disabledPropertyView(children)}
-        {/* {children.onEvent.propertyView()} */}
-        {children.onClick.propertyView({
-          label: trans("table.action"),
-          placement: "table",
-        })}
+        {children.onClick.propertyView()}
       </>
     ))
     .build();
 })();
+
+export const ButtonComp = migrateOldData(ButtonCompTmp, fixOldActionData);
diff --git a/client/packages/lowcoder/src/comps/hooks/localStorageComp.ts b/client/packages/lowcoder/src/comps/hooks/localStorageComp.ts
@@ -3,7 +3,7 @@ import { isEmpty } from "lodash";
 import { simpleMultiComp, stateComp, withViewFn } from "../generators";
 import { NameConfig, withExposingConfigs } from "../generators/withExposing";
 import { JSONObject } from "../../util/jsonTypes";
-import { useEffect } from "react";
+import { useEffect, useMemo, useCallback } from "react";
 import isEqual from "fast-deep-equal";
 import { trans } from "i18n";
 import log from "loglevel";
@@ -13,7 +13,22 @@ const APP_STORE_NAMESPACE = "lowcoder_app_local_storage";
 const LocalStorageCompBase = withViewFn(
   simpleMultiComp({ values: stateComp<JSONObject>({}) }),
   (comp) => {
-    // add custom event listener to update values reactively
+    const originStore = localStorage.getItem(APP_STORE_NAMESPACE) || "{}";
+
+    let parseStore = {};
+    try {
+      parseStore = JSON.parse(originStore);
+    } catch (e) {
+      log.error("application local storage invalid");
+    }
+
+    useEffect(() => {
+      const value = comp.children.values.value;
+      if (!isEqual(value, parseStore)) {
+        comp.children.values.dispatchChangeValueAction(parseStore);
+      }
+    }, [parseStore]);
+
     useEffect(() => {
       const handler = () => {
         try {
@@ -28,9 +43,6 @@ const LocalStorageCompBase = withViewFn(
       // Add listener on mount
       window.addEventListener("lowcoder-localstorage-updated", handler);
 
-      // Run once on mount to initialize
-      handler();
-
       return () => {
         window.removeEventListener("lowcoder-localstorage-updated", handler);
       };
diff --git a/client/packages/lowcoder/src/pages/editor/editorView.tsx b/client/packages/lowcoder/src/pages/editor/editorView.tsx
@@ -498,8 +498,6 @@ function EditorView(props: EditorViewProps) {
 
     return () => {
       window.removeEventListener(eventType, updateSize);
-      savePanelStatus(panelStatus);
-      saveEditorModeStatus(editorModeStatus);
     };
   }, [panelStatus, editorModeStatus]);
 
@@ -553,6 +551,8 @@ function EditorView(props: EditorViewProps) {
       setShowShortcutList(false);
       setMenuKey(SiderKey.State);
       setHeight(undefined);
+      savePanelStatus(panelStatus);
+      saveEditorModeStatus(editorModeStatus);
     };
   }, []);
 
