integrate iconscout with jsonLottie comp

raheeliftikhar5 · raheeliftikhar5 · commit 84904dfb1df2 · 2025-02-20T16:15:47.000+05:00
diff --git a/client/packages/lowcoder/src/api/iconscoutApi.ts b/client/packages/lowcoder/src/api/iconscoutApi.ts
@@ -17,8 +17,8 @@ export type ResponseType = {
 };
 
 const apiUrl = "https://api.iconscout.com";
-const clientID = ""; //"91870410585071";
-const clientSecret = ""; // "GV5aCWpwdLWTxVXFBjMKSoyDPUyjzXLR";
+const clientID = "";
+const clientSecret = "";
 const currentPage = 1;
 const currentQuery = '';
 const currentData = [];
@@ -75,6 +75,11 @@ class IconscoutApi extends Api {
     });
     return response?.data.response.download;
   }
+
+  static async downloadJSON(url: string): Promise<any> {
+    const response = await axios.get(url)
+    return response?.data;
+  }
 }
 
 export default IconscoutApi;
diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -202,7 +202,7 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
             <AntImage
               src={
                 props.sourceMode === 'advanced'
-                ? (props.srcIconScout as ReactElement)?.props.value
+                ? props.srcIconScout?.value
                 : props.src.value
               }
               referrerPolicy="same-origin"
@@ -253,7 +253,7 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
           {children.sourceMode.getView() === 'standard' && children.src.propertyView({
             label: trans("image.src"),
           })}
-          {children.sourceMode.getView() === 'advanced' &&children.srcIconScout.propertyView({
+          {children.sourceMode.getView() === 'advanced' && children.srcIconScout.propertyView({
             label: trans("image.src"),
           })}
         </Section>
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
@@ -2,6 +2,7 @@ import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps
 import {
   ArrayOrJSONObjectControl,
   NumberControl,
+  StringControl,
 } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { BoolControl } from "comps/controls/boolControl";
@@ -19,6 +20,9 @@ import {
 import { defaultLottie } from "./jsonConstants";
 import { EditorContext } from "comps/editorState";
 import { IconScoutAssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl";
+import { isEmpty } from "lodash";
+import IconscoutApi from "@lowcoder-ee/api/iconscoutApi";
+import { changeValueAction, multiChangeAction } from "lowcoder-core";
 
 const Player = lazy(
   () => import('@lottiefiles/react-lottie-player')
@@ -98,7 +102,8 @@ let JsonLottieTmpComp = (function () {
       JSON.stringify(defaultLottie, null, 2)
     ),
     srcIconScout: IconscoutControl(IconScoutAssetType.LOTTIE),
-    valueIconScout: ArrayOrJSONObjectControl,
+    uuidIconScout: StringControl,
+    valueIconScout: withDefault(ArrayOrJSONObjectControl, JSON.stringify({})),
     speed: dropdownControl(speedOptions, "1"),
     width: withDefault(NumberControl, 100),
     height: withDefault(NumberControl, 100),
@@ -108,11 +113,38 @@ let JsonLottieTmpComp = (function () {
     loop: dropdownControl(loopOptions, "single"),
     keepLastFrame: BoolControl.DEFAULT_TRUE,
   };
-  return new UICompBuilder(childrenMap, (props) => {
-    console.log(props.srcIconScout);
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+
+    const downloadAsset = async (uuid: string) => {
+      try {
+        const result = await IconscoutApi.download(uuid, {
+          format: 'ai',
+        });
+        if (result && result.download_url) {
+          const json = await IconscoutApi.downloadJSON(result.download_url);
+          dispatch(
+            multiChangeAction({
+              uuidIconScout: changeValueAction(uuid, true),
+              valueIconScout: changeValueAction(JSON.stringify(json, null, 2), true)
+            })
+          ) 
+        }
+      } catch(error) {
+        console.error(error);
+      }
+
+    }
+    useEffect(() => {
+      if(props.srcIconScout?.uuid && props.srcIconScout?.uuid !== props.uuidIconScout) {
+        // get asset download link
+        downloadAsset(props.srcIconScout?.uuid);
+      }
+    }, [props.srcIconScout]);
+
     return (
       <div
         style={{
+          height: '100%',
           padding: `${props.container.margin}`,
           animation: props.animationStyle.animation,
           animationDelay: props.animationStyle.animationDelay,
@@ -139,7 +171,11 @@ let JsonLottieTmpComp = (function () {
             hover={props.animationStart === "on hover" && true}
             loop={props.loop === "single" ? false : true}
             speed={Number(props.speed)}
-            src={props.value}
+            src={
+              props.sourceMode === 'advanced'
+              ? (isEmpty(props.valueIconScout) ? '' : props.valueIconScout)
+              : props.value
+            }
             style={{
               height: "100%",
               width: "100%",
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -296,7 +296,7 @@ let ButtonTmpComp = (function () {
                       <IconScoutWrapper
                         $style={{ ...props.style, size: props.iconSize }}
                       >
-                        {props.prefixIconScout}
+                        <img src={props.prefixIconScout.value} />
                       </IconScoutWrapper>
                     )}
                   </Button100>
diff --git a/client/packages/lowcoder/src/comps/controls/iconscoutControl.tsx b/client/packages/lowcoder/src/comps/controls/iconscoutControl.tsx

Original file line number	Diff line number	Diff line change
`@@ -296,7 +296,7 @@ let ButtonTmpComp = (function () {`
`296`	`296`	`<IconScoutWrapper`
`297`	`297`	`$style={{ ...props.style, size: props.iconSize }}`
`298`	`298`	`>`
`299`		`- {props.prefixIconScout}`
	`299`	`+ <img src={props.prefixIconScout.value} />`
`300`	`300`	`</IconScoutWrapper>`
`301`	`301`	`)}`
`302`	`302`	`</Button100>`