@evergis/react 3.1.130 → 3.1.132

package/dist/react.esm.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { IconButton, Flex, transition, Chip, Icon, Description, FlexSpan, IconToggle, Popup, Menu, DraggableTree, shadows, Divider, LegendToggler, Tooltip as Tooltip$1, DropdownField, MultiSelectContainer, IconButtonButton, FlatButton, DraggableTreeContainer, Dialog, DialogTitle, ThemeProvider, darkTheme, DialogContent, CircularProgress, Switch, AutoComplete, Input, Slider, Dropdown, Checkbox, DatePicker, getLocale, LinearProgress, H2, defaultTheme, Preview, Blank, Popover, UploaderItemArea, UploaderTitleWrapper, Uploader, NumberRangeSlider, useAsyncAutocomplete, RangeNumberInput, dateFormat } from '@evergis/uilib-gl';
-import { useState, useMemo, useCallback, createContext, memo, useRef, useEffect, useContext, Fragment } from 'react';
+import { useState, useMemo, useCallback, useRef, useEffect, createContext, memo, useContext, Fragment } from 'react';
 import styled, { createGlobalStyle, css, useTheme } from 'styled-components';
 import { lineChartClassNames, BarChart as BarChart$1, barChartClassNames, LineChart, PieChart } from '@evergis/charts';
-import { AttributeType, generateId, STORAGE_TOKEN_KEY, GeometryType, RemoteTaskStatus } from '@evergis/api';
+import { AttributeType, STORAGE_TOKEN_KEY, generateId, GeometryType, RemoteTaskStatus } from '@evergis/api';
 import Gradient from 'javascript-color-gradient';
 import { Color as Color$1 } from '@evergis/color';
 import { isValid, format, parseJSON, parseISO, toDate } from 'date-fns';
@@ -3921,6 +3921,40 @@ const useAutoCompleteControl = (items) => {
     };
 };
 
+const useFetchWithAuth = (url, transform, cleanup) => {
+    const [data, setData] = useState(null);
+    const loadingRef = useRef(false);
+    const transformRef = useRef(transform);
+    const cleanupRef = useRef(cleanup);
+    transformRef.current = transform;
+    cleanupRef.current = cleanup;
+    const fetchData = useCallback(() => {
+        if (!url || loadingRef.current)
+            return;
+        loadingRef.current = true;
+        const token = window.localStorage.getItem(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]);
+    useEffect(() => {
+        fetchData();
+    }, [fetchData]);
+    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 = createContext({});
 const DashboardProvider = memo(({ children, ...props }) => {
     return jsx(DashboardContext.Provider, { value: props, children: children });
@@ -7769,10 +7803,10 @@ const PageTitleContainer = styled(Flex) `
 `;
 
 const DashboardDefaultHeader = 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 (jsxs(DefaultHeaderContainer, { image: getResourceUrl(image), isDark: themeName === ThemeName.Dark, children: [!pageId && jsx(LinearProgress, {}), jsxs(Flex, { column: true, gap: "1rem", children: [jsx(FlexSpan, { children: jsxs(TopContainer, { children: [jsx(LogoContainer, { children: icon }), jsx(TopContainerButtons, { children: jsx(ProjectPanelMenu, {}) })] }) }), jsx(FlexSpan, { children: jsx(Flex, { column: true, gap: "0.25rem", children: jsx(FlexSpan, { children: jsxs(Flex, { alignItems: "center", children: [jsxs(PageTitleContainer, { children: [jsx(Tooltip$1, { arrow: true, content: tooltip, children: ref => (jsx(PageTitle, { ref: ref, onClick: toggleLayersVisibility, children: title })) }), jsx(ProjectPagesMenu, {})] }), jsx(FlexSpan, { children: jsx(Pagination, {}) })] }) }) }) })] })] }));
+    const backgroundImage = useFetchImageWithAuth(image ? getResourceUrl(image) : null);
+    return (jsxs(DefaultHeaderContainer, { image: backgroundImage ?? undefined, isDark: themeName === ThemeName.Dark, children: [!pageId && jsx(LinearProgress, {}), jsxs(Flex, { column: true, gap: "1rem", children: [jsx(FlexSpan, { children: jsxs(TopContainer, { children: [jsx(LogoContainer, { children: icon }), jsx(TopContainerButtons, { children: jsx(ProjectPanelMenu, {}) })] }) }), jsx(FlexSpan, { children: jsx(Flex, { column: true, gap: "0.25rem", children: jsx(FlexSpan, { children: jsxs(Flex, { alignItems: "center", children: [jsxs(PageTitleContainer, { children: [jsx(Tooltip$1, { arrow: true, content: tooltip, children: ref => (jsx(PageTitle, { ref: ref, onClick: toggleLayersVisibility, children: title })) }), jsx(ProjectPagesMenu, {})] }), jsx(FlexSpan, { children: jsx(Pagination, {}) })] }) }) }) })] })] }));
 });
 
 const HeaderFrontView = styled(Flex) `
@@ -8529,7 +8563,10 @@ const ElementImage = memo(({ type, elementConfig }) => {
             return null;
         return getResourceUrl(imageUrl);
     }, [attributeName, attributes, value]);
-    return firstImage ? jsx("img", { src: firstImage, alt: firstImage, width: width, style: style }) : null;
+    const blobUrl = useFetchImageWithAuth(firstImage);
+    if (!blobUrl)
+        return null;
+    return (jsx("img", { src: blobUrl, alt: firstImage ?? "", width: width, style: style }));
 });
 
 const ElementLegend = memo(({ type, element, elementConfig }) => {
@@ -11678,30 +11715,9 @@ const StyledSvg = styled(Flex) `
 `;
 
 const SvgImage = memo(({ url, width, height, fontColor }) => {
-    const [svg, setSvg] = useState(null);
-    const loadingRef = useRef(false);
-    const fetchSvg = useCallback(() => {
-        if (!url || loadingRef.current)
-            return;
-        loadingRef.current = true;
-        const token = window.localStorage.getItem(STORAGE_TOKEN_KEY);
-        fetch(url, {
-            headers: token ? { Authorization: `Bearer ${token}` } : {},
-        })
-            .then(res => (res.ok ? res.text() : null))
-            .then(setSvg)
-            .finally(() => {
-            loadingRef.current = false;
-        });
-    }, [url]);
-    useEffect(() => {
-        fetchSvg();
-    }, [fetchSvg]);
-    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 (jsx(StyledSvg, { "$width": width, "$height": height, "$fontColor": fontColor, dangerouslySetInnerHTML: { __html: svg } }));
 });
@@ -11980,5 +11996,5 @@ const Map$1 = ({ zIndex, lowerSiblings, upperSiblings, onError, children, ...res
                 }, children: children }), upperSiblings] }));
 };
 
-export { AddFeatureButton, AddFeatureContainer, AlertIconContainer, AttributeGalleryContainer, AttributeLabel, BASE_CONTAINER_STYLE, BaseMapTheme, CONFIG_PAGES_ID, CONFIG_PAGE_ID, CameraContainer, Chart, ChartContainer, ChartLegend, ChartLoading, Container, ContainerChildren, ContainerLoading, ContainerTemplate, ContainerWrapper, ContainersGroupContainer, DEFAULT_ATTRIBUTE_NAME, DEFAULT_BARCHART_RADIUS, DEFAULT_BASE_MAP, DEFAULT_CHART_ANGLE, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_CIRCLE_PAINT, DEFAULT_DASHBOARD_CONFIG, DEFAULT_DATA_SOURCE_LIMIT, DEFAULT_DROPDOWN_WIDTH, DEFAULT_FILL_EXTRUSION_PAINT, DEFAULT_FILL_PAINT, DEFAULT_FILTER_PADDING, DEFAULT_ID_ATTRIBUTE_NAME, DEFAULT_LAT, DEFAULT_LINE_PAINT, DEFAULT_LNG, DEFAULT_PAGES_CONFIG, DEFAULT_PIECHART_RADIUS, DEFAULT_ZOOM, Dashboard, DashboardCheckbox, DashboardChip, DashboardContent, DashboardContext, DashboardDefaultHeader, DashboardHeader, DashboardLoading, DashboardPlaceholder, DashboardPlaceholderWrap, DashboardProvider, DashboardWrapper, DataSourceContainer, DataSourceError, DataSourceErrorContainer, DataSourceInnerContainer, DataSourceProgressContainer, DateFormat, DefaultAttributesContainer, DefaultHeaderContainer, DefaultHeaderWrapper, DividerContainer, EditGeometryType, ElementButton, ElementCamera, ElementChart, ElementChips, ElementControl, ElementIcon, ElementImage, ElementLegend, ElementLink, ElementMarkdown, ElementSlideshow, ElementSvg, ElementTooltip, ElementValueWrapper, ExpandableTitle, FEATURE_CARD_DEFAULT_COLORS, FEATURE_CARD_OTHER_COLOR, FILTERED_VALUE_OPACITY, FILTER_PREFIX, FeatureCardButtons, FeatureCardContext, FeatureCardDefaultHeader, FeatureCardGradientHeader, FeatureCardHeader, FeatureCardIconHeader, FeatureCardProvider, FeatureCardSlideshowHeader, FeatureCardTitle, FeatureControls, FeatureTitleContainer, FiltersContainer, GEOMETRY_ATTRIBUTE, GlobalContext, GlobalProvider, Header, HeaderContainer, HeaderFrontView, HeaderTemplate, HeaderTitleContainer, HiddenTitleItems, IconContainer, ImageContainer, LEFT_PANEL_HEADER_HEIGHT, Layer, LayerDescription, LayerGroup, LayerGroupList, LayerIcon, LayerIconContainer, LayerListContainer, LayerTree, LayersContainer, LayersListWrapper, LinearProgressContainer, LogTerminal, LogoContainer, MAX_CHART_WIDTH, Map$1 as Map, MapContext, MapProvider, NO_CONTENT_VALUE, NUMERIC_ATTRIBUTE_TYPES, NoLiveSnapshotContainer, OneColumnContainer, PageNavigator, PageTitle, PageTitleContainer, PagesContainer, Pagination, PresentationHeader, PresentationHeaderButtons, PresentationHeaderTools, PresentationPanelContainer, PresentationPanelWrapper, PresentationWrapper, ProgressContainer, RoundedBackgroundContainer, SERVER_NOTIFICATION_EVENT, ScalingFactor, ServerNotificationsContext, ServerNotificationsProvider, SlideshowContainer, SmallPreviewContainer$1 as SmallPreviewContainer, SmallPreviewControl, SmallPreviewCounter, SmallPreviewImages, SmallPreviewLeft, SmallPreviewRight, StackBar, SvgImage, TIME_ZONE_FORMAT, TabsContainer, TextTrim, ThemeName, TitleContainer, TmsType, TopContainer, TopContainerButtons, TwoColumnContainer, UploadContainer, WidgetType, addDataSource, addDataSources, adjustColor, applyFiltersToCondition, applyQueryFilters, applyVarsToCondition, checkEqualOrIncludes, checkIsLoading, convertSpToTurfFeature, createConfigLayer, createConfigPage, createNewPageId, createTreeNode, dateOptions, debounce, decimalOpacityToHex, eqlParametersToPayload, findAttributeInExpression, formatArea, formatAttributeValue, formatChartRelatedValue, formatConditionValue, formatDataSourceCondition, formatDate$1 as formatDate, formatElementValue, formatLength, formatNumber, formatPolygonMeasure, getActualExtrusionHeight, getAttributeByName, getAttributeValue, getAttributesConfiguration, getChartAxes, getChartFilterName, getChartMarkers, getConfigFilter, getContainerComponent, getDashboardHeader, getDataFromAttributes, getDataFromRelatedFeatures, getDataSource, getDataSourceFilterValue, getDate, getDefaultConfig, getElementValue, getFeatureAttributes, getFeatureCardHeader, getFilterComponent, getFilterSelectedItems, getFilterValue, getFormattedAttributes, getGradientColors, getLayerDefinition, getLayerInfo, getLayerInfoFromDataSources, getPagesFromConfig, getPagesFromProjectInfo, getProxyService, getRelatedAttribute, getRenderElement, getResourceUrl, getRootElementId, getSelectedFilterValue, getSlideshowImages, getSvgUrl, getTemplateNameFromAttribute, getTotalFromAttributes, getTotalFromRelatedFeatures, hexToRgba, isCompositeLayerConfiguration, isEmptyElementValue, isEmptyValue, isHiddenEmptyValue, isLayerService, isNotValidSelectedTab, isNumeric, isObject, isProxyService, isVisibleContainer, numberOptions, parseClientStyle, parseIconNames, parseIconNamesFromClientStyle, pieChartTooltipFromAttributes, pieChartTooltipFromRelatedFeatures, pointOptions, removeDataSource, rgbToHex, roundTotalSum, sliceShownOtherItems, timeOptions, tooltipNameFromAttributes, tooltipValueFromAttributes, tooltipValueFromRelatedFeatures, transparentizeColor, treeNodesToProjectItems, useAppHeight, useAutoCompleteControl, useChartChange, useChartData, useDashboardHeader, useDataSources, useDebouncedCallback, useDiffPage, useExpandableContainers, useExportPdf, useGetConfigLayer, useGlobalContext, useHeaderRender, useHideIfEmptyDataSource, useIconsFromLayers, useLayerParams, useMapContext, useMapDraw, useMapImages, useProjectDashboardInit, usePythonTask, useRedrawLayer, useRelatedDataSourceAttributes, useRenderElement, useServerNotificationsContext, useShownOtherItems, useToggle, useUpdateDataSource, useWidgetConfig, useWidgetContext, useWidgetFilters, useWidgetPage, useWindowResize, useZoomToFeatures, useZoomToPoint };
+export { AddFeatureButton, AddFeatureContainer, AlertIconContainer, AttributeGalleryContainer, AttributeLabel, BASE_CONTAINER_STYLE, BaseMapTheme, CONFIG_PAGES_ID, CONFIG_PAGE_ID, CameraContainer, Chart, ChartContainer, ChartLegend, ChartLoading, Container, ContainerChildren, ContainerLoading, ContainerTemplate, ContainerWrapper, ContainersGroupContainer, DEFAULT_ATTRIBUTE_NAME, DEFAULT_BARCHART_RADIUS, DEFAULT_BASE_MAP, DEFAULT_CHART_ANGLE, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_CIRCLE_PAINT, DEFAULT_DASHBOARD_CONFIG, DEFAULT_DATA_SOURCE_LIMIT, DEFAULT_DROPDOWN_WIDTH, DEFAULT_FILL_EXTRUSION_PAINT, DEFAULT_FILL_PAINT, DEFAULT_FILTER_PADDING, DEFAULT_ID_ATTRIBUTE_NAME, DEFAULT_LAT, DEFAULT_LINE_PAINT, DEFAULT_LNG, DEFAULT_PAGES_CONFIG, DEFAULT_PIECHART_RADIUS, DEFAULT_ZOOM, Dashboard, DashboardCheckbox, DashboardChip, DashboardContent, DashboardContext, DashboardDefaultHeader, DashboardHeader, DashboardLoading, DashboardPlaceholder, DashboardPlaceholderWrap, DashboardProvider, DashboardWrapper, DataSourceContainer, DataSourceError, DataSourceErrorContainer, DataSourceInnerContainer, DataSourceProgressContainer, DateFormat, DefaultAttributesContainer, DefaultHeaderContainer, DefaultHeaderWrapper, DividerContainer, EditGeometryType, ElementButton, ElementCamera, ElementChart, ElementChips, ElementControl, ElementIcon, ElementImage, ElementLegend, ElementLink, ElementMarkdown, ElementSlideshow, ElementSvg, ElementTooltip, ElementValueWrapper, ExpandableTitle, FEATURE_CARD_DEFAULT_COLORS, FEATURE_CARD_OTHER_COLOR, FILTERED_VALUE_OPACITY, FILTER_PREFIX, FeatureCardButtons, FeatureCardContext, FeatureCardDefaultHeader, FeatureCardGradientHeader, FeatureCardHeader, FeatureCardIconHeader, FeatureCardProvider, FeatureCardSlideshowHeader, FeatureCardTitle, FeatureControls, FeatureTitleContainer, FiltersContainer, GEOMETRY_ATTRIBUTE, GlobalContext, GlobalProvider, Header, HeaderContainer, HeaderFrontView, HeaderTemplate, HeaderTitleContainer, HiddenTitleItems, IconContainer, ImageContainer, LEFT_PANEL_HEADER_HEIGHT, Layer, LayerDescription, LayerGroup, LayerGroupList, LayerIcon, LayerIconContainer, LayerListContainer, LayerTree, LayersContainer, LayersListWrapper, LinearProgressContainer, LogTerminal, LogoContainer, MAX_CHART_WIDTH, Map$1 as Map, MapContext, MapProvider, NO_CONTENT_VALUE, NUMERIC_ATTRIBUTE_TYPES, NoLiveSnapshotContainer, OneColumnContainer, PageNavigator, PageTitle, PageTitleContainer, PagesContainer, Pagination, PresentationHeader, PresentationHeaderButtons, PresentationHeaderTools, PresentationPanelContainer, PresentationPanelWrapper, PresentationWrapper, ProgressContainer, RoundedBackgroundContainer, SERVER_NOTIFICATION_EVENT, ScalingFactor, ServerNotificationsContext, ServerNotificationsProvider, SlideshowContainer, SmallPreviewContainer$1 as SmallPreviewContainer, SmallPreviewControl, SmallPreviewCounter, SmallPreviewImages, SmallPreviewLeft, SmallPreviewRight, StackBar, SvgImage, TIME_ZONE_FORMAT, TabsContainer, TextTrim, ThemeName, TitleContainer, TmsType, TopContainer, TopContainerButtons, TwoColumnContainer, UploadContainer, WidgetType, addDataSource, addDataSources, adjustColor, applyFiltersToCondition, applyQueryFilters, applyVarsToCondition, checkEqualOrIncludes, checkIsLoading, convertSpToTurfFeature, createConfigLayer, createConfigPage, createNewPageId, createTreeNode, dateOptions, debounce, decimalOpacityToHex, eqlParametersToPayload, findAttributeInExpression, formatArea, formatAttributeValue, formatChartRelatedValue, formatConditionValue, formatDataSourceCondition, formatDate$1 as formatDate, formatElementValue, formatLength, formatNumber, formatPolygonMeasure, getActualExtrusionHeight, getAttributeByName, getAttributeValue, getAttributesConfiguration, getChartAxes, getChartFilterName, getChartMarkers, getConfigFilter, getContainerComponent, getDashboardHeader, getDataFromAttributes, getDataFromRelatedFeatures, getDataSource, getDataSourceFilterValue, getDate, getDefaultConfig, getElementValue, getFeatureAttributes, getFeatureCardHeader, getFilterComponent, getFilterSelectedItems, getFilterValue, getFormattedAttributes, getGradientColors, getLayerDefinition, getLayerInfo, getLayerInfoFromDataSources, getPagesFromConfig, getPagesFromProjectInfo, getProxyService, getRelatedAttribute, getRenderElement, getResourceUrl, getRootElementId, getSelectedFilterValue, getSlideshowImages, getSvgUrl, getTemplateNameFromAttribute, getTotalFromAttributes, getTotalFromRelatedFeatures, hexToRgba, isCompositeLayerConfiguration, isEmptyElementValue, isEmptyValue, isHiddenEmptyValue, isLayerService, isNotValidSelectedTab, isNumeric, isObject, isProxyService, isVisibleContainer, numberOptions, parseClientStyle, parseIconNames, parseIconNamesFromClientStyle, pieChartTooltipFromAttributes, pieChartTooltipFromRelatedFeatures, pointOptions, removeDataSource, rgbToHex, roundTotalSum, sliceShownOtherItems, timeOptions, tooltipNameFromAttributes, tooltipValueFromAttributes, tooltipValueFromRelatedFeatures, transparentizeColor, treeNodesToProjectItems, useAppHeight, useAutoCompleteControl, useChartChange, useChartData, useDashboardHeader, useDataSources, useDebouncedCallback, useDiffPage, useExpandableContainers, useExportPdf, useFetchImageWithAuth, useFetchWithAuth, useGetConfigLayer, useGlobalContext, useHeaderRender, useHideIfEmptyDataSource, useIconsFromLayers, useLayerParams, useMapContext, useMapDraw, useMapImages, useProjectDashboardInit, usePythonTask, useRedrawLayer, useRelatedDataSourceAttributes, useRenderElement, useServerNotificationsContext, useShownOtherItems, useToggle, useUpdateDataSource, useWidgetConfig, useWidgetContext, useWidgetFilters, useWidgetPage, useWindowResize, useZoomToFeatures, useZoomToPoint };
 //# sourceMappingURL=react.esm.js.map