@evergis/react 3.1.130 → 3.1.132

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

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

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

@@ -0,0 +1 @@
+export declare const useFetchImageWithAuth: (url: string | null) => string | null;

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,40 @@ 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 toObjectUrl = (res) => res.blob().then(blob => URL.createObjectURL(blob));
+const useFetchImageWithAuth = (url) => useFetchWithAuth(url, toObjectUrl, URL.revokeObjectURL);
+
 const DashboardContext = React.createContext({});
 const DashboardProvider = React.memo(({ children, ...props }) => {
     return jsxRuntime.jsx(DashboardContext.Provider, { value: props, children: children });
@@ -7771,10 +7805,10 @@ const PageTitleContainer = styled(uilibGl.Flex) `
 `;
 
 const DashboardDefaultHeader = React.memo(() => {
-    const { title } = useDashboardHeader();
+    const { title, pageId, image, icon, tooltip, themeName } = useDashboardHeader();
     const { toggleLayersVisibility, components: { ProjectPanelMenu, ProjectPagesMenu }, } = useWidgetContext();
-    const { pageId, image, icon, tooltip, themeName } = useDashboardHeader();
-    return (jsxRuntime.jsxs(DefaultHeaderContainer, { image: getResourceUrl(image), isDark: themeName === exports.ThemeName.Dark, children: [!pageId && jsxRuntime.jsx(uilibGl.LinearProgress, {}), jsxRuntime.jsxs(uilibGl.Flex, { column: true, gap: "1rem", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsxs(TopContainer, { children: [jsxRuntime.jsx(LogoContainer, { children: icon }), jsxRuntime.jsx(TopContainerButtons, { children: jsxRuntime.jsx(ProjectPanelMenu, {}) })] }) }), jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(uilibGl.Flex, { column: true, gap: "0.25rem", children: jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsxs(uilibGl.Flex, { alignItems: "center", children: [jsxRuntime.jsxs(PageTitleContainer, { children: [jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, content: tooltip, children: ref => (jsxRuntime.jsx(PageTitle, { ref: ref, onClick: toggleLayersVisibility, children: title })) }), jsxRuntime.jsx(ProjectPagesMenu, {})] }), jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(Pagination, {}) })] }) }) }) })] })] }));
+    const backgroundImage = useFetchImageWithAuth(image ? getResourceUrl(image) : null);
+    return (jsxRuntime.jsxs(DefaultHeaderContainer, { image: backgroundImage ?? undefined, isDark: themeName === exports.ThemeName.Dark, children: [!pageId && jsxRuntime.jsx(uilibGl.LinearProgress, {}), jsxRuntime.jsxs(uilibGl.Flex, { column: true, gap: "1rem", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsxs(TopContainer, { children: [jsxRuntime.jsx(LogoContainer, { children: icon }), jsxRuntime.jsx(TopContainerButtons, { children: jsxRuntime.jsx(ProjectPanelMenu, {}) })] }) }), jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(uilibGl.Flex, { column: true, gap: "0.25rem", children: jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsxs(uilibGl.Flex, { alignItems: "center", children: [jsxRuntime.jsxs(PageTitleContainer, { children: [jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, content: tooltip, children: ref => (jsxRuntime.jsx(PageTitle, { ref: ref, onClick: toggleLayersVisibility, children: title })) }), jsxRuntime.jsx(ProjectPagesMenu, {})] }), jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(Pagination, {}) })] }) }) }) })] })] }));
 });
 
 const HeaderFrontView = styled(uilibGl.Flex) `
@@ -8531,7 +8565,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 = useFetchImageWithAuth(firstImage);
+    if (!blobUrl)
+        return null;
+    return (jsxRuntime.jsx("img", { src: blobUrl, alt: firstImage ?? "", width: width, style: style }));
 });
 
 const ElementLegend = React.memo(({ type, element, elementConfig }) => {
@@ -11680,30 +11717,9 @@ const StyledSvg = styled(uilibGl.Flex) `
 `;
 
 const SvgImage = React.memo(({ url, width, height, fontColor }) => {
-    const [svg, setSvg] = React.useState(null);
-    const loadingRef = React.useRef(false);
-    const fetchSvg = 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 ? res.text() : null))
-            .then(setSvg)
-            .finally(() => {
-            loadingRef.current = false;
-        });
-    }, [url]);
-    React.useEffect(() => {
-        fetchSvg();
-    }, [fetchSvg]);
-    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 } }));
 });
@@ -12243,6 +12259,8 @@ exports.useDebouncedCallback = useDebouncedCallback;
 exports.useDiffPage = useDiffPage;
 exports.useExpandableContainers = useExpandableContainers;
 exports.useExportPdf = useExportPdf;
+exports.useFetchImageWithAuth = useFetchImageWithAuth;
+exports.useFetchWithAuth = useFetchWithAuth;
 exports.useGetConfigLayer = useGetConfigLayer;
 exports.useGlobalContext = useGlobalContext;
 exports.useHeaderRender = useHeaderRender;