@antscorp/antsomi-ui 1.3.5-beta.92 → 1.3.5-beta.921

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

@@ -1,57 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // 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 }) => (_jsx("div", { className: type === 'slider'
+        ? `slider-button slider-button--${direction}`
+        : `change-preview-button change-preview-button--${direction}`, onClick: onClick, children: _jsx(Icon, { type: `icon-ants-angle-${direction}` }) })));
 export const ImageSlider = props => {
-    var _a, _b;
-    const { thumbnails, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, imageWidth = 330, imageHeight = 230, 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 * imageWidth,
-        behavior: 'smooth',
+    const [editingThumbnail, setEditingThumbnail] = useState();
+    const [uploadThumbnail, setUploadThumbnail] = useState();
+    const [latestCanvas, setLatestCanvas] = useState();
+    // Effects
+    useDeepCompareEffect(() => {
+        setDefaultThumbnailInternal(defaultThumbnail || 0);
+    }, [defaultThumbnail]);
+    const handleScroll = useCallback((scrollIndex) => {
+        thumbnailSelectedRef.current?.scrollTo({
+            left: scrollIndex * imageWidth,
+            behavior: 'smooth',
+        });
+        sliderContainerRef.current?.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(() => {
+        const newThumbnails = [...thumbnails];
+        // NOTE: https://konvajs.org/docs/data_and_serialization/High-Quality-Export.html
+        const base64Url = imageResizeRef.current?.getBase64({ pixelRatio: 2.5 }) || '';
+        if (typeof newThumbnails[selectedThumbnail] === 'object' &&
+            newThumbnails[selectedThumbnail]?.url) {
+            newThumbnails[selectedThumbnail].url = base64Url;
+        }
+        else {
+            newThumbnails[selectedThumbnail] = base64Url;
+        }
+        onSaveThumbnail?.({ thumbnails: newThumbnails, thumbnailChange: selectedThumbnail });
+        setLatestCanvas(prev => ({
+            ...prev,
+            [selectedThumbnail]: imageResizeRef.current?.getCurrentState(),
+        }));
+        setEditingThumbnail(undefined);
+        handleSelectThumbnail(selectedThumbnail);
+    }, [handleSelectThumbnail, onSaveThumbnail, selectedThumbnail, thumbnails]);
+    const fileRef = useRef(null);
+    const onImportImageClick = useCallback(() => {
+        fileRef?.current?.click();
+    }, []);
+    const onImportImageSelect = useCallback((e) => {
+        if (e.target.files?.[0]) {
+            if (e.target.files?.[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;
+            }
+            imageResizeRef.current?.replaceImageWithUrl(URL.createObjectURL(e.target.files[0]));
+            setUploadThumbnail(undefined);
+        }
+        e.target.files = new DataTransfer().files;
+    }, []);
+    useDropFile('.image-upload-zone', e => {
+        if (!e?.dataTransfer?.files[0])
+            return;
+        if (e?.dataTransfer?.files[0].size > SIZE_LIMIT) {
+            message.error({
+                content: 'File size too big',
+                style: { fontSize: '12px', fontFamily: 'Roboto' },
+            });
+            return;
+        }
+        imageResizeRef.current?.replaceImageWithUrl(URL.createObjectURL(e?.dataTransfer?.files[0]));
+        setUploadThumbnail(undefined);
     });
-    (_b = sliderContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
-        left: selectedThumbnail * (imageWidth / 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, "$imageWidth": imageWidth, "$imageHeight": imageHeight, 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 || hideThumbnailsList || thumbnails.length <= 1 ? 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 || thumbnails.length <= 1 ? 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)))))),
-        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 || thumbnails.length <= 1 ? 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 ?? uploadThumbnail, [editingThumbnail, uploadThumbnail]);
+    const currentThumbnailUrl = useDeepCompareMemo(() => {
+        const currentThumbnail = thumbnails[currentEditing];
+        return typeof currentThumbnail === 'string' ? currentThumbnail : currentThumbnail?.url || '';
+    }, [currentEditing, thumbnails]);
+    const showSkeletonMemo = useDeepCompareMemo(() => {
+        const currentThumbnail = thumbnails[currentEditing];
+        const showSkeleton = typeof currentThumbnail === 'object' && !isNil(currentThumbnail?.showSkeleton)
+            ? currentThumbnail?.showSkeleton
+            : skeleton !== undefined
+                ? skeleton
+                : checkShowSkeletonBaseUrl(getUrlNoCache(currentThumbnailUrl, timeGenerated));
+        return showSkeleton;
+    }, [currentEditing, currentThumbnailUrl, skeleton, thumbnails, timeGenerated]);
+    const ImageResizeComponent = useFabric ? ImageResizeTuiEditor : ImageResize;
+    return (_jsxs(ImageSliderStyled, { className: className || '', "$skeleton": showSkeletonMemo, "$imageWidth": imageWidth, "$smallImageWidth": smallImageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10, children: [_jsxs(Flex, { vertical: true, style: { zIndex: 25, display: !isNil(currentEditing) ? 'flex' : 'none' }, className: `edit-thumbnail-container ${!isNil(currentEditing) ? 'is-editing' : ''}`, children: [_jsx(ImageResizeComponent, { className: `image-resize-wrapper ${typeof uploadThumbnail === 'number' ? 'visibility-hidden' : ''}`, width: imageWidth, height: imageHeight, ref: imageResizeRef, hideAction: true, imageUrl: latestCanvas?.[currentEditing]
+                            ? undefined
+                            : getUrlNoCache(currentThumbnailUrl, timeGenerated), defaultValue: latestCanvas?.[currentEditing] }), typeof uploadThumbnail !== 'number' ? null : (_jsxs(Flex, { className: `image-upload-zone ${!showSkeletonMemo ? 'hide-skeleton' : ''}`, children: [_jsx(Icon, { type: "icon-ants-upload-fill", style: { fontSize: '40px' } }), _jsxs(Flex, { vertical: true, align: "flex-start", children: [_jsx(Typography.Text, { style: { fontSize: 16, marginBottom: '10px' }, children: "Drag & Drop file here" }), _jsx("input", { type: "file", ref: fileRef, onChange: onImportImageSelect, style: { display: 'none' }, accept: "image/*" }), _jsx(Button, { onClick: onImportImageClick, children: "Browse Image" }), _jsx(Typography.Text, { style: { marginTop: '5px', fontSize: '11px' }, children: "File type: .jpg, .png. File size: under 10MB" })] })] })), _jsxs(Flex, { justify: "center", align: "center", gap: 8, className: "image-resize-action", children: [_jsx(Button, { onClick: handleSaveThumbnail, type: "primary", disabled: uploadThumbnail !== undefined, children: "Save" }), _jsx(Button, { onClick: () => {
+                                    setEditingThumbnail(undefined);
+                                    setUploadThumbnail(undefined);
+                                }, children: "Cancel" })] })] }), _jsx(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef, style: { display: !isNil(currentEditing) ? 'none' : 'flex' }, children: isLoading ? (_jsx(Spin, { spinning: true })) : (thumbnails.map((thumbnail, index) => {
+                    const url = typeof thumbnail === 'string' ? thumbnail : thumbnail?.url || '';
+                    const showSkeleton = typeof thumbnail === 'object' && !isNil(thumbnail?.showSkeleton)
+                        ? thumbnail?.showSkeleton
+                        : skeleton;
+                    return (_jsx(BigImage, { 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);
+                        } }, `image-big_${url}_${index * 2}`));
+                })) }), hideThumbnailsList || thumbnailsQuantity <= 1 ? null : (_jsx(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnailsQuantity < slidesPerView ? 'center' : 'flex-start' }, children: isLoading ? (_jsx(Spin, { spinning: true })) : (thumbnails.map((thumbnail, index) => {
+                    const url = typeof thumbnail === 'string' ? thumbnail : thumbnail?.url || '';
+                    const showSkeleton = typeof thumbnail === 'object' && !isNil(thumbnail?.showSkeleton)
+                        ? thumbnail?.showSkeleton
+                        : skeleton;
+                    return (_jsx(SmallImage, { imageFit: thumbnailFit, showSkeleton: showSkeleton, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail }, `${url}_${index * 2}`));
+                })) })), previewNavigation && !isLoading ? (_jsxs(_Fragment, { children: [_jsx(ButtonSlider, { direction: "left", type: "preview", onClick: handlePrevThumbnail }), _jsx(ButtonSlider, { direction: "right", type: "preview", onClick: handleNextThumbnail })] })) : null, hideThumbnailsList || isLoading || thumbnailsQuantity <= 2 ? null : (_jsxs(_Fragment, { children: [(!infinity && selectedThumbnail !== 0) || infinity ? (_jsx(ButtonSlider, { direction: "left", type: "slider", onClick: handlePrevThumbnail })) : null, (!infinity && selectedThumbnail !== thumbnailsQuantity - 1) || infinity ? (_jsx(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,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 (_jsx("div", { className: `image-container--small ${isSelected ? 'image-container--selected' : ''} ${!showSkeletonMemo ? 'hide-skeleton' : ''}`, onClick: () => onClick && onClick(index), children: url ? (_jsx(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,7 +1,7 @@
 /// <reference types="react" />
 interface ImageSliderStyledProps {
     $skeleton?: boolean;
-    $slidesPerView?: number;
+    $smallImageWidth: number;
     $imageWidth?: number;
     $imageHeight?: number;
 }

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

@@ -1,17 +1,21 @@
 // Libraries
 import styled, { css } from 'styled-components';
-import { Flex } from '@antscorp/antsomi-ui/es/components';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 // 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 +29,67 @@ 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 ${THEME.token?.blue1_1};
+    border-radius: ${THEME.token?.borderRadius}px;
+    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: ${THEME.token?.colorBgSkeleton};
+
+    & > i {
+      color: ${THEME.token?.bw8};
+    }
+
+    & > div > span:last-child {
+      color: ${THEME.token?.bw7};
+    }
+
+    &:not(.hide-skeleton) {
+      background: ${props => props.$skeleton
+    ? `url(${SkeletonBg}) no-repeat center center`
+    : THEME.token?.colorBgSkeleton};
+
+      background-size: 90% 90%;
+    }
+  }
 
   .change-preview-button {
     ${centerBlock}
@@ -68,6 +133,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;
@@ -80,13 +149,20 @@ export const ImageSliderStyled = styled(Flex) `
     background-color: #fcfcfc;
   }
 
+  &:has(.thumbnail-slider-container:hover),
+  &:has(.slider-button:hover) {
+    .slider-button {
+      display: flex;
+    }
+  }
+
   .thumbnail-preview-container {
     width: ${({ $imageWidth }) => `${$imageWidth}px`};
     overflow-x: scroll;
     scrollbar-width: none;
 
     /* NOTE: set border-radius for parent of thumbnail list make better UI when scroll horizontal */
-    border-radius: 5px;
+    border-radius: ${THEME.token?.borderRadius}px;
 
     & > div {
       overflow: hidden;
@@ -108,7 +184,7 @@ export const ImageSliderStyled = styled(Flex) `
     }
   }
 
-  &:has(> .thumbnail-preview-container + .thumbnail-slider-container) {
+  &:has(> .thumbnail-preview-container) {
     .image-container--big::before {
       content: '';
       position: absolute;
@@ -117,7 +193,7 @@ export const ImageSliderStyled = styled(Flex) `
       width: 100%;
       height: 100%;
       background-color: transparent;
-      z-index: 1;
+      z-index: 2;
       transition: background-color 150ms ease-in-out;
     }
 
@@ -129,10 +205,22 @@ export const ImageSliderStyled = styled(Flex) `
   .image-container {
     &--big,
     &--small {
+      position: relative;
+      box-sizing: border-box;
+      background: ${THEME.token?.colorBgSkeleton};
+      border: 1px solid ${THEME.token?.blue1_1};
+      border-radius: ${THEME.token?.borderRadius}px;
+      overflow: hidden;
+
       ${centerBlock}
-      ${backgroundImage}
+      &:not(.hide-skeleton) {
+        ${backgroundImage}
+      }
+
       img {
+        position: relative;
         object-fit: contain;
+        z-index: 1;
       }
 
       div:has(> img) {
@@ -151,12 +239,15 @@ export const ImageSliderStyled = styled(Flex) `
     }
 
     &--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-radius: 2px;
+      /* border: 2px solid #e5e5e5; */
+      border-width: 2px;
+      border-radius: ${THEME.token?.borderRadius}px;
       user-select: none;
       cursor: pointer;
     }
@@ -165,6 +256,15 @@ 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%;
@@ -173,9 +273,15 @@ export const ImageSliderStyled = styled(Flex) `
     z-index: 2;
     opacity: 0;
     transition: opacity 150ms ease-in-out;
+
+    button:not(.antsomi-btn-icon-only) {
+      height: unset !important;
+    }
   }
+
   .image-container--big:hover {
-    .set-default-button {
+    .set-default-button,
+    .default-checkbox {
       opacity: 1;
     }
   }

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,6 +37,7 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
         }>;
     }[];
     templateItems: {
+        [key: string]: any;
         id: string | number;
         label: string;
         thumbnail?: string | undefined;
@@ -55,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;
 };