From 28edbf696788d9c3c1b75d24ba278e8cfa68d24d Mon Sep 17 00:00:00 2001
From: Gisce <devel@gisce.net>
Date: Mon, 25 Nov 2024 11:01:56 +0100
Subject: [PATCH] feat: sync changes from v2 to v2-develop (#716) [skip ci]

Co-authored-by: mguellsegarra <5711443+mguellsegarra@users.noreply.github.com>
---
 package-lock.json          | 12 ++++----
 package.json               |  4 +--
 src/widgets/base/Image.tsx | 62 ++++++++++++++++++++++----------------
 3 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0419b7598..92a09a3e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,16 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "2.39.0",
+  "version": "2.40.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gisce/react-ooui",
-      "version": "2.39.0",
+      "version": "2.40.0",
       "dependencies": {
         "@ant-design/plots": "^1.0.9",
         "@gisce/fiber-diagram": "2.1.1",
-        "@gisce/ooui": "2.17.0",
+        "@gisce/ooui": "2.18.0",
         "@gisce/react-formiga-components": "1.8.0",
         "@gisce/react-formiga-table": "1.8.5",
         "@monaco-editor/react": "^4.4.5",
@@ -3370,9 +3370,9 @@
       }
     },
     "node_modules/@gisce/ooui": {
-      "version": "2.17.0",
-      "resolved": "https://registry.npmjs.org/@gisce/ooui/-/ooui-2.17.0.tgz",
-      "integrity": "sha512-b7A8OUDTSX/r6OgS6jah4obOEnIeTMwMZfxOtJNgAbcyRuUls4k63EhImbrjfGS9/3FvbP5vqOxXUL4/Ndrqjg==",
+      "version": "2.18.0",
+      "resolved": "https://registry.npmjs.org/@gisce/ooui/-/ooui-2.18.0.tgz",
+      "integrity": "sha512-f5bHBjruxJQ+Xb77RvQgp22TfeTz5HeL45MO4+Jl32UdWzCkAtzxSAwA/INPPaTCrvhE5N14HpS2PdCdBLqhBA==",
       "dependencies": {
         "@gisce/conscheck": "1.0.9",
         "html-entities": "^2.3.3",
diff --git a/package.json b/package.json
index 49d8be4d2..7c1dbc74b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "2.39.0",
+  "version": "2.40.0",
   "engines": {
     "node": "20.5.0"
   },
@@ -35,7 +35,7 @@
   "dependencies": {
     "@ant-design/plots": "^1.0.9",
     "@gisce/fiber-diagram": "2.1.1",
-    "@gisce/ooui": "2.17.0",
+    "@gisce/ooui": "2.18.0",
     "@gisce/react-formiga-components": "1.8.0",
     "@gisce/react-formiga-table": "1.8.5",
     "@monaco-editor/react": "^4.4.5",
diff --git a/src/widgets/base/Image.tsx b/src/widgets/base/Image.tsx
index f5b572b86..cc16602ac 100644
--- a/src/widgets/base/Image.tsx
+++ b/src/widgets/base/Image.tsx
@@ -12,6 +12,7 @@ import {
 import { toBase64, getMimeType } from "@/helpers/filesHelper";
 import iconMapper from "@/helpers/iconMapper";
 import { useLocale } from "@gisce/react-formiga-components";
+import isBase64 from "validator/lib/isBase64";
 
 type Props = {
   ooui: ImageOoui;
@@ -46,6 +47,13 @@ export const ImageInput = (props: ImageInputProps) => {
   const inputFile = useRef(null);
   const { t } = useLocale();
 
+  if (value) {
+    const Icon: React.ElementType = iconMapper(value) as any;
+    if (Icon) {
+      return <Icon height={50} />;
+    }
+  }
+
   const triggerChange = (changedValue?: string) => {
     onChange?.(changedValue);
   };
@@ -75,7 +83,7 @@ export const ImageInput = (props: ImageInputProps) => {
   return (
     <>
       <Row gutter={8} wrap={false} justify="center">
-        {value && (
+        {value && isBase64(value) && (
           <img
             src={`data:image/*;base64,${value}`}
             style={{ maxWidth: "100px" }}
@@ -90,31 +98,33 @@ export const ImageInput = (props: ImageInputProps) => {
           onChange={onChangeFile}
         />
       </Row>
-      <Row gutter={8} wrap={false} justify="center" className="pt-5">
-        <Space>
-          <ButtonWithTooltip
-            tooltip={t("uploadNewImage")}
-            icon={<FolderOpenOutlined />}
-            disabled={readOnly}
-            onClick={() => {
-              const fileUploadField = inputFile.current as any;
-              fileUploadField.click();
-            }}
-          />
-          <ButtonWithTooltip
-            tooltip={t("download")}
-            disabled={!value}
-            onClick={downloadFile}
-            icon={<DownloadOutlined />}
-          />
-          <ButtonWithTooltip
-            tooltip={t("clear")}
-            disabled={readOnly || !value}
-            onClick={clearFile}
-            icon={<ClearOutlined />}
-          />
-        </Space>
-      </Row>
+      {ooui.showControls && (
+        <Row gutter={8} wrap={false} justify="center" className="pt-5">
+          <Space>
+            <ButtonWithTooltip
+              tooltip={t("uploadNewImage")}
+              icon={<FolderOpenOutlined />}
+              disabled={readOnly}
+              onClick={() => {
+                const fileUploadField = inputFile.current as any;
+                fileUploadField.click();
+              }}
+            />
+            <ButtonWithTooltip
+              tooltip={t("download")}
+              disabled={!value}
+              onClick={downloadFile}
+              icon={<DownloadOutlined />}
+            />
+            <ButtonWithTooltip
+              tooltip={t("clear")}
+              disabled={readOnly || !value}
+              onClick={clearFile}
+              icon={<ClearOutlined />}
+            />
+          </Space>
+        </Row>
+      )}
     </>
   );
 };