Skip to content

Commit 2834ff2

Browse files
snowe2010snowe2010
committed
Add ref logic to pass refs to tour steps
still doesn't work, but I think I'm closer. Currently the step refs are always undefined.
1 parent 26e96a1 commit 2834ff2

File tree

6 files changed

+50
-261
lines changed

6 files changed

+50
-261
lines changed

‎client/packages/lowcoder-core/lib/index.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/// <reference types="react" />
2-
import { ReactNode } from 'react';
2+
import React, { ReactNode } from 'react';
33

44
type EvalMethods = Record<string, Record<string, Function>>;
55
type CodeType = undefined | "JSON" | "Function" | "PureJSON";
@@ -613,6 +613,7 @@ declare abstract class MultiBaseComp<ChildrenType extends Record<string, Comp<un
613613
toJsonValue(): DataType;
614614
autoHeight(): boolean;
615615
changeChildAction(childName: string & keyof ChildrenType, value: ConstructorToDataType<new (...params: any) => ChildrenType[typeof childName]>): CompAction<JSONValue>;
616+
getRef(): React.RefObject<HTMLDivElement>;
616617
}
617618
declare function mergeExtra(e1: ExtraNodeType | undefined, e2: ExtraNodeType): ExtraNodeType;
618619

‎client/packages/lowcoder/src/comps/comps/tourComp/componentSelectorControl.tsx

Lines changed: 18 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const ExecuteCompTmpAction = (function() {
4747
params: ParamsValueControl
4848
};
4949
return new MultiCompBuilder(childrenMap, () => {
50-
return () => Promise.resolve(undefined as unknown);
50+
return () => undefined as (React.RefObject<HTMLElement> | undefined);
5151
})
5252
.setPropertyViewFn(() => <></>)
5353
.build();
@@ -71,30 +71,19 @@ export function targetCompAction(params: ExecuteCompActionOptions) {
7171
return `${name}.${method}()`;
7272
}
7373
}
74-
75-
override getView() {
76-
const name = this.children.name.getView();
77-
if (!name) {
78-
return () => Promise.resolve();
74+
75+
selectedComp: (GridItemComp | HookComp | InstanceType<typeof TemporaryStateItemComp>) | undefined;
76+
compList: (GridItemComp | HookComp | InstanceType<typeof TemporaryStateItemComp>)[] = [];
77+
78+
updateSelectedComp(compName: string): void {
79+
const compListItem = this.compList.find((compItem) => compItem.children.name.getView() === compName);
80+
if (compListItem) {
81+
this.selectedComp = compListItem;
7982
}
80-
return () =>
81-
getPromiseAfterDispatch(
82-
this.dispatch,
83-
routeByNameAction(
84-
name,
85-
customAction<ExecuteAction>(
86-
{
87-
type: "execute",
88-
methodName: this.children.methodName.getView(),
89-
params: this.children.params.getView().map((x) => x.getView())
90-
},
91-
false
92-
)
93-
),
94-
{
95-
notHandledError: trans("eventHandler.notHandledError")
96-
}
97-
);
83+
}
84+
85+
override getView(): () => (React.RefObject<HTMLElement> | undefined) {
86+
return () => this.selectedComp?.getRef();
9887
}
9988

10089
exposingNode() {
@@ -105,32 +94,9 @@ export function targetCompAction(params: ExecuteCompActionOptions) {
10594
return (
10695
<EditorContext.Consumer>
10796
{(editorState) => {
108-
const compMethods: Record<string, Record<string, ParamsConfig>> = {};
10997
const compList: (GridItemComp | HookComp | InstanceType<typeof TemporaryStateItemComp>)[] = compListGetter(editorState);
11098

111-
compList.forEach((item) => {
112-
compMethods[item.children.name.getView()] = mapValues(
113-
item.exposingInfo().methods,
114-
(v) => v.params
115-
);
116-
});
117-
118-
function changeMethodAction(compName: string, methodName: string) {
119-
const currentMethods = compMethods[compName] ?? {};
120-
const params = currentMethods[methodName];
121-
return {
122-
name: compName,
123-
methodName: methodName,
124-
params: params?.map((p) => ({
125-
compType: p.type,
126-
name: p.name
127-
}))
128-
};
129-
}
130-
13199
const name = this.children.name.getView();
132-
const methods = compMethods[name] ?? {};
133-
const params = methods[this.children.methodName.getView()];
134100
return (
135101
<>
136102
<CompNameContext.Consumer>
@@ -139,21 +105,17 @@ export function targetCompAction(params: ExecuteCompActionOptions) {
139105
showSearch={true}
140106
value={name}
141107
options={compList
142-
.filter(
143-
(item) =>
144-
Object.keys(compMethods[item.children.name.getView()]).length > 0
145-
)
146108
.filter((item) => item.children.name.getView() !== compName)
147109
.map((item) => ({
148110
label: item.children.name.getView(),
149111
value: item.children.name.getView()
150112
}))}
151113
label={selectLabel}
152-
onChange={(value) =>
153-
this.dispatchChangeValueAction(
154-
changeMethodAction(value, Object.keys(compMethods[value])[0])
155-
)
156-
}
114+
onChange={(value) => {
115+
console.log(`the value is ${value}`);
116+
// After the value is changed, update `selectedComp`
117+
this.updateSelectedComp(value);
118+
}}
157119
/>
158120
)}
159121
</CompNameContext.Consumer>

‎client/packages/lowcoder/src/comps/comps/tourComp/tourComp.tsx

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import { styleControl } from "comps/controls/styleControl";
22
import { SelectStyle } from "comps/controls/styleControlConstants";
33
import { trans } from "i18n";
4-
import { stringExposingStateControl } from "lowcoder-sdk";
5-
import { UICompBuilder } from "lowcoder-sdk";
6-
import { CommonNameConfig, NameConfig, withExposingConfigs , withMethodExposing} from "lowcoder-sdk";
74
import {
8-
baseSelectRefMethods,
9-
TourChildrenMap,
10-
TourPropertyView,
11-
} from "./tourCompConstants";
12-
import {
13-
TourInputCommonConfig,
14-
TourInputInvalidConfig,
15-
} from "./tourInputConstants";
5+
CommonNameConfig,
6+
NameConfig,
7+
stringExposingStateControl,
8+
UICompBuilder,
9+
withExposingConfigs,
10+
withMethodExposing
11+
} from "lowcoder-sdk";
12+
import { baseSelectRefMethods, TourChildrenMap, TourPropertyView } from "./tourCompConstants";
13+
import { TourInputCommonConfig, TourInputInvalidConfig } from "./tourInputConstants";
1614
import { Tour, TourProps } from "antd";
1715

16+
/**
17+
* This component builds the Property Panel and the fake 'UI' for the Tour component
18+
*/
1819
let TourBasicComp = (function () {
1920
const childrenMap = {
2021
...TourChildrenMap,
@@ -28,7 +29,7 @@ let TourBasicComp = (function () {
2829
return {
2930
title: step.title,
3031
description: step.description,
31-
target: null,
32+
target: step.target()?.current,
3233
}
3334
})
3435

‎client/packages/lowcoder/src/comps/comps/tourComp/tourCompConstants.tsx

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -187,30 +187,6 @@ export const TourPropertyView = (
187187
{placeholderPropertyView(children)}
188188
</Section>
189189

190-
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
191-
<>
192-
<>
193-
<SelectInputValidationSection {...children} />
194-
<FormDataPropertyView {...children} />
195-
</>
196-
<Section name={sectionNames.interaction}>
197-
{children.onEvent.getPropertyView()}
198-
{disabledPropertyView(children)}
199-
{hiddenPropertyView(children)}
200-
</Section>
201-
</>
202-
)}
203-
204-
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) &&
205-
children.label.getPropertyView()}
206-
207-
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
208-
<Section name={sectionNames.advanced}>
209-
{allowClearPropertyView(children)}
210-
{showSearchPropertyView(children)}
211-
</Section>
212-
)}
213-
214190
{["layout", "both"].includes(
215191
useContext(EditorContext).editorModeStatus
216192
) && (

0 commit comments

Comments
 (0)