@evergis/react 3.1.129 → 3.1.131

package/dist/components/Dashboard/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './useAutoCompleteControl';
+export * from './useFetchWithAuth';
 export * from './useChartChange';
 export * from './useChartData';
 export * from './useDashboardHeader';

package/dist/components/Dashboard/hooks/useFetchWithAuth.d.ts

@@ -0,0 +1 @@
+export declare const useFetchWithAuth: <T>(url: string | null, transform: (res: Response) => Promise<T | null>, cleanup?: (value: T) => void) => T | null;

package/dist/index.js

@@ -3923,6 +3923,37 @@ const useAutoCompleteControl = (items) => {
     };
 };
 
+const useFetchWithAuth = (url, transform, cleanup) => {
+    const [data, setData] = React.useState(null);
+    const loadingRef = React.useRef(false);
+    const transformRef = React.useRef(transform);
+    const cleanupRef = React.useRef(cleanup);
+    transformRef.current = transform;
+    cleanupRef.current = cleanup;
+    const fetchData = React.useCallback(() => {
+        if (!url || loadingRef.current)
+            return;
+        loadingRef.current = true;
+        const token = window.localStorage.getItem(api.STORAGE_TOKEN_KEY);
+        fetch(url, {
+            headers: token ? { Authorization: `Bearer ${token}` } : {},
+        })
+            .then(res => (res.ok ? transformRef.current(res) : null))
+            .then(setData)
+            .finally(() => {
+            loadingRef.current = false;
+        });
+    }, [url]);
+    React.useEffect(() => {
+        fetchData();
+    }, [fetchData]);
+    React.useEffect(() => () => {
+        if (data !== null)
+            cleanupRef.current?.(data);
+    }, [data]);
+    return data;
+};
+
 const DashboardContext = React.createContext({});
 const DashboardProvider = React.memo(({ children, ...props }) => {
     return jsxRuntime.jsx(DashboardContext.Provider, { value: props, children: children });
@@ -8514,6 +8545,7 @@ const ElementIcon = React.memo(({ type, elementConfig }) => {
     return jsxRuntime.jsx(StyledIcon, { kind: iconValue, fontSize: fontSize, fontColor: fontColor, style: style });
 });
 
+const toObjectUrl = (res) => res.blob().then(blob => URL.createObjectURL(blob));
 const ElementImage = React.memo(({ type, elementConfig }) => {
     const { attributes } = useWidgetContext(type);
     const { value, attributeName, options, style } = elementConfig || {};
@@ -8531,7 +8563,10 @@ const ElementImage = React.memo(({ type, elementConfig }) => {
             return null;
         return getResourceUrl(imageUrl);
     }, [attributeName, attributes, value]);
-    return firstImage ? jsxRuntime.jsx("img", { src: firstImage, alt: firstImage, width: width, style: style }) : null;
+    const blobUrl = useFetchWithAuth(firstImage, toObjectUrl, URL.revokeObjectURL);
+    if (!blobUrl)
+        return null;
+    return (jsxRuntime.jsx("img", { src: blobUrl, alt: firstImage ?? "", width: width, style: style }));
 });
 
 const ElementLegend = React.memo(({ type, element, elementConfig }) => {
@@ -11680,25 +11715,9 @@ const StyledSvg = styled(uilibGl.Flex) `
 `;
 
 const SvgImage = React.memo(({ url, width, height, fontColor }) => {
-    const [svg, setSvg] = React.useState(null);
-    const [loading, setLoading] = React.useState(false);
-    React.useEffect(() => {
-        if (!url || loading) {
-            return;
-        }
-        setLoading(true);
-        fetch(url)
-            .then(res => (res.ok ? res.text() : null))
-            .then(setSvg)
-            .finally(() => {
-            setLoading(false);
-        });
-    }, [url]);
-    React.useEffect(() => () => {
-        setSvg(null);
-    }, []);
+    const svg = useFetchWithAuth(url, res => res.text());
     const regexp = /<\/svg>\s*$/im;
-    if (!regexp.test(svg))
+    if (!svg || !regexp.test(svg))
         return null;
     return (jsxRuntime.jsx(StyledSvg, { "$width": width, "$height": height, "$fontColor": fontColor, dangerouslySetInnerHTML: { __html: svg } }));
 });
@@ -12238,6 +12257,7 @@ exports.useDebouncedCallback = useDebouncedCallback;
 exports.useDiffPage = useDiffPage;
 exports.useExpandableContainers = useExpandableContainers;
 exports.useExportPdf = useExportPdf;
+exports.useFetchWithAuth = useFetchWithAuth;
 exports.useGetConfigLayer = useGetConfigLayer;
 exports.useGlobalContext = useGlobalContext;
 exports.useHeaderRender = useHeaderRender;