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 56b8233

Browse files
Add detailed tooltip for step mask
1 parent 2ece26f commit 56b8233

File tree

4 files changed

+50
-21
lines changed

4 files changed

+50
-21
lines changed

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

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,9 @@
1-
import { Section, sectionNames } from "lowcoder-design";
21
import { ChildrenTypeToDepsKeys, depsConfig } from "../../generators/withExposing";
3-
import { BoolControl } from "../../controls/boolControl";
4-
import { CustomRuleControl } from "../../controls/codeControl";
52
import { isEmpty } from "lodash";
6-
import { ConstructorToComp, RecordConstructorToComp } from "lowcoder-core";
7-
import {
8-
arrayStringExposingStateControl,
9-
jsonExposingStateControl,
10-
stringExposingStateControl,
11-
} from "../../controls/codeStateControl";
12-
import { requiredPropertyView } from "comps/utils/propertyUtils";
3+
import { RecordConstructorToComp } from "lowcoder-core";
4+
import { stringExposingStateControl } from "../../controls/codeStateControl";
135
import { trans } from "i18n";
146
import { useEffect, useRef, useState } from "react";
15-
import { SelectInputOptionControl } from "../../controls/optionsControl";
167
import { refMethods } from "comps/generators/withMethodExposing";
178
import { blurMethod, focusWithOptions } from "comps/utils/methodUtils";
189
import { TourStepControl } from "@lowcoder-ee/comps/controls/tourStepControl";
@@ -55,7 +46,7 @@ export const selectInputValidate = (
5546

5647
export const useSelectInputValidate = (props: ValidationParams) => {
5748
const [validateState, setValidateState] = useState({});
58-
const changeRef = useRef(false)
49+
const changeRef = useRef(false);
5950
const propsRef = useRef<ValidationParams>(props);
6051
propsRef.current = props;
6152

@@ -67,16 +58,16 @@ export const useSelectInputValidate = (props: ValidationParams) => {
6758
selectInputValidate({
6859
...propsRef.current,
6960
value: {
70-
value,
71-
},
61+
value
62+
}
7263
})
7364
);
7465
};
7566

7667
useEffect(() => {
77-
props.value.onChange?.(defaultValue)
68+
props.value.onChange?.(defaultValue);
7869
}, [defaultValue]);
79-
70+
8071
useEffect(() => {
8172
if (!changeRef.current) return;
8273

@@ -93,7 +84,7 @@ export const useSelectInputValidate = (props: ValidationParams) => {
9384
return [
9485
validateState,
9586
// handleValidate,
96-
handleChange,
87+
handleChange
9788
] as const;
9889
};
9990

@@ -136,14 +127,33 @@ export const TourInputCommonConfig = [
136127
name: "selectedIndex",
137128
desc: trans("selectInput.selectedIndexDesc"),
138129
depKeys: ["value", "options"],
139-
func: (input) => input.options.findIndex?.((o: any) => o.value === input.value),
130+
func: (input) => input.options.findIndex?.((o: any) => o.value === input.value)
140131
}),
141132
depsConfig<ChildrenType, ChildrenTypeToDepsKeys<ChildrenType>>({
142133
name: "selectedLabel",
143134
desc: trans("selectInput.selectedLabelDesc"),
144135
depKeys: ["value", "options"],
145-
func: (input) => input.options.find?.((o: any) => o.value === input.value)?.title,
146-
}),
136+
func: (input) => input.options.find?.((o: any) => o.value === input.value)?.title
137+
})
147138
];
148139

149140
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+
};
145+
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/controls/tourStepControl.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ 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 { PlacementType } from "@rc-component"
25+
import { TourStepMaskTooltip } from "@lowcoder-ee/comps/comps/tourComp/tourInputConstants";
2626
export type PlacementType = 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'center';
2727
export type TourStepType = 'default' | 'primary';
2828

@@ -440,6 +440,7 @@ TourStep = class extends TourStep implements TourStepCompProperty {
440440
{hiddenPropertyView(this.children)}
441441
{this.children.mask.propertyView({
442442
label: "Mask",
443+
tooltip: TourStepMaskTooltip,
443444
})}
444445
{this.children.type.propertyView({
445446
label: "Type",

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2825,6 +2825,16 @@ export const en = {
28252825
"navItemStyle": "Menu Item Style"
28262826
},
28272827

2828+
"tour": {
2829+
"options": {
2830+
"mask": {
2831+
"label": "Mask",
2832+
"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",
2834+
}
2835+
}
2836+
},
2837+
28282838
docUrls: {
28292839
docHome: "https://docs.lowcoder.cloud/",
28302840
components: "https://app.lowcoder.cloud/components/{compType}",

‎client/packages/lowcoder/src/i18n/locales/translation_files/en.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2590,5 +2590,13 @@
25902590
"widthTooltip": "Pixel or Percentage, e.g. 520, 60%",
25912591
"navStyle": "Menu Style",
25922592
"navItemStyle": "Menu Item Style"
2593+
},
2594+
"tour": {
2595+
"options": {
2596+
"mask": {
2597+
"label": "Mask",
2598+
"tooltip": "Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour."
2599+
}
2600+
}
25932601
}
25942602
}

0 commit comments

Comments
(0)

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