Skip to content

Commit 3d616ae

Browse files
MenamAfzalraheeliftikhar5
MenamAfzal
authored and
raheeliftikhar5
committed
custom hook used
1 parent fee527e commit 3d616ae

Some content is hidden

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

53 files changed

+122
-881
lines changed

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

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ import {
5858
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
5959
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
6060
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
61+
import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
6162

6263

6364
const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>`
@@ -107,21 +108,7 @@ const getValidate = (value: any): "" | "warning" | "error" | undefined => {
107108

108109
let AutoCompleteCompBase = (function () {
109110
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-
}, []);
111+
useMergeCompStyles(props as Record<string, any>, dispatch);
125112

126113
const {
127114
items,

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

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import { CompNameContext, EditorContext } from "../editorState";
3737
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
3838
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
3939
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
40+
import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
4041

4142
const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean, $style: AvatarStyleType }>`
4243
background: ${(props) => props.$style.background};
@@ -201,22 +202,8 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
201202

202203
let AvatarBasicComp = (function () {
203204
return new UICompBuilder(childrenMap, (props , dispatch) => {
205+
useMergeCompStyles(props as Record<string, any>, dispatch);
204206

205-
const theme = useContext(ThemeContext);
206-
const compType = useContext(CompTypeContext);
207-
const compTheme = theme?.theme?.components?.[compType];
208-
const styleProps: Record<string, any> = {};
209-
['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
210-
styleProps[key] = (props as any)[key];
211-
});
212-
213-
useEffect(() => {
214-
setInitialCompStyles({
215-
dispatch,
216-
compTheme,
217-
styleProps,
218-
});
219-
}, []);
220207
return(<AvatarView {...props} />)})
221208
.setPropertyViewFn((children) => (
222209
<>

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

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { JSONObject } from "util/jsonTypes";
2222
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
2323
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
2424
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
25+
import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
2526

2627
const MacaroneList = [
2728
'#fde68a',
@@ -146,21 +147,8 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
146147

147148
let AvatarGroupBasicComp = (function () {
148149
return new UICompBuilder(childrenMap, (props, dispatch) =>{
149-
const theme = useContext(ThemeContext);
150-
const compType = useContext(CompTypeContext);
151-
const compTheme = theme?.theme?.components?.[compType];
152-
const styleProps: Record<string, any> = {};
153-
['style', 'avatar'].forEach((key: string) => {
154-
styleProps[key] = (props as any)[key];
155-
});
156-
157-
useEffect(() => {
158-
setInitialCompStyles({
159-
dispatch,
160-
compTheme,
161-
styleProps,
162-
});
163-
}, []);
150+
useMergeCompStyles(props as Record<string, any>, dispatch);
151+
164152
return( <AvatarGroupView {...props} dispatch={dispatch} />
165153
)})
166154
.setPropertyViewFn((children) => (

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

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
3030
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
3131
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
3232
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
33+
import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
3334

3435
const FormLabel = styled(CommonBlueLabel)`
3536
font-size: 13px;
@@ -138,21 +139,7 @@ const ButtonTmpComp = (function () {
138139
viewRef: RefControl<HTMLElement>,
139140
};
140141
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-
}, []);
142+
useMergeCompStyles(props as Record<string, any>, dispatch);
156143

157144
return(
158145
<ButtonCompWrapper disabled={props.disabled}>

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

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
2525
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
2626
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
2727
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
28+
import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
2829

2930
const StyledDropdownButton = styled(DropdownButton)`
3031
width: 100%;
@@ -91,21 +92,7 @@ const DropdownTmpComp = (function () {
9192
style: styleControl(DropdownStyle, 'style'),
9293
};
9394
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-
}, []);
95+
useMergeCompStyles(props as Record<string, any>, dispatch);
10996

11097
const hasIcon =
11198
props.options.findIndex((option) => (option.prefixIcon as ReactElement)?.props.value) > -1;

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

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import React, { useContext, useEffect } from "react";
2525
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
2626
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
2727
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
28+
import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
2829

2930
const Link = styled(Button)<{
3031
$style: LinkStyleType;
@@ -95,22 +96,8 @@ const LinkTmpComp = (function () {
9596
viewRef: RefControl<HTMLElement>,
9697
};
9798
return new UICompBuilder(childrenMap, (props, dispatch) => {
98-
const theme = useContext(ThemeContext);
99-
const compType = useContext(CompTypeContext);
100-
const compTheme = theme?.theme?.components?.[compType];
99+
useMergeCompStyles(props as Record<string, any>, dispatch);
101100

102-
const styleProps: Record<string, any> = {};
103-
['style', 'animationStyle'].forEach((key: string) => {
104-
styleProps[key] = (props as any)[key];
105-
});
106-
107-
useEffect(() => {
108-
setInitialCompStyles({
109-
dispatch,
110-
compTheme,
111-
styleProps,
112-
});
113-
}, []);
114101

115102
// chrome86 bug: button children should not contain only empty span
116103
const hasChildren = hasIcon(props.prefixIcon) || !!props.text || hasIcon(props.suffixIcon);

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

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { EditorContext } from "comps/editorState";
2727
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
2828
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
2929
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
30+
import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
3031

3132
const Error = styled.div`
3233
color: #f5222d;
@@ -76,24 +77,8 @@ const ScannerTmpComp = (function () {
7677
style: styleControl(DropdownStyle, 'style'),
7778
viewRef: RefControl<HTMLElement>,
7879
};
79-
return new UICompBuilder(childrenMap, (props ,dispatch) => {
80-
81-
const theme = useContext(ThemeContext);
82-
const compType = useContext(CompTypeContext);
83-
const compTheme = theme?.theme?.components?.[compType];
84-
const styleProps: Record<string, any> = {};
85-
['style'].forEach((key: string) => {
86-
styleProps[key] = (props as any)[key];
87-
});
88-
89-
useEffect(() => {
90-
setInitialCompStyles({
91-
dispatch,
92-
compTheme,
93-
styleProps,
94-
});
95-
}, []);
96-
80+
return new UICompBuilder(childrenMap, (props, dispatch) => {
81+
useMergeCompStyles(props as Record<string, any>, dispatch);
9782

9883
const [showModal, setShowModal] = useState(false);
9984
const [errMessage, setErrMessage] = useState("");

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

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { EditorContext } from "comps/editorState";
2828
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
2929
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
3030
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
31+
import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
3132

3233
const IconWrapper = styled.div`
3334
display: flex;
@@ -72,21 +73,7 @@ const ToggleTmpComp = (function () {
7273
const text = props.showText
7374
? (props.value.value ? props.trueText : props.falseText) || undefined
7475
: 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-
}, []);
76+
useMergeCompStyles(props as Record<string, any>, dispatch);
9077

9178
return (
9279
<ButtonCompWrapperStyled

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

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/control
1717

1818
import { useContext } from "react";
1919
import { EditorContext } from "comps/editorState";
20-
import { ThemeContext } from "@lowcoder-ee/index.sdk";
20+
import { ThemeContext, useMergeCompStyles } from "@lowcoder-ee/index.sdk";
2121
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
2222
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
2323

@@ -51,23 +51,8 @@ let CarouselBasicComp = (function () {
5151
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
5252
...formDataChildren,
5353
};
54-
return new UICompBuilder(childrenMap, (props , dispatch) => {
55-
56-
const theme = useContext(ThemeContext);
57-
const compType = useContext(CompTypeContext);
58-
const compTheme = theme?.theme?.components?.[compType];
59-
const styleProps: Record<string, any> = {};
60-
['style','animationStyle'].forEach((key: string) => {
61-
styleProps[key] = (props as any)[key];
62-
});
63-
64-
useEffect(() => {
65-
setInitialCompStyles({
66-
dispatch,
67-
compTheme,
68-
styleProps,
69-
});
70-
}, []);
54+
return new UICompBuilder(childrenMap, (props, dispatch) => {
55+
useMergeCompStyles(props as Record<string, any>, dispatch);
7156

7257
const containerRef = useRef<HTMLDivElement>(null);
7358
const [height, setHeight] = useState(0);

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

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import { DisabledContext } from "comps/generators/uiCompBuilder";
4343
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
4444
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
4545
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
46+
import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
4647

4748
const ContainWrapper = styled.div<{
4849
$style: ContainerStyleType & {
@@ -181,23 +182,8 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
181182

182183
export const ResponsiveLayoutBaseComp = (function () {
183184
return new UICompBuilder(childrenMap, (props, dispatch) => {
185+
useMergeCompStyles(props as Record<string, any>, dispatch);
184186

185-
const theme = useContext(ThemeContext);
186-
const compType = useContext(CompTypeContext);
187-
const compTheme = theme?.theme?.components?.[compType];
188-
const styleProps: Record<string, any> = {};
189-
['style', 'columnStyle'].forEach((key: string) => {
190-
styleProps[key] = (props as any)[key];
191-
});
192-
193-
useEffect(() => {
194-
setInitialCompStyles({
195-
dispatch,
196-
compTheme,
197-
styleProps,
198-
});
199-
}, []);
200-
201187
return (
202188
<ColumnLayout {...props} dispatch={dispatch} />
203189
);

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

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ import { default as CloseOutlined } from "@ant-design/icons/CloseOutlined";
7070
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
7171
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
7272
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
73+
import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
7374

7475

7576
dayjs.extend(relativeTime);
@@ -377,22 +378,7 @@ const CommentCompBase = (
377378

378379
let CommentBasicComp = (function () {
379380
return new UICompBuilder(childrenMap, (props, dispatch) =>{
380-
381-
const theme = useContext(ThemeContext);
382-
const compType = useContext(CompTypeContext);
383-
const compTheme = theme?.theme?.components?.[compType];
384-
const styleProps: Record<string, any> = {};
385-
['style', 'animationStyle'].forEach((key: string) => {
386-
styleProps[key] = (props as any)[key];
387-
});
388-
389-
useEffect(() => {
390-
setInitialCompStyles({
391-
dispatch,
392-
compTheme,
393-
styleProps,
394-
});
395-
}, []);
381+
useMergeCompStyles(props as Record<string, any>, dispatch);
396382

397383
return (
398384
<CommentCompBase {...props} dispatch={dispatch} />

‎client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { styleControl } from "comps/controls/styleControl";
2323
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
2424
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
2525
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
26+
import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
2627
const { Meta } = Card;
2728

2829
const Wrapper = styled.div<{
@@ -196,22 +197,7 @@ export const ContainerBaseComp = (function () {
196197
};
197198

198199
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
199-
200-
const theme = useContext(ThemeContext);
201-
const compType = useContext(CompTypeContext);
202-
const compTheme = theme?.theme?.components?.[compType];
203-
const styleProps: Record<string, any> = {};
204-
['style', 'headerStyle', 'bodyStyle', 'animationStyle'].forEach((key: string) => {
205-
styleProps[key] = (props as any)[key];
206-
});
207-
208-
useEffect(() => {
209-
setInitialCompStyles({
210-
dispatch,
211-
compTheme,
212-
styleProps,
213-
});
214-
}, []);
200+
useMergeCompStyles(props as Record<string, any>, dispatch);
215201

216202
props.container.showHeader = false;
217203
// 注入容器参数

0 commit comments

Comments
 (0)