Skip to content

Commit f9f8295

Browse files
snowe2010snowe2010
committed
Add more tooltips and move them to their own files
Also update the i18n files.
1 parent a3f4bc0 commit f9f8295

File tree

8 files changed

+199
-82
lines changed

8 files changed

+199
-82
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ import {
1111
import { baseSelectRefMethods, TourChildrenMap, TourPropertyView } from "./tourCompConstants";
1212
import { TourInputCommonConfig } from "./tourInputConstants";
1313
import { Tour, TourProps } from "antd";
14-
import { PlacementType } from "@lowcoder-ee/comps/controls/tourStepControl";
1514
import React, { Suspense, useContext } from "react";
1615
import { EditorContext } from "@lowcoder-ee/comps/editorState";
1716
import { GridItemComp } from "@lowcoder-ee/comps/comps/gridItemComp";
1817
import { HookComp } from "@lowcoder-ee/comps/hooks/hookComp";
1918
import { TemporaryStateItemComp } from "@lowcoder-ee/comps/comps/temporaryStateComp";
19+
import { PlacementType } from "@lowcoder-ee/comps/comps/tourComp/tourControlConstants";
2020

2121
/**
2222
* This component builds the Property Panel and the fake 'UI' for the Tour component
@@ -63,6 +63,8 @@ let TourBasicComp = (function() {
6363
steps={steps}
6464
open={props.open.value}
6565
onClose={() => props.open.onChange(false)}
66+
indicatorsRender={(current, total) => props.indicatorsRender(current,total)}
67+
disabledInteraction={props.disabledInteraction}
6668
/>
6769
</Suspense>
6870
);

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

Lines changed: 29 additions & 3 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 { BoolCodeControl, StringControl } from "../../controls/codeControl";
4+
import { AlkjdfControl, BoolCodeControl, MaskControl, StringControl } from "../../controls/codeControl";
55
import { ControlNode, Section, sectionNames } from "lowcoder-design";
66
import { SelectEventHandlerControl } from "../../controls/eventHandlerControl";
77
import { useContext } from "react";
@@ -10,9 +10,11 @@ import { RefControl } from "comps/controls/refControl";
1010
import { BaseSelectRef } from "rc-select";
1111
import { refMethods } from "comps/generators/withMethodExposing";
1212
import { blurMethod, focusMethod } from "comps/utils/methodUtils";
13-
import { EditorContext } from "comps/editorState";
1413
import { TourStepControl } from "@lowcoder-ee/comps/controls/tourStepControl";
15-
import { booleanExposingStateControl } from "lowcoder-sdk";
14+
import { booleanExposingStateControl, dropdownControl } from "lowcoder-sdk";
15+
import { trans } from "i18n";
16+
import { PlacementOptions } from "@lowcoder-ee/comps/comps/tourComp/tourControlConstants";
17+
import { IndicatorsRenderTooltip, TourMaskTooltip } from "@lowcoder-ee/comps/comps/tourComp/tourTooltips";
1618

1719
export const TourChildrenMap = {
1820
label: LabelControl,
@@ -24,6 +26,10 @@ export const TourChildrenMap = {
2426
inputValue: stateComp<string>(""), // user's input value when search
2527
showSearch: BoolControl.DEFAULT_TRUE,
2628
viewRef: RefControl<BaseSelectRef>,
29+
indicatorsRender: AlkjdfControl,
30+
disabledInteraction: BoolControl,
31+
mask: MaskControl,
32+
placement: dropdownControl(PlacementOptions, "bottom"),
2733
};
2834

2935
export const TourPropertyView = (
@@ -39,6 +45,26 @@ export const TourPropertyView = (
3945
<Section name={sectionNames.basic}>
4046
{children.options.propertyView({})}
4147
</Section>
48+
49+
<Section name="customization">
50+
{children.indicatorsRender.propertyView({
51+
label: trans("tour.indicatorsRender.label"),
52+
tooltip: IndicatorsRenderTooltip,
53+
})}
54+
{children.disabledInteraction.propertyView({
55+
label: trans("tour.disabledInteraction.label"),
56+
tooltip: trans("tour.disabledInteraction.tooltip")
57+
})}
58+
{children.mask.propertyView({
59+
label: trans("tour.mask.label"),
60+
tooltip: TourMaskTooltip,
61+
})}
62+
{/*{children.placement.propertyView({*/}
63+
{/* label: trans("tour.placement.label"),*/}
64+
{/* tooltip: TourPlacementTooltip,*/}
65+
{/* radioButton: false*/}
66+
{/*})}*/}
67+
</Section>
4268

4369
{/*{["layout", "both"].includes(*/}
4470
{/* useContext(EditorContext).editorModeStatus*/}

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
export type PlacementType = 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'center';
2+
export type TourStepType = 'default' | 'primary';
3+
4+
export const PlacementOptions: {label: string, value: PlacementType}[] = [
5+
{ label: "Center", value: "center"},
6+
{ label: "Left", value: "left"},
7+
{ label: "Left Top", value: "leftTop"},
8+
{ label: "Left Bottom", value: "leftBottom"},
9+
{ label: "Right", value: "right"},
10+
{ label: "Right Top", value: "rightTop"},
11+
{ label: "Right Bottom", value: "rightBottom"},
12+
{ label: "Top", value: "top"},
13+
{ label: "Top Left", value: "topLeft"},
14+
{ label: "Top Right", value: "topRight"},
15+
{ label: "Bottom", value: "bottom"},
16+
{ label: "Bottom Left", value: "bottomLeft"},
17+
{ label: "Bottom Right", value: "bottomRight"},
18+
];
19+
20+
export const TypeOptions: {label: string, value: TourStepType}[] = [
21+
{ label: "Default", value: "default"},
22+
{ label: "Primary", value: "primary"},
23+
];
24+
25+
export {};

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

Lines changed: 0 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -88,36 +88,6 @@ export const useSelectInputValidate = (props: ValidationParams) => {
8888
] as const;
8989
};
9090

91-
// type ValidationCompWithValue = ValidationComp & {
92-
// value: ConstructorToComp<
93-
// ReturnType<
94-
// | typeof stringExposingStateControl
95-
// | typeof arrayStringExposingStateControl
96-
// | typeof jsonExposingStateControl<(string | number)[]>
97-
// >
98-
// >;
99-
// };
100-
// export const TourInputInvalidConfig = depsConfig<
101-
// ValidationCompWithValue,
102-
// ChildrenTypeToDepsKeys<ValidationCompWithValue>
103-
// >({
104-
// name: "invalid",
105-
// desc: trans("export.invalidDesc"),
106-
// depKeys: ["value", "required", "customRule"],
107-
// func: (input) =>
108-
// selectInputValidate({
109-
// ...input,
110-
// value: { value: input.value },
111-
// }).validateStatus !== "success",
112-
// });
113-
114-
// export const SelectInputValidationSection = (children: ValidationComp) => (
115-
// <Section name={sectionNames.validation}>
116-
// {requiredPropertyView(children)}
117-
// {children.customRule.propertyView({})}
118-
// </Section>
119-
// );
120-
12191
type ChildrenType = RecordConstructorToComp<{
12292
value: ReturnType<typeof stringExposingStateControl>;
12393
options: typeof TourStepControl;
@@ -138,22 +108,4 @@ export const TourInputCommonConfig = [
138108
];
139109

140110
export const selectDivRefMethods = refMethods<HTMLDivElement>([focusWithOptions, blurMethod]);
141-
let styleExample = {
142-
"style": { "boxShadow": "inset 0 0 15px #fff" },
143-
"color": "rgba(40, 0, 255, .4)"
144-
};
145111

146-
export const TourStepMaskTooltip = (
147-
<div>
148-
{trans("tour.options.mask.tooltip")}:
149-
<br />
150-
<br />
151-
{trans("tour.options.mask.tooltipValidTypes")}
152-
<br />
153-
<br />
154-
<h3>Example:</h3>
155-
<code>
156-
{JSON.stringify(styleExample, null, 1)}
157-
</code>
158-
</div>
159-
);

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

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import { trans } from "@lowcoder-ee/i18n";
2+
3+
const indicatorsRenderExample = `(current, total) => (
4+
<span>
5+
{current + 1} / {total}
6+
</span>
7+
)`
8+
export const IndicatorsRenderTooltip = (
9+
<div>
10+
{trans("tour.indicatorsRender.tooltip")}
11+
<br />
12+
<br />
13+
{trans("tour.indicatorsRender.tooltipValidTypes")}
14+
<br />
15+
<br />
16+
<h4>{trans("tour.tooltipSignatureHeader")}</h4>
17+
<code>
18+
{trans("tour.indicatorsRender.tooltipFunctionSignature")}
19+
</code>
20+
<br />
21+
<br />
22+
<h4>{trans("tour.tooltipExampleHeader")}</h4>
23+
<code>
24+
{indicatorsRenderExample}
25+
</code>
26+
</div>
27+
);
28+
29+
let styleExample = {
30+
"style": { "boxShadow": "inset 0 0 15px #fff" },
31+
"color": "rgba(40, 0, 255, .4)"
32+
};
33+
34+
export const TourStepMaskTooltip = (
35+
<div>
36+
{trans("tour.options.mask.tooltip")}:
37+
<br />
38+
<br />
39+
{trans("tour.options.mask.tooltipValidTypes")}
40+
<br />
41+
<br />
42+
<h3>Example:</h3>
43+
<code>
44+
{JSON.stringify(styleExample, null, 1)}
45+
</code>
46+
</div>
47+
);
48+
49+
export const TourMaskTooltip = (
50+
<div>
51+
{trans("tour.mask.tooltip")}:
52+
<br />
53+
<br />
54+
{trans("tour.mask.tooltipValidTypes")}
55+
<br />
56+
<br />
57+
<h4>Example:</h4>
58+
<code>
59+
{JSON.stringify(styleExample, null, 1)}
60+
</code>
61+
</div>
62+
);
63+
64+
export const TourPlacementTooltip = (
65+
<div>
66+
{trans("tour.placement.tooltip")}:
67+
<br />
68+
<br />
69+
<h4>Valid options</h4>
70+
<h5>Above the component:</h5>
71+
<ul>
72+
<li><code>topLeft</code></li>
73+
<li><code>top</code></li>
74+
<li><code>topRight</code></li>
75+
</ul>
76+
<h5>To the left of the component:</h5>
77+
<ul>
78+
<li><code>leftTop</code></li>
79+
<li><code>left</code></li>
80+
<li><code>leftBottom</code></li>
81+
</ul>
82+
<h5>To the right of the component:</h5>
83+
<ul>
84+
<li><code>rightTop</code></li>
85+
<li><code>right</code></li>
86+
<li><code>rightBottom</code></li>
87+
</ul>
88+
<h5>Below the component:</h5>
89+
<ul>
90+
<li><code>bottomLeft</code></li>
91+
<li><code>bottom</code></li>
92+
<li><code>bottomRight</code></li>
93+
</ul>
94+
<h5>On top of the component:</h5>
95+
<ul>
96+
<li>center</li>
97+
</ul>
98+
</div>
99+
);
100+
101+
export {};

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -507,6 +507,16 @@ export const FunctionControl = codeControl<CodeFunction>(
507507
{ codeType: "Function", evalWithMethods: true }
508508
);
509509

510+
export const AlkjdfControl = codeControl<(current: number, total: number)=>ReactNode>(
511+
(value) => {
512+
// if (typeof value === "function") {
513+
// return value;
514+
// }
515+
return (current,total) => (value as (current: number, total: number)=>ReactNode)(current,total);
516+
},
517+
{ codeType: "Function", evalWithMethods: true }
518+
);
519+
510520
export const TransformerCodeControl = codeControl<JSONValue>(
511521
(value) => {
512522
if (typeof value === "function") {

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

Lines changed: 5 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,8 @@ import { getNextEntityName } from "util/stringUtils";
2222
import { BoolControl, ControlParams } from "lowcoder-sdk";
2323
import { ReactNode, useContext, useEffect, useState } from "react";
2424
import { EditorContext, EditorState } from "@lowcoder-ee/comps/editorState";
25-
import { TourStepMaskTooltip } from "@lowcoder-ee/comps/comps/tourComp/tourInputConstants";
26-
export type PlacementType = 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'center';
27-
export type TourStepType = 'default' | 'primary';
25+
import { PlacementOptions, TypeOptions } from "@lowcoder-ee/comps/comps/tourComp/tourControlConstants";
26+
import { TourPlacementTooltip, TourStepMaskTooltip } from "@lowcoder-ee/comps/comps/tourComp/tourTooltips";
2827

2928
const OptionTypes = [
3029
{
@@ -265,29 +264,6 @@ export function tourStepsControl<T extends TourStepControlType>(
265264
};
266265
}
267266

268-
const PlacementOptions: {label: string, value: PlacementType}[] = [
269-
{ label: "Center", value: "center"},
270-
{ label: "Left", value: "left"},
271-
{ label: "Left Top", value: "leftTop"},
272-
{ label: "Left Bottom", value: "leftBottom"},
273-
{ label: "Right", value: "right"},
274-
{ label: "Right Top", value: "rightTop"},
275-
{ label: "Right Bottom", value: "rightBottom"},
276-
{ label: "Top", value: "top"},
277-
{ label: "Top Left", value: "topLeft"},
278-
{ label: "Top Right", value: "topRight"},
279-
{ label: "Bottom", value: "bottom"},
280-
{ label: "Bottom Left", value: "bottomLeft"},
281-
{ label: "Bottom Right", value: "bottomRight"},
282-
];
283-
284-
285-
const TypeOptions: {label: string, value: TourStepType}[] = [
286-
{ label: "Default", value: "default"},
287-
{ label: "Primary", value: "primary"},
288-
];
289-
290-
291267
export function editorStateDropdownControl<T extends OptionsType>(
292268
options: ((editorState: EditorState) => T),
293269
defaultValue: ValueFromOption<T>
@@ -432,7 +408,8 @@ TourStep = class extends TourStep implements TourStepCompProperty {
432408
radioButton: false,
433409
})}
434410
{this.children.placement.propertyView({
435-
label: trans("textShow.verticalAlignment"),
411+
label: trans("tour.placement.label"),
412+
tooltip: TourPlacementTooltip,
436413
radioButton: false
437414
})}
438415
{this.children.arrow.propertyView({
@@ -443,7 +420,7 @@ TourStep = class extends TourStep implements TourStepCompProperty {
443420
label: "Cover Image Url"
444421
})}
445422
{this.children.mask.propertyView({
446-
label: "Mask",
423+
label: trans("tour.options.mask.label"),
447424
tooltip: TourStepMaskTooltip,
448425
})}
449426
{this.children.type.propertyView({

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

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2825,13 +2825,37 @@ export const en = {
28252825
"navItemStyle": "Menu Item Style"
28262826
},
28272827

2828-
"tour": {
2828+
"tour": {
2829+
tooltipExampleHeader: "Example:",
2830+
tooltipSignatureHeader: "Signature:",
28292831
"options": {
28302832
"mask": {
28312833
"label": "Mask",
28322834
"tooltip": "Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour.",
2833-
"tooltipValidTypes": "Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd. See an example below",
2835+
"tooltipValidTypes": "Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd.",
28342836
}
2837+
},
2838+
"indicatorsRender": {
2839+
"label": "Indicators Render",
2840+
"tooltip": "Provides a custom indicator for which step you are on",
2841+
"tooltipValidTypes": "Format is a function that accepts two args, `current` and `total` and returns a ReactNode",
2842+
"tooltipFunctionSignatureHeader": "Signature:",
2843+
"tooltipFunctionSignature": "(current: number, total: number) => ReactNode",
2844+
"tooltipExampleHeader": "Example:",
2845+
},
2846+
"disabledInteraction": {
2847+
"label": "Disable Interaction",
2848+
"tooltip": "Disable interaction in the highlighted area."
2849+
},
2850+
"mask": {
2851+
"label": "Mask",
2852+
"tooltip": "Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour.",
2853+
"tooltipValidTypes": "Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd.",
2854+
},
2855+
placement: {
2856+
label: "Placement",
2857+
tooltip: "Position of the guide card relative to the target element",
2858+
tooltipValidOptions: "center left leftTop leftBottom right rightTop rightBottom top topLeft topRight bottom bottomLeft bottomRight"
28352859
}
28362860
},
28372861

0 commit comments

Comments
 (0)