Skip to content

Commit f4ea8de

Browse files
snowe2010snowe2010
committed
Added more properties to root tour
also fixes issues with step properties always being set, thus making root properties do nothing.
1 parent 3fe583a commit f4ea8de

File tree

6 files changed

+63
-27
lines changed

6 files changed

+63
-27
lines changed

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,14 @@ import {
88
withExposingConfigs,
99
withMethodExposing
1010
} from "lowcoder-sdk";
11-
import { baseSelectRefMethods, TourChildrenMap, TourPropertyView } from "./tourCompConstants";
11+
import { baseSelectRefMethods, TourChildrenMap, TourPropertyView } from "./tourPropertyView";
1212
import { TourInputCommonConfig } from "./tourInputConstants";
1313
import { Tour, TourProps } from "antd";
1414
import React, { Suspense, useContext } from "react";
1515
import { EditorContext } from "@lowcoder-ee/comps/editorState";
1616
import { GridItemComp } from "@lowcoder-ee/comps/comps/gridItemComp";
1717
import { HookComp } from "@lowcoder-ee/comps/hooks/hookComp";
1818
import { TemporaryStateItemComp } from "@lowcoder-ee/comps/comps/temporaryStateComp";
19-
import { PlacementType } from "@lowcoder-ee/comps/comps/tourComp/tourControlConstants";
2019

2120
/**
2221
* This component builds the Property Panel and the fake 'UI' for the Tour component
@@ -48,20 +47,20 @@ let TourBasicComp = (function() {
4847
return {
4948
/**
5049
* I'm pretty sure it's safe to use dangerouslySetInnerHTML here as any creator of an app
51-
* will have unrestricted access to the data of any user anyway. E.g. have a button that
52-
* just sends the current cookies wherever, thus the developer of the app must be trusted
50+
* will have unrestricted access to the data of any user anyway. E.g. have a button that
51+
* just sends the current cookies wherever, thus the developer of the app must be trusted
5352
* in all cases
5453
* This even applies to things like <b onmouseover="alert('mouseover');">, because the
55-
* app creator might desire functionality like this.
54+
* app creator might desire functionality like this.
5655
*/
5756
title: (<div dangerouslySetInnerHTML={{ __html: step.title }} />),
5857
description: (<div dangerouslySetInnerHTML={{ __html: step.description }} />),
5958
target: target?.current,
6059
arrow: step.arrow,
61-
placement: step.placement as PlacementType,
60+
placement: step.placement === "" ? undefined : step.placement,
6261
mask: step.mask,
6362
cover: step.cover ? (<img src={step.cover} />) : undefined,
64-
type: step.type || "default",
63+
type: step.type === "" ? undefined : step.type,
6564
};
6665
});
6766

@@ -71,8 +70,11 @@ let TourBasicComp = (function() {
7170
steps={steps}
7271
open={props.open.value}
7372
onClose={() => props.open.onChange(false)}
74-
indicatorsRender={(current, total) => props.indicatorsRender(current,total)}
73+
indicatorsRender={(current, total) => props.indicatorsRender(current, total)}
7574
disabledInteraction={props.disabledInteraction}
75+
arrow={props.arrow}
76+
placement={props.placement === "" ? undefined : props.placement}
77+
type={props.type === "" ? undefined : props.type}
7678
/>
7779
</Suspense>
7880
);

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
export type PlacementType = 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'center';
2-
export type TourStepType = 'default' | 'primary';
1+
export type PlacementType = 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'center' | '';
2+
export type TourStepType = 'default' | 'primary' | '';
33

44
export const PlacementOptions: {label: string, value: PlacementType}[] = [
5+
{ label: "​", value: ""},
56
{ label: "Center", value: "center"},
67
{ label: "Left", value: "left"},
78
{ label: "Left Top", value: "leftTop"},
@@ -18,6 +19,7 @@ export const PlacementOptions: {label: string, value: PlacementType}[] = [
1819
];
1920

2021
export const TypeOptions: {label: string, value: TourStepType}[] = [
22+
{ label: "​", value: ""},
2123
{ label: "Default", value: "default"},
2224
{ label: "Primary", value: "primary"},
2325
];

‎client/packages/lowcoder/src/comps/comps/tourComp/tourCompConstants.tsx renamed to ‎client/packages/lowcoder/src/comps/comps/tourComp/tourPropertyView.tsx

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { RecordConstructorToComp } from "lowcoder-core";
22
import { BoolControl } from "../../controls/boolControl";
33
import { LabelControl } from "../../controls/labelControl";
4-
import { AlkjdfControl, BoolCodeControl, MaskControl, StringControl } from "../../controls/codeControl";
4+
import { AlkjdfControl, ArrowControl, BoolCodeControl, MaskControl, StringControl } from "../../controls/codeControl";
55
import { Section, sectionNames } from "lowcoder-design";
66
import { SelectEventHandlerControl } from "../../controls/eventHandlerControl";
77
import { stateComp } from "../../generators";
@@ -12,8 +12,12 @@ import { blurMethod, focusMethod } from "comps/utils/methodUtils";
1212
import { TourStepControl } from "@lowcoder-ee/comps/controls/tourStepControl";
1313
import { booleanExposingStateControl, dropdownControl } from "lowcoder-sdk";
1414
import { trans } from "i18n";
15-
import { PlacementOptions } from "@lowcoder-ee/comps/comps/tourComp/tourControlConstants";
16-
import { IndicatorsRenderTooltip, TourMaskTooltip } from "@lowcoder-ee/comps/comps/tourComp/tourTooltips";
15+
import { PlacementOptions, TypeOptions } from "@lowcoder-ee/comps/comps/tourComp/tourControlConstants";
16+
import {
17+
IndicatorsRenderTooltip, TourArrowTooltip,
18+
TourMaskTooltip,
19+
TourPlacementTooltip, TourStepArrowTooltip, TourStepMaskTooltip
20+
} from "@lowcoder-ee/comps/comps/tourComp/tourTooltips";
1721

1822
export const TourChildrenMap = {
1923
label: LabelControl,
@@ -29,6 +33,8 @@ export const TourChildrenMap = {
2933
disabledInteraction: BoolControl,
3034
mask: MaskControl,
3135
placement: dropdownControl(PlacementOptions, "bottom"),
36+
arrow: ArrowControl,
37+
type: dropdownControl(TypeOptions, "default"),
3238
};
3339

3440
export const TourPropertyView = (
@@ -58,11 +64,19 @@ export const TourPropertyView = (
5864
label: trans("tour.mask.label"),
5965
tooltip: TourMaskTooltip,
6066
})}
61-
{/*{children.placement.propertyView({*/}
62-
{/* label: trans("tour.placement.label"),*/}
63-
{/* tooltip: TourPlacementTooltip,*/}
64-
{/* radioButton: false*/}
65-
{/*})}*/}
67+
{children.placement.propertyView({
68+
label: trans("tour.placement.label"),
69+
tooltip: TourPlacementTooltip,
70+
radioButton: false
71+
})}
72+
{children.arrow.propertyView({
73+
label: trans("tour.arrow.label"),
74+
tooltip: TourArrowTooltip,
75+
})}
76+
{children.type.propertyView({
77+
label: trans("tour.type.label"),
78+
tooltip: trans("tour.type.tooltip")
79+
})}
6680
</Section>
6781

6882
{/*{["layout", "both"].includes(*/}

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

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ let styleExample = {
3333

3434
export const TourStepMaskTooltip = (
3535
<div>
36-
{trans("tour.options.mask.tooltip")}:
36+
{trans("tour.options.mask.tooltip")}
3737
<br />
3838
<br />
3939
{trans("tour.options.mask.tooltipValidTypes")}
@@ -48,7 +48,7 @@ export const TourStepMaskTooltip = (
4848

4949
export const TourMaskTooltip = (
5050
<div>
51-
{trans("tour.mask.tooltip")}:
51+
{trans("tour.mask.tooltip")}
5252
<br />
5353
<br />
5454
{trans("tour.mask.tooltipValidTypes")}
@@ -63,7 +63,7 @@ export const TourMaskTooltip = (
6363

6464
export const TourPlacementTooltip = (
6565
<div>
66-
{trans("tour.placement.tooltip")}:
66+
{trans("tour.placement.tooltip")}
6767
<br />
6868
<br />
6969
<h4>Valid options</h4>
@@ -101,7 +101,16 @@ export const TourPlacementTooltip = (
101101
const arrowTooltipSignature = `boolean | { pointAtCenter: boolean }`;
102102
export const TourStepArrowTooltip = (
103103
<div>
104-
{trans("tour.options.arrow.tooltip")}:
104+
{trans("tour.options.arrow.tooltip")}
105+
<br />
106+
<br />
107+
<h4>{trans("tour.tooltipSignatureHeader")}</h4>
108+
<code>{arrowTooltipSignature}</code>
109+
</div>
110+
);
111+
export const TourArrowTooltip = (
112+
<div>
113+
{trans("tour.arrow.tooltip")}
105114
<br />
106115
<br />
107116
<h4>{trans("tour.tooltipSignatureHeader")}</h4>

‎client/packages/lowcoder/src/comps/controls/tourStepControl.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -386,11 +386,11 @@ let TourStep = new MultiCompBuilder(
386386
arrow: ArrowControl,
387387
title: StringControl,
388388
description: StringControl,
389-
placement: dropdownControl(PlacementOptions, "bottom"),
389+
placement: dropdownControl(PlacementOptions, ""),
390390
hidden: BoolCodeControl,
391391
mask: MaskControl,
392392
cover: StringControl,
393-
type: dropdownControl(TypeOptions, "default"),
393+
type: dropdownControl(TypeOptions, ""),
394394
},
395395
(props) => props
396396
).build();

‎client/packages/lowcoder/src/i18n/locales/en.ts

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2876,14 +2876,23 @@ export const en = {
28762876
},
28772877
mask: {
28782878
label: "Mask",
2879-
tooltip: "Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour.",
2879+
tooltip: "Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour. Can be overridden at the step level.",
28802880
tooltipValidTypes: "Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd.",
28812881
},
28822882
placement: {
28832883
label: "Placement",
2884-
tooltip: "Position of the guide card relative to the target element",
2884+
tooltip: "Position of the guide card relative to the target element. Can be overridden at the step level.",
28852885
tooltipValidOptions: "center left leftTop leftBottom right rightTop rightBottom top topLeft topRight bottom bottomLeft bottomRight"
2886-
}
2886+
},
2887+
arrow: {
2888+
label: "Arrow",
2889+
tooltip: "Turns the arrow on and off or moves it to point at the center of the component, if desired, otherwise the arrow will always point near the top of the component. Can be overridden at the step level.",
2890+
tooltipFunctionSignature: "boolean | { pointAtCenter: boolean }",
2891+
},
2892+
type: {
2893+
label: "Type",
2894+
tooltip: "The type of tooltip, this affects the background color and text color. The colors can be controlled with the main tour styling section. Can be overridden at the step level."
2895+
},
28872896
},
28882897

28892898
docUrls: {

0 commit comments

Comments
 (0)