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

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/stories/dataTypes/dataType.stories.d.ts

@@ -0,0 +1,38 @@
+declare namespace _default {
+    let title: string;
+}
+export default _default;
+export namespace DataTypes {
+    function render(): import("react").JSX.Element;
+    let name: string;
+}
+export namespace BannerProps {
+    export function render_1(): import("react").JSX.Element;
+    export { render_1 as render };
+    let name_1: string;
+    export { name_1 as name };
+}
+export namespace InformationProps {
+    export function render_2(): import("react").JSX.Element;
+    export { render_2 as render };
+    let name_2: string;
+    export { name_2 as name };
+}
+export namespace SimilarTemplateProps {
+    export function render_3(): import("react").JSX.Element;
+    export { render_3 as render };
+    let name_3: string;
+    export { name_3 as name };
+}
+export namespace ThumbnailProps {
+    export function render_4(): import("react").JSX.Element;
+    export { render_4 as render };
+    let name_4: string;
+    export { name_4 as name };
+}
+export namespace TThumbnail {
+    export function render_5(): import("react").JSX.Element;
+    export { render_5 as render };
+    let name_5: string;
+    export { name_5 as name };
+}

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

@@ -0,0 +1,30 @@
+import LinkTo from '@storybook/addon-links/react';
+import { Button, Tag, Table } from '@antscorp/antsomi-ui/es/index';
+import { DataTypeTable, BannerPropsTable, InformationPropsTable, SimilarTemplatePropsTable, ThumbnailPropsTable, TThumbnailTable, } from './components';
+export default {
+    title: 'Organisms/PreviewTemplateModal/DataType',
+};
+export const DataTypes = {
+    render: () => React.createElement(DataTypeTable, null),
+    name: 'DataTypes',
+};
+export const BannerProps = {
+    render: () => React.createElement(BannerPropsTable, null),
+    name: 'BannerProps',
+};
+export const InformationProps = {
+    render: () => React.createElement(InformationPropsTable, null),
+    name: 'InformationProps',
+};
+export const SimilarTemplateProps = {
+    render: () => React.createElement(SimilarTemplatePropsTable, null),
+    name: 'SimilarTemplateProps',
+};
+export const ThumbnailProps = {
+    render: () => React.createElement(ThumbnailPropsTable, null),
+    name: 'ThumbnailProps',
+};
+export const TThumbnail = {
+    render: () => React.createElement(TThumbnailTable, null),
+    name: 'TThumbnail',
+};

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,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 extends React.HTMLAttributes<HTMLDivElement> {
+    deviceType: InformationProps['deviceType'];
+    showSkeleton?: boolean;
+    height?: number;
+    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 | undefined)[];
+    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/organism/index.d.ts

@@ -1,4 +1,9 @@
 export { Help } from './Help';
+export { Menu } from './Menu';
+export { Notification, type NotificationProps } from './Notification';
+export { AccountSharing, type AccountSharingProps } from './AccountSharing';
 export { PositionSetting, PositionSettingPopover } from './PositionSetting';
 export { Table, ExplorePivotTable, EXPLORE_PIVOT_TABLE_TEST_DATA } from './Table';
 export { GenerativeInsights } from './GenerativeInsights';
+export { default as ContentSources } from './ContentSources';
+export { LeftMenu, type LeftMenuProps } from './LeftMenu';

package/es/components/organism/index.js

@@ -1,4 +1,9 @@
 export { Help } from './Help';
+export { Menu } from './Menu';
+export { Notification } from './Notification';
+export { AccountSharing } from './AccountSharing';
 export { PositionSetting, PositionSettingPopover } from './PositionSetting';
 export { Table, ExplorePivotTable, EXPLORE_PIVOT_TABLE_TEST_DATA } from './Table';
 export { GenerativeInsights } from './GenerativeInsights';
+export { default as ContentSources } from './ContentSources';
+export { LeftMenu } from './LeftMenu';

package/es/components/template/Layout/Layout.d.ts

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from 'react';
+import { LeftMenuProps } from '../../organism';
+import { HeaderV2Props } from '../../molecules';
+import '@antscorp/processing-notification/dist/index.css';
+import { ProcessingNotificationProps } from '@antscorp/antsomi-ui/es/types';
+interface LayoutProps {
+    headerProps?: Partial<HeaderV2Props>;
+    leftMenuProps?: LeftMenuProps;
+    processingNotificationProps?: Partial<ProcessingNotificationProps>;
+    workspaceProps?: React.HTMLAttributes<HTMLDivElement>;
+}
+export declare const Layout: React.FC<PropsWithChildren<LayoutProps>>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ants-processing-notification': any;
+        }
+    }
+}
+export {};

package/es/components/template/Layout/Layout.js

@@ -0,0 +1,61 @@
+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 } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import AntsProcessingNotification from '@antscorp/processing-notification';
+import { merge } from 'lodash';
+// Styled
+import { ChildrenWrapper, ContentWrapper, LayoutWrapper, NotificationWrapper } from './styled';
+// Components
+import { LeftMenu } from '../../organism';
+import { Flex } from '../../atoms';
+import { HeaderV2 } from '../../molecules';
+// Contexts
+import { AppConfigContext } from '../../..';
+// Constants
+import { PERMISSION_API, SOCKET_API } from '../../../constants';
+// Css
+import '@antscorp/processing-notification/dist/index.css';
+import { useLayoutStore } from './stores';
+export const Layout = memo(props => {
+    const { leftMenuProps, headerProps = {}, workspaceProps, processingNotificationProps, children, } = props;
+    const _a = leftMenuProps || {}, { className = '' } = _a, restOfLeftMenuProps = __rest(_a, ["className"]);
+    // Selectors
+    const { auth, languageCode } = useContextSelector(AppConfigContext, state => state);
+    const { token, userId, portalId } = auth || {};
+    const headerStore = useLayoutStore(store => store.state.header);
+    // Memo
+    const initialHeaderProps = useMemo(() => {
+        var _a;
+        return (Object.assign(Object.assign({ className: 'layout-header' }, headerProps), { helpConfig: {
+                configs: Object.assign(Object.assign({}, (_a = headerProps === null || headerProps === void 0 ? void 0 : headerProps.helpConfig) === null || _a === void 0 ? void 0 : _a.configs), { appCode: 'SANDBOX_MARKETING', avatar: '//c0-platform.ants.tech/avatar/2021/09/17/0xgbkurioo.png', config: {
+                        p_timezone: 'Asia/Singapore',
+                        api_pid: 33167,
+                        p_f_longdatetime: "dd MMMM 'at' HH:mm:ss",
+                        embeddedData: {},
+                        INSIGHT_U_OGS: 'uogs',
+                    } }),
+            }, accountSharingConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSharingConfig), { u_ogs: 'uogs', appCode: 'APP_CUSTOMER_360' }) }));
+    }, [headerProps]);
+    const mergeHeaderProps = useMemo(() => merge(initialHeaderProps, headerStore), [initialHeaderProps, headerStore]);
+    const antsProcessingNotificationConfig = useMemo(() => (Object.assign({ permissionDomain: PERMISSION_API, socketDomain: SOCKET_API, token, accountId: userId, userId, lang: languageCode, networkId: portalId }, processingNotificationProps)), [languageCode, portalId, token, userId, processingNotificationProps]);
+    return (React.createElement(LayoutWrapper, null,
+        React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps)),
+        React.createElement(Flex, { className: "layout-body" },
+            React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${className}` }, restOfLeftMenuProps)),
+            React.createElement(ContentWrapper, null,
+                React.createElement("div", Object.assign({}, workspaceProps, { className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }),
+                    React.createElement(NotificationWrapper, null,
+                        React.createElement(AntsProcessingNotification, Object.assign({}, antsProcessingNotificationConfig))),
+                    React.createElement(ChildrenWrapper, null, children))))));
+});

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

@@ -0,0 +1,2 @@
+export * from './Layout';
+export * from './stores';

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

@@ -0,0 +1,2 @@
+export * from './Layout';
+export * from './stores';

package/es/components/template/Layout/stores/index.d.ts

@@ -0,0 +1,18 @@
+import { HeaderV2Props } from '../../../molecules';
+import { DeepPartial } from '@antscorp/antsomi-ui/es/types';
+export interface HeaderStore extends Partial<HeaderV2Props> {
+}
+export interface WorkspaceStore {
+}
+export interface LayoutStoreState {
+    header: HeaderStore;
+    workspace: WorkspaceStore;
+}
+interface LayoutStore {
+    state: LayoutStoreState;
+    setHeaderState: (state: DeepPartial<HeaderStore>) => void;
+    setWorkspaceState: (state: Partial<WorkspaceStore>) => void;
+    setLayoutState: (state: DeepPartial<LayoutStoreState>) => void;
+}
+export declare const useLayoutStore: import("zustand").UseBoundStore<import("zustand").StoreApi<LayoutStore>>;
+export {};

package/es/components/template/Layout/stores/index.js

@@ -0,0 +1,17 @@
+// Libraries
+import { create } from 'zustand';
+import { merge } from 'lodash';
+const initialState = {
+    header: {},
+    workspace: {},
+};
+export const useLayoutStore = create(set => ({
+    state: initialState,
+    setLayoutState: newState => set(store => ({ state: merge(store.state, newState) })),
+    setHeaderState: newState => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { header: Object.assign(Object.assign({}, store.state.header), newState) }),
+    })),
+    setWorkspaceState: newState => set(store => ({
+        state: Object.assign(Object.assign({}, store.state), { workspace: Object.assign(Object.assign({}, store.state.workspace), newState) }),
+    })),
+}));

package/es/components/template/Layout/styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const LayoutWrapper: 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 ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NotificationWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChildrenWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/template/Layout/styled.js

@@ -0,0 +1,71 @@
+var _a, _b;
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '../../atoms';
+// Constants
+import { HEADER_HEIGHT } from '../../molecules/HeaderV2/constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const LayoutWrapper = styled(Flex) `
+  width: 100%;
+  background-color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.blue1_3};
+  position: relative;
+
+  .layout-header {
+    width: calc(100% - 71px);
+    position: absolute;
+    left: 71px;
+    z-index: 20;
+  }
+
+  .layout-body {
+    position: relative;
+    width: 100%;
+    z-index: 10;
+
+    &__menu {
+      flex-shrink: 0;
+    }
+
+    &__content {
+      position: relative;
+      flex: 1 1 0%;
+      border-radius: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadiusXL}px;
+      background-color: white;
+      height: 100%;
+      padding: 15px;
+      padding-top: 0px;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      overflow: auto;
+    }
+  }
+`;
+export const ContentWrapper = styled.div `
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  padding: ${HEADER_HEIGHT}px 15px 15px 0;
+  box-sizing: border-box;
+`;
+export const NotificationWrapper = styled.div `
+  flex-shrink: 0;
+  top: 0px;
+  position: sticky;
+  /* height: 50px; */
+  width: 100%;
+  /* margin-bottom: 6px; */
+  padding-top: 15px;
+  background-color: white;
+  z-index: 999;
+
+  > div {
+    margin-bottom: 6px;
+  }
+`;
+export const ChildrenWrapper = styled.div `
+  width: 100%;
+  height: 100%;
+  /* height: calc(100% - 50px); */
+`;

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

@@ -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%;
   }
 `;