feat: sync changes from v2 to v2-develop (#716) [skip ci]

Co-authored-by: mguellsegarra <5711443+mguellsegarra@users.noreply.github.com>
gisce · Nov 25, 2024 · 28edbf6 · 28edbf6
1 parent 7d5a2e7
commit 28edbf6
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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>
+      )}
     </>
   );
 };