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

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/SimilarTemplatePropsTable/index.js

@@ -0,0 +1,40 @@
+// Libraries
+import React from 'react';
+// Components
+import { Table } from '../../../../../..';
+import { Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const SimilarTemplatePropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'show',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handler show or hide similar template"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, "true"),
+        },
+        {
+            key: '2',
+            property: 'similarTemplates',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "List of similar templates"))),
+            type: (React.createElement("a", { href: "../?path=/docs/templates-templatelisting-datatype--t-template-item", target: "_blank" },
+                React.createElement(CustomTag, { type: "link" }, "TTemplateItem [ ]"))),
+            default: React.createElement(CustomTag, { type: "default" }, " [ ] "),
+        },
+        {
+            key: '3',
+            property: 'similarCardProps',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Custom similar card"))),
+            type: (React.createElement("a", { href: "../?path=/docs/molecules-thumbnailcard--default", target: "_blank" },
+                React.createElement(CustomTag, { type: "link" }, "similarCardProps"))),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/TThumbnailTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TThumbnailTable: React.FC;

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/TThumbnailTable/index.js

@@ -0,0 +1,30 @@
+// Libraries
+import React from 'react';
+// Components
+import { Table } from '../../../../../..';
+import { Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const TThumbnailTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'id',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Identification of thumbnail"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string | number"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '2',
+            property: 'url',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Thumbnail url"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/ThumbnailPropsTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ThumbnailPropsTable: React.FC;

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/ThumbnailPropsTable/index.js

@@ -0,0 +1,46 @@
+// Libraries
+import React from 'react';
+import LinkTo from '@storybook/addon-links/react';
+// Components
+import { Table } from '../../../../../..';
+import { Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const ThumbnailPropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'thumbnails',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Show list thumbnails as a slider"))),
+            type: (React.createElement(LinkTo, { story: "t-thumbnail" },
+                React.createElement(CustomTag, { type: "link" }, "TThumbnail [ ]"))),
+            default: React.createElement(CustomTag, { type: "default" }, "[ ]"),
+        },
+        {
+            key: '2',
+            property: 'onClickThumbnail',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handle click on thumbnail"))),
+            type: (React.createElement(CustomTag, { type: "normal" },
+                `(value: `,
+                React.createElement(LinkTo, { story: "t-thumbnail" },
+                    React.createElement(CustomTag, { type: "link" }, "TThumbnail")),
+                ') => void')),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '3',
+            property: 'ThumbnailCardProps',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Custom thumbnail card"),
+                React.createElement(Typography.Text, null, "Omit id, name, thumbnail, onClickWrapper properties of thumbnail Card Props"))),
+            type: (React.createElement("a", { href: "../?path=/docs/molecules-thumbnailcard--default", target: "_blank" },
+                React.createElement(CustomTag, { type: "link" }, "ThumbnailCardProps"))),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/index.d.ts

@@ -0,0 +1,6 @@
+export { DataTypeTable } from './DataTypeTable';
+export { BannerPropsTable } from './BannerPropsTable';
+export { InformationPropsTable } from './InformationPropsTable';
+export { SimilarTemplatePropsTable } from './SimilarTemplatePropsTable';
+export { ThumbnailPropsTable } from './ThumbnailPropsTable';
+export { TThumbnailTable } from './TThumbnailTable';

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/index.js

@@ -0,0 +1,6 @@
+export { DataTypeTable } from './DataTypeTable';
+export { BannerPropsTable } from './BannerPropsTable';
+export { InformationPropsTable } from './InformationPropsTable';
+export { SimilarTemplatePropsTable } from './SimilarTemplatePropsTable';
+export { ThumbnailPropsTable } from './ThumbnailPropsTable';
+export { TThumbnailTable } from './TThumbnailTable';

package/es/components/organism/PreviewTemplateModal/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ModalContainer: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
+export declare const ModalWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ImageWrapper: import("styled-components").StyledComponent<"img", any, {}, never>;

package/es/components/organism/PreviewTemplateModal/styled.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { Modal } from '../../molecules';
+export const ModalContainer = styled(Modal) `
+  &.antsomi-modal {
+    width: fit-content !important;
+
+    .antsomi-modal-content {
+      width: 1400px;
+      height: auto;
+    }
+  }
+
+  .overview {
+    flex: 1 1 0%;
+  }
+`;
+export const ModalWrapper = styled.div `
+  padding: 20px;
+  width: fit-content;
+  box-sizing: border-box;
+`;
+export const ImageWrapper = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;

package/es/components/organism/PreviewTemplateModal/types.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ThumbnailCardProps } from '../../molecules';
+import { ModalProps } from '../../molecules/Modal';
+import { TTemplateItem, TCategoryItem } from '../../template';
+export type TThumbnail = {
+    id: string | number;
+    url: string;
+};
+export interface PreviewTemplateModalProps extends ModalProps {
+    bannerProps?: Omit<BannerProps, 'deviceType'>;
+    thumbnailProps?: ThumbnailProps;
+    similarTemplateProps?: SimilarTemplateProps;
+    informationProps?: Omit<InformationProps, 'deviceType' | 'onDeviceTypeChange'>;
+}
+export interface BannerProps {
+    deviceType: InformationProps['deviceType'];
+    showSkeleton?: boolean;
+    children?: React.ReactNode;
+}
+export type ThumbnailProps = Omit<ThumbnailCardProps, 'id' | 'name' | 'thumbnail' | 'onClickWrapper'> & {
+    thumbnails?: TThumbnail[];
+    onClickThumbnail?: (value: TThumbnail) => void;
+};
+export interface SimilarTemplateProps {
+    show?: boolean;
+    similarTemplates?: TTemplateItem[];
+    similarCardProps?: Omit<ThumbnailCardProps, 'id' | 'name' | 'thumbnail'>;
+}
+export interface InformationProps {
+    deviceType: string;
+    itemName?: string;
+    categoryListing?: TCategoryItem[];
+    buttonText?: string;
+    description?: string;
+    showDeviceRadios?: boolean;
+    onDeviceTypeChange: (value: string) => void;
+    onButtonClick?: React.MouseEventHandler<HTMLElement>;
+}

package/es/components/organism/PreviewTemplateModal/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+/**
+ *
+ * Asynchronously loads the component for TemplateListing
+ *
+ */
+export declare const TemplateListing: (props: import("@antscorp/antsomi-ui/es/components").TemplateListingProps<{}>) => JSX.Element;

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

@@ -0,0 +1,7 @@
+/**
+ *
+ * Asynchronously loads the component for TemplateListing
+ *
+ */
+import { lazyLoad } from '../../../utils/loadable';
+export const TemplateListing = lazyLoad(() => import('./index'), module => module.TemplateListing);

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

@@ -5,8 +5,10 @@ import Icon from '@antscorp/icons';
 import { Button, Flex, Typography } from '../../../../atoms';
 // Styled
 import { BlankTemplateWrapper } from './styled';
+// Constants
+import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH, } from '@antscorp/antsomi-ui/es/components/molecules/ThumbnailCard/constants';
 export const BlankTemplate = memo(props => {
-    const { width, height, show, description = 'Blank Template', blankTemplateRender, onClick, } = props;
+    const { width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, show, description = 'Blank Template', blankTemplateRender, onClick, } = props;
     const BlankTemplateNode = (React.createElement(BlankTemplateWrapper, { style: { width, height }, align: "center", justify: "center", onClick: onClick },
         React.createElement(Flex, { align: "center", justify: "center", gap: 10, vertical: true, style: { width: '100%' } },
             React.createElement(Button, { type: "text", className: "add-blank-btn", icon: React.createElement(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 24 } }) }),

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 { THEME } from '@antscorp/antsomi-ui/es/constants';
+import isEqual from 'react-fast-compare';
 // Styled
 import { CustomLabelStyled, CustomRootLabel, MenuWrapper, TextWrapper } from './styled';
 // Components
-import { Checkbox } 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 = [], visible = true, checkedCategories = {}, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "visible", "checkedCategories", "onMenuChange"]);
+    var _a;
+    const { width = CATEGORY_LISTING_WITH, items = [], loading = false, show = true, checkedCategories = {}, emptyProps, debounceChangeMenu = CATEGORY_DEBOUNCE, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "loading", "show", "checkedCategories", "emptyProps", "debounceChangeMenu", "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,7 +68,7 @@ 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)));
+            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 },
@@ -65,7 +83,7 @@ export const CategoryListing = memo(props => {
             });
             return null;
         }
-    }, [checkedCategories]);
+    }, [checkedState]);
     const getItem = useCallback((item, isRoot) => {
         try {
             const { key, label, children } = item;
@@ -102,7 +120,8 @@ export const CategoryListing = memo(props => {
         });
         return menuItems;
     }, [getItem, items]);
-    return visible ? (React.createElement(MenuWrapper, { "$width": width },
-        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: '#595959' } }), onClick: handleClickMenu }, restOfProps)))) : null;
+    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({ 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/components/CategoryListing/styled.js

@@ -1,12 +1,20 @@
+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 `
+  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);
 
-  .antsomi-menu {
-    height: 100%;
+  .antsomi-menu,
+  .ant-menu {
+    [role='menu'] {
+      background-color: white !important;
+    }
 
     [role='menuitem'] {
       width: 100%;
@@ -16,10 +24,26 @@ export const MenuWrapper = styled.div `
       margin-left: 0 !important;
       margin-right: 0 !important;
 
-      .antsomi-menu-title-content {
+      .antsomi-menu-title-content,
+      .ant-menu-title-content {
         height: 100%;
       }
     }
+
+    .antsomi-menu-submenu-title,
+    .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 `
@@ -54,16 +78,15 @@ 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-size: 11px !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;
@@ -71,7 +94,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.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,2 +1,3 @@
 export { BlankTemplate } from './BlankTemplate';
 export { CategoryListing } from './CategoryListing';
+export { Empty } from './Empty';

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

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

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

@@ -1,10 +1,13 @@
 import { ThumbnailCardProps } from '../../../molecules';
-import { BlankTemplateProps, CategoryListingProps, TemplateListingProps } from '../types';
-export declare const TEMPLATE_ITEM_WIDTH = 200;
-export declare const TEMPLATE_ITEM_HEIGHT = 200;
+import { BlankTemplateProps, CategoryListingProps, TemplateListingProps, TemplatesProps } from '../types';
+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'>;
 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,22 +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,
-    visible: true,
+    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,78 @@
+/// <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;
+}
+/**
+ * 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 {};