Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit50c9aa7

Browse files
added fit/align controls in json lottie comp
1 parent44aa451 commit50c9aa7

File tree

3 files changed

+62
-10
lines changed

3 files changed

+62
-10
lines changed

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

Lines changed: 57 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { EditorContext } from "comps/editorState";
2222
import{AssetType,IconscoutControl}from"@lowcoder-ee/comps/controls/iconscoutControl";
2323
import{DotLottie}from"@lottiefiles/dotlottie-react";
2424
import{AutoHeightControl}from"@lowcoder-ee/comps/controls/autoHeightControl";
25+
import{useResizeDetector}from"react-resize-detector";
2526

2627
// const Player = lazy(
2728
// () => import('@lottiefiles/react-lottie-player')
@@ -93,6 +94,27 @@ const speedOptions = [
9394
},
9495
]asconst;
9596

97+
constalignOptions=[
98+
{label:"None",value:"none"},
99+
{label:"Fill",value:"fill"},
100+
{label:"Cover",value:"cover"},
101+
{label:"Contain",value:"contain"},
102+
{label:"Fit Width",value:"fit-width"},
103+
{label:"Fit Height",value:"fit-height"},
104+
]asconst;
105+
106+
constfitOptions=[
107+
{label:"Top Left",value:"0,0"},
108+
{label:"Top Center",value:"0.5,0"},
109+
{label:"Top Right",value:"1,0"},
110+
{label:"Center Left",value:"0,0.5"},
111+
{label:"Center",value:"0.5,0.5"},
112+
{label:"Center Right",value:"1,0.5"},
113+
{label:"Bottom Left",value:"0,1"},
114+
{label:"Bottom Center",value:"0.5,1"},
115+
{label:"Bottom Right",value:"1,1"},
116+
]asconst;
117+
96118
constModeOptions=[
97119
{label:"Lottie JSON",value:"standard"},
98120
{label:"Asset Library",value:"asset-library"}
@@ -114,30 +136,59 @@ let JsonLottieTmpComp = (function () {
114136
animationStart:dropdownControl(animationStartOptions,"auto"),
115137
loop:dropdownControl(loopOptions,"single"),
116138
keepLastFrame:BoolControl.DEFAULT_TRUE,
117-
autoHeight:withDefault(AutoHeightControl,"fixed"),
118-
aspectRatio:withDefault(StringControl,"16 / 9"),
139+
autoHeight:withDefault(AutoHeightControl,"auto"),
140+
aspectRatio:withDefault(StringControl,"1/1"),
141+
fit:dropdownControl(alignOptions,"contain"),
142+
align:dropdownControl(fitOptions,"0.5,0.5"),
119143
};
120144
returnnewUICompBuilder(childrenMap,(props,dispatch)=>{
121145
const[dotLottie,setDotLottie]=useState<DotLottie|null>(null);
122-
146+
147+
constsetLayoutAndResize=()=>{
148+
constalign=props.align.split(',');
149+
dotLottie?.setLayout({fit:props.fit,align:[Number(align[0]),Number(align[1])]})
150+
dotLottie?.resize();
151+
}
152+
153+
const{ref:wrapperRef}=useResizeDetector({
154+
onResize:()=>{
155+
if(dotLottie){
156+
setLayoutAndResize();
157+
}
158+
}
159+
});
160+
123161
useEffect(()=>{
124162
constonComplete=()=>{
125163
props.keepLastFrame&&dotLottie?.setFrame(100);
126164
}
127165

166+
constonLoad=()=>{
167+
setLayoutAndResize();
168+
}
169+
128170
if(dotLottie){
129171
dotLottie.addEventListener('complete',onComplete);
172+
dotLottie.addEventListener('load',onLoad);
130173
}
131174

132175
return()=>{
133176
if(dotLottie){
134177
dotLottie.removeEventListener('complete',onComplete);
178+
dotLottie.removeEventListener('load',onLoad);
135179
}
136180
};
137181
},[dotLottie,props.keepLastFrame]);
138182

183+
useEffect(()=>{
184+
if(dotLottie){
185+
setLayoutAndResize();
186+
}
187+
},[dotLottie,props.fit,props.align,props.autoHeight]);
188+
139189
return(
140190
<div
191+
ref={wrapperRef}
141192
style={{
142193
height:'100%',
143194
padding:`${props.container.margin}`,
@@ -155,7 +206,6 @@ let JsonLottieTmpComp = (function () {
155206
background:`${props.container.background}`,
156207
padding:`${props.container.padding}`,
157208
rotate:props.container.rotation,
158-
aspectRatio:props.aspectRatio,
159209
}}
160210
>
161211
<DotLottiePlayer
@@ -173,12 +223,10 @@ let JsonLottieTmpComp = (function () {
173223
width:"100%",
174224
maxWidth:"100%",
175225
maxHeight:"100%",
226+
aspectRatio:props.aspectRatio,
176227
}}
177228
onMouseEnter={()=>props.animationStart==="hover"&&dotLottie?.play()}
178229
onMouseLeave={()=>props.animationStart==="hover"&&dotLottie?.pause()}
179-
renderConfig={{
180-
autoResize:props.autoHeight,
181-
}}
182230
/>
183231
</div>
184232
</div>
@@ -218,6 +266,8 @@ let JsonLottieTmpComp = (function () {
218266
{children.aspectRatio.propertyView({
219267
label:trans("style.aspectRatio"),
220268
})}
269+
{children.align.propertyView({label:trans("jsonLottie.align")})}
270+
{children.fit.propertyView({label:trans("jsonLottie.fit")})}
221271
</Section>
222272
)}
223273

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -390,14 +390,14 @@ export const IconPicker = (props: {
390390
</Flex>
391391
)}
392392
<Spinspinning={downloading}indicator={<LoadingOutlinedstyle={{fontSize:25}}/>}>
393-
{!loading&&Boolean(searchText)&&!searchResults?.length&&(
393+
{!loading&&Boolean(searchText)&&!Boolean(searchResults?.length)&&(
394394
<Flexalign="center"justify="center"style={{flex:1}}>
395395
<Typography.Texttype="secondary">
396396
{trans("iconScout.noResults")}
397397
</Typography.Text>
398398
</Flex>
399399
)}
400-
{!loading&&Boolean(searchText)&&searchResults?.length&&(
400+
{!loading&&Boolean(searchText)&&Boolean(searchResults?.length)&&(
401401
<IconListWrapper>
402402
<IconList
403403
width={550}

‎client/packages/lowcoder/src/i18n/locales/en.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3763,7 +3763,9 @@ export const en = {
37633763
"onHover":"On Hover",
37643764
"singlePlay":"Single Play",
37653765
"endlessLoop":"Endless Loop",
3766-
"keepLastFrame":"Keep Last Frame displayed"
3766+
"keepLastFrame":"Keep Last Frame displayed",
3767+
"fit":"Fit",
3768+
"align":"Align",
37673769
},
37683770
"timeLine":{
37693771
"titleColor":"Title Color",

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp