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

Commit5e249b2

Browse files
integrate iconscout in icon button and image comp
1 parente57b10f commit5e249b2

File tree

6 files changed

+768
-10
lines changed

6 files changed

+768
-10
lines changed
Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
importApifrom"api/api";
2+
importaxios,{AxiosInstance,AxiosPromise,AxiosRequestConfig}from"axios";
3+
import{GenericApiResponse}from"./apiResponses";
4+
5+
exportinterfaceSearchParams{
6+
query:string;
7+
product_type:string;
8+
asset:string;
9+
per_page:number;
10+
page:1;
11+
sort:string;
12+
formats:string;
13+
}
14+
15+
exporttypeResponseType={
16+
response:any;
17+
};
18+
19+
constapiUrl="https://api.iconscout.com";
20+
constclientID="";//"91870410585071";
21+
constclientSecret="";// "GV5aCWpwdLWTxVXFBjMKSoyDPUyjzXLR";
22+
constcurrentPage=1;
23+
constcurrentQuery='';
24+
constcurrentData=[];
25+
26+
letaxiosIns:AxiosInstance|null=null;
27+
28+
constgetAxiosInstance=(clientSecret?:string)=>{
29+
if(axiosIns&&!clientSecret){
30+
returnaxiosIns;
31+
}
32+
33+
constheaders:Record<string,string>={
34+
"Content-Type":"application/json",
35+
"Client-ID":clientID,
36+
}
37+
if(clientSecret){
38+
headers['Client-Secret']=clientSecret;
39+
}
40+
constapiRequestConfig:AxiosRequestConfig={
41+
baseURL:`${apiUrl}`,
42+
headers,
43+
withCredentials:true,
44+
};
45+
46+
axiosIns=axios.create(apiRequestConfig);
47+
returnaxiosIns;
48+
}
49+
50+
classIconscoutApiextendsApi{
51+
staticasyncsearch(params:SearchParams):Promise<any>{
52+
letresponse;
53+
try{
54+
response=awaitgetAxiosInstance().request({
55+
url:'/v3/search',
56+
method:"GET",
57+
withCredentials:false,
58+
params:{
59+
...params,
60+
'formats[]':params.formats,
61+
},
62+
});
63+
}catch(error){
64+
console.error(error);
65+
}
66+
returnresponse?.data.response.items;
67+
}
68+
69+
staticasyncdownload(uuid:string,params:Record<string,string>):Promise<any>{
70+
constresponse=awaitgetAxiosInstance(clientSecret).request({
71+
url:`/v3/items/${uuid}/api-download`,
72+
method:"POST",
73+
withCredentials:false,
74+
params,
75+
});
76+
returnresponse?.data.response.download;
77+
}
78+
}
79+
80+
exportdefaultIconscoutApi;

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

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
withExposingConfigs,
1313
}from"../generators/withExposing";
1414
import{RecordConstructorToView}from"lowcoder-core";
15-
import{useEffect,useRef,useState}from"react";
15+
import{ReactElement,useEffect,useRef,useState}from"react";
1616
import_from"lodash";
1717
importReactResizeDetectorfrom"react-resize-detector";
1818
import{styleControl}from"comps/controls/styleControl";
@@ -34,6 +34,8 @@ 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{dropdownControl}from"../controls/dropdownControl";
38+
import{IconScoutAssetType,IconscoutControl}from"../controls/iconscoutControl";
3739

3840
constContainer=styled.div<{$style:ImageStyleType|undefined,$animationStyle:AnimationStyleType}>`
3941
height: 100%;
@@ -75,6 +77,10 @@ const getStyle = (style: ImageStyleType) => {
7577
};
7678

7779
constEventOptions=[clickEvent]asconst;
80+
constModeOptions=[
81+
{label:"URL",value:"standard"},
82+
{label:"Advanced",value:"advanced"},
83+
]asconst;
7884

7985
constContainerImg=(props:RecordConstructorToView<typeofchildrenMap>)=>{
8086
constimgRef=useRef<HTMLDivElement>(null);
@@ -136,6 +142,7 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
136142
setStyle("auto","100%");
137143
}
138144
};
145+
139146
return(
140147
<ReactResizeDetector
141148
onResize={onResize}
@@ -148,7 +155,11 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
148155
}
149156
>
150157
<AntImage
151-
src={props.src.value}
158+
src={
159+
props.sourceMode==='advanced'
160+
?(props.srcIconScoutasReactElement)?.props.value
161+
:props.src.value
162+
}
152163
referrerPolicy="same-origin"
153164
draggable={false}
154165
preview={props.supportPreview}
@@ -164,7 +175,9 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
164175
};
165176

166177
constchildrenMap={
178+
sourceMode:dropdownControl(ModeOptions,"standard"),
167179
src:withDefault(StringStateControl,"https://temp.im/350x400"),
180+
srcIconScout:IconscoutControl(IconScoutAssetType.ILLUSTRATION),
168181
onEvent:eventHandlerControl(EventOptions),
169182
style:styleControl(ImageStyle),
170183
animationStyle:styleControl(AnimationStyle),
@@ -180,7 +193,14 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
180193
return(
181194
<>
182195
<Sectionname={sectionNames.basic}>
183-
{children.src.propertyView({
196+
{children.sourceMode.propertyView({
197+
label:"",
198+
radioButton:true
199+
})}
200+
{children.sourceMode.getView()==='standard'&&children.src.propertyView({
201+
label:trans("image.src"),
202+
})}
203+
{children.sourceMode.getView()==='advanced'&&children.srcIconScout.propertyView({
184204
label:trans("image.src"),
185205
})}
186206
</Section>

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

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
}from"../../generators/withExposing";
1919
import{defaultLottie}from"./jsonConstants";
2020
import{EditorContext}from"comps/editorState";
21+
import{IconScoutAssetType,IconscoutControl}from"@lowcoder-ee/comps/controls/iconscoutControl";
2122

2223
constPlayer=lazy(
2324
()=>import('@lottiefiles/react-lottie-player')
@@ -84,12 +85,20 @@ const speedOptions = [
8485
},
8586
]asconst;
8687

88+
constModeOptions=[
89+
{label:"Data",value:"standard"},
90+
{label:"Advanced",value:"advanced"},
91+
]asconst;
92+
8793
letJsonLottieTmpComp=(function(){
8894
constchildrenMap={
95+
sourceMode:dropdownControl(ModeOptions,"standard"),
8996
value:withDefault(
9097
ArrayOrJSONObjectControl,
9198
JSON.stringify(defaultLottie,null,2)
9299
),
100+
srcIconScout:IconscoutControl(IconScoutAssetType.LOTTIE),
101+
valueIconScout:ArrayOrJSONObjectControl,
93102
speed:dropdownControl(speedOptions,"1"),
94103
width:withDefault(NumberControl,100),
95104
height:withDefault(NumberControl,100),
@@ -100,6 +109,7 @@ let JsonLottieTmpComp = (function () {
100109
keepLastFrame:BoolControl.DEFAULT_TRUE,
101110
};
102111
returnnewUICompBuilder(childrenMap,(props)=>{
112+
console.log(props.srcIconScout);
103113
return(
104114
<div
105115
style={{
@@ -145,7 +155,17 @@ let JsonLottieTmpComp = (function () {
145155
return(
146156
<>
147157
<Sectionname={sectionNames.basic}>
148-
{children.value.propertyView({
158+
{children.sourceMode.propertyView({
159+
label:"",
160+
radioButton:true
161+
})}
162+
{children.sourceMode.getView()==='standard'&&children.value.propertyView({
163+
label:trans("jsonLottie.lottieJson"),
164+
})}
165+
{children.sourceMode.getView()==='advanced'&&children.srcIconScout.propertyView({
166+
label:"Lottie Source",
167+
})}
168+
{children.sourceMode.getView()==='advanced'&&children.valueIconScout.propertyView({
149169
label:trans("jsonLottie.lottieJson"),
150170
})}
151171
</Section>

‎client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ import { useEffect, useRef, useState } from "react";
3939
importReactResizeDetectorfrom"react-resize-detector";
4040

4141
import{useContext}from"react";
42-
import{BoolControl}from"@lowcoder-ee/index.sdk";
42+
import{IconScoutAssetType,IconscoutControl}from"@lowcoder-ee/comps/controls/iconscoutControl";
4343

4444
constContainer=styled.div<{$style:any}>`
4545
height: 100%;
@@ -75,6 +75,13 @@ const IconWrapper = styled.div<{ $style: any }>`
7575
${(props)=>props.$style&&getStyleIcon(props.$style)}
7676
`;
7777

78+
constIconScoutWrapper=styled.div<{$style:any}>`
79+
display: flex;
80+
height: 100%;
81+
82+
${(props)=>props.$style&&getStyleIcon(props.$style)}
83+
`;
84+
7885
functiongetStyleIcon(style:any){
7986
returncss`
8087
svg {
@@ -164,6 +171,11 @@ const typeOptions = [
164171
},
165172
]asconst;
166173

174+
constModeOptions=[
175+
{label:"Standard",value:"standard"},
176+
{label:"Advanced",value:"advanced"},
177+
]asconst;
178+
167179
functionisDefault(type?:string){
168180
return!type;
169181
}
@@ -184,7 +196,9 @@ const childrenMap = {
184196
disabled:BoolCodeControl,
185197
loading:BoolCodeControl,
186198
form:SelectFormControl,
199+
sourceMode:dropdownControl(ModeOptions,"standard"),
187200
prefixIcon:IconControl,
201+
prefixIconScout:IconscoutControl(IconScoutAssetType.ICON),
188202
style:ButtonStyleControl,
189203
viewRef:RefControl<HTMLElement>,
190204
restrictPaddingOnRotation:withDefault(StringControl,'controlButton')
@@ -227,7 +241,7 @@ let ButtonTmpComp = (function () {
227241

228242
setStyle(container?.clientHeight+"px",container?.clientWidth+"px");
229243
};
230-
244+
console.log(props.prefixIconScout);
231245
return(
232246
<EditorContext.Consumer>
233247
{(editorState)=>(
@@ -271,14 +285,20 @@ let ButtonTmpComp = (function () {
271285
:submitForm(editorState,props.form)
272286
}
273287
>
274-
{props.prefixIcon&&(
288+
{props.sourceMode==='standard'&&props.prefixIcon&&(
275289
<IconWrapper
276290
$style={{ ...props.style,size:props.iconSize}}
277291
>
278292
{props.prefixIcon}
279293
</IconWrapper>
280294
)}
281-
295+
{props.sourceMode==='advanced'&&props.prefixIconScout&&(
296+
<IconScoutWrapper
297+
$style={{ ...props.style,size:props.iconSize}}
298+
>
299+
{props.prefixIconScout}
300+
</IconScoutWrapper>
301+
)}
282302
</Button100>
283303
</div>
284304
</Container>
@@ -292,7 +312,14 @@ let ButtonTmpComp = (function () {
292312
.setPropertyViewFn((children)=>(
293313
<>
294314
<Sectionname={sectionNames.basic}>
295-
{children.prefixIcon.propertyView({
315+
{children.sourceMode.propertyView({
316+
label:"",
317+
radioButton:true
318+
})}
319+
{children.sourceMode.getView()==='standard'&&children.prefixIcon.propertyView({
320+
label:trans("button.icon"),
321+
})}
322+
{children.sourceMode.getView()==='advanced'&&children.prefixIconScout.propertyView({
296323
label:trans("button.icon"),
297324
})}
298325
</Section>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import"comps/comps/layout/navLayout";
2-
import"comps/comps/layout/mobileTabLayout";
2+
//import "comps/comps/layout/mobileTabLayout";
33

44
import{CompAction,CompActionTypes}from"lowcoder-core";
55
import{EditorContext,EditorState}from"comps/editorState";

0 commit comments

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