Skip to content

Commit 26e96a1

Browse files
snowe2010snowe2010
committed
Begin adding new Tour component from Antd
currently only shows a tour modal, not connected to any components can be triggered with the Control a Component event handler
1 parent 0b2e70f commit 26e96a1

15 files changed

+1876
-2
lines changed

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { default as Cascader } from "antd/es/cascader";
2+
import { CascaderStyleType } from "comps/controls/styleControlConstants";
3+
import { blurMethod, focusMethod } from "comps/utils/methodUtils";
4+
import { trans } from "i18n";
5+
import styled from "styled-components";
6+
import { UICompBuilder, withDefault } from "../../generators";
7+
import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
8+
import { CascaderChildren, CascaderPropertyView, defaultDataSource } from "./cascaderContants";
9+
import { getStyle } from "./tourCompConstants";
10+
import { refMethods } from "comps/generators/withMethodExposing";
11+
12+
const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType }>`
13+
width: 100%;
14+
font-family:"Montserrat";
15+
${(props) => props.$style && getStyle(props.$style)}
16+
`;
17+
18+
let CascaderBasicComp = (function () {
19+
const childrenMap = CascaderChildren;
20+
21+
return new UICompBuilder(childrenMap, (props) => {
22+
return props.label({
23+
style: props.style,
24+
children: (
25+
<CascaderStyle
26+
ref={props.viewRef}
27+
value={props.value.value}
28+
disabled={props.disabled}
29+
defaultValue={props.value.value}
30+
options={props.options}
31+
allowClear={props.allowClear}
32+
placeholder={props.placeholder}
33+
showSearch={props.showSearch}
34+
$style={props.style}
35+
onFocus={() => props.onEvent("focus")}
36+
onBlur={() => props.onEvent("blur")}
37+
onChange={(value: (string | number)[]) => {
38+
props.value.onChange(value as string[]);
39+
props.onEvent("change");
40+
}}
41+
/>
42+
),
43+
});
44+
})
45+
.setPropertyViewFn((children) => (
46+
<>
47+
<CascaderPropertyView {...children} />
48+
</>
49+
))
50+
.setExposeMethodConfigs(refMethods([focusMethod, blurMethod]))
51+
.build();
52+
})();
53+
54+
const CascaderComp = withExposingConfigs(CascaderBasicComp, [
55+
new NameConfig("value", trans("selectInput.valueDesc")),
56+
...CommonNameConfig,
57+
]);
58+
59+
export const CascaderWithDefault = withDefault(CascaderComp, {
60+
options: defaultDataSource,
61+
});

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { SelectEventHandlerControl } from "../../controls/eventHandlerControl";
2+
import { Section, sectionNames } from "lowcoder-design";
3+
import { RecordConstructorToComp } from "lowcoder-core";
4+
import { BoolCodeControl, JSONObjectArrayControl, StringControl } from "comps/controls/codeControl";
5+
import { arrayStringExposingStateControl } from "comps/controls/codeStateControl";
6+
import { BoolControl } from "comps/controls/boolControl";
7+
import { LabelControl } from "comps/controls/labelControl";
8+
import { styleControl } from "comps/controls/styleControl";
9+
import { CascaderStyle } from "comps/controls/styleControlConstants";
10+
import {
11+
allowClearPropertyView,
12+
disabledPropertyView,
13+
hiddenPropertyView,
14+
placeholderPropertyView,
15+
showSearchPropertyView,
16+
} from "comps/utils/propertyUtils";
17+
import { i18nObjs, trans } from "i18n";
18+
import { RefControl } from "comps/controls/refControl";
19+
import { CascaderRef } from "antd/lib/cascader";
20+
21+
import { MarginControl } from "../../controls/marginControl";
22+
import { PaddingControl } from "../../controls/paddingControl";
23+
24+
import { useContext } from "react";
25+
import { EditorContext } from "comps/editorState";
26+
27+
export const defaultDataSource = JSON.stringify(i18nObjs.cascader, null, " ");
28+
29+
export const CascaderChildren = {
30+
value: arrayStringExposingStateControl("value", i18nObjs.cascaderDefult),
31+
label: LabelControl,
32+
placeholder: StringControl,
33+
disabled: BoolCodeControl,
34+
onEvent: SelectEventHandlerControl,
35+
allowClear: BoolControl,
36+
options: JSONObjectArrayControl,
37+
style: styleControl(CascaderStyle),
38+
showSearch: BoolControl.DEFAULT_TRUE,
39+
viewRef: RefControl<CascaderRef>,
40+
margin: MarginControl,
41+
padding: PaddingControl,
42+
};
43+
44+
export const CascaderPropertyView = (
45+
children: RecordConstructorToComp<typeof CascaderChildren & { hidden: typeof BoolCodeControl }>
46+
) => (
47+
<>
48+
<Section name={sectionNames.basic}>
49+
{children.options.propertyView({ label: trans("cascader.options") })}
50+
{children.value.propertyView({ label: trans("prop.defaultValue") })}
51+
{placeholderPropertyView(children)}
52+
</Section>
53+
54+
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
55+
<Section name={sectionNames.interaction}>
56+
{children.onEvent.getPropertyView()}
57+
{disabledPropertyView(children)}
58+
{hiddenPropertyView(children)}
59+
</Section>
60+
)}
61+
62+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
63+
children.label.getPropertyView()
64+
)}
65+
66+
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
67+
<Section name={sectionNames.advanced}>
68+
{allowClearPropertyView(children)}
69+
{showSearchPropertyView(children)}
70+
</Section>
71+
)}
72+
73+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
74+
<Section name={sectionNames.style}>
75+
{children.style.getPropertyView()}
76+
</Section>
77+
)}
78+
</>
79+
);

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

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
import { default as AntdCheckboxGroup } from "antd/es/checkbox/Group";
2+
import { SelectInputOptionControl } from "comps/controls/optionsControl";
3+
import { BoolCodeControl } from "../../controls/codeControl";
4+
import { arrayStringExposingStateControl } from "../../controls/codeStateControl";
5+
import { LabelControl } from "../../controls/labelControl";
6+
import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl";
7+
import { UICompBuilder } from "../../generators";
8+
import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
9+
import styled, { css } from "styled-components";
10+
import {
11+
selectDivRefMethods,
12+
TourInputInvalidConfig,
13+
SelectInputValidationChildren,
14+
useSelectInputValidate,
15+
} from "./tourInputConstants";
16+
import { formDataChildren } from "../formComp/formDataConstants";
17+
import { styleControl } from "comps/controls/styleControl";
18+
import { CheckboxStyle, CheckboxStyleType } from "comps/controls/styleControlConstants";
19+
import { RadioLayoutOptions, RadioPropertyView } from "./radioCompConstants";
20+
import { dropdownControl } from "../../controls/dropdownControl";
21+
import { ValueFromOption } from "lowcoder-design";
22+
import { EllipsisTextCss } from "lowcoder-design";
23+
import { trans } from "i18n";
24+
import { RefControl } from "comps/controls/refControl";
25+
import { migrateOldData } from "comps/generators/simpleGenerators";
26+
import { fixOldInputCompData } from "../textInputComp/textInputConstants";
27+
28+
export const getStyle = (style: CheckboxStyleType) => {
29+
return css`
30+
&,
31+
.ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled) {
32+
color: ${style.staticText};
33+
max-width: calc(100% - 8px);
34+
35+
span:not(.ant-checkbox) {
36+
${EllipsisTextCss};
37+
}
38+
39+
.ant-checkbox-checked {
40+
.ant-checkbox-inner {
41+
background-color: ${style.checkedBackground};
42+
border-color: ${style.checkedBackground};
43+
border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
44+
45+
&::after {
46+
border-color: ${style.checked};
47+
}
48+
}
49+
50+
&::after {
51+
border-color: ${style.checkedBackground};
52+
border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
53+
border-radius: ${style.radius};
54+
}
55+
}
56+
57+
.ant-checkbox-inner {
58+
border-radius: ${style.radius};
59+
background-color: ${style.uncheckedBackground};
60+
border-color: ${style.uncheckedBorder};
61+
border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
62+
}
63+
64+
&:hover .ant-checkbox-inner,
65+
.ant-checkbox:hover .ant-checkbox-inner,
66+
.ant-checkbox-input + ant-checkbox-inner {
67+
background-color:${style.hoverBackground ? style.hoverBackground :'#fff'};
68+
}
69+
70+
&:hover .ant-checkbox-checked .ant-checkbox-inner,
71+
.ant-checkbox:hover .ant-checkbox-inner,
72+
.ant-checkbox-input + ant-checkbox-inner {
73+
background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'};
74+
}
75+
76+
&:hover .ant-checkbox-inner,
77+
.ant-checkbox:hover .ant-checkbox-inner,
78+
.ant-checkbox-input:focus + .ant-checkbox-inner {
79+
border-color: ${style.checkedBackground};
80+
border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
81+
}
82+
}
83+
84+
85+
86+
.ant-checkbox-group-item {
87+
font-family:${style.fontFamily};
88+
font-size:${style.textSize};
89+
font-weight:${style.textWeight};
90+
font-style:${style.fontStyle};
91+
text-transform:${style.textTransform};
92+
text-decoration:${style.textDecoration};
93+
}
94+
.ant-checkbox-wrapper {
95+
padding: ${style.padding};
96+
.ant-checkbox-inner,
97+
.ant-checkbox-checked::after {
98+
border-radius: ${style.radius};
99+
}
100+
}
101+
`;
102+
};
103+
104+
const CheckboxGroup = styled(AntdCheckboxGroup) <{
105+
$style: CheckboxStyleType;
106+
$layout: ValueFromOption<typeof RadioLayoutOptions>;
107+
}>`
108+
min-height: 32px;
109+
${(props) => props.$style && getStyle(props.$style)}
110+
${(props) => {
111+
if (props.$layout === "horizontal") {
112+
return css`
113+
display: flex;
114+
align-items: center;
115+
flex-wrap: wrap;
116+
`;
117+
} else if (props.$layout === "vertical") {
118+
return css`
119+
display: flex;
120+
flex-direction: column;
121+
`;
122+
} else if (props.$layout === "auto_columns") {
123+
return css`
124+
break-inside: avoid;
125+
columns: 160px;
126+
`;
127+
}
128+
}}
129+
`;
130+
131+
let CheckboxBasicComp = (function () {
132+
const childrenMap = {
133+
defaultValue: arrayStringExposingStateControl("defaultValue"),
134+
value: arrayStringExposingStateControl("value"),
135+
label: LabelControl,
136+
disabled: BoolCodeControl,
137+
onEvent: ChangeEventHandlerControl,
138+
options: SelectInputOptionControl,
139+
style: styleControl(CheckboxStyle),
140+
layout: dropdownControl(RadioLayoutOptions, "horizontal"),
141+
viewRef: RefControl<HTMLDivElement>,
142+
143+
...SelectInputValidationChildren,
144+
...formDataChildren,
145+
};
146+
return new UICompBuilder(childrenMap, (props) => {
147+
const [
148+
validateState,
149+
handleChange,
150+
] = useSelectInputValidate(props);
151+
return props.label({
152+
required: props.required,
153+
style: props.style,
154+
children: (
155+
<CheckboxGroup
156+
ref={props.viewRef}
157+
disabled={props.disabled}
158+
value={props.value.value}
159+
$style={props.style}
160+
$layout={props.layout}
161+
options={props.options
162+
.filter((option) => option.value !== undefined && !option.hidden)
163+
.map((option) => ({
164+
label: option.label,
165+
value: option.value,
166+
disabled: option.disabled,
167+
}))}
168+
onChange={(values) => {
169+
handleChange(values as string[]);
170+
}}
171+
/>
172+
),
173+
...validateState,
174+
});
175+
})
176+
.setPropertyViewFn((children) => <RadioPropertyView {...children} />)
177+
.setExposeMethodConfigs(selectDivRefMethods)
178+
.build();
179+
})();
180+
181+
CheckboxBasicComp = migrateOldData(CheckboxBasicComp, fixOldInputCompData);
182+
183+
export const CheckboxComp = withExposingConfigs(CheckboxBasicComp, [
184+
new NameConfig("value", trans("selectInput.valueDesc")),
185+
TourInputInvalidConfig,
186+
...CommonNameConfig,
187+
]);

0 commit comments

Comments
 (0)