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

Skip to content

Commit e819e35

Browse files
raheeliftikhar5raheeliftikhar5
committed
Theme: use theme styles for comps
1 parent bbb7f7a commit e819e35

File tree

3 files changed

+64
-64
lines changed

3 files changed

+64
-64
lines changed

‎client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx‎

Lines changed: 49 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import _ from "lodash";
2-
import { useEffect, useState } from "react";
1+
import { useEffect, useMemo, useState } from "react";
32
import { ConfigItem, Radius, Margin, Padding, GridColumns, BorderWidth, BorderStyle } from "../pages/setting/theme/styledComponents";
43
import { isValidColor, toHex } from "components/colorSelect/colorUtils";
54
import { ColorSelect } from "components/colorSelect";
@@ -28,6 +27,7 @@ import {
2827
RotationIcon,
2928
} from "lowcoder-design/src/icons";
3029
import { trans } from "i18n";
30+
import { debounce } from "lodash";
3131

3232
export type configChangeParams = {
3333
themeSettingKey: string;
@@ -112,28 +112,22 @@ type CompStyleProps = {
112112

113113
export default function ThemeSettingsCompStyles(props: CompStyleProps) {
114114
const { defaultStyle, styleOptions, configChange } = props;
115-
const [compStyle, setCompStyle] = useState(defaultStyle)
116-
117-
console.log('defaultStyle', defaultStyle);
115+
const [compStyle, setCompStyle] = useState({...defaultStyle});
118116

119-
const handleChange = (styleKey: string, styleValue: string) => {
120-
setCompStyle((style) => {
121-
const updateStyles = {
122-
...style,
123-
[styleKey]: styleValue,
124-
};
117+
const updateThemeWithDebounce = useMemo(() => {
118+
return debounce((updateStyles) => {
125119
configChange(updateStyles);
126-
return updateStyles;
127-
});
128-
}
129-
130-
const configChangeWithDebounce = _.debounce(configChange, 0);
131-
const handleChangeWithDebounce = _.debounce(handleChange, 0);
132-
133-
useEffect(() => {
134-
console.log(compStyle);
135-
}, [compStyle]);
120+
}, 500);
121+
}, [configChange]);
136122

123+
const handleChange = (styleKey: string, styleValue: string) => {
124+
const updateStyles = {
125+
...compStyle,
126+
[styleKey]: styleValue,
127+
};
128+
setCompStyle(updateStyles);
129+
updateThemeWithDebounce(updateStyles);
130+
}
137131

138132
const getLabelByStyle = (styleKey: string) => {
139133
let label = styleKey;
@@ -189,79 +183,79 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
189183
case 'radius':
190184
case 'cardRadius':
191185
case 'gap': {
192-
placeholder = '';
186+
placeholder = '2px';
193187
break;
194188
}
195189
case 'borderWidth': {
196-
placeholder = '';
190+
placeholder = '1px';
197191
break;
198192
}
199193
case 'borderStyle': {
200-
placeholder = '';
194+
placeholder = 'solid';
201195
break;
202196
}
203197
case 'margin': {
204-
placeholder = '';
198+
placeholder = '3px';
205199
break;
206200
}
207201
case 'padding':
208202
case 'containerHeaderPadding':
209203
case 'containerSiderPadding':
210204
case 'containerFooterPadding':
211205
case 'containerBodyPadding': {
212-
placeholder = '';
206+
placeholder = '3px';
213207
break;
214208
}
215209
case 'opacity': {
216-
placeholder = '';
210+
placeholder = '1';
217211
break;
218212
}
219213
case 'boxShadowColor': {
220-
placeholder = '';
214+
placeholder = '#FFFFFF';
221215
break;
222216
}
223217
case 'boxShadow': {
224-
placeholder = '';
218+
placeholder = '0px 0px 0px';
225219
break;
226220
}
227221
case 'animationIterationCount': {
228-
placeholder = '';
222+
placeholder = '0';
229223
break;
230224
}
231225
case 'animation': {
232-
placeholder = '';
226+
placeholder = 'none';
233227
break;
234228
}
235229
case 'animationDelay': {
236-
placeholder = '';
230+
placeholder = '0s';
237231
break;
238232
}
239233
case 'animationDuration': {
240-
placeholder = '';
234+
placeholder = '0s';
241235
break;
242236
}
243237
case 'textSize': {
244-
placeholder = '';
238+
placeholder = '14px';
245239
break;
246240
}
247241
case 'textWeight': {
248-
placeholder = '';
242+
placeholder = 'normal';
249243
break;
250244
}
251245
case 'fontFamily': {
252-
placeholder = '';
246+
placeholder = 'sans-serif';
253247
break;
254248
}
255249
case 'textDecoration': {
256-
placeholder = '';
250+
placeholder = 'none';
257251
break;
258252
}
259253
case 'textTransform': {
260-
placeholder = '';
254+
placeholder = 'none';
261255
break;
262256
}
263257
case 'fontStyle': {
264-
placeholder = '';
258+
placeholder = 'normal';
265259
break;
266260
}
267261
case 'backgroundImage':
@@ -273,11 +267,11 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
273267
case 'backgroundImageRepeat':
274268
case 'headerBackgroundImageRepeat':
275269
case 'footerBackgroundImageRepeat': {
276-
placeholder = '';
270+
placeholder = 'no-repeat';
277271
break;
278272
}
279273
case 'rotation': {
280-
placeholder = '';
274+
placeholder = '0deg';
281275
break;
282276
}
283277
}
@@ -392,13 +386,16 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
392386
marginBottom: "16px",
393387
}}>
394388
{styleOptions.map((styleKey: string) => (
395-
<ConfigItem style={{
396-
flexDirection: "row",
397-
alignItems: "center",
398-
margin: "0",
399-
padding: "6px",
400-
borderBottom: "1px solid lightgray",
401-
}}>
389+
<ConfigItem
390+
key={styleKey}
391+
style={{
392+
flexDirection: "row",
393+
alignItems: "center",
394+
margin: "0",
395+
padding: "6px",
396+
borderBottom: "1px solid lightgray",
397+
}}
398+
>
402399
<div className="text-desc" style={{
403400
width: "100px",
404401
minWidth: "auto",
@@ -415,14 +412,13 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
415412
// leading: true,
416413
// trailing: true,
417414
// })}
415+
changeColor={(value) => handleChange(styleKey, value)}
418416
color={compStyle[styleKey]!}
419417
trigger="hover"
420418
/>
421419
<TacoInput
422420
value={compStyle[styleKey]}
423-
onChange={(e) => {
424-
handleChangeWithDebounce(styleKey, e.target.value);
425-
}}
421+
onChange={(e) => handleChange(styleKey, e.target.value)}
426422
// onChange={(e) => setColor(e.target.value)}
427423
// onBlur={colorInputBlur}
428424
// onKeyUp={(e) => e.nativeEvent.key === "Enter" && colorInputBlur()}
@@ -437,14 +433,8 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
437433
{/* </Radius> */}
438434
<TacoInput
439435
placeholder={getPlaceholderByStyle(styleKey)}
440-
value={compStyle[styleKey]}
441-
onChange={(e) => {
442-
handleChangeWithDebounce(styleKey, e.target.value);
443-
// setCompStyle((style) => ({
444-
// ...style,
445-
// [styleKey]: e.target.value,
446-
// }))
447-
}}
436+
defaultValue={compStyle[styleKey]}
437+
onChange={(e) => handleChange(styleKey, e.target.value)}
448438
// onBlur={(e) => radiusInputBlur(e.target.value)}
449439
// onKeyUp={(e) => e.nativeEvent.key === "Enter" && radiusInputBlur(e.currentTarget.value)}
450440
/>

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

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ import {
8080
} from "./styleControlConstants";
8181
import { faTextWidth } from "@fortawesome/free-solid-svg-icons";
8282
import appSelectControl from "./appSelectControl";
83-
import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
83+
import { JSONObject, JSONValue } from "@lowcoder-ee/util/jsonTypes";
8484
import { CompTypeContext } from "../utils/compTypeContext";
8585

8686
function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
@@ -785,7 +785,10 @@ const ResetIcon = styled(IconReset)`
785785
}
786786
`;
787787

788-
export function styleControl<T extends readonly SingleColorConfig[]>(colorConfigs: T) {
788+
export function styleControl<T extends readonly SingleColorConfig[]>(
789+
colorConfigs: T,
790+
styleKey: string = '',
791+
) {
789792
type ColorMap = { [K in Names<T>]: string };
790793
const childrenMap: any = {};
791794
colorConfigs.map((config) => {
@@ -843,12 +846,16 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
843846
const compType = useContext(CompTypeContext);
844847
const theme = useContext(ThemeContext);
845848
const bgColor = useContext(BackgroundColorContext);
849+
const compTheme = compType
850+
? theme?.theme?.components?.[compType]?.[styleKey]
851+
: undefined;
852+
846853
return calcColors(
847854
props as ColorMap,
848855
colorConfigs,
849856
theme?.theme,
850857
bgColor,
851-
compType ? theme?.theme?.components?.[compType] as unknown as Record<string, string>: undefined,
858+
compTheme as Record<string, string> | undefined,
852859
);
853860
}
854861
)
@@ -858,13 +865,16 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
858865
const compType = useContext(CompTypeContext);
859866
const bgColor = useContext(BackgroundColorContext);
860867
const isMobile = useIsMobile();
868+
const compTheme = compType
869+
? theme?.theme?.components?.[compType]?.[styleKey]
870+
: undefined;
861871

862872
const props = calcColors(
863873
childrenToProps(children) as ColorMap,
864874
colorConfigs,
865875
theme?.theme,
866876
bgColor,
867-
compType ? theme?.theme?.components?.[compType] as unknown as Record<string, string>: undefined,
877+
compTheme as Record<string, string> | undefined,
868878
);
869879
const showReset = Object.values(childrenToProps(children)).findIndex((item) => item) > -1;
870880
return (

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -500,7 +500,7 @@ const BORDER = {
500500
const RADIUS = {
501501
name: "radius",
502502
label: trans("style.borderRadius"),
503-
radius: "borderRadius",
503+
radius: "radius",
504504
} as const;
505505

506506
const BORDER_WIDTH = {

0 commit comments

Comments
 (0)