Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 2834ff2

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /