Skip to content

Commit 660fa27

Browse files
raheeliftikhar5raheeliftikhar5
committed
Theme: apply theme on data collection comps
1 parent 5d20a89 commit 660fa27

25 files changed

+599
-137
lines changed

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

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from "react";
1+
import React, { useContext, useEffect, useState } from "react";
22
import { Input, Section, sectionNames } from "lowcoder-design";
33
import { BoolControl } from "comps/controls/boolControl";
44
import { styleControl } from "comps/controls/styleControl";
@@ -55,7 +55,9 @@ import {
5555
autocompleteIconColor,
5656
componentSize,
5757
} from "./autoCompleteConstants";
58-
58+
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
59+
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
60+
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
5961

6062

6163
const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>`
@@ -76,8 +78,8 @@ const childrenMap = {
7678
...textInputChildren,
7779
viewRef: RefControl<InputRef>,
7880
allowClear: BoolControl.DEFAULT_TRUE,
79-
style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}),
80-
labelStyle:styleControl(LabelStyle),
81+
style: styleControl(InputFieldStyle , 'style'),
82+
labelStyle: styleControl(LabelStyle , 'labelStyle'),
8183
prefixIcon: IconControl,
8284
suffixIcon: IconControl,
8385
items: jsonControl(convertAutoCompleteData, autoCompleteDate),
@@ -90,8 +92,8 @@ const childrenMap = {
9092
autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"),
9193
componentSize: dropdownControl(componentSize, "small"),
9294
valueInItems: booleanExposingStateControl("valueInItems"),
93-
inputFieldStyle: withDefault(styleControl(InputLikeStyle),{borderWidth:'1px'}),
94-
animationStyle: styleControl(AnimationStyle),
95+
inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
96+
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
9597
};
9698

9799
const getValidate = (value: any): "" | "warning" | "error" | undefined => {
@@ -104,7 +106,23 @@ const getValidate = (value: any): "" | "warning" | "error" | undefined => {
104106
};
105107

106108
let AutoCompleteCompBase = (function () {
107-
return new UICompBuilder(childrenMap, (props) => {
109+
return new UICompBuilder(childrenMap, (props, dispatch) => {
110+
const theme = useContext(ThemeContext);
111+
const compType = useContext(CompTypeContext);
112+
const compTheme = theme?.theme?.components?.[compType];
113+
const styleProps: Record<string, any> = {};
114+
['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
115+
styleProps[key] = (props as any)[key];
116+
});
117+
118+
useEffect(() => {
119+
setInitialCompStyles({
120+
dispatch,
121+
compTheme,
122+
styleProps,
123+
});
124+
}, []);
125+
108126
const {
109127
items,
110128
onEvent,

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

Lines changed: 49 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,12 @@ import {
2424
} from "./buttonCompConstants";
2525
import { RefControl } from "comps/controls/refControl";
2626

27-
import React, { useContext } from "react";
27+
import React, { useContext, useEffect } from "react";
2828
import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
2929
import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
30+
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
31+
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
32+
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
3033

3134
const FormLabel = styled(CommonBlueLabel)`
3235
font-size: 13px;
@@ -131,35 +134,53 @@ const ButtonTmpComp = (function () {
131134
prefixIcon: IconControl,
132135
suffixIcon: IconControl,
133136
style: ButtonStyleControl,
134-
animationStyle: styleControl(AnimationStyle),
137+
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
135138
viewRef: RefControl<HTMLElement>,
136139
};
137-
return new UICompBuilder(childrenMap, (props) => (
138-
<ButtonCompWrapper disabled={props.disabled}>
139-
<EditorContext.Consumer>
140-
{(editorState) => (
141-
<Button100
142-
ref={props.viewRef}
143-
$buttonStyle={props.style}
144-
loading={props.loading}
145-
disabled={
146-
props.disabled ||
147-
(!isDefault(props.type) && getForm(editorState, props.form)?.disableSubmit())
148-
}
149-
onClick={() =>
150-
isDefault(props.type) ? props.onEvent("click") : submitForm(editorState, props.form)
151-
}
152-
>
153-
{props.prefixIcon && <IconWrapper>{props.prefixIcon}</IconWrapper>}
154-
{
155-
props.text || (props.prefixIcon || props.suffixIcon ? undefined : " ") // Avoid button disappearing
156-
}
157-
{props.suffixIcon && <IconWrapper>{props.suffixIcon}</IconWrapper>}
158-
</Button100>
159-
)}
160-
</EditorContext.Consumer>
161-
</ButtonCompWrapper>
162-
))
140+
return new UICompBuilder(childrenMap, (props , dispatch) => {
141+
const theme = useContext(ThemeContext);
142+
const compType = useContext(CompTypeContext);
143+
const compTheme = theme?.theme?.components?.[compType];
144+
const styleProps: Record<string, any> = {};
145+
['style', 'animationStyle'].forEach((key: string) => {
146+
styleProps[key] = (props as any)[key];
147+
});
148+
149+
useEffect(() => {
150+
setInitialCompStyles({
151+
dispatch,
152+
compTheme,
153+
styleProps,
154+
});
155+
}, []);
156+
157+
return(
158+
<ButtonCompWrapper disabled={props.disabled}>
159+
<EditorContext.Consumer>
160+
{(editorState) => (
161+
<Button100
162+
ref={props.viewRef}
163+
$buttonStyle={props.style}
164+
loading={props.loading}
165+
disabled={
166+
props.disabled ||
167+
(!isDefault(props.type) && getForm(editorState, props.form)?.disableSubmit())
168+
}
169+
onClick={() =>
170+
isDefault(props.type) ? props.onEvent("click") : submitForm(editorState, props.form)
171+
}
172+
>
173+
{props.prefixIcon && <IconWrapper>{props.prefixIcon}</IconWrapper>}
174+
{
175+
props.text || (props.prefixIcon || props.suffixIcon ? undefined : " ") // Avoid button disappearing
176+
}
177+
{props.suffixIcon && <IconWrapper>{props.suffixIcon}</IconWrapper>}
178+
</Button100>
179+
)}
180+
</EditorContext.Consumer>
181+
</ButtonCompWrapper>
182+
);
183+
})
163184
.setPropertyViewFn((children) => (
164185
<>
165186
<Section name={sectionNames.basic}>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ function fixOldData(oldData: any) {
9797
}
9898
return oldData;
9999
}
100-
const ButtonTmpStyleControl = styleControl(ButtonStyle);
100+
const ButtonTmpStyleControl = styleControl(ButtonStyle, 'style');
101101
export const ButtonStyleControl = migrateOldData(ButtonTmpStyleControl, fixOldData);
102102

103103
export const buttonRefMethods = refMethods<HTMLElement>([

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

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { UICompBuilder } from "comps/generators/uiCompBuilder";
99
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
1010
import { Section, sectionNames } from "lowcoder-design";
1111
import { trans } from "i18n";
12-
import React, { ReactElement, useContext } from "react";
12+
import React, { ReactElement, useContext, useEffect } from "react";
1313
import { EditorContext } from "comps/editorState";
1414
import styled from "styled-components";
1515
import { ButtonEventHandlerControl } from "../../controls/eventHandlerControl";
@@ -22,6 +22,9 @@ import {
2222
getButtonStyle,
2323
} from "./buttonCompConstants";
2424
import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
25+
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
26+
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
27+
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
2528

2629
const StyledDropdownButton = styled(DropdownButton)`
2730
width: 100%;
@@ -85,9 +88,25 @@ const DropdownTmpComp = (function () {
8588
options: DropdownOptionControl,
8689
disabled: BoolCodeControl,
8790
onEvent: ButtonEventHandlerControl,
88-
style: styleControl(DropdownStyle),
91+
style: styleControl(DropdownStyle, 'style'),
8992
};
90-
return new UICompBuilder(childrenMap, (props) => {
93+
return new UICompBuilder(childrenMap, (props, dispatch) => {
94+
const theme = useContext(ThemeContext);
95+
const compType = useContext(CompTypeContext);
96+
const compTheme = theme?.theme?.components?.[compType];
97+
const styleProps: Record<string, any> = {};
98+
['style'].forEach((key: string) => {
99+
styleProps[key] = (props as any)[key];
100+
});
101+
102+
useEffect(() => {
103+
setInitialCompStyles({
104+
dispatch,
105+
compTheme,
106+
styleProps,
107+
});
108+
}, []);
109+
91110
const hasIcon =
92111
props.options.findIndex((option) => (option.prefixIcon as ReactElement)?.props.value) > -1;
93112
const items = props.options

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

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,11 @@ import {
2323
import { styleControl } from "comps/controls/styleControl";
2424
import { BoolControl } from "comps/controls/boolControl";
2525
import { RefControl } from "comps/controls/refControl";
26-
import React, { useContext } from "react";
26+
import React, { useContext, useEffect } from "react";
2727
import { EditorContext } from "comps/editorState";
28+
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
29+
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
30+
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
2831

2932
const IconWrapper = styled.div`
3033
display: flex;
@@ -60,15 +63,31 @@ const ToggleTmpComp = (function () {
6063
falseIcon: withDefault(IconControl, "/icon:solid/AngleDown"),
6164
iconPosition: LeftRightControl,
6265
alignment: AlignWithStretchControl,
63-
style: styleControl(ToggleButtonStyle),
64-
animationStyle: styleControl(AnimationStyle),
66+
style: styleControl(ToggleButtonStyle , 'style'),
67+
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
6568
showBorder: withDefault(BoolControl, true),
6669
viewRef: RefControl<HTMLElement>,
6770
};
68-
return new UICompBuilder(childrenMap, (props) => {
71+
return new UICompBuilder(childrenMap, (props, dispatch) => {
6972
const text = props.showText
7073
? (props.value.value ? props.trueText : props.falseText) || undefined
7174
: undefined;
75+
const theme = useContext(ThemeContext);
76+
const compType = useContext(CompTypeContext);
77+
const compTheme = theme?.theme?.components?.[compType];
78+
const styleProps: Record<string, any> = {};
79+
['style', 'animationStyle'].forEach((key: string) => {
80+
styleProps[key] = (props as any)[key];
81+
});
82+
83+
useEffect(() => {
84+
setInitialCompStyles({
85+
dispatch,
86+
compTheme,
87+
styleProps,
88+
});
89+
}, []);
90+
7291
return (
7392
<ButtonCompWrapperStyled
7493
disabled={props.disabled}

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

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import {
3737
} from "comps/utils/propertyUtils";
3838
import { trans } from "i18n";
3939
import { DATE_FORMAT, DATE_TIME_FORMAT, DateParser, PickerMode } from "util/dateTimeUtils";
40-
import React, { ReactNode, useContext } from "react";
40+
import React, { ReactNode, useContext, useEffect } from "react";
4141
import { IconControl } from "comps/controls/iconControl";
4242
import { hasIcon } from "comps/utils";
4343
import { Section, sectionNames } from "components/Section";
@@ -49,6 +49,9 @@ import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interfac
4949
import { DateRangeUIView } from "comps/comps/dateComp/dateRangeUIView";
5050

5151
import { EditorContext } from "comps/editorState";
52+
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
53+
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
54+
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
5255

5356
const defaultStyle = {
5457
borderStyle: 'solid',
@@ -76,13 +79,16 @@ const commonChildren = {
7679
hourStep: RangeControl.closed(1, 24, 1),
7780
minuteStep: RangeControl.closed(1, 60, 1),
7881
secondStep: RangeControl.closed(1, 60, 1),
79-
style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}),
80-
animationStyle: styleControl(AnimationStyle),
81-
labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
82+
style: styleControl(InputFieldStyle, 'style'),
83+
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
84+
labelStyle: styleControl(
85+
LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false),
86+
'labelStyle',
87+
),
8288
suffixIcon: withDefault(IconControl, "/icon:regular/calendar"),
8389
...validationChildren,
8490
viewRef: RefControl<CommonPickerMethods>,
85-
inputFieldStyle: withDefault(styleControl(DateTimeStyle), defaultStyle),
91+
inputFieldStyle: withDefault(styleControl(DateTimeStyle, 'inputFieldStyle'), defaultStyle),
8692
};
8793
type CommonChildrenType = RecordConstructorToComp<typeof commonChildren>;
8894

@@ -165,7 +171,23 @@ export type DateCompViewProps = Pick<
165171
placeholder?: string | [string, string];
166172
};
167173

168-
export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
174+
export const datePickerControl = new UICompBuilder(childrenMap, (props, dispatch) => {
175+
const theme = useContext(ThemeContext);
176+
const compType = useContext(CompTypeContext);
177+
const compTheme = theme?.theme?.components?.[compType];
178+
const styleProps: Record<string, any> = {};
179+
['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
180+
styleProps[key] = (props as any)[key];
181+
});
182+
183+
useEffect(() => {
184+
setInitialCompStyles({
185+
dispatch,
186+
compTheme,
187+
styleProps,
188+
});
189+
}, []);
190+
169191
let time = null;
170192
if (props.value.value !== '') {
171193
time = dayjs(props.value.value, DateParser);
@@ -284,7 +306,23 @@ export const dateRangeControl = (function () {
284306
...commonChildren,
285307
};
286308

287-
return new UICompBuilder(childrenMap, (props) => {
309+
return new UICompBuilder(childrenMap, (props, dispatch) => {
310+
const theme = useContext(ThemeContext);
311+
const compType = useContext(CompTypeContext);
312+
const compTheme = theme?.theme?.components?.[compType];
313+
const styleProps: Record<string, any> = {};
314+
['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
315+
styleProps[key] = (props as any)[key];
316+
});
317+
318+
useEffect(() => {
319+
setInitialCompStyles({
320+
dispatch,
321+
compTheme,
322+
styleProps,
323+
});
324+
}, []);
325+
288326
let start = null;
289327
let end = null;
290328
if (props.start.value !== '') {

0 commit comments

Comments
 (0)