Skip to content

Commit 0c30fb0

Browse files
Macraheeliftikhar5
Mac
authored and
raheeliftikhar5
committed
Multimedia & Animation
1 parent 7ae946d commit 0c30fb0

File tree

8 files changed

+173
-29
lines changed

8 files changed

+173
-29
lines changed

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

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,17 @@ import { trans } from "i18n";
99
import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
1010
import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants";
1111
import { PositionControl } from "comps/controls/dropdownControl";
12-
import { useRef, useState } from "react";
12+
import { useEffect, useRef, useState } from "react";
1313
import ReactResizeDetector from "react-resize-detector";
1414
import { ArrayStringControl } from "comps/controls/codeControl";
1515
import { styleControl } from "comps/controls/styleControl";
1616
import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/controls/styleControlConstants";
1717

1818
import { useContext } from "react";
1919
import { EditorContext } from "comps/editorState";
20+
import { ThemeContext } from "@lowcoder-ee/index.sdk";
21+
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
22+
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
2023

2124
// TODO: dots at top position needs proper margin (should be the same as bottom position)
2225

@@ -44,11 +47,28 @@ let CarouselBasicComp = (function () {
4447
onEvent: ChangeEventHandlerControl,
4548
showDots: withDefault(BoolControl, true),
4649
dotPosition: withDefault(PositionControl, "bottom"),
47-
style: styleControl(CarouselStyle),
48-
animationStyle: styleControl(AnimationStyle),
50+
style: styleControl(CarouselStyle , 'style'),
51+
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
4952
...formDataChildren,
5053
};
51-
return new UICompBuilder(childrenMap, (props) => {
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+
}, []);
71+
5272
const containerRef = useRef<HTMLDivElement>(null);
5373
const [height, setHeight] = useState(0);
5474
const onResize = () => {

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

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ import {
3030
} from "../controls/eventHandlerControl";
3131
import { useContext } from "react";
3232
import { EditorContext } from "comps/editorState";
33+
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
34+
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
35+
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
3336

3437
const Container = styled.div<{
3538
$style: IconStyleType | undefined;
@@ -62,8 +65,8 @@ ${props=>props.$animationStyle}
6265
const EventOptions = [clickEvent] as const;
6366

6467
const childrenMap = {
65-
style: styleControl(IconStyle),
66-
animationStyle: styleControl(AnimationStyle),
68+
style: styleControl(IconStyle,'style'),
69+
animationStyle: styleControl(AnimationStyle,'animationStyle'),
6770
icon: withDefault(IconControl, "/icon:antd/homefilled"),
6871
autoHeight: withDefault(AutoHeightControl, "auto"),
6972
iconSize: withDefault(NumberControl, 20),
@@ -112,7 +115,25 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
112115
};
113116

114117
let IconBasicComp = (function () {
115-
return new UICompBuilder(childrenMap, (props) => <IconView {...props} />)
118+
return new UICompBuilder(childrenMap, (props , dispatch) => {
119+
120+
const theme = useContext(ThemeContext);
121+
const compType = useContext(CompTypeContext);
122+
const compTheme = theme?.theme?.components?.[compType];
123+
const styleProps: Record<string, any> = {};
124+
['style', 'animationStyle'].forEach((key: string) => {
125+
styleProps[key] = (props as any)[key];
126+
});
127+
128+
useEffect(() => {
129+
setInitialCompStyles({
130+
dispatch,
131+
compTheme,
132+
styleProps,
133+
});
134+
}, []);
135+
136+
return(<IconView {...props} />)})
116137
.setPropertyViewFn((children) => (
117138
<>
118139
<Section name={sectionNames.basic}>

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

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@ import { DEFAULT_IMG_URL } from "util/stringUtils";
3434
import { useContext } from "react";
3535
import { EditorContext } from "comps/editorState";
3636
import { StringControl } from "../controls/codeControl";
37+
import { ThemeContext } from "@lowcoder-ee/index.sdk";
38+
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
39+
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
3740

3841
const Container = styled.div<{ $style: ImageStyleType | undefined,$animationStyle:AnimationStyleType }>`
3942
height: 100%;
@@ -166,14 +169,31 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
166169
const childrenMap = {
167170
src: withDefault(StringStateControl, "https://temp.im/350x400"),
168171
onEvent: eventHandlerControl(EventOptions),
169-
style: styleControl(ImageStyle),
170-
animationStyle: styleControl(AnimationStyle),
172+
style: styleControl(ImageStyle , 'style'),
173+
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
171174
autoHeight: withDefault(AutoHeightControl, "fixed"),
172175
supportPreview: BoolControl,
173176
restrictPaddingOnRotation:withDefault(StringControl, 'image')
174177
};
175178

176-
let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
179+
let ImageBasicComp = new UICompBuilder(childrenMap, (props , dispatch) => {
180+
181+
const theme = useContext(ThemeContext);
182+
const compType = useContext(CompTypeContext);
183+
const compTheme = theme?.theme?.components?.[compType];
184+
const styleProps: Record<string, any> = {};
185+
['style','animationStyle'].forEach((key: string) => {
186+
styleProps[key] = (props as any)[key];
187+
});
188+
189+
useEffect(() => {
190+
setInitialCompStyles({
191+
dispatch,
192+
compTheme,
193+
styleProps,
194+
});
195+
}, []);
196+
177197
return <ContainerImg {...props} />;
178198
})
179199
.setPropertyViewFn((children) => {

‎client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { styleControl } from "comps/controls/styleControl";
99
import { AnimationStyle, LottieStyle } from "comps/controls/styleControlConstants";
1010
import { trans } from "i18n";
1111
import { Section, sectionNames } from "lowcoder-design";
12-
import { useContext, lazy } from "react";
12+
import { useContext, lazy, useEffect } from "react";
1313
import { UICompBuilder, withDefault } from "../../generators";
1414
import {
1515
NameConfig,
@@ -18,6 +18,9 @@ import {
1818
} from "../../generators/withExposing";
1919
import { defaultLottie } from "./jsonConstants";
2020
import { EditorContext } from "comps/editorState";
21+
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
22+
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
23+
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
2124

2225
const Player = lazy(
2326
() => import('@lottiefiles/react-lottie-player')
@@ -93,13 +96,30 @@ let JsonLottieTmpComp = (function () {
9396
speed: dropdownControl(speedOptions, "1"),
9497
width: withDefault(NumberControl, 100),
9598
height: withDefault(NumberControl, 100),
96-
container: styleControl(LottieStyle),
97-
animationStyle: styleControl(AnimationStyle),
99+
container: styleControl(LottieStyle , 'container'),
100+
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
98101
animationStart: dropdownControl(animationStartOptions, "auto"),
99102
loop: dropdownControl(loopOptions, "single"),
100103
keepLastFrame: BoolControl.DEFAULT_TRUE,
101104
};
102-
return new UICompBuilder(childrenMap, (props) => {
105+
return new UICompBuilder(childrenMap, (props , dispatch) => {
106+
107+
const theme = useContext(ThemeContext);
108+
const compType = useContext(CompTypeContext);
109+
const compTheme = theme?.theme?.components?.[compType];
110+
const styleProps: Record<string, any> = {};
111+
['container', 'animationStyle'].forEach((key: string) => {
112+
styleProps[key] = (props as any)[key];
113+
});
114+
115+
useEffect(() => {
116+
setInitialCompStyles({
117+
dispatch,
118+
compTheme,
119+
styleProps,
120+
});
121+
}, []);
122+
103123
return (
104124
<div
105125
style={{

‎client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,11 @@ import { withDefault } from "../../generators/simpleGenerators";
1313
import { trans } from "i18n";
1414
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1515
import { mediaCommonChildren, mediaMethods } from "./mediaUtils";
16-
import { useContext } from "react";
16+
import { useContext, useEffect } from "react";
1717
import { EditorContext } from "comps/editorState";
18+
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
19+
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
20+
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
1821

1922
const Container = styled.div<{ $style: any; $animationStyle: AnimationStyleType }>`
2023
${props => props.$style};
@@ -66,15 +69,32 @@ const ContainerAudio = (props: RecordConstructorToView<typeof childrenMap>) => {
6669
const childrenMap = {
6770
src: withDefault(StringStateControl, trans("audio.defaultSrcUrl")),
6871
onEvent: eventHandlerControl(EventOptions),
69-
style: styleControl(AudioStyle),
70-
animationStyle: styleControl(AnimationStyle),
72+
style: styleControl(AudioStyle , 'style'),
73+
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
7174
autoPlay: BoolControl,
7275
loop: BoolControl,
7376
...mediaCommonChildren,
7477
};
7578

7679
let AudioBasicComp = (function () {
77-
return new UICompBuilder(childrenMap, (props) => {
80+
return new UICompBuilder(childrenMap, (props , dispatch) => {
81+
82+
const theme = useContext(ThemeContext);
83+
const compType = useContext(CompTypeContext);
84+
const compTheme = theme?.theme?.components?.[compType];
85+
const styleProps: Record<string, any> = {};
86+
['style', 'animationStyle'].forEach((key: string) => {
87+
styleProps[key] = (props as any)[key];
88+
});
89+
90+
useEffect(() => {
91+
setInitialCompStyles({
92+
dispatch,
93+
compTheme,
94+
styleProps,
95+
});
96+
}, []);
97+
7898
return <ContainerAudio {...props} />;
7999
})
80100
.setPropertyViewFn((children) => {

‎client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerCon
1616
import { jsonObjectExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
1717
import { dropdownControl } from "comps/controls/dropdownControl";
1818
import { ArrayOrJSONObjectControl } from "comps/controls/codeControl";
19+
import { useContext, useEffect } from "react";
20+
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
21+
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
22+
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
1923

2024
export function getStyle(style: ColorPickerStyleType) {
2125
return css`
@@ -60,7 +64,7 @@ export const colorPickerEvent = eventHandlerControl([
6064
const childrenMap = {
6165
...textInputChildren,
6266
value: stringExposingStateControl('value', '#3377ff'),
63-
style: styleControl(ColorPickerStyle),
67+
style: styleControl(ColorPickerStyle , 'style'),
6468
color: jsonObjectExposingStateControl('color', {}),
6569
trigger: dropdownControl(colorPickerTriggerOption, 'click'),
6670
disabledAlpha: BoolControl,
@@ -69,7 +73,24 @@ const childrenMap = {
6973
presets: withDefault(ArrayOrJSONObjectControl, JSON.stringify(presets, null, 2)),
7074
};
7175

72-
export const ColorPickerComp = new UICompBuilder(childrenMap, (props) => {
76+
export const ColorPickerComp = new UICompBuilder(childrenMap, (props , dispatch) => {
77+
78+
const theme = useContext(ThemeContext);
79+
const compType = useContext(CompTypeContext);
80+
const compTheme = theme?.theme?.components?.[compType];
81+
const styleProps: Record<string, any> = {};
82+
['style'].forEach((key: string) => {
83+
styleProps[key] = (props as any)[key];
84+
});
85+
86+
useEffect(() => {
87+
setInitialCompStyles({
88+
dispatch,
89+
compTheme,
90+
styleProps,
91+
});
92+
}, []);
93+
7394
return props.label({
7495
children: (
7596
<ColorPickerWrapper

‎client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { StringStateControl, numberExposingStateControl } from "../../controls/c
44
import { UICompBuilder } from "../../generators";
55
import { NameConfig, NameConfigHidden, withExposingConfigs } from "../../generators/withExposing";
66
import { RecordConstructorToView } from "lowcoder-core";
7-
import { useRef, useState } from "react";
7+
import { useEffect, useRef, useState } from "react";
88
import { styleControl } from "comps/controls/styleControl";
99
import {
1010
AnimationStyle,
@@ -24,6 +24,9 @@ import { mediaCommonChildren, mediaMethods } from "./mediaUtils";
2424
import { useContext } from "react";
2525
import { EditorContext } from "comps/editorState";
2626
import styled, { css } from "styled-components";
27+
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
28+
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
29+
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
2730

2831
const EventOptions = [
2932
{ label: trans("video.play"), value: "play", description: trans("video.playDesc") },
@@ -115,8 +118,8 @@ const childrenMap = {
115118
src: withDefault(StringStateControl, trans('video.defaultSrcUrl')),
116119
poster: withDefault(StringStateControl, trans('video.defaultPosterUrl')),
117120
onEvent: eventHandlerControl(EventOptions),
118-
style: styleControl(VideoStyle),
119-
animationStyle: styleControl(AnimationStyle),
121+
style: styleControl(VideoStyle , 'style'),
122+
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
120123
autoPlay: BoolControl,
121124
loop: BoolControl,
122125
controls: BoolControl,
@@ -128,7 +131,25 @@ const childrenMap = {
128131
};
129132

130133
let VideoBasicComp = (function () {
131-
return new UICompBuilder(childrenMap, (props) => {
134+
return new UICompBuilder(childrenMap, (props , dispatch) => {
135+
136+
const theme = useContext(ThemeContext);
137+
const compType = useContext(CompTypeContext);
138+
const compTheme = theme?.theme?.components?.[compType];
139+
const styleProps: Record<string, any> = {};
140+
['style', 'animationStyle'].forEach((key: string) => {
141+
styleProps[key] = (props as any)[key];
142+
});
143+
144+
useEffect(() => {
145+
setInitialCompStyles({
146+
dispatch,
147+
compTheme,
148+
styleProps,
149+
});
150+
}, []);
151+
152+
132153
return <ContainerVideo {...props} />;
133154
})
134155
.setPropertyViewFn((children) => {
@@ -176,9 +197,9 @@ let VideoBasicComp = (function () {
176197
<Section name={sectionNames.style}>
177198
{children.style.getPropertyView()}
178199
</Section>
179-
<Section name={sectionNames.animationStyle} hasTooltip={true}>
200+
{/* <Section name={sectionNames.animationStyle} hasTooltip={true}>
180201
{children.animationStyle.getPropertyView()}
181-
</Section>
202+
</Section> */}
182203
</>
183204
)}
184205
</>

‎client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import {
2525
} from "./textInputConstants";
2626
import { withMethodExposing } from "../../generators/withMethodExposing";
2727
import { styleControl } from "comps/controls/styleControl";
28-
import styled, { ThemeContext } from "styled-components";
28+
import styled from "styled-components";
2929
import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
3030
import {
3131
hiddenPropertyView,
@@ -42,8 +42,9 @@ import { RefControl } from "comps/controls/refControl";
4242
import React, { useContext, useEffect } from "react";
4343
import { EditorContext } from "comps/editorState";
4444
import { migrateOldData } from "comps/generators/simpleGenerators";
45-
import { CompTypeContext } from "../../utils/compTypeContext";
46-
import { setInitialCompStyles } from "../../utils/themeUtil";
45+
import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
46+
import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
47+
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
4748

4849
const PasswordStyle = styled(InputPassword)<{
4950
$style: InputLikeStyleType;

0 commit comments

Comments
 (0)