@antscorp/antsomi-ui 1.3.5-beta.130 → 1.3.5-beta.131

package/es/components/molecules/Tabs/Tabs.d.ts

@@ -1 +1,6 @@
-export { Tabs } from 'antd';
+/// <reference types="react" />
+export declare const Tabs: import("styled-components").StyledComponent<import("react").FC<import("antd").TabsProps> & {
+    TabPane: import("react").FC<import("antd").TabPaneProps>;
+}, any, {
+    shadow?: boolean | undefined;
+}, never>;

package/es/components/molecules/Tabs/Tabs.js

@@ -1 +1,7 @@
-export { Tabs } from 'antd';
+import { Tabs as AntdTabs } from 'antd';
+import styled from 'styled-components';
+export const Tabs = styled(AntdTabs) `
+  > .antsomi-tabs-nav {
+    ${({ shadow }) => (shadow ? 'box-shadow: 0px 3px 3px 0px #002E591A;' : '')}
+  }
+`;

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

@@ -25,12 +25,12 @@ import { Modal } from 'antd';
 // Styled
 import { ThumbnailCardWrapper } from './styled';
 // Components
-import { Button, Flex, Typography } from '../../atoms';
+import { Button, Flex, Typography, Spin } from '../../atoms';
 // Constants
 import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH } from './constants';
 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, removeModalProps, editBtnProps, previewBtnProps, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "removable", "actionAvailable", "showSkeleton", "removeModalProps", "editBtnProps", "previewBtnProps", "onClickWrapper"]);
+    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"]);
     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"]);
@@ -51,7 +51,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": showSkeleton, style: { height, cursor: actionAvailable ? 'default' : 'pointer' }, onClick: handleWrapperClick },
             React.createElement("div", { className: "screen" }, thumbnail && React.createElement("img", { src: thumbnail, alt: "" })),
-            actionAvailable && (React.createElement(React.Fragment, null,
+            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 => {
                             e.stopPropagation();
@@ -66,7 +66,8 @@ export const ThumbnailCard = memo(props => {
                 removable && (React.createElement("div", { className: "top-right-corner-action animate__animated animate__fadeIn" },
                     React.createElement(Button, { type: "primary", icon: React.createElement(Icon, { type: "icon-ants-trash-outline", style: { fontSize: 24, color: '#FFFFFF' } }), onClick: handleRemoveThumbnail }))),
                 React.createElement("div", { className: "backdrop" }),
-                React.createElement("div", null, contextHolder)))),
+                React.createElement("div", null, contextHolder))),
+            loading && React.createElement(Spin, { className: "thumbnail__loading", spinning: true })),
         !!name && (React.createElement(Typography.Text, { ellipsis: { tooltip: name }, style: { maxWidth: '100%' } }, name))));
 });
 ThumbnailCard.displayName = 'ThumbnailCard';

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

@@ -10,6 +10,9 @@ export const ThumbnailCardWrapper = styled.div `
   position: relative;
   box-sizing: border-box;
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   :hover {
     .center-action {
@@ -64,13 +67,11 @@ export const ThumbnailCardWrapper = styled.div `
     z-index: 12;
 
     button {
-      background-color: black;
-      opacity: 0.4;
+      background: #00000040;
 
       :hover {
         background: none !important;
         background-color: black !important;
-        opacity: 0.5;
       }
     }
   }
@@ -87,4 +88,8 @@ export const ThumbnailCardWrapper = styled.div `
     top: 0;
     left: 0;
   }
+
+  .thumbnail__loading {
+    position: absolute;
+  }
 `;

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

@@ -16,6 +16,7 @@ export interface ThumbnailCardProps extends Omit<HTMLAttributes<HTMLDivElement>,
     thumbnail?: string;
     removable?: boolean;
     showSkeleton?: boolean;
+    loading?: boolean;
     editBtnProps?: TThumbnailButton;
     previewBtnProps?: TThumbnailButton;
     actionAvailable?: boolean;

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

@@ -122,6 +122,6 @@ export const CategoryListing = memo(props => {
     }, [getItem, items]);
     return show ? (React.createElement(MenuWrapper, { "$width": width },
         React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading" }, isEmpty(menuItems) && !loading ? (React.createElement("div", { className: "empty-wrapper" },
-            React.createElement(Empty, Object.assign({}, emptyProps)))) : (React.createElement(Menu, Object.assign({ items: menuItems, inlineIndent: 0, mode: "inline", defaultOpenKeys: items === null || items === void 0 ? void 0 : items.map(item => String(item.key)), expandIcon: React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 20, color: (_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }), onClick: handleClickMenu }, restOfProps)))))) : null;
+            React.createElement(Empty, Object.assign({}, emptyProps)))) : (React.createElement(Menu, Object.assign({ selectedKeys: [], items: menuItems, inlineIndent: 0, mode: "inline", defaultOpenKeys: items === null || items === void 0 ? void 0 : items.map(item => String(item.key)), expandIcon: React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 20, color: (_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }), onClick: handleClickMenu }, restOfProps)))))) : null;
 });
 CategoryListing.displayName = 'CategoryListing';

package/es/components/template/TemplateListing/hooks/useTemplateListing.d.ts

@@ -9,11 +9,27 @@ interface TemplateListingOptions {
     config: TTemplateListingConfig;
     checkedCategoriesDefault?: TCheckedCategories;
 }
+/**
+ * Represents the state of a system with generic data types.
+ * @template T - The type of data contained in the state.
+ */
 type TState<T> = {
+    /** An object representing the checked categories. */
     checkedCategories: TCheckedCategories;
+    /** An array containing keys of open categories. */
     openCategoryKeys: string[];
+    /** An optional ID representing the selected template. */
     selectedTemplateId?: TThumbnailCardId;
+    /**
+     * An optional action related to selecting a template.
+     * This can be of type `TSelectTemplateAction` or any other custom type `T`.
+     */
     selectTemplateAction?: TSelectTemplateAction | T;
+    /**
+     * Mock template items are intended to show fake data in the UI first.
+     * After the template items are loaded, they will be mapped to these MockItems. The purpose is to increase user experience
+     */
+    mockTemplateItems: (TTemplateItem | undefined)[];
 };
 /**
  * Custom React Hook for managing state and data fetching logic related to a template listing.
@@ -40,9 +56,9 @@ type TState<T> = {
  */
 export declare const useTemplateListing: <T = undefined>(options: TemplateListingOptions) => {
     categoryItems: TCategoryItem[];
-    templateItems: TTemplateItem[];
+    templateItems: (TTemplateItem | undefined)[];
     openCategoryKeys: string[];
-    similarTemplates: TTemplateItem[];
+    similarTemplates: (TTemplateItem | undefined)[];
     templateDetail: import("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate | undefined;
     checkedCategories: TCheckedCategories;
     selectTemplateAction: TSelectTemplateAction | T | undefined;

package/es/components/template/TemplateListing/hooks/useTemplateListing.js

@@ -44,8 +44,9 @@ export const useTemplateListing = (options) => {
     const [state, setState] = useState({
         checkedCategories: {},
         openCategoryKeys: [],
+        mockTemplateItems: Array.from({ length: limitListPerPage }).map(() => undefined),
     });
-    const { checkedCategories, openCategoryKeys, selectedTemplateId, selectTemplateAction } = state;
+    const { checkedCategories, openCategoryKeys, mockTemplateItems, selectedTemplateId, selectTemplateAction, } = state;
     const { data: categoryList, isLoading: isLoadingCategoryList, refetch: refetchCategoryList, } = useGetTemplateCategoryList({
         args: {
             auth: serviceAuth,
@@ -81,17 +82,19 @@ export const useTemplateListing = (options) => {
         }
         return draftFilter;
     }, [checkedCategories, channel]);
+    // Variables
+    const getTemplateListParams = {
+        object_type: objectType,
+        public_level: publicLevel,
+        get_list_type: getListType,
+        limit: limitListPerPage,
+        filter: JSON.stringify(filter),
+    };
     // Queries
     const { data: infiniteObjectTemplate, isFetchingNextPage, isFetching, hasNextPage, fetchNextPage, refetch: refetchTemplateList, } = useGetObjectTemplateList({
         args: {
             auth: serviceAuth,
-            params: {
-                object_type: objectType,
-                public_level: publicLevel,
-                get_list_type: getListType,
-                limit: limitListPerPage,
-                filter: JSON.stringify(filter),
-            },
+            params: getTemplateListParams,
         },
     });
     const { mutateAsync: bulkUpdateTemplate } = useBulkUpdateTemplate({
@@ -124,6 +127,10 @@ export const useTemplateListing = (options) => {
     // Variables
     const isLoadingTemplateList = isFetching || isFetchingNextPage;
     // Memo
+    const flatTemplateItems = useDeepCompareMemo(() => {
+        const { pages } = infiniteObjectTemplate || {};
+        return pages === null || pages === void 0 ? void 0 : pages.flatMap(({ entities }) => entities.flatMap(entity => entity.toJson()));
+    }, [infiniteObjectTemplate]);
     const templateDetail = useDeepCompareMemo(() => {
         if (infiniteObjectTemplate && selectedTemplateId) {
             return infiniteObjectTemplate.pages
@@ -147,16 +154,10 @@ export const useTemplateListing = (options) => {
         });
         return recursiveCategory(categoryList || []);
     }, [categoryList]);
-    const templateItems = useMemo(() => {
-        if (infiniteObjectTemplate) {
-            const { pages } = infiniteObjectTemplate;
-            return pages.flatMap(({ entities }) => entities.flatMap(entity => entity.toJson()));
-        }
-        return [];
-    }, [infiniteObjectTemplate]);
+    const templateItems = useMemo(() => mockTemplateItems.map((_, index) => flatTemplateItems === null || flatTemplateItems === void 0 ? void 0 : flatTemplateItems[index]) || [], [flatTemplateItems, mockTemplateItems]);
     const similarTemplates = useMemo(() => {
         const maxSimilarTemplateLength = 4;
-        return (getShuffleArray(templateItems.filter(item => item.id !== selectedTemplateId)).slice(0, maxSimilarTemplateLength) || []);
+        return (getShuffleArray(templateItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== selectedTemplateId)).slice(0, maxSimilarTemplateLength) || []);
     }, [templateItems, selectedTemplateId]);
     const previewTemplateCategories = useDeepCompareMemo(() => {
         if ((categoryItems === null || categoryItems === void 0 ? void 0 : categoryItems.length) && !!templateDetail) {
@@ -181,6 +182,15 @@ export const useTemplateListing = (options) => {
         return [];
     }, [categoryItems, templateDetail]);
     // Effects
+    /**
+     * This effect will check flatTemplateItems length from api is not equal mockTemplateItems length
+     * Then set MockTemplateItems length equal flatTemplateItems
+     */
+    useDeepCompareEffect(() => {
+        if (flatTemplateItems && (flatTemplateItems === null || flatTemplateItems === void 0 ? void 0 : flatTemplateItems.length) !== (mockTemplateItems === null || mockTemplateItems === void 0 ? void 0 : mockTemplateItems.length)) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { mockTemplateItems: Array.from({ length: flatTemplateItems === null || flatTemplateItems === void 0 ? void 0 : flatTemplateItems.length }) })));
+        }
+    }, [flatTemplateItems]);
     useDeepCompareEffect(() => {
         setState(prev => (Object.assign(Object.assign({}, prev), { openCategoryKeys: (categoryList === null || categoryList === void 0 ? void 0 : categoryList.map(({ categoryCode }) => categoryCode)) || [] })));
     }, [categoryList]);
@@ -212,10 +222,25 @@ export const useTemplateListing = (options) => {
         });
     }, [bulkUpdateTemplate, serviceAuth]);
     const onLoadMore = useCallback(() => {
+        var _a;
+        const { pages } = infiniteObjectTemplate || {};
+        const totalTemplateItems = ((_a = pages === null || pages === void 0 ? void 0 : pages[0].meta) === null || _a === void 0 ? void 0 : _a.totalItems) || 0;
+        const newMockItemLength = Math.min(totalTemplateItems, mockTemplateItems.length + limitListPerPage);
+        // If there is no more data, return
+        if (newMockItemLength > totalTemplateItems)
+            return;
         if (!isFetchingNextPage && hasNextPage) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { mockTemplateItems: Array.from({ length: newMockItemLength }) })));
             fetchNextPage();
         }
-    }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
+    }, [
+        infiniteObjectTemplate,
+        mockTemplateItems.length,
+        limitListPerPage,
+        isFetchingNextPage,
+        hasNextPage,
+        fetchNextPage,
+    ]);
     const onSelectTemplate = useCallback((id, action) => {
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedTemplateId: id, selectTemplateAction: action })));
     }, []);

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

@@ -72,11 +72,15 @@ export const TemplateListing = memo(props => {
                         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(({ id, name, thumbnail }, index) => (React.createElement("div", { key: id },
-                        React.createElement(ThumbnailCard, Object.assign({ id: id, name: name, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `animate__animated animate__fadeIn ${templateItemProps.className}`, previewBtnProps: {
-                                onClick: handleClickThumbnailPreview,
-                            } }, restOfTemplateItemProps)),
-                        index === items.length - 1 && React.createElement(LoadMoreBlock, { ref: loadMoreRef }))))),
+                    items.map((item, index) => {
+                        const { id, name, thumbnail } = item || {};
+                        const loading = typeof item === '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))));
+                    })),
                 !loading && !blankTemplateProps.show && !isHasData && React.createElement(Empty, Object.assign({}, emptyProps)))),
         React.createElement(PreviewTemplateModal, Object.assign({ open: openPreviewModal, onOk: handleOkPreviewModal, onCancel: handleCancelPreviewModal }, restOfPreviewModalProps))));
 });

package/es/components/template/TemplateListing/types/TemplateListing.d.ts

@@ -13,7 +13,7 @@ export interface TemplateListingProps<T = {}> {
     previewModalProps?: PreviewTemplateModalProps;
 }
 export type TemplatesProps<T = {}> = {
-    items?: (TTemplateItem & T)[];
+    items?: ((TTemplateItem & T) | undefined)[];
     loading?: boolean;
     gap?: number;
     onLoadMoreTemplates?: () => void;

package/es/constants/theme.js

@@ -1,4 +1,4 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
 // Types
 import { theme } from 'antd';
 // Variables
@@ -138,6 +138,8 @@ THEME.components = {
     },
     Checkbox: {
         controlInteractiveSize: 18,
+        colorBorder: (_s = THEME.token) === null || _s === void 0 ? void 0 : _s.colorPrimary,
+        lineWidth: 2,
     },
     Modal: {
         titleFontSize: 16,
@@ -148,7 +150,7 @@ THEME.components = {
         paddingMD: 0,
     },
     Tabs: {
-        itemColor: (_s = THEME.token) === null || _s === void 0 ? void 0 : _s.bw8,
+        itemColor: (_t = THEME.token) === null || _t === void 0 ? void 0 : _t.bw8,
         horizontalItemPadding: '17px 30px',
         horizontalItemGutter: 0,
         lineWidthBold: 3,
@@ -163,11 +165,14 @@ THEME.components = {
         headerPadding: '15px 10px',
     },
     Switch: {
-        colorTextQuaternary: (_t = THEME.token) === null || _t === void 0 ? void 0 : _t.bw0,
-        colorTextTertiary: (_u = THEME.token) === null || _u === void 0 ? void 0 : _u.bw0,
+        colorTextQuaternary: (_u = THEME.token) === null || _u === void 0 ? void 0 : _u.bw0,
+        colorTextTertiary: (_v = THEME.token) === null || _v === void 0 ? void 0 : _v.bw0,
         handleSize: 12,
         handleSizeSM: 7,
         trackMinWidth: 30,
-        handleBg: (_v = THEME.token) === null || _v === void 0 ? void 0 : _v.colorPrimary,
+        handleBg: (_w = THEME.token) === null || _w === void 0 ? void 0 : _w.colorPrimary,
+    },
+    Menu: {
+        itemHoverBg: '#F2F9FF',
     },
 };

package/package.json

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