Skip to content

Commit 15ee234

Browse files
imtananikhwaimtananikhwa
committed
Rating component, signature component ,date component label styling panel and properties added along with default values of latest add CSS properties
1 parent 1f16453 commit 15ee234

File tree

5 files changed

+172
-114
lines changed

5 files changed

+172
-114
lines changed

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

Lines changed: 38 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { UICompBuilder, withDefault } from "../../generators";
2020
import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing";
2121
import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
2222
import { styleControl } from "comps/controls/styleControl";
23-
import { DateTimeStyle, DateTimeStyleType } from "comps/controls/styleControlConstants";
23+
import { DateTimeStyle, DateTimeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
2424
import { withMethodExposing } from "../../generators/withMethodExposing";
2525
import {
2626
disabledPropertyView,
@@ -72,6 +72,7 @@ const commonChildren = {
7272
minuteStep: RangeControl.closed(1, 60, 1),
7373
secondStep: RangeControl.closed(1, 60, 1),
7474
style: styleControl(DateTimeStyle),
75+
labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
7576
suffixIcon: withDefault(IconControl, "/icon:regular/calendar"),
7677
...validationChildren,
7778
viewRef: RefControl<CommonPickerMethods>,
@@ -159,12 +160,12 @@ export type DateCompViewProps = Pick<
159160

160161
export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
161162
let time = dayjs(null);
162-
if(props.value.value !== '') {
163+
if (props.value.value !== '') {
163164
time = dayjs(props.value.value, DateParser);
164165
}
165166
return props.label({
166167
required: props.required,
167-
style: props.style,
168+
style: props.labelStyle,
168169
children: (
169170
<DateUIView
170171
viewRef={props.viewRef}
@@ -212,11 +213,11 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
212213

213214
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
214215
<><Section name={sectionNames.validation}>
215-
{requiredPropertyView(children)}
216-
{dateValidationFields(children)}
217-
{timeValidationFields(children)}
218-
{children.customRule.propertyView({})}
219-
</Section>
216+
{requiredPropertyView(children)}
217+
{dateValidationFields(children)}
218+
{timeValidationFields(children)}
219+
{children.customRule.propertyView({})}
220+
</Section>
220221
<Section name={sectionNames.interaction}>
221222
{children.onEvent.getPropertyView()}
222223
{disabledPropertyView(children)}
@@ -234,19 +235,24 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
234235
{children.placeholder.propertyView({ label: trans("date.placeholderText") })}
235236
</Section>
236237
)}
237-
238+
238239
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
239-
<><Section name={sectionNames.advanced}>
240+
<><Section name={sectionNames.advanced}>
240241
{timeFields(children, isMobile)}
241242
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
242243
</Section></>
243244
)}
244245
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && !isMobile && commonAdvanceSection(children)}
245246

246247
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
247-
<Section name={sectionNames.style}>
248-
{children.style.getPropertyView()}
249-
</Section>
248+
<>
249+
<Section name={sectionNames.style}>
250+
{children.style.getPropertyView()}
251+
</Section>
252+
<Section name={sectionNames.labelStyle}>
253+
{children.labelStyle.getPropertyView()}
254+
</Section>
255+
</>
250256
)}
251257
</>
252258
);
@@ -264,10 +270,10 @@ export const dateRangeControl = (function () {
264270
return new UICompBuilder(childrenMap, (props) => {
265271
let start = dayjs(null);
266272
let end = dayjs(null);
267-
if(props.start.value !== '') {
273+
if (props.start.value !== '') {
268274
start = dayjs(props.start.value, DateParser);
269275
}
270-
if(props.end.value !== '') {
276+
if (props.end.value !== '') {
271277
end = dayjs(props.end.value, DateParser);
272278
}
273279

@@ -309,13 +315,13 @@ export const dateRangeControl = (function () {
309315

310316
return props.label({
311317
required: props.required,
312-
style: props.style,
318+
style: props.labelStyle,
313319
children: children,
314320
...(startResult.validateStatus !== "success"
315321
? startResult
316322
: endResult.validateStatus !== "success"
317-
? endResult
318-
: startResult),
323+
? endResult
324+
: startResult),
319325
});
320326
})
321327
.setPropertyViewFn((children) => {
@@ -337,11 +343,11 @@ export const dateRangeControl = (function () {
337343

338344
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
339345
<><Section name={sectionNames.validation}>
340-
{requiredPropertyView(children)}
341-
{dateValidationFields(children)}
342-
{timeValidationFields(children)}
343-
{children.customRule.propertyView({})}
344-
</Section>
346+
{requiredPropertyView(children)}
347+
{dateValidationFields(children)}
348+
{timeValidationFields(children)}
349+
{children.customRule.propertyView({})}
350+
</Section>
345351
<Section name={sectionNames.interaction}>
346352
{children.onEvent.getPropertyView()}
347353
{disabledPropertyView(children)}
@@ -358,7 +364,7 @@ export const dateRangeControl = (function () {
358364
{children.placeholder.propertyView({ label: trans("date.placeholderText") })}
359365
</Section>
360366
)}
361-
367+
362368
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
363369
<><Section name={sectionNames.advanced}>
364370
{timeFields(children, isMobile)}
@@ -368,9 +374,14 @@ export const dateRangeControl = (function () {
368374
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && commonAdvanceSection(children)}
369375

370376
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
371-
<Section name={sectionNames.style}>
372-
{children.style.getPropertyView()}
373-
</Section>
377+
<>
378+
<Section name={sectionNames.style}>
379+
{children.style.getPropertyView()}
380+
</Section>
381+
<Section name={sectionNames.labelStyle}>
382+
{children.labelStyle.getPropertyView()}
383+
</Section>
384+
</>
374385
)}
375386

376387
</>

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

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { UICompBuilder, withDefault } from "../generators";
1010
import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing";
1111
import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants";
1212
import { styleControl } from "comps/controls/styleControl";
13-
import { RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants";
13+
import { LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants";
1414
import { migrateOldData } from "comps/generators/simpleGenerators";
1515
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
1616
import { trans } from "i18n";
@@ -44,6 +44,7 @@ const RatingBasicComp = (function () {
4444
disabled: BoolCodeControl,
4545
onEvent: eventHandlerControl(EventOptions),
4646
style: migrateOldData(styleControl(RatingStyle), fixOldData),
47+
labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
4748
...formDataChildren,
4849
};
4950
return new UICompBuilder(childrenMap, (props) => {
@@ -63,7 +64,7 @@ const RatingBasicComp = (function () {
6364
}, [value]);
6465

6566
return props.label({
66-
style: props.style,
67+
style: props.labelStyle,
6768
children: (
6869
<RateStyled
6970
count={props.max}
@@ -93,14 +94,14 @@ const RatingBasicComp = (function () {
9394

9495
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
9596
<><Section name={sectionNames.interaction}>
96-
{children.onEvent.getPropertyView()}
97-
{disabledPropertyView(children)}
98-
{hiddenPropertyView(children)}
99-
</Section>
97+
{children.onEvent.getPropertyView()}
98+
{disabledPropertyView(children)}
99+
{hiddenPropertyView(children)}
100+
</Section>
100101
<Section name={sectionNames.advanced}>
101-
{children.allowHalf.propertyView({
102-
label: trans("rating.allowHalf"),
103-
})}
102+
{children.allowHalf.propertyView({
103+
label: trans("rating.allowHalf"),
104+
})}
104105
</Section>
105106
</>
106107
)}
@@ -110,9 +111,14 @@ const RatingBasicComp = (function () {
110111
)}
111112

112113
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
113-
<Section name={sectionNames.style}>
114-
{children.style.getPropertyView()}
115-
</Section>
114+
<>
115+
<Section name={sectionNames.style}>
116+
{children.style.getPropertyView()}
117+
</Section>
118+
<Section name={sectionNames.labelStyle}>
119+
{children.labelStyle.getPropertyView()}
120+
</Section>
121+
</>
116122
)}
117123
</>
118124
);
@@ -144,6 +150,6 @@ const getStyle = (style: RatingStyleType) => {
144150
`;
145151
};
146152

147-
export const RateStyled = styled(Rate)<{ $style: RatingStyleType }>`
153+
export const RateStyled = styled(Rate) <{ $style: RatingStyleType }>`
148154
${(props) => props.$style && getStyle(props.$style)}
149155
`;

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

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { styleControl } from "comps/controls/styleControl";
88
import {
99
contrastColor,
1010
SignatureStyle,
11+
LabelStyle,
1112
SignatureStyleType,
1213
widthCalculator,
1314
heightCalculator
@@ -38,11 +39,11 @@ const Wrapper = styled.div<{ $style: SignatureStyleType; $isEmpty: boolean }>`
3839
overflow: hidden;
3940
width: 100%;
4041
height: 100%;
41-
width: ${(props) => {
42-
return widthCalculator(props.$style.margin);
42+
width: ${(props) => {
43+
return widthCalculator(props.$style.margin);
4344
}};
44-
height: ${(props) => {
45-
return heightCalculator(props.$style.margin);
45+
height: ${(props) => {
46+
return heightCalculator(props.$style.margin);
4647
}};
4748
margin: ${(props) => props.$style.margin};
4849
padding: ${(props) => props.$style.padding};
@@ -98,6 +99,7 @@ const childrenMap = {
9899
onEvent: ChangeEventHandlerControl,
99100
label: withDefault(LabelControl, { position: "column", text: "" }),
100101
style: styleControl(SignatureStyle),
102+
labelStyle: styleControl(LabelStyle),
101103
showUndo: withDefault(BoolControl, true),
102104
showClear: withDefault(BoolControl, true),
103105
value: stateComp(""),
@@ -125,7 +127,7 @@ let SignatureTmpComp = (function () {
125127
}
126128
};
127129
return props.label({
128-
style: props.style,
130+
style: props.labelStyle,
129131
children: (
130132
<ReactResizeDetector
131133
onResize={(width, height) => {
@@ -218,9 +220,14 @@ let SignatureTmpComp = (function () {
218220
)}
219221

220222
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
221-
<Section name={sectionNames.style}>
222-
{children.style.getPropertyView()}
223-
</Section>
223+
<>
224+
<Section name={sectionNames.style}>
225+
{children.style.getPropertyView()}
226+
</Section>
227+
<Section name={sectionNames.labelStyle}>
228+
{children.labelStyle.getPropertyView()}
229+
</Section>
230+
</>
224231
)}
225232
</>
226233
);

0 commit comments

Comments
 (0)