@antscorp/antsomi-ui 1.3.5-beta.7 → 1.3.5-beta.71

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

@@ -0,0 +1,34 @@
+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;
+};
+// Libraries
+import React, { memo, useState } from 'react';
+// Components
+import { Flex, Spin } from '../../atoms';
+import { Banner, Information, SimilarTemplate, ThumbnailSlider } from './components';
+// Styled
+import { ModalContainer, ModalWrapper } from './styled';
+// Constants
+import { DEVICE_TYPE, SIMILAR_TEMPLATE_DEFAULT, THUMBNAIL_DEFAULT } from './constants';
+export const PreviewTemplateModal = memo(props => {
+    const { bannerProps, thumbnailProps = THUMBNAIL_DEFAULT, similarTemplateProps = SIMILAR_TEMPLATE_DEFAULT, informationProps, loading = false } = props, restOfProps = __rest(props, ["bannerProps", "thumbnailProps", "similarTemplateProps", "informationProps", "loading"]);
+    // States
+    const [deviceType, setDeviceType] = useState(DEVICE_TYPE.DESKTOP.value);
+    return (React.createElement(ModalContainer, Object.assign({ footer: null, centered: true, modalRender: node => React.createElement(ModalWrapper, null, node) }, restOfProps),
+        React.createElement(Spin, { spinning: loading },
+            React.createElement(Flex, { gap: 20 },
+                React.createElement("div", { className: "overview" },
+                    React.createElement(Flex, { gap: 20, vertical: true, style: { width: '100%' } },
+                        React.createElement(Banner, Object.assign({ deviceType: deviceType }, bannerProps)),
+                        React.createElement(ThumbnailSlider, Object.assign({}, thumbnailProps)))),
+                React.createElement(Information, Object.assign({ deviceType: deviceType, onDeviceTypeChange: value => setDeviceType(value) }, informationProps))),
+            React.createElement(SimilarTemplate, Object.assign({}, similarTemplateProps)))));
+});

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

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

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

@@ -0,0 +1,34 @@
+// Libraries
+import React from 'react';
+import { Image } from 'antd';
+// Components
+import { Table } from '../../../../../..';
+import { Typography, Flex } from '../../../../../../atoms';
+// Images
+import skeletonBackgroundImage from '../../../../../../../assets/images/components/PreviewModal/Banner/skeletonBackground.png';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const BannerPropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'showBackgroundSkeleton',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handler show or hide skeleton background"),
+                React.createElement(Image, { src: skeletonBackgroundImage, width: 200, height: "auto" }))),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, "false"),
+        },
+        {
+            key: '2',
+            property: 'children',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Children of Banner Component"))),
+            type: React.createElement(CustomTag, { type: "normal" }, "ReactNode"),
+            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/DataTypeTable/index.d.ts

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

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

@@ -0,0 +1,62 @@
+// Libraries
+import React from 'react';
+import { Table } from '@antscorp/antsomi-ui/es/index';
+import LinkTo from '@storybook/addon-links/react';
+import { Image } from 'antd';
+// Images
+import bannerImage from '../../../../../../../assets/images/components/PreviewModal/banner.png';
+import informationImage from '../../../../../../../assets/images/components/PreviewModal/information.png';
+import thumbnailsImage from '../../../../../../../assets/images/components/PreviewModal/thumbnails.png';
+import similarTemplateImage from '../../../../../../../assets/images/components/PreviewModal/similarTemplate.png';
+// Constants
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const DataTypeTable = () => {
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: 'Type',
+            dataIndex: 'type',
+            key: 'type',
+        },
+        {
+            title: 'Description',
+            dataIndex: 'description',
+            key: 'description',
+        },
+    ];
+    const dataSource = [
+        {
+            key: 'bannerProps',
+            name: 'bannerProps',
+            type: (React.createElement(LinkTo, { story: "banner-props" },
+                React.createElement(CustomTag, { type: "link" }, "BannerProps"))),
+            description: React.createElement(Image, { src: bannerImage, width: 200, height: "auto" }),
+        },
+        {
+            key: 'informationProps',
+            name: 'informationProps',
+            type: (React.createElement(LinkTo, { story: "information-props" },
+                React.createElement(CustomTag, { type: "link" }, "InformationProps"))),
+            description: React.createElement(Image, { src: informationImage, width: 200, height: "auto" }),
+        },
+        {
+            key: 'ThumbnailProps',
+            name: 'ThumbnailProps',
+            type: (React.createElement(LinkTo, { story: "thumbnail-props" },
+                React.createElement(CustomTag, { type: "link" }, "ThumbnailProps"))),
+            description: React.createElement(Image, { src: thumbnailsImage, width: 200, height: "auto" }),
+        },
+        {
+            key: 'SimilarTemplateProps',
+            name: 'SimilarTemplateProps',
+            type: (React.createElement(LinkTo, { story: "similar-template-props" },
+                React.createElement(CustomTag, { type: "link" }, "SimilarTemplateProps"))),
+            description: React.createElement(Image, { src: similarTemplateImage, width: 200, height: "auto" }),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: columns, pagination: false });
+};

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

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

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

@@ -0,0 +1,76 @@
+// Libraries
+import React from 'react';
+import { Image } from 'antd';
+// Components
+import { Table } from '../../../../../..';
+import { Typography, Flex } from '../../../../../../atoms';
+// Images
+import buttonTextImage from '../../../../../../../assets/images/components/PreviewModal/Information/buttonText.png';
+import descriptionImage from '../../../../../../../assets/images/components/PreviewModal/Information/description.png';
+import itemNameImage from '../../../../../../../assets/images/components/PreviewModal/Information/itemName.png';
+import deviceRadioImage from '../../../../../../../assets/images/components/PreviewModal/Information/deviceRadio.png';
+import clickButtonImage from '../../../../../../../assets/images/components/PreviewModal/Information/clickButton.png';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { CustomTag } from '@antscorp/antsomi-ui/es/utils/commonComponent';
+export const InformationPropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'itemName',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Name of template item"),
+                React.createElement(Image, { src: itemNameImage, width: 200, height: "auto" }))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, "Template name"),
+        },
+        {
+            key: '2',
+            property: 'categoryListing',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Children of Banner Component"))),
+            type: (React.createElement("a", { href: "../?path=/docs/templates-templatelisting-datatype--t-category-item", target: "_blank" },
+                React.createElement(CustomTag, { type: "link" }, "TCategoryItem [ ]"))),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '3',
+            property: 'buttonText',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Text of Information Button"),
+                React.createElement(Image, { src: buttonTextImage, width: 200, height: "auto" }))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, " Use template "),
+        },
+        {
+            key: '4',
+            property: 'description',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "description of Preview Modal Information "),
+                React.createElement(Image, { src: descriptionImage, width: 200, height: "auto" }))),
+            type: React.createElement(CustomTag, { type: "normal" }, "string"),
+            default: React.createElement(CustomTag, { type: "default" }, " - "),
+        },
+        {
+            key: '5',
+            property: 'showDeviceRadios',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handle show or hide device radios "),
+                React.createElement(Image, { src: deviceRadioImage, width: 200, height: "auto" }))),
+            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
+            default: React.createElement(CustomTag, { type: "default" }, " true "),
+        },
+        {
+            key: '6',
+            property: 'onButtonClick',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handle show or hide device radios "),
+                React.createElement(Image, { src: clickButtonImage, width: 200, height: "auto" }))),
+            type: React.createElement(CustomTag, { type: "normal" }, 'React.MouseEventHandler<HTMLElement>'),
+            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/SimilarTemplatePropsTable/index.d.ts

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

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, import("../../molecules/Modal/styled").CustomModalProps, 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: 1440px;
+      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'];
+    showBackgroundSkeleton?: boolean;
+    children?: React.ReactNode;
+}
+export type ThumbnailProps = Omit<ThumbnailCardProps, keyof TTemplateItem | 'onClickWrapper'> & {
+    thumbnails?: TThumbnail[];
+    onClickThumbnail?: (value: TThumbnail) => void;
+};
+export interface SimilarTemplateProps {
+    show?: boolean;
+    similarTemplates?: TTemplateItem[];
+    similarCardProps?: Omit<ThumbnailCardProps, keyof TTemplateItem>;
+}
+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/organism/index.d.ts

@@ -1,4 +1,5 @@
 export { Help } from './Help';
+export { Menu } from './Menu';
 export { PositionSetting, PositionSettingPopover } from './PositionSetting';
 export { Table, ExplorePivotTable, EXPLORE_PIVOT_TABLE_TEST_DATA } from './Table';
 export { GenerativeInsights } from './GenerativeInsights';

package/es/components/organism/index.js

@@ -1,4 +1,5 @@
 export { Help } from './Help';
+export { Menu } from './Menu';
 export { PositionSetting, PositionSettingPopover } from './PositionSetting';
 export { Table, ExplorePivotTable, EXPLORE_PIVOT_TABLE_TEST_DATA } from './Table';
 export { GenerativeInsights } from './GenerativeInsights';

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

@@ -0,0 +1,6 @@
+/**
+ *
+ * Asynchronously loads the component for TemplateListing
+ *
+ */
+export declare const TemplateListing: (props: import("./types").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

@@ -13,18 +13,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { memo, useCallback, useMemo } from 'react';
 import { isEmpty, isNumber } from 'lodash';
 import Icon from '@antscorp/icons';
-import { Menu } from 'antd';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // 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';
 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, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "loading", "show", "checkedCategories", "emptyProps", "onMenuChange"]);
     // Handlers
     const handleClickMenu = e => {
         var _a;
@@ -51,11 +54,11 @@ export const CategoryListing = memo(props => {
         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,
+            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, {
@@ -69,7 +72,12 @@ export const CategoryListing = memo(props => {
     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) }));
@@ -97,7 +105,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", 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({ 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.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>;