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

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)