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 26e96a1

Browse files
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

File tree

15 files changed

+1876
-2
lines changed

15 files changed

+1876
-2
lines changed
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+
});
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+
);
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)

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