@antscorp/antsomi-ui 1.4.8 → 1.4.9

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

@@ -1,12 +1,21 @@
+var _a, _b;
 // Libraries
 import styled, { css } from 'styled-components';
 import { Flex } from '@antscorp/antsomi-ui/es/components';
 // Assets
-import SkeletonBg from '@antscorp/antsomi-ui/es/assets/images/skeleton_bg.png';
+import SkeletonBg from '@antscorp/antsomi-ui/es/assets/images/background/skeleton-background.png';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 const backgroundImage = css `
   ${() => css `
-    background: url(${SkeletonBg}) no-repeat center center, #e5e5e5;
-    background-size: contain;
+    &::after {
+      content: '';
+      position: absolute;
+      width: 90%;
+      height: 90%;
+      background: url(${SkeletonBg}) no-repeat center center;
+      background-size: contain;
+      z-index: 0;
+    }
   `}
 `;
 const setWidthHeight = ({ w, h }) => `
@@ -125,7 +134,7 @@ export const ImageSliderStyled = styled(Flex) `
       width: 100%;
       height: 100%;
       background-color: transparent;
-      z-index: 1;
+      z-index: 2;
       transition: background-color 150ms ease-in-out;
     }
 
@@ -137,14 +146,21 @@ export const ImageSliderStyled = styled(Flex) `
   .image-container {
     &--big,
     &--small {
-      background: #e5e5e5;
+      position: relative;
+      box-sizing: border-box;
+      background: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorBgSkeleton};
+      border: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue1_1};
+      border-radius: 5px;
+
       ${centerBlock}
       &:not(.hide-skeleton) {
         ${backgroundImage}
       }
 
       img {
+        position: relative;
         object-fit: contain;
+        z-index: 1;
       }
 
       div:has(> img) {
@@ -169,7 +185,8 @@ export const ImageSliderStyled = styled(Flex) `
       height: 72px;
       flex-shrink: 0;
 
-      border: 2px solid #e5e5e5;
+      /* border: 2px solid #e5e5e5; */
+      border-width: 2px;
       border-radius: 2px;
       user-select: none;
       cursor: pointer;

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,16 +96,27 @@ 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;
+    padding: 0 10px;
     border-radius: 3px;
 
     & > .remove-btn {

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

@@ -29,10 +29,9 @@ import { Button, Flex, Typography, Spin } 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 = 'Edit thumbnail', 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/styled.js

@@ -1,10 +1,13 @@
+var _a, _b;
 // Libraries
 import styled from 'styled-components';
 // Images
 import skeletonBackground from '../../../assets/images/background/skeleton-background.png';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 const THUMBNAIL_CARD_RADIUS = 5;
 export const ThumbnailCardWrapper = styled.div `
-  background-color: #e5e5e5;
+  background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorBgSkeleton};
   padding: 10px;
   border-radius: ${THUMBNAIL_CARD_RADIUS}px;
   position: relative;
@@ -13,6 +16,7 @@ export const ThumbnailCardWrapper = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue1_1};
 
   :hover {
     .center-action {

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/Banner/styled.js

@@ -10,8 +10,9 @@ export const BannerWrapper = styled.div `
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #0000001a;
+  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorBgSkeleton};
   border-radius: ${globalToken.borderRadius}px;
+  border: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1};
 
   ${props => props.$height
     ? css `

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,
@@ -80,7 +82,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/constants/theme.js

@@ -70,6 +70,8 @@ export const THEME = {
         gold1,
         gold6,
         scrollBarSize: '8px',
+        /** Skeleton */
+        colorBgSkeleton: '#FCFDFF',
     },
 };
 THEME.components = {

package/es/utils/common.js

@@ -411,7 +411,7 @@ export const camelCaseToSnakeCase = (object, recursive = false) => {
 };
 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.4.8",
+  "version": "1.4.9",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",