diff --git a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx b/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx index ecee73bdc..fbb8ccc06 100644 --- a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx +++ b/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; loadingElement?: () => React.ReactNode; errorElement?: (error: any) => React.ReactNode; } -function RemoteCompView(props: React.PropsWithChildren) { +function LazyCompView(props: React.PropsWithChildren) { const { loadComp, loadingElement, errorElement } = props; const [error, setError] = useState(""); @@ -103,14 +103,14 @@ export function lazyLoadComp( 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; } @@ -122,12 +122,12 @@ export function lazyLoadComp( if (this.compValue) { params.value = this.compValue; } - const RemoteCompWithErrorBound = withErrorBoundary(RemoteExportedComp); + const LazyCompWithErrorBound = withErrorBoundary(LazyExportedComp); this.dispatch( - customAction( + customAction( { - type: "RemoteCompReady", - comp: new RemoteCompWithErrorBound(params), + type: "LazyCompReady", + comp: new LazyCompWithErrorBound(params), }, false ) @@ -138,7 +138,7 @@ export function lazyLoadComp( // const key = `${remoteInfo?.packageName}-${remoteInfo?.packageVersion}-${remoteInfo?.compName}`; const key = `${compName}`; return ( - this.load()} loadingElement={loadingElement} /> + this.load()} loadingElement={loadingElement} /> ); } @@ -147,7 +147,7 @@ export function lazyLoadComp( } reduce(action: CompAction): this { - if (isCustomAction(action, "RemoteCompReady")) { + if (isCustomAction(action, "LazyCompReady")) { // use real remote comp instance to replace RemoteCompLoader return action.value.comp as this; } diff --git a/client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx b/client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx index d193165b8..c880a81a1 100644 --- a/client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx @@ -68,7 +68,7 @@ type UpdateDslAction = { moduleDsl: Record; }; -type ModuleReadyAction = { +export type ModuleReadyAction = { type: "moduleReady"; comp: RootComp; }; @@ -263,7 +263,6 @@ class ModuleTmpComp extends ModuleCompBase { override reduce(action: CompAction): this { const appId = this.children.appId.getView(); - // init if (isMyCustomAction(action, "init")) { if (getReduceContext().disableUpdateState) return this; diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/expansionControl.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/expansionControl.tsx index 6b5b41380..51905a186 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/expansionControl.tsx +++ b/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 ( diff --git a/client/packages/lowcoder/src/comps/controls/slotControl.tsx b/client/packages/lowcoder/src/comps/controls/slotControl.tsx index 0c798c5aa..587a42c2a 100644 --- a/client/packages/lowcoder/src/comps/controls/slotControl.tsx +++ b/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"; diff --git a/client/packages/lowcoder/src/comps/generators/withMultiContext.tsx b/client/packages/lowcoder/src/comps/generators/withMultiContext.tsx index 84435f9d7..380e8744b 100644 --- a/client/packages/lowcoder/src/comps/generators/withMultiContext.tsx +++ b/client/packages/lowcoder/src/comps/generators/withMultiContext.tsx @@ -87,7 +87,7 @@ export function withMultiContext(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 }; diff --git a/client/packages/lowcoder/src/comps/generators/withSelectedMultiContext.tsx b/client/packages/lowcoder/src/comps/generators/withSelectedMultiContext.tsx index 51bfa1d79..522c0f9f3 100644 --- a/client/packages/lowcoder/src/comps/generators/withSelectedMultiContext.tsx +++ b/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"; @@ -69,12 +72,21 @@ export function withSelectedMultiContext( 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(action, "LazyCompReady") + && !isCustomAction(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(action, "LazyCompReady") + || isCustomAction(action, "moduleReady") + ) && action.path[1] === SELECTED_KEY) { // broadcast const newAction = { ...action, @@ -82,6 +94,12 @@ export function withSelectedMultiContext( }; comp = comp.reduce(WithMultiContextComp.forEachAction(newAction)); comp = comp.reduce(wrapChildAction(COMP_KEY, newAction)); + } else if ( + !action.editDSL + && isCustomAction(action, "moduleReady") + && action.path[0] === MAP_KEY + ) { + comp = super.reduce(action); } // console.info("exit withSelectedMultiContext reduce. action: ", action, "\nthis:", this, "\ncomp:", comp);