@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/BigImage.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface BigImageProps {
+    url?: string;
+    showSkeleton?: boolean;
+    isDefaultThumbnail?: boolean;
+    isHideDefaultButton?: boolean;
+    imageFit?: React.CSSProperties['objectFit'];
+    index: number;
+    onClickDefaultButton?: (index: number) => void;
+    onClickEdit?: (index: number) => void;
+    onClickUpload?: (index: number) => void;
+}
+export declare const BigImage: React.FC<BigImageProps>;
+export {};

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/BigImage.js

@@ -0,0 +1,25 @@
+import React, { useMemo } from 'react';
+import { ConfigProvider, Image, Tooltip } from 'antd';
+import { Button, Flex, Checkbox } from '@antscorp/antsomi-ui/es/components';
+import Icon from '@antscorp/icons';
+import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
+export const BigImage = React.memo(props => {
+    const { url, isDefaultThumbnail, isHideDefaultButton, index, showSkeleton, imageFit, onClickDefaultButton, onClickEdit, onClickUpload, } = props;
+    const currentTime = useMemo(() => new Date(), []);
+    const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
+    const urlNoCache = getUrlNoCache(url, timeGenerated);
+    const showSkeletonMemo = showSkeleton !== undefined ? showSkeleton : checkShowSkeletonBaseUrl(urlNoCache);
+    return (React.createElement("div", { className: `image-container--big ${!showSkeletonMemo ? 'hide-skeleton' : ''}` },
+        url ? (React.createElement(Image, { preview: false, width: "100%", height: "100%", src: urlNoCache, style: { objectFit: imageFit }, onError: e => {
+                e.currentTarget.style.display = 'none';
+            } })) : null,
+        isHideDefaultButton || !isDefaultThumbnail ? null : (React.createElement(ConfigProvider, { theme: {
+                components: { Checkbox: { borderRadiusSM: 1000 }, Tooltip: { borderRadius: 10 } },
+            } },
+            React.createElement(Tooltip, { title: "Default thumbnail", zIndex: 5000 },
+                React.createElement(Checkbox, { checked: true, className: "default-checkbox" })))),
+        React.createElement(Flex, { className: "set-default-button", gap: 8 },
+            isHideDefaultButton || isDefaultThumbnail ? null : (React.createElement(Button, { onClick: () => onClickDefaultButton && onClickDefaultButton(index) }, "Set as default")),
+            React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-pencil" }), size: "middle", style: { fontSize: '14px' }, onClick: () => onClickEdit === null || onClickEdit === void 0 ? void 0 : onClickEdit(index) }),
+            React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-file-upload" }), size: "middle", style: { fontSize: '14px' }, onClick: () => onClickUpload === null || onClickUpload === void 0 ? void 0 : onClickUpload(index) }))));
+});

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.d.ts

@@ -1,16 +1,31 @@
 import React from 'react';
-interface ImageSliderProps {
-    thumbnails: (string | undefined)[];
+type SliderThumbnail = {
+    url: string;
+    showSkeleton?: boolean;
+};
+export interface ImageSliderProps {
+    thumbnails: (string | SliderThumbnail | undefined)[];
+    isLoading?: boolean;
     className?: string;
     skeleton?: boolean;
     previewNavigation?: boolean;
     slidesPerView?: number;
     hideThumbnailsList?: boolean;
+    hideDefaultButton?: boolean;
+    imageWidth?: number;
+    imageHeight?: number;
+    infinity?: boolean;
+    useFabric?: boolean;
+    thumbnailFit?: React.CSSProperties['objectFit'];
     /**
      * Default thumbnail - order of default thumbnail in thumbnails array
      */
     defaultThumbnail?: number;
     onSelectDefault?: (imgIndex: number) => void;
+    onSaveThumbnail?: (data: {
+        thumbnails: ImageSliderProps['thumbnails'];
+        thumbnailChange: number;
+    }) => void;
 }
 export declare const ImageSlider: React.FC<ImageSliderProps>;
 export {};

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js

@@ -1,62 +1,190 @@
 // Libraries
-import React, { useState, useRef } from 'react';
-import { Image } from 'antd';
+import React, { useState, useRef, useMemo, useCallback } from 'react';
 import Icon from '@antscorp/icons';
 // Components
-import { Button, Flex } from '@antscorp/antsomi-ui/es/components';
+import { Button, Flex, ImageResize, message, Spin, Typography, ImageResizeTuiEditor, } from '@antscorp/antsomi-ui/es/components';
 // Styles
 import { ImageSliderStyled } from './styled';
-import clsx from 'clsx';
+import { SmallImage } from './SmallImage';
+import { BigImage } from './BigImage';
+import { useDeepCompareEffect, useDeepCompareMemo, useDropFile, } from '@antscorp/antsomi-ui/es/hooks';
+import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
+import { isNil } from 'lodash';
+// Image size limit to 10MB
+const SIZE_LIMIT = 10 * 1024 * 1024;
+const ButtonSlider = React.memo(({ direction, type, onClick }) => (React.createElement("div", { className: type === 'slider'
+        ? `slider-button slider-button--${direction}`
+        : `change-preview-button change-preview-button--${direction}`, onClick: onClick },
+    React.createElement(Icon, { type: `icon-ants-angle-${direction}` }))));
 export const ImageSlider = props => {
-    var _a, _b;
-    const { thumbnails, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, defaultThumbnail, onSelectDefault, } = props;
+    const { thumbnails, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, imageWidth = 330, imageHeight = 230, infinity = true, defaultThumbnail, thumbnailFit, onSelectDefault, onSaveThumbnail, useFabric = false, } = props;
     const sliderContainerRef = useRef(null);
     const thumbnailSelectedRef = useRef(null);
+    const imageResizeRef = useRef(null);
+    const smallImageWidth = useMemo(() => imageWidth / slidesPerView - (10 * (slidesPerView - 1)) / slidesPerView, [imageWidth, slidesPerView]);
     const [selectedThumbnail, setSelectedThumbnail] = useState(0);
     const [defaultThumbnailInternal, setDefaultThumbnailInternal] = useState(defaultThumbnail || 0);
-    (_a = thumbnailSelectedRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-        left: selectedThumbnail * 330,
-        behavior: 'smooth',
+    const [editingThumbnail, setEditingThumbnail] = useState();
+    const [uploadThumbnail, setUploadThumbnail] = useState();
+    const [latestCanvas, setLatestCanvas] = useState();
+    // Effects
+    useDeepCompareEffect(() => {
+        setDefaultThumbnailInternal(defaultThumbnail || 0);
+    }, [defaultThumbnail]);
+    const handleScroll = useCallback((scrollIndex) => {
+        var _a, _b;
+        (_a = thumbnailSelectedRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+            left: scrollIndex * imageWidth,
+            behavior: 'smooth',
+        });
+        (_b = sliderContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
+            left: scrollIndex * (smallImageWidth + 10),
+            behavior: 'smooth',
+        });
+    }, [imageWidth, smallImageWidth]);
+    const thumbnailsQuantity = thumbnails.length;
+    const handleNextThumbnail = useCallback(() => {
+        setSelectedThumbnail(prev => {
+            const newValue = prev === thumbnailsQuantity - 1 ? 0 : prev + 1;
+            handleScroll(newValue);
+            return newValue;
+        });
+    }, [handleScroll, thumbnailsQuantity]);
+    const handlePrevThumbnail = useCallback(() => {
+        setSelectedThumbnail(prev => {
+            const newValue = prev === 0 ? thumbnailsQuantity - 1 : prev - 1;
+            handleScroll(newValue);
+            return newValue;
+        });
+    }, [handleScroll, thumbnailsQuantity]);
+    const handleSelectThumbnail = useCallback((index) => {
+        handleScroll(index);
+        setSelectedThumbnail(index);
+    }, [handleScroll]);
+    const handleClickDefault = useCallback((index) => {
+        // Because of only selectedThumbnail equal to current thumbnail index so can use index instead of  selectedThumbnail
+        setDefaultThumbnailInternal(index);
+        if (onSelectDefault) {
+            onSelectDefault(index);
+        }
+    }, [onSelectDefault]);
+    const handleSaveThumbnail = useCallback(() => {
+        var _a, _b;
+        const newThumbnails = [...thumbnails];
+        // NOTE: https://konvajs.org/docs/data_and_serialization/High-Quality-Export.html
+        const base64Url = ((_a = imageResizeRef.current) === null || _a === void 0 ? void 0 : _a.getBase64({ pixelRatio: 2.5 })) || '';
+        if (typeof newThumbnails[selectedThumbnail] === 'object' &&
+            ((_b = newThumbnails[selectedThumbnail]) === null || _b === void 0 ? void 0 : _b.url)) {
+            newThumbnails[selectedThumbnail].url = base64Url;
+        }
+        else {
+            newThumbnails[selectedThumbnail] = base64Url;
+        }
+        onSaveThumbnail === null || onSaveThumbnail === void 0 ? void 0 : onSaveThumbnail({ thumbnails: newThumbnails, thumbnailChange: selectedThumbnail });
+        setLatestCanvas(prev => {
+            var _a;
+            return (Object.assign(Object.assign({}, prev), { [selectedThumbnail]: (_a = imageResizeRef.current) === null || _a === void 0 ? void 0 : _a.getCurrentState() }));
+        });
+        setEditingThumbnail(undefined);
+        handleSelectThumbnail(selectedThumbnail);
+    }, [handleSelectThumbnail, onSaveThumbnail, selectedThumbnail, thumbnails]);
+    const fileRef = useRef(null);
+    const onImportImageClick = useCallback(() => {
+        var _a;
+        (_a = fileRef === null || fileRef === void 0 ? void 0 : fileRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    }, []);
+    const onImportImageSelect = useCallback((e) => {
+        var _a, _b, _c;
+        if ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) {
+            if (((_b = e.target.files) === null || _b === void 0 ? void 0 : _b[0].size) > SIZE_LIMIT) {
+                /**
+                 * NOTE: This reset e.target.files (fix: upload the same image later will trigger change input)
+                 * use DataTransfer because e.target.files = null not work in this case
+                 */
+                e.target.files = new DataTransfer().files;
+                message.error({
+                    content: 'File size too big',
+                    style: { fontSize: '12px', fontFamily: 'Roboto' },
+                });
+                return;
+            }
+            (_c = imageResizeRef.current) === null || _c === void 0 ? void 0 : _c.replaceImageWithUrl(URL.createObjectURL(e.target.files[0]));
+            setUploadThumbnail(undefined);
+        }
+        e.target.files = new DataTransfer().files;
+    }, []);
+    useDropFile('.image-upload-zone', e => {
+        var _a, _b, _c, _d;
+        if (!((_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files[0]))
+            return;
+        if (((_b = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _b === void 0 ? void 0 : _b.files[0].size) > SIZE_LIMIT) {
+            message.error({
+                content: 'File size too big',
+                style: { fontSize: '12px', fontFamily: 'Roboto' },
+            });
+            return;
+        }
+        (_c = imageResizeRef.current) === null || _c === void 0 ? void 0 : _c.replaceImageWithUrl(URL.createObjectURL((_d = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _d === void 0 ? void 0 : _d.files[0]));
+        setUploadThumbnail(undefined);
     });
-    (_b = sliderContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
-        left: selectedThumbnail * (330 / slidesPerView),
-        behavior: 'smooth',
-    });
-    const handleNextThumbnail = () => {
-        setSelectedThumbnail(prev => (prev === thumbnails.length - 1 ? 0 : prev + 1));
-    };
-    const handlePrevThumbnail = () => {
-        setSelectedThumbnail(prev => (prev === 0 ? thumbnails.length - 1 : prev - 1));
-    };
-    // useEffect(() => {
-    //   handleScrollToImage();
-    //   // eslint-disable-next-line react-hooks/exhaustive-deps
-    // }, [selectedThumbnail]);
-    return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$slidesPerView": slidesPerView, vertical: true, gap: 10 },
-        React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef }, thumbnails.map((url, index) => (React.createElement("div", { key: `image-big_${url}_${index * 2}`, className: clsx('image-container--big', {
-                'image-container--default': defaultThumbnailInternal === index,
-                // 'image-container--default': isSelectedDefault,
-            }) },
-            url ? (React.createElement(Image, { preview: false, width: "80%", height: "96%", src: thumbnails[index] })) : null,
-            React.createElement(Button, { className: "set-default-button", onClick: () => {
-                    setDefaultThumbnailInternal(selectedThumbnail);
-                    if (onSelectDefault) {
-                        onSelectDefault(selectedThumbnail);
-                    }
-                } },
-                defaultThumbnailInternal === index ? (React.createElement(Icon, { type: "icon-ants-check", style: { fontSize: '12px' } })) : null,
-                defaultThumbnailInternal === index ? 'Default thumbnail' : 'Set as default'))))),
-        hideThumbnailsList ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef }, thumbnails.map((url, index) => (React.createElement("div", { key: `${url}_${index * 2}`, className: clsx('image-container--small', {
-                'image-container--selected': index === selectedThumbnail,
-            }), onClick: () => setSelectedThumbnail(index) }, url ? React.createElement(Image, { key: url, preview: false, width: "80%", height: "96%", src: url }) : null))))),
-        previewNavigation ? (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "change-preview-button change-preview-button--left", onClick: handlePrevThumbnail },
-                React.createElement(Icon, { type: "icon-ants-angle-left" })),
-            React.createElement("div", { className: "change-preview-button change-preview-button--right", onClick: handleNextThumbnail },
-                React.createElement(Icon, { type: "icon-ants-angle-right" })))) : null,
-        hideThumbnailsList ? null : (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "slider-button slider-button--left", onClick: handlePrevThumbnail },
-                React.createElement(Icon, { type: "icon-ants-angle-left" })),
-            React.createElement("div", { className: "slider-button slider-button--right", onClick: handleNextThumbnail },
-                React.createElement(Icon, { type: "icon-ants-angle-right" }))))));
+    const currentTime = useDeepCompareMemo(() => new Date(), []);
+    const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
+    const currentEditing = useDeepCompareMemo(() => editingThumbnail !== null && editingThumbnail !== void 0 ? editingThumbnail : uploadThumbnail, [editingThumbnail, uploadThumbnail]);
+    const currentThumbnailUrl = useDeepCompareMemo(() => {
+        const currentThumbnail = thumbnails[currentEditing];
+        return typeof currentThumbnail === 'string' ? currentThumbnail : (currentThumbnail === null || currentThumbnail === void 0 ? void 0 : currentThumbnail.url) || '';
+    }, [currentEditing, thumbnails]);
+    const showSkeletonMemo = useDeepCompareMemo(() => {
+        const currentThumbnail = thumbnails[currentEditing];
+        const showSkeleton = typeof currentThumbnail === 'object' && !isNil(currentThumbnail === null || currentThumbnail === void 0 ? void 0 : currentThumbnail.showSkeleton)
+            ? currentThumbnail === null || currentThumbnail === void 0 ? void 0 : currentThumbnail.showSkeleton
+            : skeleton !== undefined
+                ? skeleton
+                : checkShowSkeletonBaseUrl(getUrlNoCache(currentThumbnailUrl, timeGenerated));
+        return showSkeleton;
+    }, [currentEditing, currentThumbnailUrl, skeleton, thumbnails, timeGenerated]);
+    const ImageResizeComponent = useFabric ? ImageResizeTuiEditor : ImageResize;
+    return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": showSkeletonMemo, "$imageWidth": imageWidth, "$smallImageWidth": smallImageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10 },
+        React.createElement(Flex, { vertical: true, style: { zIndex: 25, display: !isNil(currentEditing) ? 'flex' : 'none' }, className: `edit-thumbnail-container ${!isNil(currentEditing) ? 'is-editing' : ''}` },
+            React.createElement(ImageResizeComponent, { className: `image-resize-wrapper ${typeof uploadThumbnail === 'number' ? 'visibility-hidden' : ''}`, width: imageWidth, height: imageHeight, ref: imageResizeRef, hideAction: true, imageUrl: (latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing])
+                    ? undefined
+                    : getUrlNoCache(currentThumbnailUrl, timeGenerated), defaultValue: latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing] }),
+            typeof uploadThumbnail !== 'number' ? null : (React.createElement(Flex, { className: `image-upload-zone ${!showSkeletonMemo ? 'hide-skeleton' : ''}` },
+                React.createElement(Icon, { type: "icon-ants-upload-fill", style: { fontSize: '40px' } }),
+                React.createElement(Flex, { vertical: true, align: "flex-start" },
+                    React.createElement(Typography.Text, { style: { fontSize: 16, marginBottom: '10px' } }, "Drag & Drop file here"),
+                    React.createElement("input", { type: "file", ref: fileRef, onChange: onImportImageSelect, style: { display: 'none' }, accept: "image/*" }),
+                    React.createElement(Button, { onClick: onImportImageClick }, "Browse Image"),
+                    React.createElement(Typography.Text, { style: { marginTop: '5px', fontSize: '11px' } }, "File type: .jpg, .png. File size: under 10MB")))),
+            React.createElement(Flex, { justify: "center", align: "center", gap: 8, className: "image-resize-action" },
+                React.createElement(Button, { onClick: handleSaveThumbnail, type: "primary", disabled: uploadThumbnail !== undefined }, "Save"),
+                React.createElement(Button, { onClick: () => {
+                        setEditingThumbnail(undefined);
+                        setUploadThumbnail(undefined);
+                    } }, "Cancel"))),
+        React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef, style: { display: !isNil(currentEditing) ? 'none' : 'flex' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((thumbnail, index) => {
+            const url = typeof thumbnail === 'string' ? thumbnail : (thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.url) || '';
+            const showSkeleton = typeof thumbnail === 'object' && !isNil(thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.showSkeleton)
+                ? thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.showSkeleton
+                : skeleton;
+            return (React.createElement(BigImage, { key: `image-big_${url}_${index * 2}`, url: url, index: index, showSkeleton: showSkeleton, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnailsQuantity <= 1, imageFit: thumbnailFit, onClickDefaultButton: handleClickDefault, onClickEdit: () => setEditingThumbnail(selectedThumbnail), 
+                // onClickEdit={index => setEditingThumbnail(index)}
+                onClickUpload: () => {
+                    setEditingThumbnail(selectedThumbnail);
+                    setUploadThumbnail(selectedThumbnail);
+                } }));
+        }))),
+        hideThumbnailsList || thumbnailsQuantity <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnailsQuantity < slidesPerView ? 'center' : 'flex-start' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((thumbnail, index) => {
+            const url = typeof thumbnail === 'string' ? thumbnail : (thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.url) || '';
+            const showSkeleton = typeof thumbnail === 'object' && !isNil(thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.showSkeleton)
+                ? thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.showSkeleton
+                : skeleton;
+            return (React.createElement(SmallImage, { imageFit: thumbnailFit, key: `${url}_${index * 2}`, showSkeleton: showSkeleton, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail }));
+        })))),
+        previewNavigation && !isLoading ? (React.createElement(React.Fragment, null,
+            React.createElement(ButtonSlider, { direction: "left", type: "preview", onClick: handlePrevThumbnail }),
+            React.createElement(ButtonSlider, { direction: "right", type: "preview", onClick: handleNextThumbnail }))) : null,
+        hideThumbnailsList || isLoading || thumbnailsQuantity <= 2 ? null : (React.createElement(React.Fragment, null,
+            (!infinity && selectedThumbnail !== 0) || infinity ? (React.createElement(ButtonSlider, { direction: "left", type: "slider", onClick: handlePrevThumbnail })) : null,
+            (!infinity && selectedThumbnail !== thumbnailsQuantity - 1) || infinity ? (React.createElement(ButtonSlider, { direction: "right", type: "slider", onClick: handleNextThumbnail })) : null))));
 };

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/SmallImage.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface SmallImageProps {
+    url?: string;
+    isSelected?: boolean;
+    index: number;
+    showSkeleton?: boolean;
+    imageFit?: React.CSSProperties['objectFit'];
+    onClick?: (index: number) => void;
+}
+export declare const SmallImage: React.FC<SmallImageProps>;
+export {};

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/SmallImage.js

@@ -0,0 +1,16 @@
+import React, { useMemo } from 'react';
+import { Image } from 'antd';
+import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
+export const SmallImage = React.memo(props => {
+    const { url, isSelected, index, imageFit, showSkeleton, onClick } = props;
+    const currentTime = useMemo(() => new Date(), []);
+    const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
+    const urlNoCache = getUrlNoCache(url, timeGenerated);
+    const showSkeletonMemo = showSkeleton !== undefined ? showSkeleton : checkShowSkeletonBaseUrl(urlNoCache);
+    return (React.createElement("div", { className: `image-container--small ${isSelected ? 'image-container--selected' : ''} ${!showSkeletonMemo ? 'hide-skeleton' : ''}`, onClick: () => onClick && onClick(index) }, url ? (React.createElement(Image, { preview: false, width: "100%", height: "100%", style: { objectFit: imageFit }, 
+        // src={imageUrl}
+        // src={url}
+        src: urlNoCache, onError: e => {
+            e.currentTarget.style.display = 'none';
+        } })) : null));
+});

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/index.d.ts

@@ -1 +1,2 @@
 export { ImageSlider } from './ImageSlider';
+export type { ImageSliderProps } from './ImageSlider';

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/styled.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
-export declare const ImageSliderStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
-    $skeleton?: boolean | undefined;
-    $slidesPerView?: number | undefined;
-}, never>;
+interface ImageSliderStyledProps {
+    $skeleton?: boolean;
+    $smallImageWidth: number;
+    $imageWidth?: number;
+    $imageHeight?: number;
+}
+export declare const ImageSliderStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, ImageSliderStyledProps, never>;
+export {};