From abf460b7161ed333ae2e3becff846552d1c069f9 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Sun, 12 May 2024 23:25:46 +0500 Subject: [PATCH 1/2] fix values not saved for comps inside table's expansion container --- .../comps/comps/lazyLoadComp/lazyLoadComp.tsx | 30 ++++++++++--------- .../src/comps/comps/moduleComp/moduleComp.tsx | 3 +- .../comps/tableComp/expansionControl.tsx | 2 +- .../src/comps/controls/slotControl.tsx | 2 +- .../src/comps/generators/withMultiContext.tsx | 2 +- .../generators/withSelectedMultiContext.tsx | 17 +++++++++-- 6 files changed, 34 insertions(+), 22 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx b/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx index ecee73bdc..8e3ea0c90 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(""); @@ -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 = { 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( + customAction( { - 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 ( - this.load()} loadingElement={loadingElement} /> + this.load()} loadingElement={loadingElement} /> ); } @@ -147,7 +149,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..2107915fd 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"; @@ -50,7 +53,7 @@ export function withSelectedMultiContext( } 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(action, "setSelection")) { const { selection, params } = action.value; @@ -69,12 +72,20 @@ 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, From adfe6b07f231d72b1b94df71ba16b35f9003a0b3 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Mon, 13 May 2024 13:01:06 +0500 Subject: [PATCH 2/2] fix expansion container comps not saved --- .../comps/comps/lazyLoadComp/lazyLoadComp.tsx | 2 -- .../generators/withSelectedMultiContext.tsx | 25 ++++++++++++------- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx b/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx index 8e3ea0c90..fbb8ccc06 100644 --- a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx @@ -100,7 +100,6 @@ export function lazyLoadComp( } private async load() { - console.log('lazyLoad ->', compName); if (!compPath) { return; } @@ -115,7 +114,6 @@ export function lazyLoadComp( log.error("loader not found, lazy load info:", compPath); return; } - console.log(LazyExportedComp) const params: CompParams = { dispatch: this.dispatch, diff --git a/client/packages/lowcoder/src/comps/generators/withSelectedMultiContext.tsx b/client/packages/lowcoder/src/comps/generators/withSelectedMultiContext.tsx index 2107915fd..522c0f9f3 100644 --- a/client/packages/lowcoder/src/comps/generators/withSelectedMultiContext.tsx +++ b/client/packages/lowcoder/src/comps/generators/withSelectedMultiContext.tsx @@ -53,7 +53,7 @@ export function withSelectedMultiContext( } 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(action, "setSelection")) { const { selection, params } = action.value; @@ -73,19 +73,20 @@ export function withSelectedMultiContext( ); } } else if (( - !action.editDSL - && !isCustomAction(action, "LazyCompReady") - && !isCustomAction(action, "moduleReady") - ) || action.path[0] !== MAP_KEY || _.isNil(action.path[1])) { + !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 - || isCustomAction(action, "LazyCompReady") - || isCustomAction(action, "moduleReady") - ) && action.path[1] === SELECTED_KEY) { + action.editDSL + || isCustomAction(action, "LazyCompReady") + || isCustomAction(action, "moduleReady") + ) && action.path[1] === SELECTED_KEY) { // broadcast const newAction = { ...action, @@ -93,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);