fix values not saved for comps inside table's expansion container

Author: raheeliftikhar5

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

@@ -38,18 +38,18 @@ function ViewLoading(props: { padding?: number }) {
   );
 }
 
-interface RemoteCompReadyAction {
-  type: "RemoteCompReady";
+export interface LazyCompReadyAction {
+  type: "LazyCompReady";
   comp: Comp;
 }
 
-interface RemoteCompViewProps {
+interface LazyCompViewProps {
   loadComp: () => Promise<void>;
   loadingElement?: () => React.ReactNode;
   errorElement?: (error: any) => React.ReactNode;
 }
 
-function RemoteCompView(props: React.PropsWithChildren<RemoteCompViewProps>) {
+function LazyCompView(props: React.PropsWithChildren<LazyCompViewProps>) {
   const { loadComp, loadingElement, errorElement } = props;
   const [error, setError] = useState<any>("");
 
@@ -100,20 +100,22 @@ export function lazyLoadComp(
     }
 
     private async load() {
+      console.log('lazyLoad ->', compName);
       if (!compPath) {
         return;
       }
-      let RemoteExportedComp;
+      let LazyExportedComp;
       if (!loader) {
         const module = await import(`../../${compPath}.tsx`);
-        RemoteExportedComp = module[compName!];
+        LazyExportedComp = module[compName!];
       } else {
-        RemoteExportedComp = await loader();
+        LazyExportedComp = await loader();
       }
-      if (!RemoteExportedComp) {
+      if (!LazyExportedComp) {
         log.error("loader not found, lazy load info:", compPath);
         return;
       }
+      console.log(LazyExportedComp)
 
       const params: CompParams<any> = {
         dispatch: this.dispatch,
@@ -122,12 +124,12 @@ export function lazyLoadComp(
       if (this.compValue) {
         params.value = this.compValue;
       }
-      const RemoteCompWithErrorBound = withErrorBoundary(RemoteExportedComp);
+      const LazyCompWithErrorBound = withErrorBoundary(LazyExportedComp);
       this.dispatch(
-        customAction<RemoteCompReadyAction>(
+        customAction<LazyCompReadyAction>(
           {
-            type: "RemoteCompReady",
-            comp: new RemoteCompWithErrorBound(params),
+            type: "LazyCompReady",
+            comp: new LazyCompWithErrorBound(params),
           },
           false
         )
@@ -138,7 +140,7 @@ export function lazyLoadComp(
       // const key = `${remoteInfo?.packageName}-${remoteInfo?.packageVersion}-${remoteInfo?.compName}`;
       const key = `${compName}`;
       return (
-        <RemoteCompView key={key} loadComp={() => this.load()} loadingElement={loadingElement} />
+        <LazyCompView key={key} loadComp={() => this.load()} loadingElement={loadingElement} />
       );
     }
 
@@ -147,7 +149,7 @@ export function lazyLoadComp(
     }
 
     reduce(action: CompAction<any>): this {
-      if (isCustomAction<RemoteCompReadyAction>(action, "RemoteCompReady")) {
+      if (isCustomAction<LazyCompReadyAction>(action, "LazyCompReady")) {
         // use real remote comp instance to replace RemoteCompLoader
         return action.value.comp as this;
       }

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

@@ -68,7 +68,7 @@ type UpdateDslAction = {
   moduleDsl: Record<string, DSLType>;
 };
 
-type ModuleReadyAction = {
+export type ModuleReadyAction = {
   type: "moduleReady";
   comp: RootComp;
 };
@@ -263,7 +263,6 @@ class ModuleTmpComp extends ModuleCompBase {
 
   override reduce(action: CompAction<JSONValue>): this {
     const appId = this.children.appId.getView();
-
     // init
     if (isMyCustomAction<InitAction>(action, "init")) {
       if (getReduceContext().disableUpdateState) return this;

client/packages/lowcoder/src/comps/comps/tableComp/expansionControl.tsx

@@ -50,7 +50,7 @@ let ExpansionControlTmp = (function () {
       slot: ContextSlotControl,
     },
     () => ({ expandableConfig: {}, expandModalView: null })
-  )
+    )
     .setControlItemData({ filterText: label })
     .setPropertyViewFn((children, dispatch) => {
       return (

client/packages/lowcoder/src/comps/controls/slotControl.tsx

@@ -10,7 +10,7 @@ import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
 import { CanvasContainerID } from "constants/domLocators";
 import { Layers } from "constants/Layers";
 import { trans } from "i18n";
-import { changeChildAction, ConstructorToView } from "lowcoder-core";
+import { changeChildAction, CompActionTypes, ConstructorToView } from "lowcoder-core";
 import { HintPlaceHolder, TacoButton } from "lowcoder-design";
 import { createContext, useContext } from "react";
 import styled from "styled-components";

client/packages/lowcoder/src/comps/generators/withMultiContext.tsx

@@ -87,7 +87,7 @@ export function withMultiContext<TCtor extends MultiCompConstructor>(VariantComp
     override parseChildrenFromValue(params: CompParams): ChildrenType {
       const dispatch = params.dispatch ?? _.noop;
       const newParams = { ...params, dispatch: wrapDispatch(dispatch, COMP_KEY) };
-
+      
       const comp: WithParamComp = new WithParamCompCtor(newParams) as unknown as WithParamComp;
       const mapComp = new MapCtor({ dispatch: wrapDispatch(dispatch, MAP_KEY) });
       return { [COMP_KEY]: comp, [MAP_KEY]: mapComp };

client/packages/lowcoder/src/comps/generators/withSelectedMultiContext.tsx

@@ -2,6 +2,7 @@ import _ from "lodash";
 import {
   CompAction,
   customAction,
+  isCustomAction,
   isMyCustomAction,
   MultiCompConstructor,
   wrapChildAction,
@@ -11,6 +12,8 @@ import { ReactNode } from "react";
 import { lastValueIfEqual, setFieldsNoTypeCheck } from "util/objectUtils";
 import { COMP_KEY, MAP_KEY, withMultiContext } from "./withMultiContext";
 import { paramsEqual } from "./withParams";
+import { LazyCompReadyAction } from "../comps/lazyLoadComp/lazyLoadComp";
+import { ModuleReadyAction } from "../comps/moduleComp/moduleComp";
 
 const SELECTED_KEY = "SELECTED";
 
@@ -50,7 +53,7 @@ export function withSelectedMultiContext<TCtor extends MultiCompConstructor>(
     }
 
     override reduce(action: CompAction): this {
-      // console.info("enter withSelectedMultiContext reduce. action: ", action, "\nthis: ", this);
+      console.info("enter withSelectedMultiContext reduce. action: ", action, "\nthis: ", this);
       let comp = this;
       if (isMyCustomAction<SetSelectionAction>(action, "setSelection")) {
         const { selection, params } = action.value;
@@ -69,12 +72,20 @@ export function withSelectedMultiContext<TCtor extends MultiCompConstructor>(
             comp.getOriginalComp().setParams(comp.cacheParamsMap.get(selection)!)
           );
         }
-      } else if (!action.editDSL || action.path[0] !== MAP_KEY || _.isNil(action.path[1])) {
+      } else if ((
+          !action.editDSL
+          && !isCustomAction<LazyCompReadyAction>(action, "LazyCompReady")
+          && !isCustomAction<ModuleReadyAction>(action, "moduleReady")
+        ) || action.path[0] !== MAP_KEY || _.isNil(action.path[1])) {
         if (action.path[0] === MAP_KEY && action.path[1] === SELECTED_KEY) {
           action.path[1] = this.selection;
         }
         comp = super.reduce(action);
-      } else if (action.editDSL && action.path[1] === SELECTED_KEY) {
+      } else if ((
+          action.editDSL
+          || isCustomAction<LazyCompReadyAction>(action, "LazyCompReady")
+          || isCustomAction<ModuleReadyAction>(action, "moduleReady")
+        ) && action.path[1] === SELECTED_KEY) {
         // broadcast
         const newAction = {
           ...action,