Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 1f16453

Browse files
imtananikhwaimtananikhwa
committed
Label style w.i.p
1 parent e85db24 commit 1f16453

20 files changed

+131
-78
lines changed

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { styleControl } from "comps/controls/styleControl";
55
import {
66
InputLikeStyle,
77
InputLikeStyleType,
8+
LabelStyle,
89
} from "comps/controls/styleControlConstants";
910
import {
1011
NameConfig,
@@ -73,6 +74,7 @@ const childrenMap = {
7374
viewRef: RefControl<InputRef>,
7475
allowClear: BoolControl.DEFAULT_TRUE,
7576
style: styleControl(InputLikeStyle),
77+
labelStyle:styleControl(LabelStyle),
7678
prefixIcon: IconControl,
7779
suffixIcon: IconControl,
7880
items: jsonControl(convertAutoCompleteData, autoCompleteDate),
@@ -276,8 +278,8 @@ let AutoCompleteCompBase = (function () {
276278
</ConfigProvider>
277279
</>
278280
),
279-
// style: props.style,
280-
// ...validateState,
281+
style: props.labelStyle,
282+
...validateState,
281283
});
282284
})
283285
.setPropertyViewFn((children) => {
@@ -335,6 +337,9 @@ let AutoCompleteCompBase = (function () {
335337
<Section name={sectionNames.style}>
336338
{children.style.getPropertyView()}
337339
</Section>
340+
<Section name={sectionNames.labelStyle}>
341+
{children.labelStyle.getPropertyView()}
342+
</Section>
338343
</>
339344
);
340345
})

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
3030
import { withMethodExposing, refMethods } from "../../generators/withMethodExposing";
3131
import { RefControl } from "../../controls/refControl";
3232
import { styleControl } from "comps/controls/styleControl";
33-
import { InputLikeStyle, InputLikeStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
33+
import { InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
3434
import {
3535
disabledPropertyView,
3636
hiddenPropertyView,
@@ -256,6 +256,7 @@ const childrenMap = {
256256
onEvent: InputEventHandlerControl,
257257
viewRef: RefControl<HTMLInputElement>,
258258
style: styleControl(InputLikeStyle),
259+
labelStyle:styleControl(LabelStyle),
259260
prefixIcon: IconControl,
260261

261262
// validation
@@ -377,7 +378,7 @@ const NumberInputTmpComp = (function () {
377378
return props.label({
378379
required: props.required,
379380
children: <CustomInputNumber {...props} />,
380-
style: props.style,
381+
style: props.labelStyle,
381382
...validate(props),
382383
});
383384
})
@@ -425,9 +426,14 @@ const NumberInputTmpComp = (function () {
425426
)}
426427

427428
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
429+
<>
428430
<Section name={sectionNames.style}>
429431
{children.style.getPropertyView()}
430432
</Section>
433+
<Section name={sectionNames.labelStyle}>
434+
{children.labelStyle.getPropertyView()}
435+
</Section>
436+
</>
431437
)}
432438
</>
433439
))

‎client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const RangeSliderBasicComp = (function () {
1414
};
1515
return new UICompBuilder(childrenMap, (props) => {
1616
return props.label({
17-
style: props.style,
17+
style: props.labelStyle,
1818
children: (
1919
<SliderWrapper
2020
onMouseDown={(e: any) => {

‎client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const SliderBasicComp = (function () {
1818
};
1919
return new UICompBuilder(childrenMap, (props) => {
2020
return props.label({
21-
style: props.style,
21+
style: props.labelStyle,
2222
children: (
2323
<SliderWrapper
2424
onMouseDown={(e: any) => {

‎client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl";
55
import { Section, sectionNames } from "lowcoder-design";
66
import { RecordConstructorToComp } from "lowcoder-core";
77
import { styleControl } from "comps/controls/styleControl";
8-
import { SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants";
8+
import { LabelStyle, SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants";
99
import styled, { css } from "styled-components";
1010
import { default as Slider } from "antd/es/slider";
1111
import { darkenColor, fadeColor } from "lowcoder-design";
@@ -67,6 +67,7 @@ export const SliderChildren = {
6767
disabled: BoolCodeControl,
6868
onEvent: ChangeEventHandlerControl,
6969
style: styleControl(SliderStyle),
70+
labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)),
7071
prefixIcon: IconControl,
7172
suffixIcon: IconControl,
7273
};
@@ -96,6 +97,9 @@ export const SliderPropertyView = (
9697
<Section name={sectionNames.style}>
9798
{children.style.getPropertyView()}
9899
</Section>
100+
<Section name={sectionNames.labelStyle}>
101+
{children.labelStyle.getPropertyView()}
102+
</Section>
99103
</>
100104
)}
101105
</>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ let CascaderBasicComp = (function () {
2020

2121
return new UICompBuilder(childrenMap, (props) => {
2222
return props.label({
23-
style: props.style,
23+
style: props.labelStyle,
2424
children: (
2525
<CascaderStyle
2626
ref={props.viewRef}

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

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { arrayStringExposingStateControl } from "comps/controls/codeStateControl
66
import { BoolControl } from "comps/controls/boolControl";
77
import { LabelControl } from "comps/controls/labelControl";
88
import { styleControl } from "comps/controls/styleControl";
9-
import { CascaderStyle } from "comps/controls/styleControlConstants";
9+
import { CascaderStyle, LabelStyle } from "comps/controls/styleControlConstants";
1010
import {
1111
allowClearPropertyView,
1212
disabledPropertyView,
@@ -18,7 +18,7 @@ import { i18nObjs, trans } from "i18n";
1818
import { RefControl } from "comps/controls/refControl";
1919
import { CascaderRef } from "antd/lib/cascader";
2020

21-
import { MarginControl } from "../../controls/marginControl";
21+
import { MarginControl } from "../../controls/marginControl";
2222
import { PaddingControl } from "../../controls/paddingControl";
2323

2424
import { useContext } from "react";
@@ -35,9 +35,10 @@ export const CascaderChildren = {
3535
allowClear: BoolControl,
3636
options: JSONObjectArrayControl,
3737
style: styleControl(CascaderStyle),
38+
labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
3839
showSearch: BoolControl.DEFAULT_TRUE,
3940
viewRef: RefControl<CascaderRef>,
40-
margin: MarginControl,
41+
margin: MarginControl,
4142
padding: PaddingControl,
4243
};
4344

@@ -71,9 +72,14 @@ export const CascaderPropertyView = (
7172
)}
7273

7374
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
74-
<Section name={sectionNames.style}>
75-
{children.style.getPropertyView()}
76-
</Section>
75+
<>
76+
<Section name={sectionNames.style}>
77+
{children.style.getPropertyView()}
78+
</Section>
79+
<Section name={sectionNames.labelStyle}>
80+
{children.labelStyle.getPropertyView()}
81+
</Section>
82+
</>
7783
)}
7884
</>
7985
);

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
} from "./selectInputConstants";
1616
import { formDataChildren } from "../formComp/formDataConstants";
1717
import { styleControl } from "comps/controls/styleControl";
18-
import { CheckboxStyle, CheckboxStyleType } from "comps/controls/styleControlConstants";
18+
import { CheckboxStyle, CheckboxStyleType, LabelStyle } from "comps/controls/styleControlConstants";
1919
import { RadioLayoutOptions, RadioPropertyView } from "./radioCompConstants";
2020
import { dropdownControl } from "../../controls/dropdownControl";
2121
import { ValueFromOption } from "lowcoder-design";
@@ -135,6 +135,7 @@ const CheckboxBasicComp = (function () {
135135
onEvent: ChangeEventHandlerControl,
136136
options: SelectInputOptionControl,
137137
style: styleControl(CheckboxStyle),
138+
labelStyle:styleControl(LabelStyle),
138139
layout: dropdownControl(RadioLayoutOptions, "horizontal"),
139140
viewRef: RefControl<HTMLDivElement>,
140141

@@ -148,7 +149,7 @@ const CheckboxBasicComp = (function () {
148149
] = useSelectInputValidate(props);
149150
return props.label({
150151
required: props.required,
151-
style: props.style,
152+
style: props.labelStyle,
152153
children: (
153154
<CheckboxGroup
154155
ref={props.viewRef}

‎client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { styleControl } from "comps/controls/styleControl";
2-
import { MultiSelectStyle } from "comps/controls/styleControlConstants";
2+
import { LabelStyle, MultiSelectStyle } from "comps/controls/styleControlConstants";
33
import { trans } from "i18n";
44
import { arrayStringExposingStateControl } from "../../controls/codeStateControl";
55
import { UICompBuilder } from "../../generators";
@@ -22,6 +22,7 @@ const MultiSelectBasicComp = (function () {
2222
defaultValue: arrayStringExposingStateControl("defaultValue", ["1", "2"]),
2323
value: arrayStringExposingStateControl("value"),
2424
style: styleControl(MultiSelectStyle),
25+
labelStyle:styleControl(LabelStyle),
2526
margin: MarginControl,
2627
padding: PaddingControl,
2728
};
@@ -34,7 +35,7 @@ const MultiSelectBasicComp = (function () {
3435

3536
return props.label({
3637
required: props.required,
37-
style: props.style,
38+
style: props.labelStyle,
3839
children: (
3940
<SelectUIView
4041
{...props}

‎client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ const RadioBasicComp = (function () {
101101
] = useSelectInputValidate(props);
102102
return props.label({
103103
required: props.required,
104-
style: props.style,
104+
style: props.labelStyle,
105105
children: (
106106
<Radio
107107
ref={props.viewRef}

‎client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
} from "./selectInputConstants";
1515
import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
1616
import { styleControl } from "comps/controls/styleControl";
17-
import { RadioStyle } from "comps/controls/styleControlConstants";
17+
import { LabelStyle, RadioStyle } from "comps/controls/styleControlConstants";
1818
import { dropdownControl } from "../../controls/dropdownControl";
1919
import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils";
2020
import { trans } from "i18n";
@@ -37,6 +37,7 @@ export const RadioChildrenMap = {
3737
onEvent: ChangeEventHandlerControl,
3838
options: SelectInputOptionControl,
3939
style: styleControl(RadioStyle),
40+
labelStyle:styleControl(LabelStyle),
4041
layout: dropdownControl(RadioLayoutOptions, "horizontal"),
4142
viewRef: RefControl<HTMLDivElement>,
4243

@@ -92,7 +93,10 @@ export const RadioPropertyView = (
9293
)}
9394

9495
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
96+
<>
9597
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
98+
<Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
99+
</>
96100
)}
97101
</>
98102
);

‎client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { styleControl } from "comps/controls/styleControl";
2-
import { SelectStyle } from "comps/controls/styleControlConstants";
2+
import { LabelStyle, SelectStyle } from "comps/controls/styleControlConstants";
33
import { trans } from "i18n";
44
import { stringExposingStateControl } from "../../controls/codeStateControl";
55
import { UICompBuilder } from "../../generators";
@@ -24,6 +24,7 @@ const SelectBasicComp = (function () {
2424
defaultValue: stringExposingStateControl("defaultValue"),
2525
value: stringExposingStateControl("value"),
2626
style: styleControl(SelectStyle),
27+
labelStyle: styleControl(LabelStyle)
2728
};
2829
return new UICompBuilder(childrenMap, (props, dispatch) => {
2930
const [
@@ -35,10 +36,10 @@ const SelectBasicComp = (function () {
3536
propsRef.current = props;
3637

3738
const valueSet = new Set<any>(props.options.map((o) => o.value)); // Filter illegal default values entered by the user
38-
39+
3940
return props.label({
4041
required: props.required,
41-
style: props.style,
42+
style: props.labelStyle,
4243
children: (
4344
<SelectUIView
4445
{...props}

‎client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,7 @@ export const SelectPropertyView = (
290290
defaultValue: { propertyView: (params: ControlParams) => ControlNode };
291291
value: { propertyView: (params: ControlParams) => ControlNode };
292292
style: { getPropertyView: () => ControlNode };
293+
labelStyle: { getPropertyView: () => ControlNode };
293294
}
294295
) => (
295296
<>
@@ -328,10 +329,15 @@ export const SelectPropertyView = (
328329
{["layout", "both"].includes(
329330
useContext(EditorContext).editorModeStatus
330331
) && (
331-
<Section name={sectionNames.style}>
332-
{children.style.getPropertyView()}
333-
</Section>
334-
)}
332+
<>
333+
<Section name={sectionNames.style}>
334+
{children.style.getPropertyView()}
335+
</Section>
336+
<Section name={sectionNames.labelStyle}>
337+
{children.labelStyle.getPropertyView()}
338+
</Section>
339+
</>
340+
)}
335341
</>
336342
);
337343

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

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { booleanExposingStateControl } from "comps/controls/codeStateControl";
44
import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
55
import { LabelControl } from "comps/controls/labelControl";
66
import { styleControl } from "comps/controls/styleControl";
7-
import { SwitchStyle, SwitchStyleType } from "comps/controls/styleControlConstants";
7+
import { SwitchStyle, SwitchStyleType, LabelStyle } from "comps/controls/styleControlConstants";
88
import { migrateOldData } from "comps/generators/simpleGenerators";
99
import { Section, sectionNames } from "lowcoder-design";
1010
import styled, { css } from "styled-components";
@@ -90,13 +90,14 @@ let SwitchTmpComp = (function () {
9090
onEvent: eventHandlerControl(EventOptions),
9191
disabled: BoolCodeControl,
9292
style: migrateOldData(styleControl(SwitchStyle), fixOldData),
93+
labelStyle: styleControl(LabelStyle),
9394
viewRef: RefControl<HTMLElement>,
9495

9596
...formDataChildren,
9697
};
9798
return new UICompBuilder(childrenMap, (props) => {
9899
return props.label({
99-
style: props.style,
100+
style: props.labelStyle,
100101
children: (
101102
<SwitchWrapper disabled={props.disabled} $style={props.style}>
102103
<Switch
@@ -135,9 +136,14 @@ let SwitchTmpComp = (function () {
135136
)}
136137

137138
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
138-
<Section name={sectionNames.style}>
139-
{children.style.getPropertyView()}
140-
</Section>
139+
<>
140+
<Section name={sectionNames.style}>
141+
{children.style.getPropertyView()}
142+
</Section>
143+
<Section name={sectionNames.labelStyle}>
144+
{children.labelStyle.getPropertyView()}
145+
</Section>
146+
</>
141147
)}
142148
</>
143149
);

0 commit comments

Comments
 (0)