@antscorp/antsomi-ui 1.3.5-beta.192 → 1.3.5-beta.194

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

@@ -28,6 +28,7 @@ import { ThumbnailCardWrapper } from './styled';
 import { Button, Flex, Typography, Spin } from '../../atoms';
 // Constants
 import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH } from './constants';
+import { getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
 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"]);
@@ -52,7 +53,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: thumbnail, alt: "" })),
+            React.createElement("div", { className: "screen" }, thumbnail && React.createElement("img", { src: getUrlNoCache(thumbnail), alt: "" })),
             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/template/TemplateListing/hooks/useTemplateListing.js

@@ -10,7 +10,7 @@ import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/e
 // Constants
 import { CATEGORY_SPLIT_KEY, TEMPLATE_STATUS } from '@antscorp/antsomi-ui/es/constants';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
-import { getShuffleArray } from '@antscorp/antsomi-ui/es/utils';
+import { getShuffleArray, random } from '@antscorp/antsomi-ui/es/utils';
 /**
  * Custom React Hook for managing state and data fetching logic related to a template listing.
  *
@@ -162,7 +162,8 @@ export const useTemplateListing = (options) => {
         });
         return recursiveCategory(categoryList || []);
     }, [categoryList]);
-    const templateItems = useMemo(() => mockTemplateItems.map((_, index) => flatTemplateItems === null || flatTemplateItems === void 0 ? void 0 : flatTemplateItems[index]) || [], [flatTemplateItems, mockTemplateItems]);
+    const templateItems = useMemo(() => mockTemplateItems.map((_, index) => (flatTemplateItems === null || flatTemplateItems === void 0 ? void 0 : flatTemplateItems[index]) || { id: random(10) }) || [], [flatTemplateItems, mockTemplateItems]);
+    console.log({ templateItems });
     const similarTemplates = useMemo(() => {
         const maxSimilarTemplateLength = 4;
         return (getShuffleArray(templateItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== selectedTemplateId)).slice(0, maxSimilarTemplateLength) || []);

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

@@ -76,7 +76,7 @@ export const TemplateListing = memo(props => {
                         React.createElement(BlankTemplate, Object.assign({ width: width * ratio, height: height * ratio }, blankTemplateProps)), items === null || items === void 0 ? void 0 :
                         items.map((item, index) => {
                             const { id, name, thumbnail } = item || {};
-                            const loading = typeof item === 'undefined';
+                            const loading = typeof (item === null || item === void 0 ? void 0 : item.name) === 'undefined';
                             return (React.createElement("div", { key: id || index },
                                 index === items.length - 2 && React.createElement(LoadMoreBlock, { ref: loadMoreRef }),
                                 React.createElement(ThumbnailCard, Object.assign({ id: id || index, name: name || 'Untitled', loading: loading, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `${templateItemProps.className}`, previewBtnProps: {

package/es/providers/AntdConfigProviderV2.js

@@ -17,7 +17,7 @@ import { THEME } from '@antscorp/antsomi-ui/es/constants';
 const { getDesignToken } = theme;
 const themeV2 = {
     token: Object.assign(Object.assign({}, THEME.token), { colorText: '#000000', borderRadius: 10, borderRadiusLG: 10 }),
-    components: Object.assign(Object.assign({}, THEME.components), { Button: Object.assign(Object.assign({}, (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Button), { textHoverBg: '#F2F9FF' }) }),
+    components: Object.assign(Object.assign({}, THEME.components), { Button: Object.assign(Object.assign({}, (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Button), { borderRadius: 10, borderRadiusLG: 10, textHoverBg: '#F2F9FF' }) }),
 };
 export const AntdConfigProviderV2 = props => {
     const { children } = props, restProps = __rest(props, ["children"]);

package/es/utils/common.d.ts

@@ -84,3 +84,4 @@ export declare const simplifyString: (str: string) => string;
  */
 export declare const searchStringQuery: (str: string, queryStr: string) => boolean;
 export declare const isExistedImage: (imageUrl: string) => boolean;
+export declare const getUrlNoCache: (url?: string) => string | undefined;

package/es/utils/common.js

@@ -475,3 +475,13 @@ export const isExistedImage = (imageUrl) => {
         return false;
     }
 };
+export const getUrlNoCache = (url = '') => {
+    const currentTime = new Date();
+    const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
+    const urlNoCache = url
+        ? url.includes('nocache') || url.startsWith('data:image')
+            ? url
+            : `${url}?nocache=${timeGenerated}`
+        : undefined;
+    return urlNoCache;
+};

package/package.json

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