Skip to content

Commit 56b8233

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