@antscorp/antsomi-ui 1.3.5-beta.38 → 1.3.5-beta.39

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

@@ -22,6 +22,7 @@ export interface TemplateValueOptions {
 }
 export interface ImagePreviewOptions {
     thumbnails: (string | undefined)[];
+    isLoading?: boolean;
     skeleton?: boolean;
     previewNavigation?: boolean;
     slidesPerView?: number;

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

@@ -24,7 +24,7 @@ export const TemplateSaveAs = props => {
     // onNamePopupScroll,
      } = props;
     const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
-    const { thumbnails, skeleton, previewNavigation, slidesPerView, hideThumbnailsList, hideDefaultButton, label: imageReviewLabel, } = imageReview;
+    const { thumbnails, isLoading: isLoadingThumbnail, skeleton, previewNavigation, slidesPerView, hideThumbnailsList, hideDefaultButton, label: imageReviewLabel, } = imageReview;
     const { isLoading, searchValue, label: templateLabel, defaultNewTemplateName, onSearch, onNamePopupScroll, } = templateNamesOptions || {};
     const { label: descriptionLabel, placeholder: descriptionPlaceholder } = descriptionOptions || {};
     const { saveNewText = 'Save as a new media Template', saveExistText = 'Save as an existing media Template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
@@ -118,7 +118,7 @@ export const TemplateSaveAs = props => {
                         imageReviewLabel || 'Thumbnail template',
                         " ",
                         React.createElement("span", null, "*")),
-                    React.createElement(ImageSlider, { thumbnails: thumbnails, skeleton: skeleton, previewNavigation: previewNavigation, slidesPerView: slidesPerView, defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }), hideThumbnailsList: hideThumbnailsList, hideDefaultButton: hideDefaultButton })), categories === null || categories === void 0 ? void 0 :
+                    React.createElement(ImageSlider, { thumbnails: thumbnails, isLoading: isLoadingThumbnail, skeleton: skeleton, previewNavigation: previewNavigation, slidesPerView: slidesPerView, defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }), hideThumbnailsList: hideThumbnailsList, hideDefaultButton: hideDefaultButton })), categories === null || categories === void 0 ? void 0 :
                 categories.map(parentCategory => {
                     var _a, _b, _c;
                     const selectedChildren = (_a = categoriesValue

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

@@ -1,6 +1,7 @@
 import React from 'react';
 interface ImageSliderProps {
     thumbnails: (string | undefined)[];
+    isLoading?: boolean;
     className?: string;
     skeleton?: boolean;
     previewNavigation?: boolean;

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

@@ -3,13 +3,13 @@ import React, { useState, useRef } from 'react';
 import { Image } from 'antd';
 import Icon from '@antscorp/icons';
 // Components
-import { Button, Flex } from '@antscorp/antsomi-ui/es/components';
+import { Button, Flex, Spin } from '@antscorp/antsomi-ui/es/components';
 // Styles
 import { ImageSliderStyled } from './styled';
 import clsx from 'clsx';
 export const ImageSlider = props => {
     var _a, _b;
-    const { thumbnails, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, defaultThumbnail, onSelectDefault, } = props;
+    const { thumbnails, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, defaultThumbnail, onSelectDefault, } = props;
     const sliderContainerRef = useRef(null);
     const thumbnailSelectedRef = useRef(null);
     const [selectedThumbnail, setSelectedThumbnail] = useState(0);
@@ -28,14 +28,9 @@ export const ImageSlider = props => {
     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', {
+        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,
-                // 'image-container--default': isSelectedDefault,
             }) },
             url ? (React.createElement(Image, { preview: false, width: "80%", height: "96%", src: thumbnails[index] })) : null,
             hideDefaultButton ? null : (React.createElement(Button, { className: "set-default-button", onClick: () => {
@@ -45,16 +40,16 @@ export const ImageSlider = props => {
                     }
                 } },
                 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', {
+                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))))),
-        previewNavigation ? (React.createElement(React.Fragment, null,
+            }), 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 ? null : (React.createElement(React.Fragment, 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 },

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

@@ -68,6 +68,20 @@ export const ImageSliderStyled = styled(Flex) `
     }
   }
 
+  .thumbnail-preview-container:has(.antsomi-spin),
+  .thumbnail-slider-container:has(.antsomi-spin) {
+    box-shadow: rgba(159, 180, 180, 0.2) 0px 2px 8px;
+  }
+
+  .thumbnail-preview-container .antsomi-spin,
+  .thumbnail-slider-container .antsomi-spin {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #fcfcfc;
+  }
+
   .thumbnail-preview-container {
     width: 330px;
     overflow-x: scroll;
@@ -79,6 +93,10 @@ export const ImageSliderStyled = styled(Flex) `
     & > div {
       overflow: hidden;
     }
+
+    .antsomi-spin {
+      height: 230px;
+    }
   }
 
   .thumbnail-slider-container {
@@ -86,6 +104,10 @@ export const ImageSliderStyled = styled(Flex) `
     width: 330px;
     overflow-x: scroll;
     scrollbar-width: none;
+
+    .antsomi-spin {
+      height: 72px;
+    }
   }
 
   .image-container {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.38",
+  "version": "1.3.5-beta.39",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",