@antscorp/antsomi-ui 1.4.2 → 1.4.4

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

@@ -123,7 +123,7 @@ export const TemplateSaveAs = props => {
         form.setFieldValue('categories', newCategory);
         handleChangeValue({ categories: newCategory });
     };
-    return (React.createElement(Form, { form: form, initialValues: initFormValue, colon: false, labelAlign: "left" },
+    return (React.createElement(Form, { form: form, initialValues: initFormValue, colon: false, labelAlign: "left", style: { height: '100%' } },
         React.createElement(TemplateSaveAsStyled, { className: className || '', vertical: true },
             React.createElement(Flex, { className: "save-options-container" },
                 React.createElement(Form.Item, { name: "saveOption", noStyle: true },

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

@@ -132,7 +132,7 @@ export const useTemplateSave = (options) => {
             },
         });
         if (response.existed) {
-            return Promise.reject(new Error('Template name already exists'));
+            return Promise.reject(new Error('This name has already existed'));
         }
         return Promise.resolve();
     }), [objectType, publicLevel, service, validateTemplateName]);

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

@@ -6,6 +6,7 @@ import { Flex } from '@antscorp/antsomi-ui/es/components';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const TemplateSaveAsStyled = styled(Flex) `
   /* max-width: 1177px; */
+  height: 100%;
 
   .save-options-container {
     padding: 15px 0;
@@ -13,6 +14,10 @@ export const TemplateSaveAsStyled = styled(Flex) `
     border-bottom: 1px dashed #e5e5e5;
   }
 
+  div:has(> .template-container) {
+    height: 100%;
+  }
+
   .template-container {
     flex: 1 1 60%;
     max-height: 60vh;
@@ -32,7 +37,7 @@ export const TemplateSaveAsStyled = styled(Flex) `
     flex: 1 1 40%;
     padding-left: 20px;
     margin-left: 5px;
-    max-height: 60vh;
+    /* max-height: 60vh; */
     overflow-y: auto;
     border-left: 1px solid #e5e5e5;
 

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

@@ -28,6 +28,8 @@ 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';
+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"]);
@@ -52,7 +54,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, cacheValue), 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

@@ -163,7 +163,6 @@ export const useTemplateListing = (options) => {
         return recursiveCategory(categoryList || []);
     }, [categoryList]);
     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

@@ -66,23 +66,24 @@ export const TemplateListing = memo(props => {
         React.createElement(CategoryListing, Object.assign({}, categoryListingProps, { emptyProps: emptyProps })),
         React.createElement(TemplateWrapper, { className: wrapperClassName, style: wrapperStyle },
             header,
-            React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading template-listing__loading--full" },
+            React.createElement(Spin, { spinning: loading || !itemPerRow, wrapperClassName: "template-listing__loading template-listing__loading--full" },
                 React.createElement("div", { className: "template-listing" },
                     React.createElement("div", { ref: containerRef, style: {
                             display: 'grid',
                             gap: listingGap,
                             gridTemplateColumns: `repeat(${itemPerRow}, minmax(0, 1fr))`,
                         } },
-                        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 === 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: {
-                                        onClick: handleClickThumbnailPreview,
-                                    } }, restOfTemplateItemProps))));
-                        })),
+                        React.createElement(BlankTemplate, Object.assign({ width: width * ratio, height: height * ratio }, blankTemplateProps)),
+                        !!itemPerRow &&
+                            (items === null || items === void 0 ? void 0 : items.map((item, index) => {
+                                const { id, name, thumbnail } = item || {};
+                                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: {
+                                            onClick: handleClickThumbnailPreview,
+                                        } }, restOfTemplateItemProps))));
+                            }))),
                     !loading && !blankTemplateProps.show && !isHasData && React.createElement(Empty, Object.assign({}, emptyProps)))),
             footer),
         React.createElement(PreviewTemplateModal, Object.assign({ open: openPreviewModal, onOk: handleOkPreviewModal, onCancel: handleCancelPreviewModal }, restOfPreviewModalProps))));

package/es/hooks/useListingItemResize.js

@@ -52,7 +52,7 @@ export const useListingItemResize = (props) => {
         }
         timeoutAfterChange.current = setTimeout(() => {
             forceUpdate();
-        }, 500);
+        }, 200);
     });
     return { ref, itemPerRow, ratio, gap };
 };

package/es/utils/common.d.ts

@@ -58,3 +58,4 @@ export declare const searchParamsToObject: (searchParams?: string) => Record<str
 export declare const getShuffleArray: <T>(array: T[]) => T[];
 export declare const snakeCaseToCamelCase: <T = Record<string, any>>(object: Record<string, any> | Record<string, any>[], recursive?: boolean) => T;
 export declare const camelCaseToSnakeCase: <T = Record<string, any>>(object: Record<string, any>, recursive?: boolean) => T;
+export declare const getUrlNoCache: (url?: string, cacheValue?: number | string) => string | undefined;

package/es/utils/common.js

@@ -409,3 +409,11 @@ export const camelCaseToSnakeCase = (object, recursive = false) => {
     });
     return newObject;
 };
+export const getUrlNoCache = (url = '', cacheValue = 0) => {
+    const urlNoCache = url
+        ? url.includes('nocache') || url.startsWith('data:image')
+            ? url
+            : `${url}?nocache=${cacheValue}`
+        : undefined;
+    return urlNoCache;
+};

package/package.json

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