@evergis/react 4.0.54 → 4.0.55

package/dist/react.esm.js

@@ -8040,10 +8040,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};
+
+  ${Icon} {
+    width: 37.5%;
+    height: 37.5%;
+  }
+
+  ${Icon}:after {
+    font-size: 1.5rem;
+    color: ${({ theme }) => theme.palette.textSecondary};
+  }
+`;
 const FileImagePreview = ({ link, isExternal, size, borderRadius, }) => {
     const { api } = useGlobalContext();
     const [imageSrc, setImageSrc] = useState();
+    const [hasError, setHasError] = useState(false);
     useEffect(() => {
+        setHasError(false);
         if (isExternal) {
             setImageSrc(link);
             return;
@@ -8061,14 +8082,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 (jsxs(ImagePreviewContainer, { size: size, children: [!imageSrc && (jsx(ImagePreviewLoaderContainer, { children: jsx(LinearProgress, {}) })), imageSrc && (jsx(GridImagePreview, { borderRadius: borderRadius, size: size, src: imageSrc, alt: "" }))] }));
+    return (jsxs(ImagePreviewContainer, { size: size, children: [hasError && (jsx(ImagePreviewError, { borderRadius: borderRadius, children: jsx(Icon, { kind: "alert" }) })), !hasError && !imageSrc && (jsx(ImagePreviewLoaderContainer, { children: jsx(LinearProgress, {}) })), !hasError && imageSrc && (jsx(GridImagePreview, { borderRadius: borderRadius, size: size, src: imageSrc, alt: "", onError: () => setHasError(true) }))] }));
 };
 
 const getFileType = (mimeType = "", name = "") => {
@@ -8221,6 +8246,60 @@ const useAttachmentContainer = ({ type, elementConfig, valueOverride, }) => {
     };
 };
 
+const usePreviewImages = ({ items, active }) => {
+    const { api } = useGlobalContext();
+    const [blobUrls, setBlobUrls] = useState({});
+    const [failedLinks, setFailedLinks] = useState({});
+    const inFlightRef = useRef(new Set());
+    const blobUrlsRef = useRef(blobUrls);
+    blobUrlsRef.current = blobUrls;
+    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]);
+    useEffect(() => () => {
+        Object.values(blobUrlsRef.current).forEach(URL.revokeObjectURL);
+    }, []);
+    return 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",
@@ -8267,20 +8346,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 = memo(({ type, elementConfig, renderElement }) => {
     const { api } = useGlobalContext();
     const { selectAttachmentsFromCatalog } = useWidgetContext(type);
@@ -8291,7 +8356,7 @@ const EditAttachmentContainer = memo(({ type, elementConfig, renderElement }) =>
     const [previewIndex, setPreviewIndex] = useState(null);
     const [uploading, setUploading] = useState(false);
     const [isLinkDialogOpen, , setLinkDialogOpen] = useToggle(false);
-    const previewImages = useMemo(() => items.map(buildPreviewImage$1), [items]);
+    const previewImages = usePreviewImages({ items, active: previewIndex !== null });
     const orderedPreviewImages = useMemo(() => {
         if (previewIndex === null)
             return previewImages;
@@ -8300,7 +8365,7 @@ const EditAttachmentContainer = memo(({ type, elementConfig, renderElement }) =>
             ...previewImages.filter((_, idx) => idx !== previewIndex),
         ];
     }, [previewImages, previewIndex]);
-    const persist = useCallback((next) => onChange(JSON.stringify(next)), [onChange]);
+    const persist = useCallback((next) => onChange(next), [onChange]);
     const handlePreview = useCallback((link) => {
         const idx = items.findIndex(item => item.link === link);
         if (idx >= 0)
@@ -8360,23 +8425,14 @@ const EditAttachmentContainer = memo(({ type, elementConfig, renderElement }) =>
     return (jsxs(AttachmentsContainer, { id: id, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsx(AttachmentsGrid, { items: visibleItems, isEdit: true, onPreview: handlePreview, onDelete: handleDelete })) : (jsx(AttachmentsList, { items: visibleItems, isEdit: true, onPreview: handlePreview, onDelete: handleDelete })) }), hasMore && !showMore && (jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), jsx(AddButton, { accept: fileExtensions, onSelectFiles: uploading ? () => undefined : handleUpload, onSelectFromCatalog: handleSelectFromCatalog, onSelectFromLink: handleOpenLinkDialog }), jsx(AttachmentLinkDialog, { isOpen: isLinkDialogOpen, onClose: handleCloseLinkDialog, onSubmit: handleAddByLink }), previewIndex !== null && (jsx(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 = 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] = useState(null);
-    const previewImages = useMemo(() => items.map(buildPreviewImage), [items]);
+    const previewImages = usePreviewImages({ items, active: previewIndex !== null });
     const orderedPreviewImages = useMemo(() => {
         if (previewIndex === null)
             return previewImages;
@@ -8393,7 +8449,10 @@ const AttachmentContainer = memo(({ type, elementConfig, renderElement }) => {
     const handleClosePreview = useCallback(() => setPreviewIndex(null), []);
     const handleShowMore = useCallback(() => setShowMore(true), [setShowMore]);
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxs(Container, { id: id, isColumn: true, style: style, children: [jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsx(AttachmentsGrid, { items: visibleItems, isEdit: false, onPreview: handlePreview })) : (jsx(AttachmentsList, { items: visibleItems, isEdit: false, onPreview: handlePreview })) }), hasMore && !showMore && (jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), previewIndex !== null && (jsx(Preview, { images: orderedPreviewImages, isOpen: previewIndex !== null, onClose: handleClosePreview }))] }))] }));
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxs(Container, { id: id, isColumn: true, style: style, children: [jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsx(AttachmentsGrid, { items: visibleItems, isEdit: false, onPreview: handlePreview })) : (jsx(AttachmentsList, { items: visibleItems, isEdit: false, onPreview: handlePreview })) }), hasMore && !showMore && (jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), previewIndex !== null && (jsx(Preview, { images: orderedPreviewImages, isOpen: previewIndex !== null, onClose: handleClosePreview, errorTitleText: t("attachments.resourceUnavailable", {
+                            ns: "common",
+                            defaultValue: "Ресурс недоступен",
+                        }) }))] }))] }));
 });
 
 const ContainerDivider = styled(Divider) `
@@ -11172,6 +11231,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 || {};