@antscorp/antsomi-ui 1.3.5-beta.98 → 1.3.5-common.2

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

@@ -1,45 +1,64 @@
-var _a, _b;
+var _a;
 import styled from 'styled-components';
 import { Typography } from '../../../../atoms';
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 const { Text } = Typography;
 export const MenuWrapper = styled.div `
+  position: relative;
   flex-shrink: 0;
   width: ${({ $width }) => ($width !== undefined ? `${$width}px` : 'auto')};
   overflow: auto;
   overflow-x: hidden;
   border-right: 1px solid rgba(5, 5, 5, 0.06);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 
-  .antsomi-menu,
-  .ant-menu {
-    [role='menuitem'] {
-      width: 100%;
-      border-radius: 0;
-      height: 30px;
-      padding: 0 10px !important;
-      margin-left: 0 !important;
-      margin-right: 0 !important;
+  .category__listing {
+    position: relative;
+    height: 100%;
+    overflow-y: auto;
 
-      .antsomi-menu-title-content,
-      .ant-menu-title-content {
-        height: 100%;
+    .antsomi-menu,
+    .ant-menu {
+      [role='menu'] {
+        background-color: white !important;
       }
-    }
 
-    .antsomi-menu-submenu-title,
-    .ant-menu-submenu-title {
-      height: 30px !important;
+      [role='menuitem'] {
+        width: 100%;
+        border-radius: 0;
+        height: 30px;
+        padding: 0 10px !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+
+        .antsomi-menu-title-content,
+        .ant-menu-title-content {
+          height: 100%;
+        }
+      }
+
+      .antsomi-menu-submenu-title,
+      .ant-menu-submenu-title {
+        height: 30px !important;
+      }
+
+      .antsomi-menu-submenu-title {
+        margin-top: 10px;
+        margin-bottom: 10px;
+      }
     }
-  }
 
-  .category-loading {
-    height: 100%;
-  }
+    .category-loading {
+      height: 100%;
+    }
 
-  .empty-wrapper {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
+    .empty-wrapper {
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+    }
   }
 `;
 export const CustomLabelStyled = styled.div `
@@ -72,18 +91,18 @@ export const CustomLabelStyled = styled.div `
 
   .total {
     flex-shrink: 0;
-    font-size: 11px;
+    font-size: 13px;
     font-weight: 400;
-    color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
     line-height: 1 !important;
+    font-size: 11px;
     height: fit-content;
   }
 `;
-// TODO: tách class dùng chung
 export const CustomRootLabel = styled.div `
-  font-size: 11px;
+  font-size: 13px !important;
   font-weight: 400;
-  color: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.bw8};
+  /* color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8}; */
   height: 100%;
   display: flex;
   align-items: center;
@@ -91,7 +110,7 @@ export const CustomRootLabel = styled.div `
 `;
 export const TextWrapper = styled(Text) `
   max-width: 100%;
-  color: inherit;
+  color: inherit !important;
   height: fit-content;
-  font-size: inherit;
+  font-size: inherit !important;
 `;

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

@@ -1,5 +1,6 @@
 // Libraries
 import React from 'react';
+import { isString } from 'lodash';
 // Components
 import { Icon } from '@antscorp/antsomi-ui/es/components';
 import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
@@ -7,12 +8,8 @@ import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 import { EmptyIcon, EmptyWrapper } from './styled';
 const { Text } = Typography;
 export const Empty = props => {
-    const { icon, description } = props;
+    const { icon = React.createElement(Icon, { type: "icon-ants-media" }), description = 'No data' } = props;
     return (React.createElement(EmptyWrapper, null,
-        React.createElement(EmptyIcon, { className: "animate__animated animate__tada" }, icon),
+        React.createElement(EmptyIcon, { className: "animate__animated animate__tada" }, isString(icon) ? React.createElement(Icon, { type: icon }) : icon),
         React.createElement(Text, { className: "animate__animated animate__fadeInUp" }, description)));
 };
-Empty.defaultProps = {
-    icon: React.createElement(Icon, { type: "icon-ants-media" }),
-    description: 'No data',
-};

package/es/components/template/TemplateListing/constants/defaultProps.d.ts

@@ -4,6 +4,7 @@ import { EmptyProps } from '../types/Empty';
 export declare const CATEGORY_LISTING_WITH = 220;
 export declare const THUMBNAIL_URL = "https://st-media-template.antsomi.com/base64-img/37563.png";
 export declare const LISTING_GAP_DEFAULT = 30;
+export declare const CATEGORY_DEBOUNCE = 400;
 export declare const TEMPLATE_ITEM_DEFAULT: Omit<ThumbnailCardProps, 'id'>;
 export declare const BLANK_TEMPLATE_DEFAULT: BlankTemplateProps;
 export declare const CATEGORY_LISTING_DEFAULT: Omit<CategoryListingProps, 'items'>;

package/es/components/template/TemplateListing/constants/defaultProps.js

@@ -2,6 +2,7 @@
 export const CATEGORY_LISTING_WITH = 220;
 export const THUMBNAIL_URL = 'https://st-media-template.antsomi.com/base64-img/37563.png';
 export const LISTING_GAP_DEFAULT = 30;
+export const CATEGORY_DEBOUNCE = 400;
 /* Default props */
 export const TEMPLATE_ITEM_DEFAULT = {
     removable: true,

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

@@ -8,12 +8,29 @@ interface TemplateListingOptions {
     serviceAuth: TServiceAuth;
     config: TTemplateListingConfig;
     checkedCategoriesDefault?: TCheckedCategories;
+    templateListingSelector?: string;
 }
+/**
+ * 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,10 +57,10 @@ type TState<T> = {
  */
 export declare const useTemplateListing: <T = undefined>(options: TemplateListingOptions) => {
     categoryItems: TCategoryItem[];
-    templateItems: TTemplateItem[];
+    templateItems: (TTemplateItem | undefined)[];
     openCategoryKeys: string[];
-    similarTemplates: TTemplateItem[];
-    templateDetail: import("../../../../models/ObjectTemplate").ObjectTemplate | undefined;
+    similarTemplates: (TTemplateItem | undefined)[];
+    templateDetail: import("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate | undefined;
     checkedCategories: TCheckedCategories;
     selectTemplateAction: TSelectTemplateAction | T | undefined;
     previewTemplateCategories: TCategoryItem[];
@@ -51,7 +68,7 @@ export declare const useTemplateListing: <T = undefined>(options: TemplateListin
     isLoadingTemplateList: boolean;
     isLoadingTemplateDetail: boolean;
     refetchCategoryList: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<TemplateCategory[], any>>;
-    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("../../../../models/ObjectTemplate").ObjectTemplate>>, any>>;
+    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate>>, any>>;
     onChangeCheckedCategories: (checkedCategories: TCheckedCategories) => void;
     onChangeOpenCategoryKeys: (openKeys: string[]) => void;
     onRemoveObjectTemplate: (id: TThumbnailCardId) => void;

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.
  *
@@ -35,7 +35,7 @@ import { getShuffleArray } from '@antscorp/antsomi-ui/es/utils';
  * @property {Function} onLoadMore - A function to load more template data when scrolling in the template listing.
  */
 export const useTemplateListing = (options) => {
-    const { serviceAuth, config, checkedCategoriesDefault } = options;
+    const { serviceAuth, config, checkedCategoriesDefault, templateListingSelector = '.template-listing', } = options;
     const { objectType, categoryCodes, publicLevel, getListType, channel, limitListPerPage = 10, } = config;
     const { message } = App.useApp();
     // Locales
@@ -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
@@ -133,7 +140,8 @@ export const useTemplateListing = (options) => {
         return undefined;
     }, [infiniteObjectTemplate, selectedTemplateId]);
     const categoryItems = useDeepCompareMemo(() => {
-        const recursiveCategory = (categories = [], parentCategoryCode = '') => categories.map(category => {
+        const recursiveCategory = (categories = [], parentCategoryCode = '') => categories
+            .map(category => {
             const { categoryCode, categoryId, categoryName, children, total } = category;
             const key = Array.isArray(children) && children.length
                 ? categoryCode
@@ -144,23 +152,20 @@ export const useTemplateListing = (options) => {
                 total,
                 children: recursiveCategory(children || [], categoryCode),
             };
+        })
+            .filter(category => {
+            // Filter category has no children and total template is 0
+            if (isEmpty(category.children) && !category.total) {
+                return false;
+            }
+            return true;
         });
         return recursiveCategory(categoryList || []);
     }, [categoryList]);
-    const templateItems = useMemo(() => {
-        if (infiniteObjectTemplate) {
-            const { pages } = infiniteObjectTemplate;
-            return pages.flatMap(({ entities }) => entities.flatMap(({ id, name, thumbnail }) => ({
-                id,
-                name,
-                thumbnail,
-            })));
-        }
-        return [];
-    }, [infiniteObjectTemplate]);
+    const templateItems = useMemo(() => mockTemplateItems.map((_, index) => (flatTemplateItems === null || flatTemplateItems === void 0 ? void 0 : flatTemplateItems[index]) || { id: random(10) }) || [], [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) {
@@ -185,6 +190,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]);
@@ -197,6 +211,16 @@ export const useTemplateListing = (options) => {
                 }, {}) || {} })));
         }
     }, [checkedCategoriesDefault]);
+    /**
+     * When publicLevel or getListType change
+     * Scroll template listing to top
+     */
+    useDeepCompareEffect(() => {
+        const templateListingEl = document.querySelector(templateListingSelector);
+        if (templateListingEl) {
+            templateListingEl.scrollTop = 0;
+        }
+    }, [getListType, publicLevel, objectType]);
     // Handles
     const onChangeCheckedCategories = (checkedCategories) => {
         setState(prev => (Object.assign(Object.assign({}, prev), { checkedCategories })));
@@ -216,10 +240,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

@@ -11,30 +11,29 @@ 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';
+import { Scrollbars, Spin } from '@antscorp/antsomi-ui/es/components/atoms';
 import { ThumbnailCard } from '@antscorp/antsomi-ui/es/components/molecules';
 import { PreviewTemplateModal } from '../../organism/PreviewTemplateModal';
 // Constants
 import { BLANK_TEMPLATE_DEFAULT, TEMPLATE_ITEM_DEFAULT, TEMPLATE_LISTING_DEFAULT, CATEGORY_LISTING_DEFAULT, EMPTY_DEFAULT, TEMPLATES_DEFAULT, LISTING_GAP_DEFAULT, } from './constants';
 import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH, } from '../../molecules/ThumbnailCard/constants';
 // Styled
-import { LoadMoreBlock, TemplateListingWrapper } from './styled';
+import { LoadMoreBlock, TemplateListingWrapper, TemplateWrapper } from './styled';
 // Hooks
 import { useIntersectionObserver, useListingItemResize } from '@antscorp/antsomi-ui/es/hooks';
 export const TemplateListing = memo(props => {
-    // Props
     const { templatesProps = TEMPLATES_DEFAULT, templateItemProps = TEMPLATE_ITEM_DEFAULT, blankTemplateProps = BLANK_TEMPLATE_DEFAULT, categoryListingProps = CATEGORY_LISTING_DEFAULT, emptyProps = EMPTY_DEFAULT, previewModalProps, } = props;
-    // States
     const [openPreviewModal, setOpenPreviewModal] = useState(false);
-    // Variables
-    const { items = [], gap = LISTING_GAP_DEFAULT, loading = false, onLoadMoreTemplates = () => { }, } = templatesProps || {};
+    const { header, footer, items = [], gap = LISTING_GAP_DEFAULT, loading = false, wrapperClassName, wrapperStyle, onLoadMoreTemplates = () => { }, } = templatesProps || {};
     const _a = previewModalProps || {}, { onOk, onCancel } = _a, restOfPreviewModalProps = __rest(_a, ["onOk", "onCancel"]);
     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,
@@ -49,7 +48,6 @@ export const TemplateListing = memo(props => {
             }
         },
     });
-    // Handlers
     const handleClickThumbnailPreview = (id) => {
         onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview(id);
         setOpenPreviewModal(true);
@@ -63,21 +61,29 @@ export const TemplateListing = memo(props => {
         setOpenPreviewModal(false);
     };
     return (React.createElement(TemplateListingWrapper, null,
-        React.createElement(CategoryListing, Object.assign({}, categoryListingProps)),
-        React.createElement(Spin, { spinning: loading, 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(({ 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 }))))),
-                !loading && !blankTemplateProps.show && !isHasData && React.createElement(Empty, Object.assign({}, emptyProps)))),
+        React.createElement(CategoryListing, Object.assign({}, categoryListingProps, { emptyProps: emptyProps })),
+        React.createElement(TemplateWrapper, { className: wrapperClassName, style: wrapperStyle },
+            header,
+            React.createElement(Spin, { spinning: loading || !itemPerRow, wrapperClassName: "template-listing__loading template-listing__loading--full" },
+                React.createElement(Scrollbars, { className: "template-listing" },
+                    React.createElement("div", { className: "template-listing-container", 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)),
+                        !!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}`, thumbnailCacheValue: thumbnailCacheValue, 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))));
 });
 TemplateListing.displayName = 'TemplateListing';

package/es/components/template/TemplateListing/stories/dataTypes/components/BlankTemplatePropsTable/index.js

@@ -2,7 +2,7 @@
 import React from 'react';
 // Components
 import { Table } from '../../../../../../organism';
-import { Typography, Flex } from '../../../../../../atoms';
+import { Typography } from '../../../../../../atoms';
 // Constants
 import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
 // Utils
@@ -12,32 +12,28 @@ export const BlankTemplatePropsTable = () => {
         {
             key: '1',
             property: 'show',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Handler show or hide Blank Template"))),
+            description: React.createElement(Typography.Text, null, "Handler show or hide Blank Template"),
             type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
             default: React.createElement(CustomTag, { type: "default" }, "false"),
         },
         {
             key: '2',
             property: 'description',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "The text that is displayed below the Add Button"))),
+            description: (React.createElement(Typography.Text, null, "The text that is displayed below the Add Button")),
             type: React.createElement(CustomTag, { type: "normal" }, "string"),
             default: React.createElement(CustomTag, { type: "default" }, "Blank Template"),
         },
         {
             key: '3',
             property: 'onClick',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Callback onClick on Blank Template"))),
+            description: React.createElement(Typography.Text, null, "Callback onClick on Blank Template"),
             type: React.createElement(CustomTag, { type: "normal" }, 'React.MouseEventHandler<HTMLElement>'),
             default: React.createElement(CustomTag, { type: "default" }, " - "),
         },
         {
             key: '4',
             property: 'blankTemplateRender',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Render Blank Template node for customizing"))),
+            description: React.createElement(Typography.Text, null, "Render Blank Template node for customizing"),
             type: React.createElement(CustomTag, { type: "normal" }, '(node: ReactNode) => ReactNode'),
             default: React.createElement(CustomTag, { type: "default" }, " - "),
         },

package/es/components/template/TemplateListing/stories/dataTypes/components/CategoryListingPropsTable/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import LinkTo from '@storybook/addon-links/react';
 // Components
 import { Table } from '../../../../../../organism';
-import { Typography, Flex } from '../../../../../../atoms';
+import { Typography } from '../../../../../../atoms';
 // Constants
 import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
 import { CATEGORY_LISTING_WITH } from '../../../../constants';
@@ -14,8 +14,7 @@ export const CategoryListingPropsTable = () => {
         {
             key: '1',
             property: 'items',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "List of category items"))),
+            description: React.createElement(Typography.Text, null, "List of category items"),
             type: (React.createElement(LinkTo, { story: "t-category-item" },
                 React.createElement(CustomTag, { type: "link" }, "TCategoryItem [ ]"))),
             default: React.createElement(CustomTag, { type: "default" }, "[ ]"),
@@ -23,35 +22,52 @@ export const CategoryListingPropsTable = () => {
         {
             key: '2',
             property: 'width',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Width of category"))),
+            description: React.createElement(Typography.Text, null, "Width of category"),
             type: React.createElement(CustomTag, { type: "normal" }, "number"),
             default: React.createElement(CustomTag, { type: "default" }, CATEGORY_LISTING_WITH),
         },
         {
             key: '3',
             property: 'loading',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Show loading category listing"))),
+            description: React.createElement(Typography.Text, null, "Show loading category listing"),
             type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
             default: React.createElement(CustomTag, { type: "default" }, "false"),
         },
         {
             key: '4',
             property: 'show',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Handler show or hide category"))),
+            description: React.createElement(Typography.Text, null, "Handler show or hide category"),
             type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
             default: React.createElement(CustomTag, { type: "default" }, "true"),
         },
         {
             key: '5',
             property: 'checkedCategories',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Record of checked categories"))),
+            description: React.createElement(Typography.Text, null, "Record of checked categories"),
             type: React.createElement(CustomTag, { type: "link" }, "TCheckedCategories"),
             default: React.createElement(CustomTag, { type: "default" }, '{ }'),
         },
+        {
+            key: '6',
+            property: 'debounceChangeMenu',
+            description: React.createElement(Typography.Text, null, "Handle debounce onchange menu function"),
+            type: React.createElement(CustomTag, { type: "normal" }, "number"),
+            default: React.createElement(CustomTag, { type: "default" }, "500"),
+        },
+        {
+            key: '7',
+            property: 'header',
+            description: (React.createElement(Typography.Text, null, "Add custom React Component in to header of category listing")),
+            type: React.createElement(CustomTag, { type: "normal" }, "ReactNode"),
+            default: React.createElement(CustomTag, { type: "default" }, "-"),
+        },
+        {
+            key: '8',
+            property: 'onMenuChange',
+            description: React.createElement(Typography.Text, null, "Onchange menu function"),
+            type: React.createElement(CustomTag, { type: "normal" }, `(value: TCheckedCategories) => void`),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
     ];
     return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
 };

package/es/components/template/TemplateListing/stories/dataTypes/components/EmptyPropsTable/index.js

@@ -2,7 +2,7 @@
 import React from 'react';
 // Components
 import { Table } from '../../../../../../organism';
-import { Typography, Flex } from '../../../../../../atoms';
+import { Typography } from '../../../../../../atoms';
 // Constants
 import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
 // Utils
@@ -12,16 +12,14 @@ export const EmptyPropsTable = () => {
         {
             key: '1',
             property: 'icon',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Customize Empty icon"))),
+            description: React.createElement(Typography.Text, null, "Customize Empty icon"),
             type: React.createElement(CustomTag, { type: "normal" }, "ReactNode"),
             default: React.createElement(CustomTag, { type: "default" }, " - "),
         },
         {
             key: '2',
             property: 'description',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "The text that is displayed below the Icon"))),
+            description: React.createElement(Typography.Text, null, "The text that is displayed below the Icon"),
             type: React.createElement(CustomTag, { type: "normal" }, "string"),
             default: React.createElement(CustomTag, { type: "default" }, "No data"),
         },