@antscorp/antsomi-ui 1.3.5-beta.230 → 1.3.5-beta.232

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

@@ -1,6 +1,7 @@
 import React from 'react';
 interface BigImageProps {
     url?: string;
+    showSkeleton?: boolean;
     isDefaultThumbnail?: boolean;
     isHideDefaultButton?: boolean;
     index: number;

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

@@ -2,8 +2,9 @@ import React, { useMemo } from 'react';
 import { Image } from 'antd';
 import { Button } from '@antscorp/antsomi-ui/es/components';
 import Icon from '@antscorp/icons';
+import { checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es/utils';
 export const BigImage = React.memo(props => {
-    const { url, isDefaultThumbnail, isHideDefaultButton, index, onClickDefaultButton } = props;
+    const { url, isDefaultThumbnail, isHideDefaultButton, index, showSkeleton, onClickDefaultButton, } = props;
     const currentTime = useMemo(() => new Date(), []);
     const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
     const urlNoCache = url
@@ -11,8 +12,9 @@ export const BigImage = React.memo(props => {
             ? url
             : `${url}?nocache=${timeGenerated}`
         : undefined;
-    return (React.createElement("div", { className: "image-container--big" },
-        url ? (React.createElement(Image, { preview: false, width: "80%", height: "96%", src: urlNoCache })) : null,
+    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 })) : null,
         isHideDefaultButton ? null : (React.createElement(Button, { className: "set-default-button", onClick: () => onClickDefaultButton && onClickDefaultButton(index) },
             isDefaultThumbnail ? React.createElement(Icon, { type: "icon-ants-check", style: { fontSize: '12px' } }) : null,
             isDefaultThumbnail ? 'Default thumbnail' : 'Set as default'))));

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

@@ -55,8 +55,8 @@ export const ImageSlider = props => {
         }
     }, [onSelectDefault]);
     return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$imageWidth": imageWidth, "$smallImageWidth": smallImageWidth, "$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(BigImage, { key: `image-big_${url}_${index * 2}`, url: url, index: index, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnails.length <= 1, onClickDefaultButton: handleClickDefault }))))),
-        hideThumbnailsList || thumbnails.length <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnails.length < slidesPerView ? 'center' : 'flex-start' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(SmallImage, { key: `${url}_${index * 2}`, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail })))))),
+        React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(BigImage, { key: `image-big_${url}_${index * 2}`, url: url, index: index, showSkeleton: skeleton, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnails.length <= 1, onClickDefaultButton: handleClickDefault }))))),
+        hideThumbnailsList || thumbnails.length <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnails.length < slidesPerView ? 'center' : 'flex-start' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(SmallImage, { key: `${url}_${index * 2}`, showSkeleton: skeleton, 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,

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

@@ -3,6 +3,7 @@ interface SmallImageProps {
     url?: string;
     isSelected?: boolean;
     index: number;
+    showSkeleton?: boolean;
     onClick?: (index: number) => void;
 }
 export declare const SmallImage: React.FC<SmallImageProps>;

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

@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';
 import { Image } from 'antd';
+import { checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es/utils';
 export const SmallImage = React.memo(props => {
-    const { url, isSelected, index, onClick } = props;
+    const { url, isSelected, index, onClick, showSkeleton } = props;
     const currentTime = useMemo(() => new Date(), []);
     const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
     const urlNoCache = url
@@ -9,7 +10,8 @@ export const SmallImage = React.memo(props => {
             ? url
             : `${url}?nocache=${timeGenerated}`
         : undefined;
-    return (React.createElement("div", { className: `image-container--small ${isSelected ? 'image-container--selected' : ''}`, onClick: () => onClick && onClick(index) }, url ? (React.createElement(Image, { preview: false, width: "80%", height: "96%", 
+    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%", 
         // src={imageUrl}
         // src={url}
         src: urlNoCache })) : null));

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

@@ -4,14 +4,10 @@ import { Flex } from '@antscorp/antsomi-ui/es/components';
 // Assets
 import SkeletonBg from '@antscorp/antsomi-ui/es/assets/images/skeleton_bg.png';
 const backgroundImage = css `
-  ${props => props.$skeleton
-    ? css `
-          background: url(${SkeletonBg}) no-repeat center center, #e5e5e5;
-          background-size: contain;
-        `
-    : css `
-          background: #e5e5e5;
-        `}
+  ${() => css `
+    background: url(${SkeletonBg}) no-repeat center center, #e5e5e5;
+    background-size: contain;
+  `}
 `;
 const setWidthHeight = ({ w, h }) => `
   width: ${w};
@@ -141,8 +137,12 @@ export const ImageSliderStyled = styled(Flex) `
   .image-container {
     &--big,
     &--small {
+      background: #e5e5e5;
       ${centerBlock}
-      ${backgroundImage}
+      &:not(.hide-skeleton) {
+        ${backgroundImage}
+      }
+
       img {
         object-fit: contain;
       }

package/es/components/molecules/ThumbnailCard/ThumbnailCard.js

@@ -28,16 +28,22 @@ import { ThumbnailCardWrapper } from './styled';
 import { Button, Flex, Spin, Typography } from '../../atoms';
 // Constants
 import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH } from './constants';
-import { getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
+import { getUrlNoCache, checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es/utils';
 const cacheValue = new Date().getTime();
 export const ThumbnailCard = memo(props => {
     const [modal, contextHolder] = Modal.useModal();
-    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, removable = true, actionAvailable = true, showSkeleton = true, loading = false, removeModalProps, editBtnProps, previewBtnProps, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "onClickWrapper"]);
+    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "onClickWrapper"]);
     const _a = removeModalProps || {}, { onOk } = _a, restOfRemoveTemplateModalProps = __rest(_a, ["onOk"]);
     const _b = editBtnProps || {}, { text: editText = 'Use template', onClick: onClickEdit } = _b, restOfEditBtnProps = __rest(_b, ["text", "onClick"]);
     const _c = previewBtnProps || {}, { text: previewText = 'Preview', onClick: onClickPreview } = _c, restOfPreviewBtnProps = __rest(_c, ["text", "onClick"]);
     // Memo
-    const showSkeletonMemo = typeof showSkeleton === 'function' ? showSkeleton(props) : showSkeleton;
+    const showSkeletonMemo = 
+    // NOTES: Hot fix for showSkeleton base url if showSkeleton is not defined
+    typeof showSkeleton === 'undefined'
+        ? checkShowSkeletonBaseUrl(thumbnail)
+        : typeof showSkeleton === 'function'
+            ? showSkeleton(props)
+            : showSkeleton;
     // Handlers
     const handleRemoveThumbnail = e => {
         e.stopPropagation();

package/es/utils/templateListing.d.ts

@@ -1,2 +1,3 @@
 import { ObjectTemplate } from '../models/ObjectTemplate';
 export declare const getCategoriesFromObjectTemplate: (objectTemplate: ObjectTemplate) => {};
+export declare const checkShowSkeletonBaseUrl: (url?: string) => boolean;

package/es/utils/templateListing.js

@@ -10,3 +10,5 @@ export const getCategoriesFromObjectTemplate = (objectTemplate) => {
     });
     return categories;
 };
+export const checkShowSkeletonBaseUrl = (url = '') => `${url || ''}`.includes('base64-img') &&
+    ['jn_thumb_', 'v_thumb_'].every(prefix => !`${url || ''}`.includes(prefix));

package/package.json

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