@antscorp/antsomi-ui 1.3.5-beta.2 → 1.3.5-beta.21

package/es/components/template/TemplateListing/components/CategoryListing/styled.d.ts

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 export declare const MenuWrapper: import("styled-components").StyledComponent<"div", any, {
     $width?: number | undefined;
 }, never>;
 export declare const CustomLabelStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CustomRootLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TextWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;

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

@@ -1,22 +1,47 @@
+var _a, _b;
 import styled from 'styled-components';
+import { Typography } from '../../../../atoms';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+const { Text } = Typography;
 export const MenuWrapper = styled.div `
-  width: ${({ $width }) => ($width !== undefined ? `${$width}px` : 'auto')} !important;
+  flex-shrink: 0;
+  width: ${({ $width }) => ($width !== undefined ? `${$width}px` : 'auto')};
   overflow: auto;
+  overflow-x: hidden;
 
   .antsomi-menu {
     height: 100%;
 
-    .antsomi-menu-submenu {
-      .antsomi-menu-submenu-title,
-      .antsomi-menu-item {
-        padding-left: 10px !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 {
+        height: 100%;
       }
     }
   }
+
+  .category-loading {
+    height: 100%;
+  }
+
+  .empty-wrapper {
+    width: 100%;
+    height: 100%;
+    border-right: 1px solid rgba(5, 5, 5, 0.06);
+    box-sizing: border-box;
+  }
 `;
 export const CustomLabelStyled = styled.div `
   display: flex;
   justify-content: space-between;
+  height: 100%;
+  align-items: center;
 
   .label {
     flex: 1 1 0%;
@@ -44,12 +69,24 @@ export const CustomLabelStyled = styled.div `
     flex-shrink: 0;
     font-size: 11px;
     font-weight: 400;
-    color: #595959;
+    color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+    line-height: 1 !important;
+    height: fit-content;
   }
 `;
 // TODO: tách class dùng chung
 export const CustomRootLabel = styled.div `
   font-size: 11px;
   font-weight: 400;
-  color: #595959;
+  color: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.bw8};
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding-right: 20px;
+`;
+export const TextWrapper = styled(Text) `
+  max-width: 100%;
+  color: inherit;
+  height: fit-content;
+  font-size: inherit;
 `;

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { MenuProps } from 'antd';
+import { TCategoryItemId } from '../../types';
 export type TMenuItem = Required<MenuProps>['items'][number];
 export type TItem = {
-    key: string;
+    key: TCategoryItemId;
     label: React.ReactNode | string;
     total?: number;
     children?: TItem[];

package/es/components/template/TemplateListing/components/Empty/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { EmptyProps } from '@antscorp/antsomi-ui/es/components/template/TemplateListing/types/Empty';
+export declare const Empty: React.FC<EmptyProps>;

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

@@ -0,0 +1,18 @@
+// Libraries
+import React from 'react';
+// Components
+import { Icon } from '@antscorp/antsomi-ui/es/components';
+import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+// Styled
+import { EmptyIcon, EmptyWrapper } from './styled';
+const { Text } = Typography;
+export const Empty = props => {
+    const { icon, description } = props;
+    return (React.createElement(EmptyWrapper, null,
+        React.createElement(EmptyIcon, { className: "animate__animated animate__tada" }, 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/components/Empty/styled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const EmptyWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const EmptyIcon: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,35 @@
+var _a, _b, _c;
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const EmptyWrapper = styled(Flex) `
+  width: 100%;
+  height: 100%;
+
+  .antsomi-typography {
+    color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+  }
+`;
+EmptyWrapper.defaultProps = {
+    vertical: true,
+    align: 'center',
+    justify: 'center',
+    gap: 15,
+};
+export const EmptyIcon = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  border-radius: 100%;
+  background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw2};
+
+  i {
+    font-size: 24px;
+    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw6};
+  }
+`;

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

@@ -1,3 +1,3 @@
-export { TemplateItem } from './TemplateItem';
 export { BlankTemplate } from './BlankTemplate';
 export { CategoryListing } from './CategoryListing';
+export { Empty } from './Empty';

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

@@ -1,3 +1,3 @@
-export { TemplateItem } from './TemplateItem';
 export { BlankTemplate } from './BlankTemplate';
 export { CategoryListing } from './CategoryListing';
+export { Empty } from './Empty';

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

@@ -1,8 +1,12 @@
-import { BlankTemplateProps, CategoryListingProps, TemplateItemProps, TemplateListingProps } from '../types';
-export declare const TEMPLATE_ITEM_WIDTH = 200;
-export declare const TEMPLATE_ITEM_HEIGHT = 200;
+import { ThumbnailCardProps } from '../../../molecules';
+import { BlankTemplateProps, CategoryListingProps, TemplateListingProps, TemplatesProps } from '../types';
+import { EmptyProps } from '../types/Empty';
 export declare const CATEGORY_LISTING_WITH = 220;
-export declare const TEMPLATE_ITEM_DEFAULT: Omit<TemplateItemProps, 'id'>;
+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 TEMPLATE_ITEM_DEFAULT: Omit<ThumbnailCardProps, 'id'>;
 export declare const BLANK_TEMPLATE_DEFAULT: BlankTemplateProps;
 export declare const CATEGORY_LISTING_DEFAULT: Omit<CategoryListingProps, 'items'>;
 export declare const TEMPLATE_LISTING_DEFAULT: TemplateListingProps;
+export declare const EMPTY_DEFAULT: EmptyProps;
+export declare const TEMPLATES_DEFAULT: TemplatesProps;

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

@@ -1,20 +1,23 @@
-export const TEMPLATE_ITEM_WIDTH = 200;
-export const TEMPLATE_ITEM_HEIGHT = 200;
+/* Variables */
 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;
+/* Default props */
 export const TEMPLATE_ITEM_DEFAULT = {
-    width: TEMPLATE_ITEM_WIDTH,
-    height: TEMPLATE_ITEM_HEIGHT,
     removable: true,
 };
 export const BLANK_TEMPLATE_DEFAULT = { show: false };
 export const CATEGORY_LISTING_DEFAULT = {
     width: CATEGORY_LISTING_WITH,
+    show: true,
     checkedCategories: {},
     onMenuChange: () => { },
 };
 export const TEMPLATE_LISTING_DEFAULT = {
-    templateItems: [],
-    categoryItems: [],
     templateItemProps: TEMPLATE_ITEM_DEFAULT,
     blankTemplateProps: BLANK_TEMPLATE_DEFAULT,
 };
+export const EMPTY_DEFAULT = {
+    description: 'No data',
+};
+export const TEMPLATES_DEFAULT = { items: [] };

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

@@ -0,0 +1 @@
+export * from './useTemplateListing';

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

@@ -0,0 +1 @@
+export * from './useTemplateListing';

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

@@ -0,0 +1,62 @@
+/// <reference types="react" />
+import { TServiceAuth } from '@antscorp/antsomi-ui/es/types';
+import { TCategoryItem, TCheckedCategories, TSelectTemplateAction, TTemplateItem } from '../types';
+import { TTemplateListingConfig } from '@antscorp/antsomi-ui/es/types/templateListing';
+import { TThumbnailCardId } from '../../../molecules/ThumbnailCard';
+import { TemplateCategory } from '@antscorp/antsomi-ui/es/models/TemplateCategory';
+interface TemplateListingOptions {
+    serviceAuth: TServiceAuth;
+    config: TTemplateListingConfig;
+    checkedCategoriesDefault?: TCheckedCategories;
+}
+type TState = {
+    checkedCategories: TCheckedCategories;
+    openCategoryKeys: string[];
+    selectedTemplateId?: TThumbnailCardId;
+    selectTemplateAction?: TSelectTemplateAction;
+};
+/**
+ * Custom React Hook for managing state and data fetching logic related to a template listing.
+ *
+ * @param {Object} options - The options object for configuring the hook.
+ * @param {PayloadInfo} options.service - Payload information for making API requests.
+ * @param {TTemplateListingConfig} options.config - Configuration options for the template listing.
+ *
+ * @returns {Object} - An object containing various properties and functions for template listing management.
+ *
+ * @property {TCategoryItem[]} categoryItems - An array of category items for rendering the template listing's category structure.
+ * @property {TTemplateItem[]} templateItems - An array of template items representing the templates available for the specified configuration.
+ * @property {string[]} openCategoryKeys - An array of keys representing the currently open category items in the template listing.
+ * @property {TCheckedCategories} checkedCategories - An object containing information about the checked categories in the template listing.
+ * @property {boolean} isLoading - A boolean indicating whether data is currently being loaded.
+ *
+ * @property {Function} onChangeCheckedCategories - A function to update the checked categories in the template listing.
+ * @param {TCheckedCategories} checkedCategories - An object containing information about the checked categories.
+ *
+ * @property {Function} onChangeOpenCategoryKeys - A function to update the open category keys in the template listing.
+ * @param {string[]} openKeys - An array of keys representing the currently open category items.
+ *
+ * @property {Function} onLoadMore - A function to load more template data when scrolling in the template listing.
+ */
+export declare const useTemplateListing: (options: TemplateListingOptions) => {
+    categoryItems: TCategoryItem[];
+    templateItems: TTemplateItem[];
+    openCategoryKeys: string[];
+    similarTemplates: TTemplateItem[];
+    templateDetail: import("../../../../models/ObjectTemplate").ObjectTemplate | undefined;
+    checkedCategories: TCheckedCategories;
+    selectTemplateAction: TSelectTemplateAction | undefined;
+    isLoadingCategoryList: boolean;
+    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>>;
+    onChangeCheckedCategories: (checkedCategories: TCheckedCategories) => void;
+    onChangeOpenCategoryKeys: (openKeys: string[]) => void;
+    onRemoveObjectTemplate: (id: TThumbnailCardId) => void;
+    onLoadMore: () => void;
+    onSelectTemplate: (id: TThumbnailCardId, action: TSelectTemplateAction) => void;
+    onClosePreviewModal: () => void;
+    setState: import("react").Dispatch<import("react").SetStateAction<TState>>;
+};
+export {};

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

@@ -0,0 +1,206 @@
+// Libraries
+import { useCallback, useMemo, useState } from 'react';
+import { App } from 'antd';
+import { isEmpty } from 'lodash';
+import { useGetTemplateCategoryList, useGetObjectTemplateList, useBulkUpdateTemplate, useGetObjectTemplateDetail, } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
+// Locales
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Hooks
+import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+// Constants
+import { CATEGORY_SPLIT_KEY, TEMPLATE_STATUS, } from '@antscorp/antsomi-ui/es/constants/templateListing';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+import { getShuffleArray } from '@antscorp/antsomi-ui/es/utils';
+/**
+ * Custom React Hook for managing state and data fetching logic related to a template listing.
+ *
+ * @param {Object} options - The options object for configuring the hook.
+ * @param {PayloadInfo} options.service - Payload information for making API requests.
+ * @param {TTemplateListingConfig} options.config - Configuration options for the template listing.
+ *
+ * @returns {Object} - An object containing various properties and functions for template listing management.
+ *
+ * @property {TCategoryItem[]} categoryItems - An array of category items for rendering the template listing's category structure.
+ * @property {TTemplateItem[]} templateItems - An array of template items representing the templates available for the specified configuration.
+ * @property {string[]} openCategoryKeys - An array of keys representing the currently open category items in the template listing.
+ * @property {TCheckedCategories} checkedCategories - An object containing information about the checked categories in the template listing.
+ * @property {boolean} isLoading - A boolean indicating whether data is currently being loaded.
+ *
+ * @property {Function} onChangeCheckedCategories - A function to update the checked categories in the template listing.
+ * @param {TCheckedCategories} checkedCategories - An object containing information about the checked categories.
+ *
+ * @property {Function} onChangeOpenCategoryKeys - A function to update the open category keys in the template listing.
+ * @param {string[]} openKeys - An array of keys representing the currently open category items.
+ *
+ * @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 { objectType, categoryCodes, publicLevel, limitListPerPage = 10 } = config;
+    const { message } = App.useApp();
+    // Locales
+    const { t } = i18nInstance;
+    // State
+    const [state, setState] = useState({
+        checkedCategories: {},
+        openCategoryKeys: [],
+    });
+    const { checkedCategories, openCategoryKeys, selectedTemplateId, selectTemplateAction } = state;
+    const { data: categoryList, isLoading: isLoadingCategoryList, refetch: refetchCategoryList, } = useGetTemplateCategoryList({
+        args: {
+            auth: serviceAuth,
+            params: {
+                objectTypes: [objectType],
+                categoryCodes,
+                publicLevel,
+            },
+        },
+    });
+    const filter = useDeepCompareMemo(() => {
+        const draftFilter = Object.entries(checkedCategories)
+            .map(([key, value]) => {
+            const category = categoryList === null || categoryList === void 0 ? void 0 : categoryList.find(category => category.categoryCode === key);
+            if (category && !isEmpty(value)) {
+                return {
+                    [key.toUpperCase()]: {
+                        [category.filterOperator || 'matches_any']: value.map(item => +(item.toString().split(CATEGORY_SPLIT_KEY) || [])[1]),
+                    },
+                };
+            }
+            return {};
+        })
+            .filter(filter => !isEmpty(filter));
+        return draftFilter;
+    }, [checkedCategories]);
+    // Queries
+    const { data: infiniteObjectTemplate, isFetchingNextPage, isFetching, hasNextPage, fetchNextPage, refetch: refetchTemplateList, } = useGetObjectTemplateList({
+        args: {
+            auth: serviceAuth,
+            params: {
+                object_type: objectType,
+                public_level: publicLevel,
+                limit: limitListPerPage,
+                filter: JSON.stringify(filter),
+            },
+        },
+    });
+    const { mutateAsync: bulkUpdateTemplate } = useBulkUpdateTemplate({
+        options: {
+            onSuccess: () => {
+                message.success(t(translations.templateListing.removeSuccess));
+            },
+            onError: () => {
+                message.error(t(translations.templateListing.removeFailed));
+            },
+        },
+    });
+    const { data: templateDetail, isLoading: isLoadingTemplateDetail } = useGetObjectTemplateDetail({
+        args: {
+            params: {
+                template_id: selectedTemplateId || '',
+                object_type: objectType,
+                public_level: publicLevel,
+            },
+            auth: serviceAuth,
+        },
+    });
+    // Variables
+    const isLoadingTemplateList = isFetching || isFetchingNextPage;
+    // Memo
+    const categoryItems = useDeepCompareMemo(() => {
+        const recursiveCategory = (categories = [], parentCategoryCode = '') => categories.map(category => {
+            const { categoryCode, categoryId, categoryName, children, total } = category;
+            const key = Array.isArray(children) && children.length
+                ? categoryCode
+                : [parentCategoryCode, categoryId].join(CATEGORY_SPLIT_KEY);
+            return {
+                key,
+                label: categoryName,
+                total,
+                children: recursiveCategory(children || [], categoryCode),
+            };
+        });
+        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 similarTemplates = useMemo(() => {
+        const maxSimilarTemplateLength = 4;
+        return (getShuffleArray(templateItems.filter(item => item.id !== selectedTemplateId)).slice(0, maxSimilarTemplateLength) || []);
+    }, [templateItems, selectedTemplateId]);
+    // Effects
+    useDeepCompareEffect(() => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { openCategoryKeys: (categoryList === null || categoryList === void 0 ? void 0 : categoryList.map(({ categoryCode }) => categoryCode)) || [] })));
+    }, [categoryList]);
+    useDeepCompareEffect(() => {
+        if (!isEmpty(checkedCategoriesDefault)) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { checkedCategories: Object.entries(checkedCategoriesDefault).reduce((acc, curr) => {
+                    const [key, value] = curr;
+                    acc[key] = value.map(item => [key, item].join(CATEGORY_SPLIT_KEY));
+                    return acc;
+                }, {}) || {} })));
+        }
+    }, [checkedCategoriesDefault]);
+    // Handles
+    const onChangeCheckedCategories = (checkedCategories) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { checkedCategories })));
+    };
+    const onChangeOpenCategoryKeys = useCallback((openKeys) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { openCategoryKeys: openKeys })));
+    }, []);
+    const onRemoveObjectTemplate = useCallback((id) => {
+        bulkUpdateTemplate({
+            auth: serviceAuth,
+            params: {
+                template_ids: [+id],
+                data: {
+                    status: TEMPLATE_STATUS.REMOVED,
+                },
+            },
+        });
+    }, [bulkUpdateTemplate, serviceAuth]);
+    const onLoadMore = useCallback(() => {
+        if (!isFetchingNextPage && hasNextPage) {
+            fetchNextPage();
+        }
+    }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
+    const onSelectTemplate = useCallback((id, action) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedTemplateId: id, selectTemplateAction: action })));
+    }, []);
+    const onClosePreviewModal = useCallback(() => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedTemplateId: undefined })));
+    }, []);
+    return {
+        // MapKeys
+        categoryItems,
+        templateItems,
+        openCategoryKeys,
+        similarTemplates,
+        // Values
+        templateDetail,
+        checkedCategories,
+        selectTemplateAction,
+        isLoadingCategoryList,
+        isLoadingTemplateList,
+        isLoadingTemplateDetail,
+        // Functions
+        refetchCategoryList,
+        refetchTemplateList,
+        onChangeCheckedCategories,
+        onChangeOpenCategoryKeys,
+        onRemoveObjectTemplate,
+        onLoadMore,
+        onSelectTemplate,
+        onClosePreviewModal,
+        setState,
+    };
+};

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

@@ -1,22 +1,86 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/* eslint-disable react/function-component-definition */
 // Libraries
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';
 // Components
-import { CategoryListing, TemplateItem, BlankTemplate } from './components';
-import { Flex, Typography } from '../../atoms';
+import { CategoryListing, BlankTemplate, Empty } from './components';
+import { 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, TEMPLATE_ITEM_HEIGHT, TEMPLATE_ITEM_WIDTH, CATEGORY_LISTING_DEFAULT, } from './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 { TemplateListingWrapper } from './styled';
+import { LoadMoreBlock, TemplateListingWrapper } from './styled';
+// Hooks
+import { useIntersectionObserver, useListingItemResize } from '@antscorp/antsomi-ui/es/hooks';
 export const TemplateListing = memo(props => {
-    const { templateItems, categoryItems, templateItemProps = TEMPLATE_ITEM_DEFAULT, blankTemplateProps = BLANK_TEMPLATE_DEFAULT, categoryListingProps = CATEGORY_LISTING_DEFAULT, } = props;
-    const { width = TEMPLATE_ITEM_WIDTH, height = TEMPLATE_ITEM_HEIGHT } = templateItemProps;
+    // 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 _a = previewModalProps || {}, { informationProps, onOk, onCancel } = _a, restOfPreviewModalProps = __rest(_a, ["informationProps", "onOk", "onCancel"]);
+    const _b = informationProps || {}, { onButtonClick } = _b, restOfPreviewModalInfoProps = __rest(_b, ["onButtonClick"]);
+    const _c = templateItemProps || {}, { width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, onClickPreview } = _c, restOfTemplateItemProps = __rest(_c, ["width", "height", "onClickPreview"]);
+    const isHasData = items.length > 0;
+    // Hooks
+    const { ref: containerRef, itemPerRow, ratio, gap: listingGap, } = useListingItemResize({
+        gap,
+        initialWidth: width || THUMBNAIL_CARD_DEFAULT_WIDTH,
+    });
+    const { ref: loadMoreRef } = useIntersectionObserver({
+        threshold: 0,
+        initialIsIntersecting: false,
+        onChange(isIntersecting) {
+            if (isIntersecting) {
+                onLoadMoreTemplates();
+            }
+        },
+    });
+    // Handlers
+    const handleClickThumbnailPreview = (id) => {
+        onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview(id);
+        setOpenPreviewModal(true);
+    };
+    const handleOkPreviewModal = (e) => {
+        onOk === null || onOk === void 0 ? void 0 : onOk(e);
+        setOpenPreviewModal(false);
+    };
+    const handleCancelPreviewModal = (e) => {
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel(e);
+        setOpenPreviewModal(false);
+    };
+    const handleClickPreviewModalInfoBtn = e => {
+        onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick(e);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel(e);
+    };
     return (React.createElement(TemplateListingWrapper, null,
-        React.createElement(CategoryListing, Object.assign({ items: categoryItems }, categoryListingProps, { className: `category-listing ${(categoryListingProps === null || categoryListingProps === void 0 ? void 0 : categoryListingProps.className) || ''}` })),
-        React.createElement(Flex, { gap: 30, wrap: "wrap", style: { padding: '15px' }, className: "template-listing" },
-            React.createElement(BlankTemplate, Object.assign({ width: width, height: height }, blankTemplateProps)), templateItems === null || templateItems === void 0 ? void 0 :
-            templateItems.map(({ key, name, thumbnail }) => (React.createElement(Flex, { key: key, vertical: true, gap: 10 },
-                React.createElement(TemplateItem, Object.assign({ id: key, thumbnail: thumbnail }, templateItemProps)),
-                React.createElement(Typography.Text, { ellipsis: { tooltip: name }, style: { maxWidth: '100%' } }, name)))))));
+        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}`, onClickPreview: handleClickThumbnailPreview }, restOfTemplateItemProps)),
+                        index === items.length - 1 && React.createElement(LoadMoreBlock, { ref: loadMoreRef }))))),
+                !loading && !blankTemplateProps.show && !isHasData && React.createElement(Empty, Object.assign({}, emptyProps)))),
+        React.createElement(PreviewTemplateModal, Object.assign({ informationProps: Object.assign({ onButtonClick: handleClickPreviewModalInfoBtn }, restOfPreviewModalInfoProps), open: openPreviewModal, onOk: handleOkPreviewModal, onCancel: handleCancelPreviewModal }, restOfPreviewModalProps))));
 });
 TemplateListing.displayName = 'TemplateListing';
 TemplateListing.defaultProps = TEMPLATE_LISTING_DEFAULT;

package/es/components/template/TemplateListing/styled/index.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="react" />
 export declare const TemplateListingWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const LoadMoreBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ImageWrapper: import("styled-components").StyledComponent<"img", any, {}, never>;

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

@@ -3,14 +3,38 @@ import styled from 'styled-components';
 // Components
 import { Flex } from '../../../atoms';
 export const TemplateListingWrapper = styled(Flex) `
+  position: relative;
   height: 100%;
 
-  .category-listing {
-    flex-shrink: 0;
-  }
-
   .template-listing {
     flex: 1 1 0%;
-    height: fit-content;
+    height: 100%;
+    max-height: 100%;
+    overflow-y: auto;
+    box-sizing: border-box;
+    padding: 15px;
+
+    &__loading {
+      height: 100%;
+
+      .antsomi-spin-container {
+        height: 100%;
+        width: 100%;
+
+        > div {
+          max-height: 100%;
+        }
+      }
+
+      &--full {
+        width: 100%;
+      }
+    }
   }
 `;
+export const LoadMoreBlock = styled.div ``;
+export const ImageWrapper = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;