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

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

@@ -10,21 +10,33 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { isEmpty, isNumber } from 'lodash';
 import Icon from '@antscorp/icons';
-import { Menu } from 'antd';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import isEqual from 'react-fast-compare';
 // Styled
-import { CustomLabelStyled, CustomRootLabel, MenuWrapper } from './styled';
+import { CustomLabelStyled, CustomRootLabel, MenuWrapper, TextWrapper } from './styled';
 // Components
-import { Checkbox, Typography } from '../../../../atoms';
+import { Checkbox, Spin } from '../../../../atoms';
+import { Menu } from '../../../../organism';
+import { Empty } from '../Empty';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 // Constants
-import { CATEGORY_LISTING_WITH } from '../../constants';
+import { CATEGORY_DEBOUNCE, CATEGORY_LISTING_WITH } from '../../constants';
 const PATH = 'src/components/template/TemplateListing/components/CategoryListing/index.tsx';
 export const CategoryListing = memo(props => {
-    const { width = CATEGORY_LISTING_WITH, items, checkedCategories = {}, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "checkedCategories", "onMenuChange"]);
+    var _a;
+    const { width = CATEGORY_LISTING_WITH, items = [], loading = false, show = true, checkedCategories = {}, emptyProps, debounceChangeMenu = CATEGORY_DEBOUNCE, header, footer, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "loading", "show", "checkedCategories", "emptyProps", "debounceChangeMenu", "header", "footer", "onMenuChange"]);
+    // States
+    const [checkedState, setCheckedState] = useState({});
+    // Side Effects
+    useEffect(() => {
+        setCheckedState(prev => (isEqual(prev, checkedCategories) ? prev : checkedCategories));
+    }, [checkedCategories]);
+    // Ref
+    const timeoutAfterChange = useRef(null);
     // Handlers
     const handleClickMenu = e => {
         var _a;
@@ -32,9 +44,15 @@ export const CategoryListing = memo(props => {
             const { key, keyPath } = e;
             const parentId = keyPath === null || keyPath === void 0 ? void 0 : keyPath[1];
             if (parentId) {
-                const newCheckedCategories = ((_a = checkedCategories === null || checkedCategories === void 0 ? void 0 : checkedCategories[parentId]) === null || _a === void 0 ? void 0 : _a.includes(key))
-                    ? Object.assign(Object.assign({}, checkedCategories), { [parentId]: checkedCategories[parentId].filter(item => item !== key) }) : Object.assign(Object.assign({}, checkedCategories), { [parentId]: [...((checkedCategories === null || checkedCategories === void 0 ? void 0 : checkedCategories[parentId]) || []), key] });
-                onMenuChange === null || onMenuChange === void 0 ? void 0 : onMenuChange(newCheckedCategories);
+                const newCheckedCategories = ((_a = checkedState === null || checkedState === void 0 ? void 0 : checkedState[parentId]) === null || _a === void 0 ? void 0 : _a.includes(key))
+                    ? Object.assign(Object.assign({}, checkedState), { [parentId]: checkedState[parentId].filter(item => item !== key) }) : Object.assign(Object.assign({}, checkedState), { [parentId]: [...((checkedState === null || checkedState === void 0 ? void 0 : checkedState[parentId]) || []), key] });
+                if (timeoutAfterChange) {
+                    setCheckedState(newCheckedCategories);
+                    clearTimeout(timeoutAfterChange.current);
+                }
+                timeoutAfterChange.current = setTimeout(() => {
+                    onMenuChange === null || onMenuChange === void 0 ? void 0 : onMenuChange(newCheckedCategories);
+                }, debounceChangeMenu);
             }
         }
         catch (error) {
@@ -50,12 +68,12 @@ export const CategoryListing = memo(props => {
         var _a;
         try {
             const { key, parentId, label, total } = args;
-            const isChecked = !!(!!parentId && ((_a = checkedCategories === null || checkedCategories === void 0 ? void 0 : checkedCategories[parentId]) === null || _a === void 0 ? void 0 : _a.includes(key)));
-            return (React.createElement(CustomLabelStyled, null,
+            const isChecked = !!(!!parentId && ((_a = checkedState === null || checkedState === void 0 ? void 0 : checkedState[parentId]) === null || _a === void 0 ? void 0 : _a.includes(key)));
+            return (React.createElement(CustomLabelStyled, { onClick: e => e.preventDefault() },
                 React.createElement("div", { className: "label" },
                     React.createElement(Checkbox, { checked: isChecked },
-                        React.createElement(Typography.Text, { style: { maxWidth: '100%' }, ellipsis: { tooltip: label } }, label))),
-                React.createElement("div", { className: "total" }, isNumber(total) ? total : '')));
+                        React.createElement(TextWrapper, { ellipsis: { tooltip: label } }, label))),
+                React.createElement("span", { className: "total" }, isNumber(total) ? total : '')));
         }
         catch (error) {
             handleError(error, {
@@ -65,11 +83,16 @@ export const CategoryListing = memo(props => {
             });
             return null;
         }
-    }, [checkedCategories]);
+    }, [checkedState]);
     const getItem = useCallback((item, isRoot) => {
         try {
             const { key, label, children } = item;
-            return Object.assign(Object.assign(Object.assign({}, item), (isRoot ? { label: React.createElement(CustomRootLabel, null, label) } : {})), { children: !!children && !isEmpty(children)
+            return Object.assign(Object.assign(Object.assign({}, item), (isRoot
+                ? {
+                    label: (React.createElement(CustomRootLabel, null,
+                        React.createElement(TextWrapper, { ellipsis: { tooltip: label } }, label))),
+                }
+                : {})), { children: !!children && !isEmpty(children)
                     ? children === null || children === void 0 ? void 0 : children.map(child => {
                         const childItem = Object.assign(Object.assign({}, child), { parentId: key });
                         return getItem(Object.assign(Object.assign({}, childItem), { label: renderCustomLabel(childItem) }));
@@ -89,15 +112,19 @@ export const CategoryListing = memo(props => {
     const menuItems = useMemo(() => {
         const menuItems = [];
         items === null || items === void 0 ? void 0 : items.forEach((item, index) => {
-            if (index > 0)
-                menuItems.push({ type: 'divider' });
+            // if (index > 0) menuItems.push({ type: 'divider' });
             const menuItem = getItem(Object.assign(Object.assign({}, item), { parentId: null }), true);
             if (menuItem)
                 menuItems.push(menuItem);
         });
         return menuItems;
     }, [getItem, items]);
-    return (React.createElement(MenuWrapper, { "$width": width },
-        React.createElement(Menu, Object.assign({ items: menuItems, inlineIndent: 0, mode: "inline", expandIcon: React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 20, color: '#595959' } }), onClick: handleClickMenu }, restOfProps))));
+    return (show && !isEmpty(menuItems)) || header || loading ? (React.createElement(MenuWrapper, { "$width": width },
+        header,
+        React.createElement("div", { className: "category__listing" },
+            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({ 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))),
+                footer)))) : null;
 });
 CategoryListing.displayName = 'CategoryListing';

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,66 @@
+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;
+  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 {
+  .category__listing {
+    position: relative;
     height: 100%;
+    overflow-y: auto;
+
+    .antsomi-menu,
+    .ant-menu {
+      [role='menu'] {
+        background-color: white !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 {
       .antsomi-menu-submenu-title,
-      .antsomi-menu-item {
-        padding-left: 10px !important;
+      .ant-menu-submenu-title {
+        height: 30px !important;
       }
     }
+
+    .category-loading {
+      height: 100%;
+    }
+
+    .empty-wrapper {
+      width: 100%;
+      height: 100%;
+      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%;
@@ -42,14 +86,25 @@ export const CustomLabelStyled = styled.div `
 
   .total {
     flex-shrink: 0;
-    font-size: 11px;
+    font-size: 13px;
     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-size: 13px !important;
   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 !important;
+  height: fit-content;
+  font-size: inherit !important;
 `;

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,13 @@
-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 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'>;
 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,24 @@
-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;
+export const CATEGORY_DEBOUNCE = 400;
+/* 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,79 @@
+/// <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;
+    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.
+ *
+ * @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: <T = undefined>(options: TemplateListingOptions) => {
+    categoryItems: TCategoryItem[];
+    templateItems: (TTemplateItem | undefined)[];
+    openCategoryKeys: string[];
+    similarTemplates: (TTemplateItem | undefined)[];
+    templateDetail: import("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate | undefined;
+    checkedCategories: TCheckedCategories;
+    selectTemplateAction: TSelectTemplateAction | T | undefined;
+    previewTemplateCategories: TCategoryItem[];
+    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("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate>>, any>>;
+    onChangeCheckedCategories: (checkedCategories: TCheckedCategories) => void;
+    onChangeOpenCategoryKeys: (openKeys: string[]) => void;
+    onRemoveObjectTemplate: (id: TThumbnailCardId) => void;
+    onLoadMore: () => void;
+    onSelectTemplate: (id: TThumbnailCardId, action: TSelectTemplateAction) => void;
+    setState: import("react").Dispatch<import("react").SetStateAction<TState<T>>>;
+};
+export {};