Skip to content

Commit 0639f1b

Browse files
raheeliftikhar5raheeliftikhar5
committed
integrate iconscout in icon button and image comp
1 parent d302efe commit 0639f1b

File tree

5 files changed

+766
-8
lines changed

5 files changed

+766
-8
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: 22 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";
@@ -35,6 +35,8 @@ import { useContext } from "react";
3535
import { EditorContext } from "comps/editorState";
3636
import { StringControl } from "../controls/codeControl";
3737
import { PositionControl } from "comps/controls/dropdownControl";
38+
import { dropdownControl } from "../controls/dropdownControl";
39+
import { IconScoutAssetType, IconscoutControl } from "../controls/iconscoutControl";
3840

3941
const Container = styled.div<{
4042
$style: ImageStyleType | undefined,
@@ -111,6 +113,10 @@ const getStyle = (style: ImageStyleType) => {
111113
};
112114

113115
const EventOptions = [clickEvent] as const;
116+
const ModeOptions = [
117+
{ label: "URL", value: "standard" },
118+
{ label: "Advanced", value: "advanced" },
119+
] as const;
114120

115121
const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
116122
const imgRef = useRef<HTMLDivElement>(null);
@@ -194,7 +200,11 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
194200
}
195201
>
196202
<AntImage
197-
src={props.src.value}
203+
src={
204+
props.sourceMode === 'advanced'
205+
? (props.srcIconScout as ReactElement)?.props.value
206+
: props.src.value
207+
}
198208
referrerPolicy="same-origin"
199209
draggable={false}
200210
preview={props.supportPreview ? {src: props.previewSrc || props.src.value } : false}
@@ -210,7 +220,9 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
210220
};
211221

212222
const childrenMap = {
223+
sourceMode: dropdownControl(ModeOptions, "standard"),
213224
src: withDefault(StringStateControl, "https://temp.im/350x400"),
225+
srcIconScout: IconscoutControl(IconScoutAssetType.ILLUSTRATION),
214226
onEvent: eventHandlerControl(EventOptions),
215227
style: styleControl(ImageStyle , 'style'),
216228
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
@@ -234,7 +246,14 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
234246
return (
235247
<>
236248
<Section name={sectionNames.basic}>
237-
{children.src.propertyView({
249+
{ children.sourceMode.propertyView({
250+
label: "",
251+
radioButton: true
252+
})}
253+
{children.sourceMode.getView() === 'standard' && children.src.propertyView({
254+
label: trans("image.src"),
255+
})}
256+
{children.sourceMode.getView() === 'advanced' &&children.srcIconScout.propertyView({
238257
label: trans("image.src"),
239258
})}
240259
</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 & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { useEffect, useRef, useState } from "react";
3939
import ReactResizeDetector from "react-resize-detector";
4040

4141
import { useContext } from "react";
42+
import { IconScoutAssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl";
4243

4344
const Container = styled.div<{ $style: any }>`
4445
height: 100%;
@@ -74,6 +75,13 @@ const IconWrapper = styled.div<{ $style: any }>`
7475
${(props) => props.$style && getStyleIcon(props.$style)}
7576
`;
7677

78+
const IconScoutWrapper = styled.div<{ $style: any }>`
79+
display: flex;
80+
height: 100%;
81+
82+
${(props) => props.$style && getStyleIcon(props.$style)}
83+
`;
84+
7785
function getStyleIcon(style: any) {
7886
return css`
7987
svg {
@@ -163,6 +171,11 @@ const typeOptions = [
163171
},
164172
] as const;
165173

174+
const ModeOptions = [
175+
{ label: "Standard", value: "standard" },
176+
{ label: "Advanced", value: "advanced" },
177+
] as const;
178+
166179
function isDefault(type?: string) {
167180
return !type;
168181
}
@@ -183,7 +196,9 @@ const childrenMap = {
183196
disabled: BoolCodeControl,
184197
loading: BoolCodeControl,
185198
form: SelectFormControl,
199+
sourceMode: dropdownControl(ModeOptions, "standard"),
186200
prefixIcon: IconControl,
201+
prefixIconScout: IconscoutControl(IconScoutAssetType.ICON),
187202
style: ButtonStyleControl,
188203
viewRef: RefControl<HTMLElement>,
189204
restrictPaddingOnRotation:withDefault(StringControl, 'controlButton')
@@ -226,7 +241,7 @@ let ButtonTmpComp = (function () {
226241

227242
setStyle(container?.clientHeight + "px", container?.clientWidth + "px");
228243
};
229-
244+
console.log(props.prefixIconScout);
230245
return (
231246
<EditorContext.Consumer>
232247
{(editorState) => (
@@ -270,14 +285,20 @@ let ButtonTmpComp = (function () {
270285
: submitForm(editorState, props.form)
271286
}
272287
>
273-
{props.prefixIcon && (
288+
{props.sourceMode === 'standard' && props.prefixIcon && (
274289
<IconWrapper
275290
$style={{ ...props.style, size: props.iconSize }}
276291
>
277292
{props.prefixIcon}
278293
</IconWrapper>
279294
)}
280-
295+
{props.sourceMode === 'advanced' && props.prefixIconScout && (
296+
<IconScoutWrapper
297+
$style={{ ...props.style, size: props.iconSize }}
298+
>
299+
{props.prefixIconScout}
300+
</IconScoutWrapper>
301+
)}
281302
</Button100>
282303
</div>
283304
</Container>
@@ -291,7 +312,14 @@ let ButtonTmpComp = (function () {
291312
.setPropertyViewFn((children) => (
292313
<>
293314
<Section name={sectionNames.basic}>
294-
{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({
295323
label: trans("button.icon"),
296324
})}
297325
</Section>

0 commit comments

Comments
 (0)