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

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

@@ -0,0 +1,29 @@
+// Libraries
+import React, { memo } from 'react';
+import Icon from '@antscorp/icons';
+// Styled
+import { InformationWrapper } from './styled';
+// Components
+import { Button, Radio, Typography, Flex } from '../../../../atoms';
+// Constants
+import { DEVICE_TYPE } from '../../constants';
+export const Information = memo(props => {
+    const { deviceType, itemName = 'Template name', buttonText = 'Use template', description = 'Description show here', categoryListing, showDeviceRadios = true, onButtonClick, onDeviceTypeChange, } = props;
+    return (React.createElement(InformationWrapper, { gap: 20, vertical: true },
+        React.createElement("div", { style: { flexShrink: 0 }, className: "title" }, itemName),
+        React.createElement(Flex, { gap: 20, vertical: true, className: "content-information" },
+            React.createElement("div", null, description), categoryListing === null || categoryListing === void 0 ? void 0 :
+            categoryListing.map(({ key, label, children }) => (React.createElement("div", { key: key },
+                React.createElement("div", null,
+                    label,
+                    ":"),
+                React.createElement("div", { style: { fontWeight: 'bold' } }, children === null || children === void 0 ? void 0 : children.map(({ label }) => label).join(', ')))))),
+        showDeviceRadios && (React.createElement(Radio.Group, { options: Object.values(DEVICE_TYPE).map(({ value, label, icon }) => ({
+                label: (React.createElement(Flex, { gap: 5, align: "center" },
+                    React.createElement(Icon, { type: icon }),
+                    label)),
+                value,
+            })), onChange: e => onDeviceTypeChange(e.target.value), value: deviceType, optionType: "button", style: { flexShrink: 0 } })),
+        React.createElement(Button, { type: "primary", style: { width: '100%', flexShrink: 0 }, onClick: onButtonClick },
+            React.createElement(Typography.Text, { ellipsis: { tooltip: buttonText }, style: { maxWidth: '100%', color: 'inherit' } }, buttonText))));
+});

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const InformationWrapper: 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>;

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

@@ -0,0 +1,41 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '../../../../atoms';
+export const InformationWrapper = styled(Flex) `
+  width: 350px;
+  flex-shrink: 0;
+  font-size: 12px;
+  max-height: 762px;
+
+  .title {
+    font-size: 16px;
+    font-weight: 700;
+    max-width: 100%;
+    color: inherit;
+    padding-right: 20px;
+  }
+
+  .antsomi-radio-group {
+    width: 100%;
+    display: flex;
+
+    .antsomi-radio-button-wrapper {
+      flex: 1 1 0%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 30px;
+
+      i {
+        height: fit-content;
+        font-size: 24px;
+      }
+    }
+
+    .content-information {
+      flex: 1 1 0%;
+      overflow-y: auto;
+    }
+  }
+`;

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SimilarTemplateProps } from '../../types';
+export declare const SimilarTemplate: React.FC<SimilarTemplateProps>;

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

@@ -0,0 +1,29 @@
+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 } from 'react';
+// Components
+import { ThumbnailCard } from '../../../../molecules';
+import { Empty, Flex } from '../../../../atoms';
+// Styled
+import { SimilarTemplateWrapper } from './styled';
+// Constants
+import { SIMILAR_CARD_HEIGHT_DEFAULT, SIMILAR_CARD_WIDTH_DEFAULT } from '../../constants';
+const MAX_QUANTITY_TEMPLATES = 4;
+export const SimilarTemplate = memo(props => {
+    var _a;
+    const { show = true, similarTemplates = [], similarCardProps } = props;
+    const _b = similarCardProps || {}, { width = SIMILAR_CARD_WIDTH_DEFAULT, height = SIMILAR_CARD_HEIGHT_DEFAULT } = _b, restOfSimilarCardProps = __rest(_b, ["width", "height"]);
+    return show ? (React.createElement(SimilarTemplateWrapper, { gap: 15, vertical: true },
+        React.createElement("div", { className: "title" }, "Similar templates"),
+        React.createElement(Flex, { gap: 30 }, ((_a = similarTemplates === null || similarTemplates === void 0 ? void 0 : similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map(({ id, name, thumbnail }) => (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false }, restOfSimilarCardProps))))) || React.createElement(Empty, null)))) : null;
+});

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SimilarTemplateWrapper: 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>;

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

@@ -0,0 +1,12 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '../../../../atoms';
+export const SimilarTemplateWrapper = styled(Flex) `
+  margin-top: 15px;
+
+  .title {
+    font-weight: 700;
+    font-size: 16px;
+  }
+`;

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import 'swiper/swiper-bundle.css';
+import { ThumbnailProps } from '../../types';
+export interface ThumbnailSliderProps extends ThumbnailProps {
+}
+export declare const ThumbnailSlider: React.FC<ThumbnailSliderProps>;

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

@@ -0,0 +1,77 @@
+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, useMemo, useRef, useState } from 'react';
+import Icon from '@antscorp/icons';
+import { Swiper } from 'swiper/react';
+import 'swiper/swiper-bundle.css';
+import { Navigation, A11y, Thumbs } from 'swiper/modules';
+import { isEmpty } from 'lodash';
+// Styled
+import { SwiperSlideWrapper, ThumbnailSliderWrapper } from './styled';
+// Components
+import { Button, Flex } from '../../../../atoms';
+import { ThumbnailCard } from '../../../../molecules';
+// Constants
+import { THUMBNAIL_HEIGHT_DEFAULT, THUMBNAIL_WIDTH_DEFAULT } from '../../constants';
+/** Max width of list thumbnail's wrapper, it is used to show swiper if the width is greater than 990 */
+const WRAPPER_WIDTH = 990;
+const GAP_X = 10;
+const ICON_SIZE = 24;
+export const ThumbnailSlider = memo(props => {
+    const { thumbnails, width = THUMBNAIL_WIDTH_DEFAULT, height = THUMBNAIL_HEIGHT_DEFAULT, onClickThumbnail } = props, restOfThumbnailProps = __rest(props, ["thumbnails", "width", "height", "onClickThumbnail"]);
+    //  States
+    const [isSlideBeginning, setSlideBeginning] = useState(false);
+    const [isSlideEnd, setSlideEnd] = useState(false);
+    // Refs
+    const navigationPrevRef = useRef(null);
+    const navigationNextRef = useRef(null);
+    // Variables
+    /** The width of per thumbnail wrapper including thumbnail card's size, icon's size and gap */
+    const thumbnailWrapperWidth = useMemo(() => width + GAP_X * 2 + ICON_SIZE, [width]);
+    // Memo
+    const isShowSwiper = useMemo(() => {
+        const calculate = ((thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) || 0) * thumbnailWrapperWidth;
+        return calculate > WRAPPER_WIDTH;
+    }, [thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length, thumbnailWrapperWidth]);
+    // Renders
+    const renderThumbnail = (args) => {
+        const { thumbnail, index } = args;
+        const { id, url } = thumbnail;
+        return (React.createElement(Flex, { gap: GAP_X },
+            !!index && (React.createElement(Flex, { align: "center" },
+                React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: ICON_SIZE, transform: 'rotate(270deg)' } }))),
+            React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, width: width, height: height, thumbnail: url, style: { flexShrink: 0 }, actionAvailable: false, onClickWrapper: () => onClickThumbnail === null || onClickThumbnail === void 0 ? void 0 : onClickThumbnail(thumbnail) }, restOfThumbnailProps))));
+    };
+    return thumbnails && !isEmpty(thumbnails) ? (React.createElement(ThumbnailSliderWrapper, null, isShowSwiper ? (React.createElement(React.Fragment, null,
+        React.createElement(Swiper, { slidesPerView: Math.floor(WRAPPER_WIDTH / thumbnailWrapperWidth), spaceBetween: GAP_X, modules: [Navigation, A11y, Thumbs], navigation: {
+                prevEl: navigationPrevRef.current,
+                nextEl: navigationNextRef.current,
+            }, onBeforeInit: swiper => {
+                setTimeout(() => {
+                    // Override prevEl & nextEl now that refs are defined
+                    swiper.params.navigation.prevEl = navigationPrevRef.current;
+                    swiper.params.navigation.nextEl = navigationNextRef.current;
+                    // Re-init navigation
+                    swiper.navigation.destroy();
+                    swiper.navigation.init();
+                    swiper.navigation.update();
+                });
+            }, onSlideChange: ({ isBeginning, isEnd }) => {
+                setSlideBeginning(isBeginning);
+                setSlideEnd(isEnd);
+            } }, thumbnails.map((thumbnail, index) => (React.createElement(SwiperSlideWrapper, { key: `slide-${thumbnail.id}` }, renderThumbnail({ thumbnail, index }))))),
+        React.createElement(Button, { ref: navigationPrevRef, className: "custom-button-prev", disabled: isSlideBeginning },
+            React.createElement(Icon, { type: "icon-ants-expand-more" })),
+        React.createElement(Button, { ref: navigationNextRef, className: "custom-button-next", disabled: isSlideEnd },
+            React.createElement(Icon, { type: "icon-ants-expand-more" })))) : (React.createElement(Flex, { gap: GAP_X, style: { width: 'fit-content' } }, thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.map((thumbnail, index) => (React.createElement(React.Fragment, { key: thumbnail.id }, renderThumbnail({ thumbnail, index })))))))) : null;
+});

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const ThumbnailSliderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SwiperSlideWrapper: import("styled-components").StyledComponent<import("react").FunctionComponent<import("swiper/react").SwiperSlideProps>, any, {}, never>;

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

@@ -0,0 +1,62 @@
+var _a;
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import styled from 'styled-components';
+import { SwiperSlide } from 'swiper/react';
+export const ThumbnailSliderWrapper = styled.div `
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+
+  .swiper {
+    max-width: 1030px;
+    .swiper-slide {
+      width: fit-content !important;
+    }
+  }
+
+  .custom-button-prev,
+  .custom-button-next {
+    z-index: 10;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    background-color: #ffffff;
+    box-shadow: 0px 3px 3px 0px #002e591a;
+    border-radius: 999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    /* Remove default style of Antd button */
+    border-color: white !important;
+
+    &.antsomi-btn-default:not(:disabled):hover {
+      border-color: white !important;
+      background-color: #ffffff !important;
+    }
+  }
+
+  .custom-button-prev {
+    left: 0px;
+    transform: rotate(90deg);
+  }
+
+  .custom-button-next {
+    right: 0px;
+    transform: rotate(-90deg);
+  }
+
+  i {
+    font-size: 20px;
+    color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+  }
+`;
+export const SwiperSlideWrapper = styled(SwiperSlide) `
+  list-style: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+`;

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

@@ -0,0 +1,4 @@
+export { Information } from './Information';
+export { Banner } from './Banner';
+export { ThumbnailSlider } from './ThumbnailSlider';
+export { SimilarTemplate } from './SimilarTemplate';

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

@@ -0,0 +1,4 @@
+export { Information } from './Information';
+export { Banner } from './Banner';
+export { ThumbnailSlider } from './ThumbnailSlider';
+export { SimilarTemplate } from './SimilarTemplate';

package/es/components/organism/PreviewTemplateModal/constants/dataSample.d.ts

@@ -0,0 +1,2 @@
+import { TThumbnail } from '../types';
+export declare const THUMBNAIL_SAMPLES: TThumbnail[];

package/es/components/organism/PreviewTemplateModal/constants/dataSample.js

@@ -0,0 +1,9 @@
+export const THUMBNAIL_SAMPLES = [
+    { id: 1, url: 'https://sandbox-st-media-template.antsomi.com/base64-img/20110.png' },
+    { id: 2, url: 'https://sandbox-st-media-template.antsomi.com/base64-img/19759.png' },
+    { id: 3, url: 'https://sandbox-st-media-template.antsomi.com/base64-img/19641.png' },
+    { id: 4, url: 'https://sandbox-st-media-template.antsomi.com/base64-img/19641.png' },
+    { id: 5, url: 'https://sandbox-st-media-template.antsomi.com/base64-img/19641.png' },
+    { id: 6, url: 'https://sandbox-st-media-template.antsomi.com/base64-img/19641.png' },
+    { id: 7, url: 'https://sandbox-st-media-template.antsomi.com/base64-img/19641.png' },
+];

package/es/components/organism/PreviewTemplateModal/constants/defaultProps.d.ts

@@ -0,0 +1,8 @@
+import { SimilarTemplateProps, ThumbnailProps } from '../types';
+export declare const THUMBNAIL_WIDTH_DEFAULT = 180;
+export declare const THUMBNAIL_HEIGHT_DEFAULT = 126;
+export declare const SIMILAR_CARD_WIDTH_DEFAULT = 330;
+export declare const SIMILAR_CARD_HEIGHT_DEFAULT = 230;
+export declare const THUMBNAIL_URL = "https://st-media-template.antsomi.com/base64-img/37563.png";
+export declare const SIMILAR_TEMPLATE_DEFAULT: SimilarTemplateProps;
+export declare const THUMBNAIL_DEFAULT: ThumbnailProps;

package/es/components/organism/PreviewTemplateModal/constants/defaultProps.js

@@ -0,0 +1,11 @@
+export const THUMBNAIL_WIDTH_DEFAULT = 180;
+export const THUMBNAIL_HEIGHT_DEFAULT = 126;
+export const SIMILAR_CARD_WIDTH_DEFAULT = 330;
+export const SIMILAR_CARD_HEIGHT_DEFAULT = 230;
+export const THUMBNAIL_URL = 'https://st-media-template.antsomi.com/base64-img/37563.png';
+export const SIMILAR_TEMPLATE_DEFAULT = {
+    show: false,
+};
+export const THUMBNAIL_DEFAULT = {
+    thumbnails: [],
+};

package/es/components/organism/PreviewTemplateModal/constants/index.d.ts

@@ -0,0 +1,3 @@
+export * from './dataSample';
+export * from './defaultProps';
+export * from './variables';

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

@@ -0,0 +1,3 @@
+export * from './dataSample';
+export * from './defaultProps';
+export * from './variables';

package/es/components/organism/PreviewTemplateModal/constants/variables.d.ts

@@ -0,0 +1,12 @@
+export declare const DEVICE_TYPE: {
+    DESKTOP: {
+        value: string;
+        label: string;
+        icon: string;
+    };
+    MOBILE: {
+        value: string;
+        label: string;
+        icon: string;
+    };
+};

package/es/components/organism/PreviewTemplateModal/constants/variables.js

@@ -0,0 +1,12 @@
+export const DEVICE_TYPE = {
+    DESKTOP: {
+        value: 'desktop',
+        label: 'Desktop',
+        icon: 'icon-ants-laptop',
+    },
+    MOBILE: {
+        value: 'mobile',
+        label: 'Mobile',
+        icon: 'icon-ants-smart-phone',
+    },
+};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PreviewTemplateModalProps } from './types';
+export declare const PreviewTemplateModal: React.FC<PreviewTemplateModalProps>;

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/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,39 @@
+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;
+    loading?: 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

@@ -2,16 +2,18 @@
 import React, { memo } from 'react';
 import Icon from '@antscorp/icons';
 // Components
-import { Button, Flex } from '../../../../atoms';
+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, onButtonClick } = props;
-    return show ? (React.createElement(BlankTemplateWrapper, { style: { width, height }, align: "center", justify: "center" },
-        React.createElement(Flex, { align: "center", justify: "center", gap: 10, vertical: true },
-            React.createElement(Button, { type: "text", className: "add-blank-btn", icon: React.createElement(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 24 } }), onClick: onButtonClick }),
+    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 } }) }),
             React.createElement("div", { className: "description" },
-                " ",
-                description || 'Blank Template')))) : null;
+                React.createElement(Typography.Text, { ellipsis: { tooltip: description }, style: { maxWidth: '100%', color: 'inherit' } }, description)))));
+    return show ? (blankTemplateRender ? (React.createElement(React.Fragment, null, blankTemplateRender(BlankTemplateNode))) : (BlankTemplateNode)) : null;
 });
 BlankTemplate.displayName = 'BlankTemplate';

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

@@ -6,6 +6,7 @@ export const BlankTemplateWrapper = styled(Flex) `
   box-sizing: border-box;
   border: 1px solid #b8cfe6;
   border-radius: 5px;
+  cursor: pointer;
 
   .add-blank-btn {
     width: 50px !important;
@@ -20,5 +21,6 @@ export const BlankTemplateWrapper = styled(Flex) `
 
   .description {
     font-weight: 700;
+    max-width: 90%;
   }
 `;

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, checkedCategories = {}, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "checkedCategories", "onMenuChange"]);
+    var _a;
+    const { width = CATEGORY_LISTING_WITH, items = [], loading = false, show = true, checkedCategories = {}, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "loading", "show", "checkedCategories", "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 (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 ? (React.createElement(MenuWrapper, { "$width": width },
+        React.createElement(Spin, { spinning: loading, wrapperClassName: "template-listing__loading" }, isEmpty(menuItems) ? (React.createElement("div", { className: "empty-wrapper" },
+            React.createElement(Empty, null))) : (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';