Skip to content

Commit 1d42ee8

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #698 from imtananikhwa/imtanan-task1
Common style config added, number input component updated, link compo…
2 parents 5c6a0e1 + a055656 commit 1d42ee8

File tree

4 files changed

+87
-85
lines changed

4 files changed

+87
-85
lines changed

‎client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,15 @@ import { RefControl } from "comps/controls/refControl";
2323
import { EditorContext } from "comps/editorState";
2424
import React, { useContext } from "react";
2525

26-
const Link = styled(Button)<{ $style: LinkStyleType }>`
26+
const Link = styled(Button) <{ $style: LinkStyleType }>`
2727
${(props) => `
2828
color: ${props.$style.text};
2929
margin: ${props.$style.margin};
3030
padding: ${props.$style.padding};
3131
font-size: ${props.$style.textSize};
3232
font-style:${props.$style.fontStyle};
3333
font-family:${props.$style.fontFamily};
34+
font-weight:${props.$style.textWeight};
3435
border: ${props.$style.borderWidth} solid ${props.$style.border};
3536
background-color: ${props.$style.background};
3637
&:hover {
@@ -118,15 +119,15 @@ const LinkTmpComp = (function () {
118119
{hiddenPropertyView(children)}
119120
{loadingPropertyView(children)}
120121
</Section>
121-
<Section name={sectionNames.advanced}>
122-
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
123-
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
124-
</Section></>
122+
<Section name={sectionNames.advanced}>
123+
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
124+
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
125+
</Section></>
125126
)}
126127

127-
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
128-
<><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
129-
)}
128+
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
129+
<><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
130+
)}
130131
</>
131132
);
132133
})

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

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ import { EditorContext } from "comps/editorState";
5656
const getStyle = (style: InputLikeStyleType) => {
5757
return css`
5858
border-radius: ${style.radius};
59+
border-width:${style.borderWidth} !important;
5960
// still use antd style when disabled
6061
&:not(.ant-input-number-disabled) {
6162
color: ${style.text};
@@ -78,11 +79,17 @@ const getStyle = (style: InputLikeStyleType) => {
7879
}
7980
.ant-input-number {
8081
margin: 0;
82+
8183
}
82-
.ant-input-number input {
84+
.ant-input-number-input {
8385
margin: 0;
8486
padding: ${style.padding};
8587
height: ${heightCalculator(style.margin)};
88+
color:${style.text};
89+
font-family:${style.fontFamily} !important;
90+
font-weight:${style.textWeight} !important;
91+
font-size:${style.textSize} !important;
92+
font-style:${style.fontStyle} !important;
8693
}
8794
8895
.ant-input-number-handler-wrap {
@@ -110,7 +117,7 @@ const getStyle = (style: InputLikeStyleType) => {
110117
`;
111118
};
112119

113-
const InputNumber = styled(AntdInputNumber)<{
120+
const InputNumber = styled(AntdInputNumber) <{
114121
$style: InputLikeStyleType;
115122
}>`
116123
width: 100%;
@@ -377,15 +384,15 @@ const NumberInputTmpComp = (function () {
377384
{children.max.propertyView({ label: trans("prop.maximum") })}
378385
{children.customRule.propertyView({})}
379386
</Section>
380-
<Section name={sectionNames.interaction}>
381-
{children.onEvent.getPropertyView()}
382-
{disabledPropertyView(children)}
383-
{hiddenPropertyView(children)}
384-
</Section>
387+
<Section name={sectionNames.interaction}>
388+
{children.onEvent.getPropertyView()}
389+
{disabledPropertyView(children)}
390+
{hiddenPropertyView(children)}
391+
</Section>
385392
</>
386393
)}
387-
388-
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
394+
395+
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
389396
children.label.getPropertyView()
390397
)}
391398

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ const getStyle = (style: ProgressStyleType) => {
1818
line-height: 2;
1919
.ant-progress-text {
2020
color: ${style.text};
21+
font-style:${style.fontStyle};
22+
font-family:${style.fontFamily};
23+
font-weight:${style.textWeight};
2124
}
2225
width: ${widthCalculator(style.margin)};
2326
height: ${heightCalculator(style.margin)};

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx‎

Lines changed: 59 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -397,6 +397,18 @@ const HEADER_BACKGROUND = {
397397
} as const;
398398

399399
const BG_STATIC_BORDER_RADIUS = [getBackground(), getStaticBorder(), RADIUS] as const;
400+
const STYLING_FIELDS_SEQUENCE = [
401+
TEXT,
402+
TEXT_SIZE,
403+
TEXT_WEIGHT,
404+
FONT_FAMILY,
405+
FONT_STYLE,
406+
BORDER,
407+
MARGIN,
408+
PADDING,
409+
RADIUS,
410+
BORDER_WIDTH,
411+
]
400412

401413
const FILL = {
402414
name: "fill",
@@ -448,36 +460,40 @@ function getStaticBackground(color: string) {
448460
} as const;
449461
}
450462

463+
464+
function replaceAndMergeMultipleStyles(originalArray: any[], styleToReplace: string, replacingStyles: any[]): any[] {
465+
let temp = []
466+
let foundIndex = originalArray.findIndex((element) => element.name === styleToReplace)
467+
468+
if (foundIndex !== -1) {
469+
let elementsBeforeFoundIndex = originalArray.filter((item, index) => index < foundIndex)
470+
let elementsAfterFoundIndex = originalArray.filter((item, index) => index > foundIndex)
471+
temp = [...elementsBeforeFoundIndex, ...replacingStyles, ...elementsAfterFoundIndex]
472+
} else
473+
temp = [...originalArray]
474+
475+
return temp
476+
}
477+
451478
export const ButtonStyle = [
452479
...getBgBorderRadiusByBg("primary"),
453-
BORDER_WIDTH,
454-
TEXT,
455-
TEXT_SIZE,
456-
TEXT_WEIGHT,
457-
FONT_FAMILY,
458-
FONT_STYLE,
459-
MARGIN,
460-
PADDING
480+
...STYLING_FIELDS_SEQUENCE
461481
] as const;
462482

463483
export const ToggleButtonStyle = [
464484
getBackground("canvas"),
465-
{
466-
name: "border",
467-
label: trans("style.border"),
468-
depName: "text",
469-
depType: DEP_TYPE.SELF,
470-
transformer: toSelf,
471-
},
472-
RADIUS,
473-
BORDER_WIDTH,
474-
TEXT,
475-
TEXT_SIZE,
476-
TEXT_WEIGHT,
477-
FONT_FAMILY,
478-
FONT_STYLE,
479-
MARGIN,
480-
PADDING,
485+
...STYLING_FIELDS_SEQUENCE.map((style) => {
486+
if (style.name === 'border') {
487+
return {
488+
...style,
489+
depType: DEP_TYPE.SELF,
490+
transformer: toSelf
491+
}
492+
}
493+
return {
494+
...style
495+
}
496+
})
481497
] as const;
482498

483499
export const TextStyle = [
@@ -488,23 +504,14 @@ export const TextStyle = [
488504
depType: DEP_TYPE.SELF,
489505
transformer: toSelf,
490506
},
491-
TEXT,
492-
TEXT_SIZE,
493-
TEXT_WEIGHT,
494-
FONT_FAMILY,
495-
FONT_STYLE,
496-
BORDER,
497-
MARGIN,
498-
PADDING,
507+
...STYLING_FIELDS_SEQUENCE,
499508
{
500509
name: "links",
501510
label: trans("style.links"),
502511
depTheme: "primary",
503512
depType: DEP_TYPE.SELF,
504513
transformer: toSelf,
505514
},
506-
RADIUS,
507-
BORDER_WIDTH,
508515
] as const;
509516

510517
export const MarginStyle = [
@@ -681,15 +688,8 @@ export const SliderStyle = [
681688

682689
export const InputLikeStyle = [
683690
LABEL,
684-
...getStaticBgBorderRadiusByBg(SURFACE_COLOR),
685-
BORDER_WIDTH,
686-
TEXT,
687-
TEXT_SIZE,
688-
TEXT_WEIGHT,
689-
FONT_FAMILY,
690-
FONT_STYLE,
691-
MARGIN,
692-
PADDING,
691+
getStaticBackground(SURFACE_COLOR),
692+
...STYLING_FIELDS_SEQUENCE,
693693
...ACCENT_VALIDATE,
694694
] as const;
695695

@@ -1046,21 +1046,15 @@ function handleToHoverLink(color: string) {
10461046
}
10471047

10481048
export const LinkStyle = [
1049-
...LinkTextStyle,
1049+
10501050
{
10511051
name: "background",
10521052
label: trans("style.background"),
10531053
depTheme: "canvas",
10541054
depType: DEP_TYPE.SELF,
10551055
transformer: toSelf,
10561056
},
1057-
MARGIN,
1058-
PADDING,
1059-
FONT_FAMILY,
1060-
FONT_STYLE,
1061-
BORDER,
1062-
BORDER_WIDTH,
1063-
TEXT_SIZE
1057+
...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [...LinkTextStyle])
10641058
] as const;
10651059

10661060
export const DividerStyle = [
@@ -1069,34 +1063,31 @@ export const DividerStyle = [
10691063
label: trans("color"),
10701064
color: lightenColor(SECOND_SURFACE_COLOR, 0.05),
10711065
},
1072-
BORDER_WIDTH,
1073-
MARGIN,
1074-
PADDING,
1075-
{
1076-
name: "text",
1077-
label: trans("text"),
1078-
depName: "color",
1079-
transformer: handleToDividerText,
1080-
},
1081-
TEXT_SIZE,
1082-
TEXT_WEIGHT,
1083-
FONT_FAMILY,
1084-
FONT_STYLE
1066+
...STYLING_FIELDS_SEQUENCE.map((style) => {
1067+
if (style.name === 'text') {
1068+
return {
1069+
name: "text",
1070+
label: trans("text"),
1071+
depName: "color",
1072+
transformer: handleToDividerText,
1073+
}
1074+
}
1075+
return style
1076+
})
10851077
] as const;
10861078

1079+
// Hidden border and borderWidth properties as AntD doesnt allow these properties for progress bar
10871080
export const ProgressStyle = [
1088-
{
1081+
...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [{
10891082
name: "text",
10901083
label: trans("text"),
10911084
depTheme: "canvas",
10921085
depType: DEP_TYPE.CONTRAST_TEXT,
10931086
transformer: contrastText,
1094-
},
1087+
}]).filter((style)=> ['border','borderWidth'].includes(style.name) === false),
10951088
TRACK,
10961089
FILL,
10971090
SUCCESS,
1098-
MARGIN,
1099-
PADDING,
11001091
] as const;
11011092

11021093
export const NavigationStyle = [

0 commit comments

Comments
 (0)