diff --git a/src/widgets/base/Image.tsx b/src/widgets/base/Image.tsx index cc16602a..8270e8da 100644 --- 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 ; + } else { + return ( + + ); + } + } +}; + export const Image = (props: Props) => { const { ooui } = props; const { required, id } = ooui; - const Icon: React.ElementType = iconMapper(id) as any; - - if (Icon) { - return ; + if (iconMapper(id)) { + return ; } 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 ; - } - } - const triggerChange = (changedValue?: string) => { onChange?.(changedValue); }; @@ -83,11 +95,11 @@ export const ImageInput = (props: ImageInputProps) => { return ( <> - {value && isBase64(value) && ( - + {useMemo( + () => ( + + ), + [value, ooui], )} { }; export const ImageComponent = ({ value }: { value: string }): ReactElement => { - return useMemo( - () => ( - - ), - [value], - ); + return useMemo(() => , [value]); }; export const TagComponent = ({