feat(image): allow to use icons in trees

gisce · Nov 25, 2024 · 0fc70ab · 0fc70ab
1 parent 3d9985d
commit 0fc70ab
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 27 deletions.
diff --git a/src/widgets/base/Image.tsx b/src/widgets/base/Image.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useRef } from "react";
+import React, { useRef, useMemo } from "react";
 import { Row, Space } from "antd";
 import Field from "@/common/Field";
 import { Image as ImageOoui } from "@gisce/ooui";
@@ -12,20 +12,39 @@ 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;
 };
 
+export const ImageRender = ({
+  ooui,
+  value,
+}: {
+  ooui: ImageOoui;
+  value?: string;
+}) => {
+  if (value) {
+    const Icon: React.ElementType = iconMapper(value) as any;
+    if (Icon) {
+      return <Icon />;
+    } else {
+      return (
+        <img
+          src={`data:image/*;base64,${value}`}
+          style={{ maxWidth: "100px" }}
+        />
+      );
+    }
+  }
+};
+
 export const Image = (props: Props) => {
   const { ooui } = props;
   const { required, id } = ooui;
 
-  const Icon: React.ElementType = iconMapper(id) as any;
-
-  if (Icon) {
-    return <Icon />;
+  if (iconMapper(id)) {
+    return <ImageRender ooui={ooui} value={id} />;
   }
 
   return (
@@ -47,13 +66,6 @@ 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);
   };
@@ -83,11 +95,11 @@ export const ImageInput = (props: ImageInputProps) => {
   return (
     <>
       <Row gutter={8} wrap={false} justify="center">
-        {value && isBase64(value) && (
-          <img
-            src={`data:image/*;base64,${value}`}
-            style={{ maxWidth: "100px" }}
-          />
+        {useMemo(
+          () => (
+            <ImageRender ooui={ooui} value={value} />
+          ),
+          [value, ooui],
         )}
         <input
           type="file"

diff --git a/src/widgets/views/Tree/treeComponents.tsx b/src/widgets/views/Tree/treeComponents.tsx
@@ -13,6 +13,7 @@ import { DatePickerConfig } from "@/common/DatePicker";
 import ConnectionProvider from "@/ConnectionProvider";
 import { colorFromString } from "@/helpers/formHelper";
 import { EmailTagsRender } from "@/widgets/custom/EmailTags";
+import { ImageRender } from "@/widgets/base/Image";
 
 export const BooleanComponent = ({
   value,
@@ -113,15 +114,7 @@ export const NumberComponent = ({ value }: { value: number }): ReactElement => {
 };
 
 export const ImageComponent = ({ value }: { value: string }): ReactElement => {
-  return useMemo(
-    () => (
-      <img
-        src={`data:image/*;base64,${value}`}
-        style={{ maxWidth: "50px", padding: "5px" }}
-      />
-    ),
-    [value],
-  );
+  return useMemo(() => <ImageRender value={value} />, [value]);
 };
 
 export const TagComponent = ({