@evergis/uilib-gl 1.0.98 → 1.0.100

package/dist/organisms/Preview/styled.d.ts

@@ -29,4 +29,9 @@ declare type SlideShowImageProps = ImageProps & {
 };
 export declare const SlideShowImageContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ChoosableImage: import("styled-components").StyledComponent<import("react").FC<ImageProps>, import("styled-components").DefaultTheme, SlideShowImageProps, never>;
+export declare const PreviewImageError: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PreviewImageErrorText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SlideShowImageStatus: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    chosen?: boolean | undefined;
+}, never>;
 export {};

package/dist/organisms/Preview/types.d.ts

@@ -2,6 +2,8 @@ import { RefObject } from "react";
 export declare type IPreviewImage = {
     src: string;
     fileName: string;
+    hasError?: boolean;
+    isLoading?: boolean;
 };
 export declare type ControlText = {
     downloadTitleText?: string;
@@ -9,6 +11,7 @@ export declare type ControlText = {
     closeTitleText?: string;
     prevImgTitleText?: string;
     nextImgTitleText?: string;
+    errorTitleText?: string;
 };
 export declare type IPreviewProps = ControlText & {
     images?: IPreviewImage[];
@@ -40,10 +43,10 @@ export declare type IPreviewControlsProps = ControlText & {
 export interface IPreviewSlideShowProps {
     chosenImageIndex?: number;
     setPreview?: (idx: number) => void;
-    images?: string[];
+    images?: IPreviewImage[];
 }
 export interface IGalleryImageProps {
-    image: string;
+    image: IPreviewImage;
     isChosen: boolean;
     slideShowRef: RefObject<HTMLDivElement>;
     adjustSlider: (px: number) => void;

package/dist/uilib-gl.esm.js

@@ -19849,25 +19849,27 @@ const DropdownField = /*#__PURE__*/styled.div.attrs(props => ({
   border-color: ${_ref4 => {
   let {
     theme: {
-      input
+      input,
+      palette
     },
     error,
     active,
     focused
   } = _ref4;
-  return error ? input.error : active ? "transparent" : focused ? input.hoverBorderColor : "";
+  return error ? input.error : active ? palette.primary : focused ? input.hoverBorderColor : "";
 }};
 
   :hover {
     border-color: ${_ref5 => {
   let {
     theme: {
-      input
+      input,
+      palette
     },
     error,
     active
   } = _ref5;
-  return error ? input.error : active ? "transparent" : input.hoverBorderColor;
+  return error ? input.error : active ? palette.primary : input.hoverBorderColor;
 }};
   }
 `;
@@ -27019,6 +27021,70 @@ const ChoosableImage = /*#__PURE__*/styled(Image).attrs(() => ({
   border-radius: 2px;
   box-sizing: border-box;
 `;
+const PreviewImageError = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  height: 100%;
+  color: rgba(255, 255, 255, 0.54);
+  background: rgba(0, 0, 0, 0.24);
+  border-radius: 0.25rem;
+
+  ${Icon} {
+    width: 3rem;
+    height: 3rem;
+  }
+
+  ${Icon}:after {
+    font-size: 3rem;
+    color: rgba(255, 255, 255, 0.54);
+  }
+`;
+const PreviewImageErrorText = styled.div`
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.7);
+`;
+const SlideShowImageStatus = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4.5rem;
+  height: 4.5rem;
+  margin: 0 0.25rem;
+  border: ${_ref11 => {
+  let {
+    chosen
+  } = _ref11;
+  return chosen ? 2 : 1;
+}}px solid #fff;
+  opacity: ${_ref12 => {
+  let {
+    chosen
+  } = _ref12;
+  return chosen ? 1 : 0.54;
+}};
+  border-radius: 2px;
+  box-sizing: border-box;
+  background: rgba(0, 0, 0, 0.24);
+
+  ${Icon} {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  ${Icon}:after {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  ${LinearProgress} {
+    width: 60%;
+    border-radius: 0.25rem;
+  }
+`;
 
 const PreviewControlsComponent = _ref => {
   let {
@@ -27177,12 +27243,22 @@ const SlideShowImage = /*#__PURE__*/memo(_ref => {
     onClick
   } = _ref;
   const ref = useAdjustSlideShowImage(isChosen, slideShowRef, adjustSlider);
+  const [hasLoadError, setHasLoadError] = useState(false);
+  const showError = image.hasError || hasLoadError;
+  const showLoader = !showError && (image.isLoading || !image.src);
   return React.createElement(SlideShowImageContainer, {
     ref: ref,
     onClick: onClick
-  }, React.createElement(ChoosableImage, {
-    src: image,
+  }, showError ? React.createElement(SlideShowImageStatus, {
+    chosen: isChosen
+  }, React.createElement(Icon, {
+    kind: "alert"
+  })) : showLoader ? React.createElement(SlideShowImageStatus, {
     chosen: isChosen
+  }, React.createElement(LinearProgress, null)) : React.createElement(ChoosableImage, {
+    src: image.src,
+    chosen: isChosen,
+    onError: () => setHasLoadError(true)
   }));
 });
 
@@ -27201,7 +27277,7 @@ const PreviewSlideShow = /*#__PURE__*/memo(_ref => {
     ref: slideShowRef,
     left: left
   }, images && images.map((image, index) => React.createElement(SlideShowImage, {
-    key: `${index}_${image}`,
+    key: `${index}_${image.src}`,
     isChosen: index === chosenImageIndex,
     image: image,
     slideShowRef: slideShowRef,
@@ -27247,7 +27323,13 @@ const PreviewComponent = _ref => {
     images = [],
     isOpen,
     root,
-    onClose
+    onClose,
+    downloadTitleText,
+    fullScreenTitleText,
+    closeTitleText,
+    prevImgTitleText,
+    nextImgTitleText,
+    errorTitleText
   } = _ref;
   const [{
     chosenImageIndex,
@@ -27259,33 +27341,46 @@ const PreviewComponent = _ref => {
     next,
     toggleFullscreen
   }] = useImageSlideShow(images);
+  const [failedSrcs, setFailedSrcs] = useState({});
+  const handleImageError = useCallback(src => {
+    if (!src) return;
+    setFailedSrcs(prev => prev[src] ? prev : { ...prev,
+      [src]: true
+    });
+  }, []);
+  const decoratedImages = useMemo(() => images.map(image => failedSrcs[image.src] ? { ...image,
+    hasError: true
+  } : image), [images, failedSrcs]);
+  const decoratedChosenImage = useMemo(() => chosenImage ? decoratedImages[chosenImageIndex] ?? chosenImage : undefined, [chosenImage, chosenImageIndex, decoratedImages]);
   const shouldOpenPreview = useMemo(() => images.length > 0 && isOpen, [images, isOpen]);
-  const imageSources = useMemo(() => images.map(_ref2 => {
-    let {
-      src
-    } = _ref2;
-    return src;
-  }), [images]);
   return !shouldOpenPreview ? null : React.createElement(Portal, {
     root: root
   }, React.createElement(ThemeProvider, {
     theme: theme$1
   }, React.createElement(PreviewOverlay, null, React.createElement(PreviewControls, {
-    chosenImage: chosenImage,
+    chosenImage: decoratedChosenImage,
     fullscreen: fullscreen,
     toggleFullscreen: toggleFullscreen,
     prev: prev,
     next: next,
-    close: onClose
+    close: onClose,
+    downloadTitleText: downloadTitleText,
+    fullScreenTitleText: fullScreenTitleText,
+    closeTitleText: closeTitleText,
+    prevImgTitleText: prevImgTitleText,
+    nextImgTitleText: nextImgTitleText
   }), React.createElement(PreviewSlideShow, {
-    images: imageSources,
+    images: decoratedImages,
     chosenImageIndex: chosenImageIndex,
     setPreview: setChosenImageIndex
-  }), chosenImage && React.createElement(PreviewImageContainer, {
-    fullscreen: fullscreen
-  }, React.createElement(PreviewImage, {
-    src: chosenImage.src,
+  }), decoratedChosenImage && React.createElement(PreviewImageContainer, {
     fullscreen: fullscreen
+  }, decoratedChosenImage.hasError ? React.createElement(PreviewImageError, null, React.createElement(Icon, {
+    kind: "alert"
+  }), React.createElement(PreviewImageErrorText, null, errorTitleText || "Ресурс недоступен")) : React.createElement(PreviewImage, {
+    src: decoratedChosenImage.src,
+    fullscreen: fullscreen,
+    onError: () => handleImageError(decoratedChosenImage.src)
   })))));
 };