Skip to content

Commit 6ab9924

Browse files
raheeliftikhar5raheeliftikhar5
committed
added dotlottie option in lottie comp
1 parent 84904df commit 6ab9924

File tree

3 files changed

+76
-23
lines changed

3 files changed

+76
-23
lines changed

‎client/packages/lowcoder/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"@fortawesome/free-regular-svg-icons": "^6.5.1",
2525
"@fortawesome/free-solid-svg-icons": "^6.5.1",
2626
"@fortawesome/react-fontawesome": "latest",
27+
"@lottiefiles/dotlottie-react": "^0.13.0",
2728
"@manaflair/redux-batch": "^1.0.0",
2829
"@rjsf/antd": "^5.21.2",
2930
"@rjsf/core": "^5.21.2",

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

Lines changed: 56 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,11 @@ const Player = lazy(
2929
.then(module => ({default: module.Player}))
3030
);
3131

32+
const DotLottiePlayer = lazy(
33+
() => import('@lottiefiles/dotlottie-react')
34+
.then(module => ({default: module.DotLottieReact}))
35+
);
36+
3237
/**
3338
* JsonLottie Comp
3439
*/
@@ -90,8 +95,9 @@ const speedOptions = [
9095
] as const;
9196

9297
const ModeOptions = [
93-
{ label: "Data", value: "standard" },
94-
{ label: "Advanced", value: "advanced" },
98+
{ label: "Lottie JSON", value: "standard" },
99+
{ label: "DotLottie", value: "dotLottie" },
100+
{ label: "IconScout", value: "advanced" },
95101
] as const;
96102

97103
let JsonLottieTmpComp = (function () {
@@ -102,6 +108,7 @@ let JsonLottieTmpComp = (function () {
102108
JSON.stringify(defaultLottie, null, 2)
103109
),
104110
srcIconScout: IconscoutControl(IconScoutAssetType.LOTTIE),
111+
srcDotLottie: withDefault(StringControl, 'https://assets-v2.lottiefiles.com/a/9e7d8a50-1180-11ee-89a6-3b0ab1ca8a0e/hUfEwc6xNt.lottie'),
105112
uuidIconScout: StringControl,
106113
valueIconScout: withDefault(ArrayOrJSONObjectControl, JSON.stringify({})),
107114
speed: dropdownControl(speedOptions, "1"),
@@ -162,27 +169,50 @@ let JsonLottieTmpComp = (function () {
162169
rotate: props.container.rotation,
163170
}}
164171
>
165-
<Player
166-
key={
167-
[props.speed, props.animationStart, props.loop, props.value, props.keepLastFrame] as any
168-
}
169-
keepLastFrame={props.keepLastFrame}
170-
autoplay={props.animationStart === "auto" && true}
171-
hover={props.animationStart === "on hover" && true}
172-
loop={props.loop === "single" ? false : true}
173-
speed={Number(props.speed)}
174-
src={
175-
props.sourceMode === 'advanced'
176-
? (isEmpty(props.valueIconScout) ? '' : props.valueIconScout)
177-
: props.value
178-
}
179-
style={{
180-
height: "100%",
181-
width: "100%",
182-
maxWidth: "100%",
183-
maxHeight: "100%",
184-
}}
185-
/>
172+
{props.sourceMode === 'dotLottie'
173+
? (
174+
<DotLottiePlayer
175+
key={
176+
[props.speed, props.animationStart, props.loop, props.value, props.keepLastFrame] as any
177+
}
178+
// keepLastFrame={props.keepLastFrame}
179+
autoplay={props.animationStart === "auto" && true}
180+
playOnHover={props.animationStart === "on hover" && true}
181+
loop={props.loop === "single" ? false : true}
182+
speed={Number(props.speed)}
183+
src={props.srcDotLottie}
184+
style={{
185+
height: "100%",
186+
width: "100%",
187+
maxWidth: "100%",
188+
maxHeight: "100%",
189+
}}
190+
/>
191+
)
192+
: (
193+
<Player
194+
key={
195+
[props.speed, props.animationStart, props.loop, props.value, props.keepLastFrame] as any
196+
}
197+
keepLastFrame={props.keepLastFrame}
198+
autoplay={props.animationStart === "auto" && true}
199+
hover={props.animationStart === "on hover" && true}
200+
loop={props.loop === "single" ? false : true}
201+
speed={Number(props.speed)}
202+
src={
203+
props.sourceMode === 'advanced'
204+
? (isEmpty(props.valueIconScout) ? '' : props.valueIconScout)
205+
: props.value
206+
}
207+
style={{
208+
height: "100%",
209+
width: "100%",
210+
maxWidth: "100%",
211+
maxHeight: "100%",
212+
}}
213+
/>
214+
)
215+
}
186216
</div>
187217
</div>
188218
);
@@ -198,6 +228,9 @@ let JsonLottieTmpComp = (function () {
198228
{children.sourceMode.getView() === 'standard' && children.value.propertyView({
199229
label: trans("jsonLottie.lottieJson"),
200230
})}
231+
{children.sourceMode.getView() === 'dotLottie' && children.srcDotLottie.propertyView({
232+
label: "Source",
233+
})}
201234
{children.sourceMode.getView() === 'advanced' && children.srcIconScout.propertyView({
202235
label: "Lottie Source",
203236
})}

‎client/yarn.lock

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3104,6 +3104,24 @@ __metadata:
31043104
languageName: node
31053105
linkType: hard
31063106

3107+
"@lottiefiles/dotlottie-react@npm:^0.13.0":
3108+
version: 0.13.0
3109+
resolution: "@lottiefiles/dotlottie-react@npm:0.13.0"
3110+
dependencies:
3111+
"@lottiefiles/dotlottie-web": 0.40.1
3112+
peerDependencies:
3113+
react: ^17 || ^18 || ^19
3114+
checksum: bafe6ded727aab991ff03f6ff5a2fd1a41b1f429b36175f34140017fc684e0a8ef7f7b713d189bd49948c4b728fe1d05c7d8c20a0bea0d8c1ae1ed87614fe843
3115+
languageName: node
3116+
linkType: hard
3117+
3118+
"@lottiefiles/dotlottie-web@npm:0.40.1":
3119+
version: 0.40.1
3120+
resolution: "@lottiefiles/dotlottie-web@npm:0.40.1"
3121+
checksum: a79e60c33845311cb055ea661abb2f4211063e149788aea724afbed05a09ae569d50b4c0e5825d13eb5fc62a33c3dc74f2f3900fdb1e99f8594feddc72d2cc27
3122+
languageName: node
3123+
linkType: hard
3124+
31073125
"@lottiefiles/react-lottie-player@npm:^3.5.3":
31083126
version: 3.5.3
31093127
resolution: "@lottiefiles/react-lottie-player@npm:3.5.3"
@@ -14158,6 +14176,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
1415814176
"@fortawesome/free-regular-svg-icons": ^6.5.1
1415914177
"@fortawesome/free-solid-svg-icons": ^6.5.1
1416014178
"@fortawesome/react-fontawesome": latest
14179+
"@lottiefiles/dotlottie-react": ^0.13.0
1416114180
"@manaflair/redux-batch": ^1.0.0
1416214181
"@rjsf/antd": ^5.21.2
1416314182
"@rjsf/core": ^5.21.2

0 commit comments

Comments
 (0)