Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 5e249b2

Browse files
raheeliftikhar5raheeliftikhar5
committed
integrate iconscout in icon button and image comp
1 parent e57b10f commit 5e249b2

File tree

6 files changed

+768
-10
lines changed

6 files changed

+768
-10
lines changed

‎client/packages/lowcoder/src/api/iconscoutApi.ts

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import Api from "api/api";
2+
import axios, { AxiosInstance, AxiosPromise, AxiosRequestConfig } from "axios";
3+
import { GenericApiResponse } from "./apiResponses";
4+
5+
export interface SearchParams {
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+
export type ResponseType = {
16+
response: any;
17+
};
18+
19+
const apiUrl = "https://api.iconscout.com";
20+
const clientID = ""; //"91870410585071";
21+
const clientSecret = ""; // "GV5aCWpwdLWTxVXFBjMKSoyDPUyjzXLR";
22+
const currentPage = 1;
23+
const currentQuery = '';
24+
const currentData = [];
25+
26+
let axiosIns: AxiosInstance | null = null;
27+
28+
const getAxiosInstance = (clientSecret?: string) => {
29+
if (axiosIns && !clientSecret) {
30+
return axiosIns;
31+
}
32+
33+
const headers: Record<string, string> = {
34+
"Content-Type": "application/json",
35+
"Client-ID": clientID,
36+
}
37+
if (clientSecret) {
38+
headers['Client-Secret'] = clientSecret;
39+
}
40+
const apiRequestConfig: AxiosRequestConfig = {
41+
baseURL: `${apiUrl}`,
42+
headers,
43+
withCredentials: true,
44+
};
45+
46+
axiosIns = axios.create(apiRequestConfig);
47+
return axiosIns;
48+
}
49+
50+
class IconscoutApi extends Api {
51+
static async search(params: SearchParams): Promise<any> {
52+
let response;
53+
try {
54+
response = await getAxiosInstance().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+
return response?.data.response.items;
67+
}
68+
69+
static async download(uuid: string, params: Record<string, string>): Promise<any> {
70+
const response = await getAxiosInstance(clientSecret).request({
71+
url: `/v3/items/${uuid}/api-download`,
72+
method: "POST",
73+
withCredentials: false,
74+
params,
75+
});
76+
return response?.data.response.download;
77+
}
78+
}
79+
80+
export default IconscoutApi;

‎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
import ReactResizeDetector from "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
const Container = styled.div<{ $style: ImageStyleType | undefined,$animationStyle:AnimationStyleType }>`
3941
height: 100%;
@@ -75,6 +77,10 @@ const getStyle = (style: ImageStyleType) => {
7577
};
7678

7779
const EventOptions = [clickEvent] as const;
80+
const ModeOptions = [
81+
{ label: "URL", value: "standard" },
82+
{ label: "Advanced", value: "advanced" },
83+
] as const;
7884

7985
const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
8086
const imgRef = 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.srcIconScout as ReactElement)?.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
const childrenMap = {
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
<Section name={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
const Player = lazy(
2324
() => import('@lottiefiles/react-lottie-player')
@@ -84,12 +85,20 @@ const speedOptions = [
8485
},
8586
] as const;
8687

88+
const ModeOptions = [
89+
{ label: "Data", value: "standard" },
90+
{ label: "Advanced", value: "advanced" },
91+
] as const;
92+
8793
let JsonLottieTmpComp = (function () {
8894
const childrenMap = {
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
return new UICompBuilder(childrenMap, (props) => {
112+
console.log(props.srcIconScout);
103113
return (
104114
<div
105115
style={{
@@ -145,7 +155,17 @@ let JsonLottieTmpComp = (function () {
145155
return (
146156
<>
147157
<Section name={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
import ReactResizeDetector from "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
const Container = 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+
const IconScoutWrapper = styled.div<{ $style: any }>`
79+
display: flex;
80+
height: 100%;
81+
82+
${(props) => props.$style && getStyleIcon(props.$style)}
83+
`;
84+
7885
function getStyleIcon(style: any) {
7986
return css`
8087
svg {
@@ -164,6 +171,11 @@ const typeOptions = [
164171
},
165172
] as const;
166173

174+
const ModeOptions = [
175+
{ label: "Standard", value: "standard" },
176+
{ label: "Advanced", value: "advanced" },
177+
] as const;
178+
167179
function isDefault(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
<Section name={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)