@antscorp/antsomi-ui 1.3.5-beta.246 → 1.3.5-beta.248

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

@@ -19,13 +19,17 @@ export const TemplateSaveAsStyled = styled(Flex) `
   }
 
   .template-container {
-    flex: 0 0 670px;
+    flex: 1 0 680px;
     /* flex: 1 1 60%; */
     max-height: 60vh;
     padding-right: 28px;
     overflow-y: auto;
   }
 
+  .template-container:has(+ .share-access-container) {
+    flex-grow: 0;
+  }
+
   .categories-container {
     margin-bottom: 20px;
   }
@@ -92,17 +96,28 @@ export const TemplateSaveAsStyled = styled(Flex) `
 
   .category-container {
     flex: 1;
-    display: grid;
-    grid-template-columns: repeat(2, minmax(100px, 250px));
+    display: flex;
+    flex-wrap: wrap;
+    min-width: 510px;
+    max-width: 510px;
+    & > button {
+      height: 36px;
+      box-sizing: border-box;
+      padding: 0 10px;
+    }
+    /* display: grid;
+    grid-template-columns: repeat(2, minmax(100px, 250px)); */
   }
 
   .selected-category {
     /* width: 240px; */
     overflow: hidden;
-    height: 30px;
+    box-sizing: border-box;
+    width: 250px;
+    height: 36px;
     border: 1px solid #b8cfe6;
-    padding: 0 5px;
     border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadiusXL}px;
+    padding: 0 10px;
 
     & > .remove-btn {
       cursor: pointer;

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

@@ -29,10 +29,9 @@ import { Button, Flex, Spin, Typography } from '../../atoms';
 // Constants
 import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH } from './constants';
 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, 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 { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, thumbnailFit, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, thumbnailCacheValue, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "thumbnailFit", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "thumbnailCacheValue", "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 +59,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: "", style: { objectFit: thumbnailFit }, onError: e => {
+            React.createElement("div", { className: "screen" }, thumbnail && (React.createElement("img", { src: getUrlNoCache(thumbnail, thumbnailCacheValue), alt: "", style: { objectFit: thumbnailFit }, onError: e => {
                     e.currentTarget.style.display = 'none';
                 } }))),
             actionAvailable && !loading && (React.createElement(React.Fragment, null,

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

@@ -22,5 +22,6 @@ export interface ThumbnailCardProps extends Omit<HTMLAttributes<HTMLDivElement>,
     actionAvailable?: boolean;
     removeModalProps?: TRemoveModalProps;
     thumbnailFit?: React.CSSProperties['objectFit'];
+    thumbnailCacheValue?: string | number;
     onClickWrapper?: (id: TThumbnailCardId) => void;
 }

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/index.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { isEmpty } from 'lodash';
 // Components
 import { ThumbnailCard } from '../../../../molecules';
@@ -23,10 +23,12 @@ export const SimilarTemplate = memo(props => {
     var _a;
     const { show = true, similarTemplates = [], similarCardProps } = props;
     const _b = similarCardProps || {}, { width = SIMILAR_CARD_WIDTH_DEFAULT, height = SIMILAR_CARD_HEIGHT_DEFAULT } = _b, restOfSimilarCardProps = __rest(_b, ["width", "height"]);
+    // Memo
+    const thumbnailCacheValue = useMemo(() => new Date().getTime(), []);
     return show && !isEmpty(similarTemplates) ? (React.createElement(SimilarTemplateWrapper, { gap: 15, vertical: true },
         React.createElement("div", { className: "title" }, "Similar templates"),
         React.createElement(TemplateListWrapper, { templateQuantity: MAX_QUANTITY_TEMPLATES }, (_a = similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map((item, idx) => {
             const { id, name, thumbnail } = item || {};
-            return (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id || idx, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false, className: "thumbnail-card" }, restOfSimilarCardProps)));
+            return (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id || idx, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false, className: "thumbnail-card", thumbnailCacheValue: thumbnailCacheValue }, restOfSimilarCardProps)));
         })))) : null;
 });

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/index.js

@@ -44,6 +44,7 @@ export const ThumbnailSlider = memo(props => {
         const calculate = ((thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) || 0) * thumbnailWrapperWidth;
         return calculate > WRAPPER_WIDTH;
     }, [thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length, thumbnailWrapperWidth]);
+    const thumbnailCacheValue = useMemo(() => new Date().getTime(), []);
     // Renders
     const renderThumbnail = (args) => {
         const { thumbnail, index } = args;
@@ -51,7 +52,7 @@ export const ThumbnailSlider = memo(props => {
         return (React.createElement(Flex, { gap: GAP_X },
             !!index && (React.createElement(Flex, { align: "center" },
                 React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: ICON_SIZE, transform: 'rotate(270deg)' } }))),
-            React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, width: width, height: height, thumbnail: url, style: { flexShrink: 0 }, className: "thumbnail-animation", actionAvailable: false, onClickWrapper: () => onClickThumbnail === null || onClickThumbnail === void 0 ? void 0 : onClickThumbnail(thumbnail) }, restOfThumbnailProps))));
+            React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, width: width, height: height, thumbnail: url, thumbnailCacheValue: thumbnailCacheValue, style: { flexShrink: 0 }, className: "thumbnail-animation", actionAvailable: false, onClickWrapper: () => onClickThumbnail === null || onClickThumbnail === void 0 ? void 0 : onClickThumbnail(thumbnail) }, restOfThumbnailProps))));
     };
     return thumbnails && !isEmpty(thumbnails) ? (React.createElement(ThumbnailSliderWrapper, null, isShowSwiper ? (React.createElement(React.Fragment, null,
         React.createElement(Swiper, { slidesPerView: Math.floor(WRAPPER_WIDTH / thumbnailWrapperWidth), spaceBetween: GAP_X, modules: [Navigation, A11y, Thumbs], navigation: {

package/es/components/template/TemplateListing/index.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 /* eslint-disable react/function-component-definition */
 // Libraries
-import React, { memo, useState } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 // Components
 import { CategoryListing, BlankTemplate, Empty } from './components';
 import { Spin } from '@antscorp/antsomi-ui/es/components/atoms';
@@ -35,6 +35,8 @@ export const TemplateListing = memo(props => {
     const _b = templateItemProps || {}, { width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, previewBtnProps } = _b, restOfTemplateItemProps = __rest(_b, ["width", "height", "previewBtnProps"]);
     const { onClick: onClickPreview } = previewBtnProps || {};
     const isHasData = items.length > 0;
+    // Memo
+    const thumbnailCacheValue = useMemo(() => new Date().getTime(), []);
     // Hooks
     const { ref: containerRef, itemPerRow, ratio, gap: listingGap, } = useListingItemResize({
         gap,
@@ -82,7 +84,7 @@ export const TemplateListing = memo(props => {
                                 const loading = typeof (item === null || item === void 0 ? void 0 : item.name) === 'undefined';
                                 return (React.createElement("div", { key: id },
                                     index === items.length - 2 && React.createElement(LoadMoreBlock, { ref: loadMoreRef }),
-                                    React.createElement(ThumbnailCard, Object.assign({ id: id || 0, name: name || 'Untitled', loading: loading, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `${templateItemProps.className}`, previewBtnProps: {
+                                    React.createElement(ThumbnailCard, Object.assign({ id: id || 0, name: name || 'Untitled', loading: loading, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `${templateItemProps.className}`, thumbnailCacheValue: thumbnailCacheValue, previewBtnProps: {
                                             onClick: handleClickThumbnailPreview,
                                         } }, restOfTemplateItemProps))));
                             }))),

package/es/utils/common.js

@@ -477,7 +477,7 @@ export const isExistedImage = (imageUrl) => {
 };
 export const getUrlNoCache = (url = '', cacheValue = 0) => {
     let urlNoCache = url;
-    if (urlNoCache.includes('nocache') || url.startsWith('data:image')) {
+    if (urlNoCache.includes('nocache') || url.startsWith('data:image') || !cacheValue) {
         urlNoCache = url;
     }
     else {

package/package.json

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