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

Commit3d41e3f

Browse files
fixed asset selection popup
1 parent662fde3 commit3d41e3f

File tree

1 file changed

+32
-33
lines changed

1 file changed

+32
-33
lines changed

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

Lines changed: 32 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@ import { debounce } from "lodash";
2222
importSpinfrom"antd/es/spin";
2323
import{ControlParams}from"./controlParams";
2424
import{getBase64}from"@lowcoder-ee/util/fileUtils";
25+
importFlexfrom"antd/es/flex";
26+
importTypographyfrom"antd/es/typography";
27+
importLoadingOutlinedfrom"@ant-design/icons/LoadingOutlined";
2528

2629
constButtonWrapper=styled.div`
2730
width: 100%;
@@ -32,15 +35,7 @@ const ButtonIconWrapper = styled.div`
3235
display: flex;
3336
width: 18px;
3437
`;
35-
constButtonText=styled.div`
36-
margin: 0 4px;
37-
flex: 1;
38-
width: 0px;
39-
line-height: 20px;
40-
overflow: hidden;
41-
text-overflow: ellipsis;
42-
text-align: left;
43-
`;
38+
4439
constStyledDeleteInputIcon=styled(DeleteInputIcon)`
4540
margin-left: auto;
4641
cursor: pointer;
@@ -61,7 +56,10 @@ const Wrapper = styled.div`
6156
}
6257
`;
6358
constPopupContainer=styled.div`
59+
display: flex;
60+
flex-direction: column;
6461
width: 580px;
62+
min-height: 480px;
6563
background: #ffffff;
6664
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
6765
border-radius: 8px;
@@ -167,15 +165,6 @@ const IconWrapper = styled.div`
167165
justify-content: center;
168166
`;
169167

170-
constIconKeyDisplay=styled.div`
171-
font-size: 8px;
172-
color: #8b8fa3;
173-
margin-top: 4px; /* Space between the icon and the text */
174-
text-align: center;
175-
word-wrap: break-word; /* Ensure text wraps */
176-
width: 100%; /* Ensure the container can grow */
177-
`;
178-
179168
exportenumAssetType{
180169
ICON="icon",
181170
ILLUSTRATION="illustration",
@@ -212,6 +201,7 @@ export const IconPicker = (props: {
212201
})=>{
213202
const[visible,setVisible]=useState(false)
214203
const[loading,setLoading]=useState(false)
204+
const[searchText,setSearchText]=useState<string>('')
215205
const[searchResults,setSearchResults]=useState<Array<any>>([]);
216206

217207
constonChangeRef=useRef(props.onChange);
@@ -252,14 +242,14 @@ export const IconPicker = (props: {
252242
}
253243
}
254244

255-
constfetchDownloadUrl=async(uuid:string)=>{
245+
constfetchDownloadUrl=async(uuid:string,preview:string)=>{
256246
try{
257247
constresult=awaitIconscoutApi.download(uuid,{
258248
format:props.assetType===AssetType.LOTTIE ?'lottie' :'svg',
259249
});
260250

261251
downloadAsset(uuid,result.download_url,(assetUrl:string)=>{
262-
onChangeIcon(uuid,assetUrl,result.url);
252+
onChangeIcon(uuid,assetUrl,preview);
263253
});
264254
}catch(error){
265255
console.error(error);
@@ -268,6 +258,7 @@ export const IconPicker = (props: {
268258

269259
consthandleChange=debounce((e)=>{
270260
fetchResults(e.target.value);
261+
setSearchText(e.target.value);
271262
},500);
272263

273264
constrowRenderer=useCallback(
@@ -280,7 +271,10 @@ export const IconPicker = (props: {
280271
key={icon.uuid}
281272
tabIndex={0}
282273
onClick={()=>{
283-
fetchDownloadUrl(icon.uuid);
274+
fetchDownloadUrl(
275+
icon.uuid,
276+
props.assetType===AssetType.ICON ?icon.urls.png_64 :icon.urls.thumb,
277+
);
284278
}}
285279
>
286280
<IconWrapper>
@@ -310,12 +304,8 @@ export const IconPicker = (props: {
310304
<Popover
311305
trigger={'click'}
312306
placement="left"
313-
// align={{ offset: [props.leftOffset ?? 0, 0, 0, 0] }}
314307
open={visible}
315308
onOpenChange={setVisible}
316-
// getPopupContainer={parent ? () => parent : undefined}
317-
// hide the original background when dragging the popover is allowed
318-
// when dragging is allowed, always re-location to avoid the popover exceeds the screen
319309
styles={{
320310
body:{
321311
border:"none",
@@ -339,20 +329,29 @@ export const IconPicker = (props: {
339329
/>
340330
<StyledSearchIcon/>
341331
</SearchDiv>
342-
<IconListWrapper>
343-
{loading&&(
344-
<Spin/>
345-
)}
346-
{!loading&&(
332+
{loading&&(
333+
<Flexalign="center"justify="center"style={{flex:1}}>
334+
<Spinindicator={<LoadingOutlinedstyle={{fontSize:25}}spin/>}/>
335+
</Flex>
336+
)}
337+
{!loading&&Boolean(searchText)&&!searchResults?.length&&(
338+
<Flexalign="center"justify="center"style={{flex:1}}>
339+
<Typography.Texttype="secondary">
340+
No results found.
341+
</Typography.Text>
342+
</Flex>
343+
)}
344+
{!loading&&Boolean(searchText)&&searchResults?.length&&(
345+
<IconListWrapper>
347346
<IconList
348347
width={550}
349348
height={400}
350349
rowHeight={80}
351350
rowCount={Math.ceil(searchResults.length/columnNum)}
352351
rowRenderer={rowRenderer}
353352
/>
354-
)}
355-
</IconListWrapper>
353+
</IconListWrapper>
354+
)}
356355
</PopupContainer>
357356
</Draggable>
358357
}
@@ -365,7 +364,7 @@ export const IconPicker = (props: {
365364
<videostyle={{'width':'100%'}}src={props.preview}autoPlay/>
366365
)}
367366
{props.assetType!==AssetType.LOTTIE&&(
368-
<IconControlViewvalue={props.preview}uuid={props.uuid}/>
367+
<IconControlViewvalue={props.value}uuid={props.uuid}/>
369368
)}
370369
</ButtonIconWrapper>
371370
<StyledDeleteInputIcon

0 commit comments

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