@antscorp/antsomi-ui 1.3.5-beta.234 → 1.3.5-beta.236

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

@@ -32,6 +32,7 @@ export const TemplateSaveAs = props => {
     const form = formProps || internalForm;
     const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
     const { label: imageReviewLabel } = imageReview, restImageReviewProps = __rest(imageReview, ["label"]);
+    console.log('🚀 ~ restImageReviewProps:', restImageReviewProps);
     const { isLoading, label: templateLabel, defaultNewTemplateName = `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, selectPlaceholder = 'Please select an item', placeholder = 'Enter your media template name', validateName, onSearch, onNamePopupScroll, onScrollToBottom, } = 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 || {};

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

@@ -4,6 +4,7 @@ interface BigImageProps {
     showSkeleton?: boolean;
     isDefaultThumbnail?: boolean;
     isHideDefaultButton?: boolean;
+    imageFit?: React.CSSProperties['objectFit'];
     index: number;
     onClickDefaultButton?: (index: number) => void;
 }

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

@@ -4,13 +4,13 @@ import { Button } 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, onClickDefaultButton, } = props;
+    const { url, isDefaultThumbnail, isHideDefaultButton, index, showSkeleton, imageFit, onClickDefaultButton, } = 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 })) : null,
+        url ? (React.createElement(Image, { preview: false, width: "100%", height: "100%", src: urlNoCache, style: { objectFit: imageFit } })) : 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.d.ts

@@ -11,6 +11,7 @@ export interface ImageSliderProps {
     imageWidth?: number;
     imageHeight?: number;
     infinity?: boolean;
+    thumbnailFit?: React.CSSProperties['objectFit'];
     /**
      * Default thumbnail - order of default thumbnail in thumbnails array
      */

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

@@ -12,7 +12,7 @@ const ButtonSlider = React.memo(({ direction, type, onClick }) => (React.createE
         : `change-preview-button change-preview-button--${direction}`, onClick: onClick },
     React.createElement(Icon, { type: `icon-ants-angle-${direction}` }))));
 export const ImageSlider = props => {
-    const { thumbnails, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, imageWidth = 330, imageHeight = 230, infinity = true, defaultThumbnail, onSelectDefault, } = props;
+    const { thumbnails, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, imageWidth = 330, imageHeight = 230, infinity = true, defaultThumbnail, thumbnailFit, onSelectDefault, } = props;
     const sliderContainerRef = useRef(null);
     const thumbnailSelectedRef = useRef(null);
     const smallImageWidth = useMemo(() => imageWidth / slidesPerView - (10 * (slidesPerView - 1)) / slidesPerView, [imageWidth, slidesPerView]);
@@ -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, 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 })))))),
+        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, imageFit: thumbnailFit, 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, { imageFit: thumbnailFit, 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

@@ -4,6 +4,7 @@ interface SmallImageProps {
     isSelected?: boolean;
     index: number;
     showSkeleton?: boolean;
+    imageFit?: React.CSSProperties['objectFit'];
     onClick?: (index: number) => void;
 }
 export declare const SmallImage: React.FC<SmallImageProps>;

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

@@ -2,12 +2,12 @@ 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, onClick, showSkeleton } = 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%", 
+    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 })) : null));

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

@@ -32,7 +32,7 @@ import { getUrlNoCache, checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es
 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, 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, thumbnailFit, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "thumbnailFit", "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"]);
@@ -60,7 +60,7 @@ export const ThumbnailCard = memo(props => {
     };
     return (React.createElement(Flex, Object.assign({ gap: 10, vertical: true }, restOfProps, { style: Object.assign({ width }, restOfProps.style) }),
         React.createElement(ThumbnailCardWrapper, { "$showSkeleton": showSkeletonMemo, style: { height, cursor: actionAvailable ? 'default' : 'pointer' }, onClick: handleWrapperClick },
-            React.createElement("div", { className: "screen" }, thumbnail && React.createElement("img", { src: getUrlNoCache(thumbnail, cacheValue), alt: "" })),
+            React.createElement("div", { className: "screen" }, thumbnail && (React.createElement("img", { src: getUrlNoCache(thumbnail, cacheValue), alt: "", style: { objectFit: thumbnailFit } }))),
             actionAvailable && !loading && (React.createElement(React.Fragment, null,
                 React.createElement(Flex, { className: "center-action", align: "center", gap: 10, vertical: true },
                     React.createElement(Button, Object.assign({ type: "primary", className: "animate__animated animate__fadeIn" }, restOfEditBtnProps, { onClick: e => {

package/es/components/molecules/ThumbnailCard/types.d.ts

@@ -1,5 +1,5 @@
 import { ModalFuncProps, ButtonProps } from 'antd';
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 export type TThumbnailCardId = string | number;
 export type TRemoveModalProps = Omit<ModalFuncProps, 'onOk'> & {
     onOk?: (id: TThumbnailCardId) => void;
@@ -21,5 +21,6 @@ export interface ThumbnailCardProps extends Omit<HTMLAttributes<HTMLDivElement>,
     previewBtnProps?: TThumbnailButton;
     actionAvailable?: boolean;
     removeModalProps?: TRemoveModalProps;
+    thumbnailFit?: React.CSSProperties['objectFit'];
     onClickWrapper?: (id: TThumbnailCardId) => void;
 }

package/es/utils/templateListing.js

@@ -13,11 +13,11 @@ export const getCategoriesFromObjectTemplate = (objectTemplate) => {
 export const checkShowSkeletonBaseUrl = (url = '') => {
     if (url.includes('type')) {
         switch (true) {
-            case url.includes('media'):
+            case url.includes('type=media'):
                 return true;
-            case url.includes('email'): {
+            case url.includes('type=email'):
                 return false;
-            }
+            case url.includes('type=tactic'):
             default:
                 return false;
         }

package/package.json

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