Skip to content

Commit 64d5bbd

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request lowcoder-org#1105 from lowcoder-org/dynamic-style-fixes
Allow dynamic/conditional styles + Refactor logic for applying theme on each comp
2 parents a28726f + 906df19 commit 64d5bbd

File tree

80 files changed

+60
-293
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

80 files changed

+60
-293
lines changed

‎client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ import {
2626
chartColorPalette,
2727
getPromiseAfterDispatch,
2828
dropdownControl,
29-
useMergeCompStyles,
3029
} from "lowcoder-sdk";
3130
import { getEchartsLocale, trans } from "i18n/comps";
3231
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -74,8 +73,6 @@ BasicChartTmpComp = withViewFn(BasicChartTmpComp, (comp) => {
7473
log.error('theme chart error: ', error);
7574
}
7675

77-
useMergeCompStyles?.(childrenToProps(comp.children), comp.dispatch);
78-
7976
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
8077
await getPromiseAfterDispatch(
8178
dispatch,

‎client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ import {
4545
jsonValueExposingStateControl,
4646
CalendarDeleteIcon,
4747
Tooltip,
48-
useMergeCompStyles,
4948
EditorContext,
5049
CompNameContext,
5150
} from 'lowcoder-sdk';
@@ -137,8 +136,6 @@ let CalendarBasicComp = (function () {
137136
const [left, setLeft] = useState<number | undefined>(undefined);
138137
const [licensed, setLicensed] = useState<boolean>(props.licenseKey !== "");
139138

140-
useMergeCompStyles?.(props, dispatch);
141-
142139
useEffect(() => {
143140
setLicensed(props.licenseKey !== "");
144141
}, [props.licenseKey]);

‎client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {
2525
chartColorPalette,
2626
getPromiseAfterDispatch,
2727
dropdownControl,
28-
useMergeCompStyles,
2928
} from "lowcoder-sdk";
3029
import { getEchartsLocale, trans } from "i18n/comps";
3130
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -71,8 +70,6 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
7170
log.error('theme chart error: ', error);
7271
}
7372

74-
useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
75-
7673
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
7774
await getPromiseAfterDispatch(
7875
dispatch,

‎client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ import {
2626
chartColorPalette,
2727
getPromiseAfterDispatch,
2828
dropdownControl,
29-
useMergeCompStyles,
3029
} from "lowcoder-sdk";
3130
import { getEchartsLocale, trans } from "i18n/comps";
3231
import { ItemColorComp } from "comps/basicChartComp/chartConfigs/lineChartConfig";
@@ -83,8 +82,6 @@ MapTmpComp = withViewFn(MapTmpComp, (comp) => {
8382
log.error('theme chart error: ', error);
8483
}
8584

86-
useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
87-
8885
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
8986
await getPromiseAfterDispatch(
9087
dispatch,

‎client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {
2525
chartColorPalette,
2626
getPromiseAfterDispatch,
2727
dropdownControl,
28-
useMergeCompStyles,
2928
} from "lowcoder-sdk";
3029
import { getEchartsLocale, trans } from "i18n/comps";
3130
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -72,8 +71,6 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => {
7271
log.error('theme chart error: ', error);
7372
}
7473

75-
useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
76-
7774
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
7875
await getPromiseAfterDispatch(
7976
dispatch,

‎client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ import {
2626
getPromiseAfterDispatch,
2727
dropdownControl,
2828
JSONObject,
29-
useMergeCompStyles,
3029
} from "lowcoder-sdk";
3130
import { getEchartsLocale, trans } from "i18n/comps";
3231
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -73,8 +72,6 @@ GaugeChartTmpComp = withViewFn(GaugeChartTmpComp, (comp) => {
7372
log.error('theme chart error: ', error);
7473
}
7574

76-
useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
77-
7875
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
7976
await getPromiseAfterDispatch(
8077
dispatch,

‎client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ import {
2626
getPromiseAfterDispatch,
2727
dropdownControl,
2828
JSONObject,
29-
useMergeCompStyles,
3029
} from "lowcoder-sdk";
3130
import { getEchartsLocale, trans } from "i18n/comps";
3231
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -73,8 +72,6 @@ GraphChartTmpComp = withViewFn(GraphChartTmpComp, (comp) => {
7372
log.error('theme chart error: ', error);
7473
}
7574

76-
useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
77-
7875
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
7976
await getPromiseAfterDispatch(
8077
dispatch,

‎client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {
2525
chartColorPalette,
2626
getPromiseAfterDispatch,
2727
dropdownControl,
28-
useMergeCompStyles,
2928
} from "lowcoder-sdk";
3029
import { getEchartsLocale, trans } from "i18n/comps";
3130
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -72,8 +71,6 @@ HeatmapChartTmpComp = withViewFn(HeatmapChartTmpComp, (comp) => {
7271
log.error('theme chart error: ', error);
7372
}
7473

75-
useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
76-
7774
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
7875
await getPromiseAfterDispatch(
7976
dispatch,

‎client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {
2525
chartColorPalette,
2626
getPromiseAfterDispatch,
2727
dropdownControl,
28-
useMergeCompStyles,
2928
} from "lowcoder-sdk";
3029
import { getEchartsLocale, trans } from "i18n/comps";
3130
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -72,8 +71,6 @@ RadarChartTmpComp = withViewFn(RadarChartTmpComp, (comp) => {
7271
log.error('theme chart error: ', error);
7372
}
7473

75-
useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
76-
7774
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
7875
await getPromiseAfterDispatch(
7976
dispatch,

‎client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {
2525
chartColorPalette,
2626
getPromiseAfterDispatch,
2727
dropdownControl,
28-
useMergeCompStyles,
2928
} from "lowcoder-sdk";
3029
import { getEchartsLocale, trans } from "i18n/comps";
3130
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -72,8 +71,6 @@ SankeyChartTmpComp = withViewFn(SankeyChartTmpComp, (comp) => {
7271
log.error('theme chart error: ', error);
7372
}
7473

75-
useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
76-
7774
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
7875
await getPromiseAfterDispatch(
7976
dispatch,

‎client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {
2525
chartColorPalette,
2626
getPromiseAfterDispatch,
2727
dropdownControl,
28-
useMergeCompStyles,
2928
} from "lowcoder-sdk";
3029
import { getEchartsLocale, trans } from "i18n/comps";
3130
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -72,8 +71,6 @@ SunburstChartTmpComp = withViewFn(SunburstChartTmpComp, (comp) => {
7271
log.error('theme chart error: ', error);
7372
}
7473

75-
useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
76-
7774
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
7875
await getPromiseAfterDispatch(
7976
dispatch,

‎client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {
2525
chartColorPalette,
2626
getPromiseAfterDispatch,
2727
dropdownControl,
28-
useMergeCompStyles,
2928
} from "lowcoder-sdk";
3029
import { getEchartsLocale, trans } from "i18n/comps";
3130
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -72,8 +71,6 @@ ThemeriverChartTmpComp = withViewFn(ThemeriverChartTmpComp, (comp) => {
7271
log.error('theme chart error: ', error);
7372
}
7473

75-
useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
76-
7774
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
7875
await getPromiseAfterDispatch(
7976
dispatch,

‎client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {
2525
chartColorPalette,
2626
getPromiseAfterDispatch,
2727
dropdownControl,
28-
useMergeCompStyles,
2928
} from "lowcoder-sdk";
3029
import { getEchartsLocale, trans } from "i18n/comps";
3130
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -72,8 +71,6 @@ TreeChartTmpComp = withViewFn(TreeChartTmpComp, (comp) => {
7271
log.error('theme chart error: ', error);
7372
}
7473

75-
useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
76-
7774
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
7875
await getPromiseAfterDispatch(
7976
dispatch,

‎client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {
2525
chartColorPalette,
2626
getPromiseAfterDispatch,
2727
dropdownControl,
28-
useMergeCompStyles,
2928
} from "lowcoder-sdk";
3029
import { getEchartsLocale, trans } from "i18n/comps";
3130
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -72,8 +71,6 @@ TreemapChartTmpComp = withViewFn(TreemapChartTmpComp, (comp) => {
7271
log.error('theme chart error: ', error);
7372
}
7473

75-
useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
76-
7774
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
7875
await getPromiseAfterDispatch(
7976
dispatch,

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,6 @@ import {
5555
autocompleteIconColor,
5656
componentSize,
5757
} from "./autoCompleteConstants";
58-
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
59-
6058

6159
const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>`
6260
box-shadow: ${props=>`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
@@ -104,9 +102,7 @@ const getValidate = (value: any): "" | "warning" | "error" | undefined => {
104102
};
105103

106104
let AutoCompleteCompBase = (function () {
107-
return new UICompBuilder(childrenMap, (props, dispatch) => {
108-
useMergeCompStyles(props as Record<string, any>, dispatch);
109-
105+
return new UICompBuilder(childrenMap, (props) => {
110106
const {
111107
items,
112108
onEvent,

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ import { BadgeBasicSection, badgeChildren } from "./badgeComp/badgeConstants";
3434
import { DropdownOptionControl } from "../controls/optionsControl";
3535
import { ReactElement, useContext, useEffect } from "react";
3636
import { CompNameContext, EditorContext } from "../editorState";
37-
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
3837

3938
const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean, $style: AvatarStyleType }>`
4039
background: ${(props) => props.$style.background};
@@ -198,9 +197,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
198197
};
199198

200199
let AvatarBasicComp = (function () {
201-
return new UICompBuilder(childrenMap, (props , dispatch) => {
202-
useMergeCompStyles(props as Record<string, any>, dispatch);
203-
200+
return new UICompBuilder(childrenMap, (props) => {
204201
return(<AvatarView {...props} />)})
205202
.setPropertyViewFn((children) => (
206203
<>

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import { optionsControl } from "../controls/optionsControl";
1919
import { BoolControl } from "../controls/boolControl";
2020
import { dropdownControl } from "../controls/dropdownControl";
2121
import { JSONObject } from "util/jsonTypes";
22-
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
2322

2423
const MacaroneList = [
2524
'#fde68a',
@@ -143,9 +142,7 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
143142
};
144143

145144
let AvatarGroupBasicComp = (function () {
146-
return new UICompBuilder(childrenMap, (props, dispatch) =>{
147-
useMergeCompStyles(props as Record<string, any>, dispatch);
148-
145+
return new UICompBuilder(childrenMap, (props, dispatch) => {
149146
return( <AvatarGroupView {...props} dispatch={dispatch} />
150147
)})
151148
.setPropertyViewFn((children) => (

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ import { RefControl } from "comps/controls/refControl";
2727
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 { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
3130

3231
const FormLabel = styled(CommonBlueLabel)`
3332
font-size: 13px;
@@ -135,9 +134,7 @@ const ButtonTmpComp = (function () {
135134
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
136135
viewRef: RefControl<HTMLElement>,
137136
};
138-
return new UICompBuilder(childrenMap, (props , dispatch) => {
139-
useMergeCompStyles(props as Record<string, any>, dispatch);
140-
137+
return new UICompBuilder(childrenMap, (props) => {
141138
return(
142139
<ButtonCompWrapper disabled={props.disabled}>
143140
<EditorContext.Consumer>

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import {
2222
getButtonStyle,
2323
} from "./buttonCompConstants";
2424
import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
25-
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
2625

2726
const StyledDropdownButton = styled(DropdownButton)`
2827
width: 100%;
@@ -90,9 +89,7 @@ const DropdownTmpComp = (function () {
9089
onEvent: ButtonEventHandlerControl,
9190
style: styleControl(DropdownStyle, 'style'),
9291
};
93-
return new UICompBuilder(childrenMap, (props, dispatch) => {
94-
useMergeCompStyles(props as Record<string, any>, dispatch);
95-
92+
return new UICompBuilder(childrenMap, (props) => {
9693
const hasIcon =
9794
props.options.findIndex((option) => (option.prefixIcon as ReactElement)?.props.value) > -1;
9895
const items = props.options

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import styled from "styled-components";
1717
import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
1818
import { manualOptionsControl } from "comps/controls/optionsControl";
1919
import { useContext, useEffect } from "react";
20-
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
2120

2221
const StyledFloatButton = styled(FloatButton)<{
2322
$animationStyle: AnimationStyleType;
@@ -133,8 +132,7 @@ const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) =>
133132
};
134133

135134
let FloatButtonBasicComp = (function () {
136-
return new UICompBuilder(childrenMap, (props , dispatch) => {
137-
useMergeCompStyles(props, dispatch);
135+
return new UICompBuilder(childrenMap, (props) => {
138136
return(
139137
<FloatButtonView {...props} />
140138
)})

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import { RefControl } from "comps/controls/refControl";
2222

2323
import { EditorContext } from "comps/editorState";
2424
import React, { useContext, useEffect } from "react";
25-
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
2625

2726
const Link = styled(Button)<{
2827
$style: LinkStyleType;
@@ -92,10 +91,7 @@ const LinkTmpComp = (function () {
9291
suffixIcon: IconControl,
9392
viewRef: RefControl<HTMLElement>,
9493
};
95-
return new UICompBuilder(childrenMap, (props, dispatch) => {
96-
useMergeCompStyles(props as Record<string, any>, dispatch);
97-
98-
94+
return new UICompBuilder(childrenMap, (props) => {
9995
// chrome86 bug: button children should not contain only empty span
10096
const hasChildren = hasIcon(props.prefixIcon) || !!props.text || hasIcon(props.suffixIcon);
10197
return (

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ import { BoolControl } from "comps/controls/boolControl";
2424
import type { ItemType } from "antd/es/menu/interface";
2525
import { RefControl } from "comps/controls/refControl";
2626
import { EditorContext } from "comps/editorState";
27-
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
2827

2928
const Error = styled.div`
3029
color: #f5222d;
@@ -74,9 +73,7 @@ const ScannerTmpComp = (function () {
7473
style: styleControl(DropdownStyle, 'style'),
7574
viewRef: RefControl<HTMLElement>,
7675
};
77-
return new UICompBuilder(childrenMap, (props, dispatch) => {
78-
useMergeCompStyles(props as Record<string, any>, dispatch);
79-
76+
return new UICompBuilder(childrenMap, (props) => {
8077
const [showModal, setShowModal] = useState(false);
8178
const [errMessage, setErrMessage] = useState("");
8279
const [videoConstraints, setVideoConstraints] = useState<MediaTrackConstraints>({

0 commit comments

Comments
 (0)