@antscorp/antsomi-ui 1.3.5-beta.52 → 1.3.5-beta.521

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

@@ -1,57 +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, Spin } 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, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, 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));
-    };
-    return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$slidesPerView": slidesPerView, vertical: true, gap: 10 },
-        React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement("div", { key: `image-big_${url}_${index * 2}`, className: clsx('image-container--big', {
-                'image-container--default': defaultThumbnailInternal === index,
-            }) },
-            url ? (React.createElement(Image, { preview: false, width: "80%", height: "96%", src: thumbnails[index] })) : null,
-            hideDefaultButton ? 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 }, isLoading ? (React.createElement(Spin, { spinning: true })) : (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)))))),
+    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("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 || isLoading ? 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" }))))));
+            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 {};

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

@@ -1,17 +1,22 @@
+var _a, _b, _c, _d, _e, _f;
 // Libraries
 import styled, { css } from 'styled-components';
 import { Flex } from '@antscorp/antsomi-ui/es/components';
 // Assets
-import SkeletonBg from '@antscorp/antsomi-ui/es/assets/images/skeleton_bg.png';
+import SkeletonBg from '@antscorp/antsomi-ui/es/assets/images/background/skeleton-background.png';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 const backgroundImage = css `
-  ${props => props.$skeleton
-    ? css `
-          background: url(${SkeletonBg}) no-repeat center center, #e5e5e5;
-          background-size: contain;
-        `
-    : css `
-          background: #e5e5e5;
-        `}
+  ${() => css `
+    &::after {
+      content: '';
+      position: absolute;
+      width: 90%;
+      height: 90%;
+      background: url(${SkeletonBg}) no-repeat center center;
+      background-size: contain;
+      z-index: 0;
+    }
+  `}
 `;
 const setWidthHeight = ({ w, h }) => `
   width: ${w};
@@ -25,6 +30,70 @@ const centerBlock = css `
 export const ImageSliderStyled = styled(Flex) `
   /* NOTE: Style for prev and next button in thumbnail slider */
   position: relative;
+  margin-top: 6px;
+
+  .edit-thumbnail-container {
+    position: relative;
+  }
+
+  .image-resize-action {
+    margin-top: 20px;
+    margin-bottom: 40px;
+  }
+
+  .image-resize-wrapper {
+    background: ${props => props.$skeleton ? `url(${SkeletonBg}) no-repeat center center` : 'unset'};
+
+    background-size: 90% 90%;
+  }
+
+  .image-resize-wrapper.visibility-hidden {
+    visibility: hidden;
+  }
+
+  .image-resize-wrapper,
+  .image-upload-zone {
+    border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue1_1};
+    border-radius: 5px;
+    margin-top: 0;
+    overflow: hidden;
+  }
+
+  &:has(.image-upload-zone) #image-editor {
+    display: none;
+  }
+
+  .image-upload-zone {
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: ${props => `${props.$imageWidth}px`};
+    height: ${props => `${props.$imageHeight}px`};
+    background: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorBgSkeleton};
+
+    & > i {
+      color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw8};
+    }
+
+    & > div > span:last-child {
+      color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw7};
+    }
+
+    &:not(.hide-skeleton) {
+      background: ${props => {
+    var _a;
+    return props.$skeleton
+        ? `url(${SkeletonBg}) no-repeat center center`
+        : (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorBgSkeleton;
+}};
+
+      background-size: 90% 90%;
+    }
+  }
 
   .change-preview-button {
     ${centerBlock}
@@ -68,6 +137,10 @@ export const ImageSliderStyled = styled(Flex) `
     }
   }
 
+  .slider-button {
+    display: none;
+  }
+
   .thumbnail-preview-container:has(.antsomi-spin),
   .thumbnail-slider-container:has(.antsomi-spin) {
     box-shadow: rgba(159, 180, 180, 0.2) 0px 2px 8px;
@@ -76,14 +149,19 @@ export const ImageSliderStyled = styled(Flex) `
   .thumbnail-preview-container .antsomi-spin,
   .thumbnail-slider-container .antsomi-spin {
     width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    ${centerBlock}
     background-color: #fcfcfc;
   }
 
+  &:has(.thumbnail-slider-container:hover),
+  &:has(.slider-button:hover) {
+    .slider-button {
+      display: flex;
+    }
+  }
+
   .thumbnail-preview-container {
-    width: 330px;
+    width: ${({ $imageWidth }) => `${$imageWidth}px`};
     overflow-x: scroll;
     scrollbar-width: none;
 
@@ -95,13 +173,13 @@ export const ImageSliderStyled = styled(Flex) `
     }
 
     .antsomi-spin {
-      height: 230px;
+      height: ${({ $imageHeight }) => `${$imageHeight}px`};
     }
   }
 
   .thumbnail-slider-container {
     position: relative;
-    width: 330px;
+    width: ${({ $imageWidth }) => `${$imageWidth}px`};
     overflow-x: scroll;
     scrollbar-width: none;
 
@@ -110,13 +188,42 @@ export const ImageSliderStyled = styled(Flex) `
     }
   }
 
+  &:has(> .thumbnail-preview-container) {
+    .image-container--big::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: transparent;
+      z-index: 2;
+      transition: background-color 150ms ease-in-out;
+    }
+
+    .image-container--big:hover::before {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+
   .image-container {
     &--big,
     &--small {
+      position: relative;
+      box-sizing: border-box;
+      background: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.colorBgSkeleton};
+      border: 1px solid ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue1_1};
+      border-radius: 5px;
+
       ${centerBlock}
-      ${backgroundImage}
+      &:not(.hide-skeleton) {
+        ${backgroundImage}
+      }
+
       img {
+        position: relative;
         object-fit: contain;
+        z-index: 1;
       }
 
       div:has(> img) {
@@ -126,32 +233,23 @@ export const ImageSliderStyled = styled(Flex) `
     }
 
     &--big {
-      ${setWidthHeight({ w: '100%', h: '230px' })}
-      /* ${setWidthHeight({ w: '330px', h: '230px' })} */
+      width: 100%;
+      height: ${({ $imageHeight }) => `${$imageHeight}px`};
       flex-shrink: 0;
 
       position: relative;
-      /* border-radius: 5px; */
       overflow: hidden;
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.5);
-        z-index: 1;
-      }
     }
 
     &--small {
-      width: ${props => `calc(100% / ${props.$slidesPerView || 3} - 10px)`};
+      box-sizing: border-box;
+      width: ${props => `${props.$smallImageWidth}px`};
+
       height: 72px;
       flex-shrink: 0;
 
-      border: 2px solid #e5e5e5;
+      /* border: 2px solid #e5e5e5; */
+      border-width: 2px;
       border-radius: 2px;
       user-select: none;
       cursor: pointer;
@@ -161,37 +259,29 @@ export const ImageSliderStyled = styled(Flex) `
     }
   }
 
+  .default-checkbox {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    opacity: 0;
+    z-index: 3;
+    transition: opacity 150ms ease-in-out;
+  }
+
   .set-default-button {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 2;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
   }
 
-  /* .swiper-button-prev,
-  .swiper-button-next {
-    background: #fff;
-    width: 24px;
-    height: 24px;
-    border-radius: 999px;
-    &:after {
-      font-size: 14px;
-      font-weight: bold;
-      color: #000;
-    }
-    &.swiper-button-disabled {
+  .image-container--big:hover {
+    .set-default-button,
+    .default-checkbox {
       opacity: 1;
-      cursor: pointer;
     }
-  } */
-
-  /* .swiper-button-prev.swiper-button-disabled {
-    opacity: 1;
-    cursor: pointer;
-  } */
-
-  /* .swiper-button-lock {
-    display: flex;
-  } */
+  }
 `;

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

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

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

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

package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.d.ts

@@ -3,7 +3,8 @@ import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 import { TGetTemplateCategoryList, TGetObjectTEmplateList } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
 import { TTemplateListingConfig } from '@antscorp/antsomi-ui/es/types/templateListing';
 import { TemplateCategory } from '@antscorp/antsomi-ui/es/models/TemplateCategory';
-import { TemplateValueOptions, categoriesProps } from '../TemplateSaveAs';
+import { FormValue, TemplateValueOptions, categoriesProps } from '../TemplateSaveAs';
+import { RuleObject } from 'antd/es/form';
 interface TemplateListingOptions {
     service: PayloadInfo;
     config: TTemplateListingConfig;
@@ -36,11 +37,14 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
         }>;
     }[];
     templateItems: {
+        [key: string]: any;
         id: string | number;
         label: string;
         thumbnail?: string | undefined;
     }[];
     value: Partial<TemplateValueOptions>;
+    setValue: import("react").Dispatch<import("react").SetStateAction<Partial<TemplateValueOptions>>>;
+    reset: () => void;
     formattedCategoriesValue: {
         camelCase: Record<string, any>;
         snakeCase: Record<string, any>;
@@ -53,10 +57,16 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
     isLoadingTemplateList: boolean;
     searchName: string;
     onSearchName: import("react").Dispatch<import("react").SetStateAction<string>>;
-    form: import("antd").FormInstance<any>;
+    searchNameProps: {
+        onSearch: import("react").Dispatch<import("react").SetStateAction<string>>;
+        onScrollToBottom: () => void;
+        isLoading: boolean;
+        validateName: (rule: RuleObject, value: any) => Promise<void>;
+    };
+    form: import("antd").FormInstance<FormValue>;
     errors: any[] | undefined;
-    refetchCategoryList: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<TemplateCategory[], any>>;
-    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("../../../../models/ObjectTemplate").ObjectTemplate>>, any>>;
+    refetchCategoryList: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<TemplateCategory[], any>>;
+    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("../../../../models/ObjectTemplate").ObjectTemplate>>, any>>;
     onLoadMore: () => void;
     onChange: (newValue: Partial<TemplateValueOptions>) => void;
 };