@@ -2,6 +2,7 @@ import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps
22import {
33ArrayOrJSONObjectControl ,
44NumberControl ,
5+ StringControl ,
56} from "comps/controls/codeControl" ;
67import { dropdownControl } from "comps/controls/dropdownControl" ;
78import { BoolControl } from "comps/controls/boolControl" ;
@@ -20,6 +21,7 @@ import { defaultLottie } from "./jsonConstants";
2021import { EditorContext } from "comps/editorState" ;
2122import { AssetType , IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl" ;
2223import { DotLottie } from "@lottiefiles/dotlottie-react" ;
24+ import { AutoHeightControl } from "@lowcoder-ee/comps/controls/autoHeightControl" ;
2325
2426// const Player = lazy(
2527// () => import('@lottiefiles/react-lottie-player')
@@ -112,6 +114,8 @@ let JsonLottieTmpComp = (function () {
112114animationStart :dropdownControl ( animationStartOptions , "auto" ) ,
113115loop :dropdownControl ( loopOptions , "single" ) ,
114116keepLastFrame :BoolControl . DEFAULT_TRUE ,
117+ autoHeight :withDefault ( AutoHeightControl , "fixed" ) ,
118+ aspectRatio :withDefault ( StringControl , "16 / 9" ) ,
115119} ;
116120return new UICompBuilder ( childrenMap , ( props , dispatch ) => {
117121const [ dotLottie , setDotLottie ] = useState < DotLottie | null > ( null ) ;
@@ -151,6 +155,7 @@ let JsonLottieTmpComp = (function () {
151155background :`${ props . container . background } ,
152156padding :`${ props . container . padding } ,
153157rotate :props . container . rotation ,
158+ aspectRatio :props . aspectRatio ,
154159} }
155160>
156161< DotLottiePlayer
@@ -171,6 +176,9 @@ let JsonLottieTmpComp = (function () {
171176} }
172177onMouseEnter = { ( ) => props . animationStart === "hover" && dotLottie ?. play ( ) }
173178onMouseLeave = { ( ) => props . animationStart === "hover" && dotLottie ?. pause ( ) }
179+ renderConfig = { {
180+ autoResize :props . autoHeight ,
181+ } }
174182/>
175183</ div >
176184</ div >
@@ -204,6 +212,15 @@ let JsonLottieTmpComp = (function () {
204212</ >
205213) }
206214
215+ { [ "layout" , "both" ] . includes ( useContext ( EditorContext ) . editorModeStatus ) && (
216+ < Section name = { sectionNames . layout } >
217+ { children . autoHeight . getPropertyView ( ) }
218+ { children . aspectRatio . propertyView ( {
219+ label :trans ( "style.aspectRatio" ) ,
220+ } ) }
221+ </ Section >
222+ ) }
223+
207224{ ( useContext ( EditorContext ) . editorModeStatus === "layout" || useContext ( EditorContext ) . editorModeStatus === "both" ) && (
208225< >
209226< Section name = { sectionNames . style } >
@@ -221,7 +238,7 @@ let JsonLottieTmpComp = (function () {
221238} ) ( ) ;
222239JsonLottieTmpComp = class extends JsonLottieTmpComp {
223240override autoHeight ( ) :boolean {
224- return false ;
241+ return this . children . autoHeight . getView ( ) ;
225242}
226243} ;
227244export const JsonLottieComp = withExposingConfigs ( JsonLottieTmpComp , [