Skip to content

Commit 3fe583a

Browse files
snowe2010snowe2010
committed
Update property i18n and tooltips
update title and description to allow any html
1 parent f9f8295 commit 3fe583a

File tree

6 files changed

+107
-38
lines changed

6 files changed

+107
-38
lines changed

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,18 @@ let TourBasicComp = (function() {
4646
}
4747

4848
return {
49-
title: step.title,
50-
description: step.description,
49+
/**
50+
* 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
53+
* in all cases
54+
* This even applies to things like <b onmouseover="alert('mouseover');">, because the
55+
* app creator might desire functionality like this.
56+
*/
57+
title: (<div dangerouslySetInnerHTML={{ __html: step.title }} />),
58+
description: (<div dangerouslySetInnerHTML={{ __html: step.description }} />),
5159
target: target?.current,
52-
arrow: step.arrow || true,
60+
arrow: step.arrow,
5361
placement: step.placement as PlacementType,
5462
mask: step.mask,
5563
cover: step.cover ? (<img src={step.cover} />) : undefined,

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@ import { RecordConstructorToComp } from "lowcoder-core";
22
import { BoolControl } from "../../controls/boolControl";
33
import { LabelControl } from "../../controls/labelControl";
44
import { AlkjdfControl, BoolCodeControl, MaskControl, StringControl } from "../../controls/codeControl";
5-
import { ControlNode, Section, sectionNames } from "lowcoder-design";
5+
import { Section, sectionNames } from "lowcoder-design";
66
import { SelectEventHandlerControl } from "../../controls/eventHandlerControl";
7-
import { useContext } from "react";
87
import { stateComp } from "../../generators";
98
import { RefControl } from "comps/controls/refControl";
109
import { BaseSelectRef } from "rc-select";

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const indicatorsRenderExample = `(current, total) => (
44
<span>
55
{current + 1} / {total}
66
</span>
7-
)`
7+
)`;
88
export const IndicatorsRenderTooltip = (
99
<div>
1010
{trans("tour.indicatorsRender.tooltip")}
@@ -98,4 +98,15 @@ export const TourPlacementTooltip = (
9898
</div>
9999
);
100100

101+
const arrowTooltipSignature = `boolean | { pointAtCenter: boolean }`;
102+
export const TourStepArrowTooltip = (
103+
<div>
104+
{trans("tour.options.arrow.tooltip")}:
105+
<br />
106+
<br />
107+
<h4>{trans("tour.tooltipSignatureHeader")}</h4>
108+
<code>{arrowTooltipSignature}</code>
109+
</div>
110+
);
111+
101112
export {};

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

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BoolCodeControl, MaskControl, StringControl } from "comps/controls/codeControl";
1+
import { ArrowControl, BoolCodeControl, MaskControl, StringControl } from "comps/controls/codeControl";
22
import { dropdownControl } from "comps/controls/dropdownControl";
33
import { MultiCompBuilder, withDefault } from "comps/generators";
44
import { list } from "comps/generators/list";
@@ -23,7 +23,11 @@ import { BoolControl, ControlParams } from "lowcoder-sdk";
2323
import { ReactNode, useContext, useEffect, useState } from "react";
2424
import { EditorContext, EditorState } from "@lowcoder-ee/comps/editorState";
2525
import { PlacementOptions, TypeOptions } from "@lowcoder-ee/comps/comps/tourComp/tourControlConstants";
26-
import { TourPlacementTooltip, TourStepMaskTooltip } from "@lowcoder-ee/comps/comps/tourComp/tourTooltips";
26+
import {
27+
TourPlacementTooltip,
28+
TourStepArrowTooltip,
29+
TourStepMaskTooltip
30+
} from "@lowcoder-ee/comps/comps/tourComp/tourTooltips";
2731

2832
const OptionTypes = [
2933
{
@@ -379,7 +383,7 @@ let TourStep = new MultiCompBuilder(
379383
value: it.children.name.getView()
380384
})),
381385
""),
382-
arrow: BoolControl,
386+
arrow: ArrowControl,
383387
title: StringControl,
384388
description: StringControl,
385389
placement: dropdownControl(PlacementOptions, "bottom"),
@@ -396,15 +400,18 @@ TourStep = class extends TourStep implements TourStepCompProperty {
396400
return (
397401
<>
398402
{this.children.title.propertyView({
399-
label: "Title",
400-
placeholder: "Welcome",
403+
label: trans("tour.options.title.label"),
404+
placeholder: trans("tour.options.title.placeholder"),
405+
tooltip: trans("tour.options.title.tooltip"),
401406
})}
402407
{this.children.description.propertyView({
403-
label: "Description",
404-
placeholder: "Welcome to lowcoder, this is your first tutorial step",
408+
label: trans("tour.options.description.label"),
409+
placeholder: trans("tour.options.description.placeholder"),
410+
tooltip: trans("tour.options.description.tooltip"),
405411
})}
406412
{this.children.target.propertyView({
407-
label: "Component",
413+
label: trans("tour.options.target.label"),
414+
tooltip: trans("tour.options.target.tooltip"),
408415
radioButton: false,
409416
})}
410417
{this.children.placement.propertyView({
@@ -413,19 +420,22 @@ TourStep = class extends TourStep implements TourStepCompProperty {
413420
radioButton: false
414421
})}
415422
{this.children.arrow.propertyView({
416-
label: "Arrow",
423+
label: trans("tour.options.arrow.label"),
424+
tooltip: TourStepArrowTooltip,
417425
})}
418-
{hiddenPropertyView(this.children)}
419426
{this.children.cover.propertyView({
420-
label: "Cover Image Url"
427+
label: trans("tour.options.coverImage.label"),
428+
tooltip: trans("tour.options.coverImage.tooltip"),
421429
})}
422430
{this.children.mask.propertyView({
423431
label: trans("tour.options.mask.label"),
424432
tooltip: TourStepMaskTooltip,
425433
})}
426434
{this.children.type.propertyView({
427-
label: "Type",
435+
label: trans("tour.options.type.label"),
436+
tooltip: trans("tour.options.type.tooltip")
428437
})}
438+
{hiddenPropertyView(this.children)}
429439
</>
430440
);
431441
}

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

Lines changed: 47 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2825,32 +2825,59 @@ export const en = {
28252825
"navItemStyle": "Menu Item Style"
28262826
},
28272827

2828-
"tour": {
2828+
tour: {
28292829
tooltipExampleHeader: "Example:",
28302830
tooltipSignatureHeader: "Signature:",
2831-
"options": {
2832-
"mask": {
2833-
"label": "Mask",
2834-
"tooltip": "Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour.",
2835-
"tooltipValidTypes": "Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd.",
2831+
options: {
2832+
title: {
2833+
label: "Title",
2834+
placeholder: "Welcome",
2835+
tooltip: "The title of the step. Any HTML is valid here.",
2836+
},
2837+
description: {
2838+
label: "Description",
2839+
placeholder: "Welcome to lowcoder!",
2840+
tooltip: "The description of the step. Any HTML is valid here.",
2841+
},
2842+
mask: {
2843+
label: "Mask",
2844+
tooltip: "Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour.",
2845+
tooltipValidTypes: "Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd.",
2846+
},
2847+
arrow: {
2848+
label: "Arrow",
2849+
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.",
2850+
tooltipFunctionSignature: "boolean | { pointAtCenter: boolean }",
2851+
},
2852+
type: {
2853+
label: "Type",
2854+
tooltip: "The type of tooltip, this affects the background color and text color. The colors can be controlled with the main tour styling section."
2855+
},
2856+
target: {
2857+
label: "Component",
2858+
tooltip: "The component you want to put the tooltip on, or leave it empty if you simply want a modal in the middle of the screen."
2859+
},
2860+
coverImage: {
2861+
label: "Cover Image URI",
2862+
tooltip: "A URI for an image you would like to display with the step",
28362863
}
28372864
},
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:",
2865+
indicatorsRender: {
2866+
label: "Indicators Render",
2867+
tooltip: "Provides a custom indicator for which step you are on",
2868+
tooltipValidTypes: "Format is a function that accepts two args, `current` and `total` and returns a ReactNode",
2869+
tooltipFunctionSignatureHeader: "Signature:",
2870+
tooltipFunctionSignature: "(current: number, total: number) => ReactNode",
2871+
tooltipExampleHeader: "Example:",
28452872
},
2846-
"disabledInteraction": {
2847-
"label": "Disable Interaction",
2848-
"tooltip": "Disable interaction in the highlighted area."
2873+
disabledInteraction: {
2874+
label: "Disable Interaction",
2875+
tooltip: "Disable interaction in the highlighted area."
28492876
},
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.",
2877+
mask: {
2878+
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.",
2880+
tooltipValidTypes: "Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd.",
28542881
},
28552882
placement: {
28562883
label: "Placement",

‎client/packages/lowcoder/src/util/convertUtils.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -259,3 +259,17 @@ export function toBooleanOrCss(value: any): boolean | undefined | {
259259
}
260260
return toJSONObject(JSON.parse(value));
261261
}
262+
263+
export function toBooleanOrJsonObject(value: any): boolean | undefined | { pointAtCenter: boolean } {
264+
if (value === undefined || value === null || value === "") {
265+
return undefined;
266+
}
267+
if (value.toLocaleLowerCase() === "true" || value.toLocaleLowerCase() === "false") {
268+
return value.toLocaleLowerCase() === "true";
269+
}
270+
const json = toJSONObject(JSON.parse(value));
271+
if (json.pointAtCenter) {
272+
return json as { pointAtCenter: boolean };
273+
}
274+
throw new TypeError(typeErrorMsg("Object or Boolean", value));
275+
}

0 commit comments

Comments
 (0)