@evergis/react 4.0.54 → 4.0.55

package/dist/components/Dashboard/containers/AttachmentContainer/usePreviewImages.d.ts

@@ -0,0 +1,8 @@
+import { IPreviewImage } from '@evergis/uilib-gl';
+import { Attachment } from './types';
+interface UsePreviewImagesParams {
+    items: Attachment[];
+    active: boolean;
+}
+export declare const usePreviewImages: ({ items, active }: UsePreviewImagesParams) => IPreviewImage[];
+export {};

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

@@ -1,7 +1,7 @@
 import { ConfigContainerChild, EditAttributeValue, WidgetType } from '../types';
 export declare const useEditControl: (type: WidgetType, elementConfig: ConfigContainerChild) => {
     control: import('../types').ConfigControl;
-    value: Date | import('../../..').FeaturedDcExtendedGeometry | import('../../..').JSONAttributeValue[] | EditAttributeValue;
+    value: Date | import('../../..').FeaturedDcExtendedGeometry | EditAttributeValue;
     dataSource: import('../types').WidgetDataSource;
     items: any[];
     onChange: (newValue: EditAttributeValue) => void;

package/dist/components/Dashboard/types.d.ts

@@ -44,7 +44,7 @@ export interface BaseMapSettings {
     opacity?: number;
     showBuildings?: boolean;
 }
-export type EditAttributeValue = string | number | boolean;
+export type EditAttributeValue = string | number | boolean | unknown[] | Record<string, unknown>;
 export interface CustomFeatureSelect {
     point?: {
         paint?: CircleLayerSpecification["paint"];

package/dist/index.js

@@ -8042,10 +8042,31 @@ const useGlobalContext = () => {
     }), [language, translate, api, ewktGeometry, themeName]);
 };
 
+const ImagePreviewError = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: ${({ theme }) => theme.palette.elementDark};
+  border-radius: ${({ theme: { borderRadius: themeBorder }, borderRadius }) => borderRadius || themeBorder.smallest};
+
+  ${uilibGl.Icon} {
+    width: 37.5%;
+    height: 37.5%;
+  }
+
+  ${uilibGl.Icon}:after {
+    font-size: 1.5rem;
+    color: ${({ theme }) => theme.palette.textSecondary};
+  }
+`;
 const FileImagePreview = ({ link, isExternal, size, borderRadius, }) => {
     const { api } = useGlobalContext();
     const [imageSrc, setImageSrc] = React.useState();
+    const [hasError, setHasError] = React.useState(false);
     React.useEffect(() => {
+        setHasError(false);
         if (isExternal) {
             setImageSrc(link);
             return;
@@ -8063,14 +8084,18 @@ const FileImagePreview = ({ link, isExternal, size, borderRadius, }) => {
             objectUrl = URL.createObjectURL(blob);
             setImageSrc(objectUrl);
         })
-            .catch(() => { });
+            .catch(() => {
+            if (cancelled)
+                return;
+            setHasError(true);
+        });
         return () => {
             cancelled = true;
             if (objectUrl)
                 URL.revokeObjectURL(objectUrl);
         };
     }, [api, link, isExternal]);
-    return (jsxRuntime.jsxs(ImagePreviewContainer, { size: size, children: [!imageSrc && (jsxRuntime.jsx(ImagePreviewLoaderContainer, { children: jsxRuntime.jsx(uilibGl.LinearProgress, {}) })), imageSrc && (jsxRuntime.jsx(GridImagePreview, { borderRadius: borderRadius, size: size, src: imageSrc, alt: "" }))] }));
+    return (jsxRuntime.jsxs(ImagePreviewContainer, { size: size, children: [hasError && (jsxRuntime.jsx(ImagePreviewError, { borderRadius: borderRadius, children: jsxRuntime.jsx(uilibGl.Icon, { kind: "alert" }) })), !hasError && !imageSrc && (jsxRuntime.jsx(ImagePreviewLoaderContainer, { children: jsxRuntime.jsx(uilibGl.LinearProgress, {}) })), !hasError && imageSrc && (jsxRuntime.jsx(GridImagePreview, { borderRadius: borderRadius, size: size, src: imageSrc, alt: "", onError: () => setHasError(true) }))] }));
 };
 
 const getFileType = (mimeType = "", name = "") => {
@@ -8223,6 +8248,60 @@ const useAttachmentContainer = ({ type, elementConfig, valueOverride, }) => {
     };
 };
 
+const usePreviewImages = ({ items, active }) => {
+    const { api } = useGlobalContext();
+    const [blobUrls, setBlobUrls] = React.useState({});
+    const [failedLinks, setFailedLinks] = React.useState({});
+    const inFlightRef = React.useRef(new Set());
+    const blobUrlsRef = React.useRef(blobUrls);
+    blobUrlsRef.current = blobUrls;
+    React.useEffect(() => {
+        if (!active || !api?.catalog?.getFile)
+            return;
+        items.forEach(item => {
+            const fileType = getFileType(item.mimeType, item.name);
+            const isImage = IMAGE_FILE_TYPES.includes(fileType);
+            if (!isImage || item.isExternal)
+                return;
+            if (blobUrlsRef.current[item.link] || inFlightRef.current.has(item.link))
+                return;
+            inFlightRef.current.add(item.link);
+            api.catalog
+                .getFile(item.link)
+                .then(blob => {
+                const objectUrl = URL.createObjectURL(blob);
+                setBlobUrls(prev => ({ ...prev, [item.link]: objectUrl }));
+            })
+                .catch(() => {
+                setFailedLinks(prev => (prev[item.link] ? prev : { ...prev, [item.link]: true }));
+            })
+                .finally(() => {
+                inFlightRef.current.delete(item.link);
+            });
+        });
+    }, [active, api, items]);
+    React.useEffect(() => () => {
+        Object.values(blobUrlsRef.current).forEach(URL.revokeObjectURL);
+    }, []);
+    return React.useMemo(() => items.map(item => {
+        const fileType = getFileType(item.mimeType, item.name);
+        const isImage = IMAGE_FILE_TYPES.includes(fileType);
+        const fileName = item.name;
+        if (!isImage)
+            return { src: getFileTypeIcon(fileType), fileName };
+        if (item.isExternal)
+            return { src: item.link, fileName };
+        const hasError = !!failedLinks[item.link];
+        const blobUrl = blobUrls[item.link];
+        return {
+            src: blobUrl ?? "",
+            fileName,
+            hasError,
+            isLoading: !hasError && !blobUrl,
+        };
+    }), [items, blobUrls, failedLinks]);
+};
+
 const EXTENSION_TO_MIME = {
     apng: "image/apng",
     avif: "image/avif",
@@ -8269,20 +8348,6 @@ const getFileNameFromUrl = (url) => {
     }
 };
 
-const getResourceUrl = (url) => {
-    return url ? (url.startsWith("http") ? url : `/sp/resources/file/${url}`) : "";
-};
-
-const buildPreviewImage$1 = (item) => {
-    const fileType = getFileType(item.mimeType, item.name);
-    const isImage = IMAGE_FILE_TYPES.includes(fileType);
-    const src = isImage
-        ? item.isExternal
-            ? item.link
-            : getResourceUrl(item.link)
-        : getFileTypeIcon(fileType);
-    return { src, fileName: item.name };
-};
 const EditAttachmentContainer = React.memo(({ type, elementConfig, renderElement }) => {
     const { api } = useGlobalContext();
     const { selectAttachmentsFromCatalog } = useWidgetContext(type);
@@ -8293,7 +8358,7 @@ const EditAttachmentContainer = React.memo(({ type, elementConfig, renderElement
     const [previewIndex, setPreviewIndex] = React.useState(null);
     const [uploading, setUploading] = React.useState(false);
     const [isLinkDialogOpen, , setLinkDialogOpen] = useToggle(false);
-    const previewImages = React.useMemo(() => items.map(buildPreviewImage$1), [items]);
+    const previewImages = usePreviewImages({ items, active: previewIndex !== null });
     const orderedPreviewImages = React.useMemo(() => {
         if (previewIndex === null)
             return previewImages;
@@ -8302,7 +8367,7 @@ const EditAttachmentContainer = React.memo(({ type, elementConfig, renderElement
             ...previewImages.filter((_, idx) => idx !== previewIndex),
         ];
     }, [previewImages, previewIndex]);
-    const persist = React.useCallback((next) => onChange(JSON.stringify(next)), [onChange]);
+    const persist = React.useCallback((next) => onChange(next), [onChange]);
     const handlePreview = React.useCallback((link) => {
         const idx = items.findIndex(item => item.link === link);
         if (idx >= 0)
@@ -8362,23 +8427,14 @@ const EditAttachmentContainer = React.memo(({ type, elementConfig, renderElement
     return (jsxRuntime.jsxs(AttachmentsContainer, { id: id, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: true, onPreview: handlePreview, onDelete: handleDelete })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: true, onPreview: handlePreview, onDelete: handleDelete })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), jsxRuntime.jsx(AddButton, { accept: fileExtensions, onSelectFiles: uploading ? () => undefined : handleUpload, onSelectFromCatalog: handleSelectFromCatalog, onSelectFromLink: handleOpenLinkDialog }), jsxRuntime.jsx(AttachmentLinkDialog, { isOpen: isLinkDialogOpen, onClose: handleCloseLinkDialog, onSubmit: handleAddByLink }), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: orderedPreviewImages, isOpen: previewIndex !== null, onClose: handleClosePreview }))] }));
 });
 
-const buildPreviewImage = (item) => {
-    const fileType = getFileType(item.mimeType, item.name);
-    const isImage = IMAGE_FILE_TYPES.includes(fileType);
-    const src = isImage
-        ? item.isExternal
-            ? item.link
-            : getResourceUrl(item.link)
-        : getFileTypeIcon(fileType);
-    return { src, fileName: item.name };
-};
 const AttachmentContainer = React.memo(({ type, elementConfig, renderElement }) => {
+    const { t } = useGlobalContext();
     const { expandedContainers } = useWidgetContext(type);
     const { items, visibleItems, viewMode, setViewMode, showMore, setShowMore, hasMore, hiddenCount } = useAttachmentContainer({ type, elementConfig });
     const { id, style, options } = elementConfig || {};
     const { expandable, expanded } = options || {};
     const [previewIndex, setPreviewIndex] = React.useState(null);
-    const previewImages = React.useMemo(() => items.map(buildPreviewImage), [items]);
+    const previewImages = usePreviewImages({ items, active: previewIndex !== null });
     const orderedPreviewImages = React.useMemo(() => {
         if (previewIndex === null)
             return previewImages;
@@ -8395,7 +8451,10 @@ const AttachmentContainer = React.memo(({ type, elementConfig, renderElement })
     const handleClosePreview = React.useCallback(() => setPreviewIndex(null), []);
     const handleShowMore = React.useCallback(() => setShowMore(true), [setShowMore]);
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: style, children: [jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: false, onPreview: handlePreview })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: false, onPreview: handlePreview })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: orderedPreviewImages, isOpen: previewIndex !== null, onClose: handleClosePreview }))] }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: style, children: [jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: false, onPreview: handlePreview })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: false, onPreview: handlePreview })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: orderedPreviewImages, isOpen: previewIndex !== null, onClose: handleClosePreview, errorTitleText: t("attachments.resourceUnavailable", {
+                            ns: "common",
+                            defaultValue: "Ресурс недоступен",
+                        }) }))] }))] }));
 });
 
 const ContainerDivider = styled(uilibGl.Divider) `
@@ -11174,6 +11233,10 @@ const getRelatedAttribute = (layerInfo, sourceAttributeName, relatedLayerName) =
     return attributeConfig?.options?.relatedAttributes?.find(({ layerName }) => layerName === relatedLayerName);
 };
 
+const getResourceUrl = (url) => {
+    return url ? (url.startsWith("http") ? url : `/sp/resources/file/${url}`) : "";
+};
+
 const getSlideshowImages = ({ element, attribute, }) => {
     const { defaultValue, options } = element;
     const { separator } = options || {};