feat: sync changes from v2 to alpha (#734) [skip ci]

Co-authored-by: mguellsegarra <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "2.41.0",
+  "version": "2.44.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.19.0",
+    "@gisce/ooui": "2.20.0",
     "@gisce/react-formiga-components": "1.8.0",
     "@gisce/react-formiga-table": "1.9.0-alpha.8",
     "@monaco-editor/react": "^4.4.5",

src/index.ts

@@ -51,6 +51,7 @@ import { HTMLPreview } from "@/widgets/custom/HTMLPreview";
 import { Alert } from "@/widgets/custom/Alert";
 import { DashboardGrid } from "@/widgets/views/DashboardGrid";
 import { GraphIndicator } from "@/widgets/views/Graph/GraphIndicator";
+import { Spinner } from "@/widgets/custom/Spinner";
 
 import type {
   TreeView,
@@ -177,4 +178,5 @@ export {
   HTMLPreview,
   Alert,
   dayjs,
+  Spinner,
 };

src/widgets/WidgetFactory.tsx

@@ -35,6 +35,7 @@ import {
   CommentsTimelineField,
   HTMLPreview,
   Alert,
+  Spinner,
 } from "@/index";
 import { Image } from "./base/Image";
 import { FiberGrid } from "./custom/FiberGrid";
@@ -130,6 +131,8 @@ const getWidgetType = (type: string) => {
       return HTMLPreview;
     case "alert":
       return Alert;
+    case "spinner":
+      return Spinner;
     default:
       return undefined;
   }

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 = {
+type ImageProps = {
   ooui: ImageOoui;
 };
 
-export const Image = (props: Props) => {
+type ImageRenderProps = {
+  value?: string;
+  style?: any;
+};
+
+export const ImageRender = (props: ImageRenderProps) => {
+  const { value, style = {} } = props;
+  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" }, ...style }}
+        />
+      );
+    }
+  }
+};
+
+export const Image = (props: ImageProps) => {
   const { ooui } = props;
   const { required, id } = ooui;
 
-  const Icon: React.ElementType = iconMapper(id) as any;
-
-  if (Icon) {
-    return <Icon />;
+  if (iconMapper(id)) {
+    return <ImageRender 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 value={value} />
+          ),
+          [value, ooui],
         )}
         <input
           type="file"

src/widgets/custom/Spinner.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { WidgetProps } from "@/types";
+import { Spinner as SpinnerOoui } from "@gisce/ooui";
+import { Spin } from "antd";
+import Container from "@/widgets/containers/Container";
+
+type SpinnerProps = WidgetProps & {
+  ooui: SpinnerOoui;
+};
+
+export const Spinner = (props: SpinnerProps) => {
+  const { ooui } = props;
+
+  return (
+    <Spin tip={ooui.label} size="large" spinning={ooui.loading}>
+      <Container container={ooui.container} responsiveBehaviour={false} />
+    </Spin>
+  );
+};

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,
@@ -114,12 +115,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" }}
-      />
-    ),
+    () => <ImageRender value={value} style={{ maxHeight: "30px" }} />,
     [value],
   );
 };