@antscorp/antsomi-ui 1.3.5-beta.52 → 1.3.5-beta.521

package/es/components/organism/LeftMenu/LeftMenu.js

@@ -0,0 +1,118 @@
+// Libraries
+import React, { memo, useCallback, useMemo } from 'react';
+import Icon from '@antscorp/icons';
+import { Typography } from 'antd';
+import classNames from 'classnames';
+import { isNil, isString } from 'lodash';
+import { Link } from 'react-router-dom';
+import isEqual from 'react-fast-compare';
+// Styled
+import { ChildMenuWrapper, ExpandWrapper, FeatureMenu, FeatureMenuItem, LeftMenuNav, LeftMenuNavWrapper, PopoverWrapper, NavLogoWrapper, FeatureMenuWrapper, IconWrapper, } from './styled';
+// Constants
+import { APP_KEYS } from './constants';
+// Components
+import { CustomMenu, CommonMenu, HomeMenu } from './components';
+// Hooks
+import { useLeftMenu, useNavigatePath } from './hooks';
+const SubLogoAntsomi = 'https://st-media-template.antsomi.com/icons/antsomi/antsomi.png';
+export const LeftMenuComponent = memo(props => {
+    const { style, className, customization, showLogo = true } = props;
+    const { isExpandable = true, isCustomized, isRecommendation, items = [], onMenuItemClick, } = customization || {};
+    const { state, activeAppCode, permissionMenu, customActiveAppKey, onToggleChildMenu, onMouseEnter, onMouseLeave, onHoverMenuBar, onShowPopover, } = useLeftMenu(props);
+    const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
+    const childActiveMenu = useMemo(() => {
+        const appActiveKey = isCustomized || isRecommendation ? customActiveAppKey : activeAppCode;
+        if (isCustomized)
+            return React.createElement(CustomMenu, null);
+        switch (appActiveKey) {
+            case isRecommendation ? 'DASHBOARD' : APP_KEYS.HOME:
+                return React.createElement(HomeMenu, null);
+            default:
+                return React.createElement(CommonMenu, null);
+        }
+    }, [activeAppCode, customActiveAppKey, isCustomized, isRecommendation]);
+    const childHoverMenu = useMemo(() => {
+        const appActiveKey = state.hoverItem;
+        if (isCustomized)
+            return React.createElement(CustomMenu, { isHover: true });
+        switch (appActiveKey) {
+            case isRecommendation ? 'DASHBOARD' : APP_KEYS.HOME:
+                return React.createElement(HomeMenu, { isHover: !isRecommendation });
+            default:
+                return React.createElement(CommonMenu, { isHover: !isRecommendation });
+        }
+    }, [isCustomized, isRecommendation, state.hoverItem]);
+    const renderFeatureMenuItem = useCallback((item) => {
+        const { menu_item_name, menu_item, icon_name, menu_item_code, menu_item_path, menu_item_domain, } = item;
+        const isActive = activeAppCode === menu_item_code;
+        const isHover = state.hoverItem === menu_item_code;
+        const renderLabel = () => (React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
+            React.createElement(IconWrapper, null, isNil(icon_name) ? null : React.createElement(Icon, { type: icon_name })),
+            React.createElement(Typography.Text, null, menu_item_name),
+            React.createElement("div", { className: "popup-triangle" })));
+        return (React.createElement(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(menu_item_code) }, isString(menu_item_path) ? (isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path) }, renderLabel())) : (React.createElement(Link, { to: getPath(menu_item_path), className: "menu-link" }, renderLabel()))) : (renderLabel())));
+    }, [activeAppCode, getPath, isPushDifferentDomain, navigatePath, onMouseEnter, state.hoverItem]);
+    const renderRecommendationMenuItem = useCallback((item) => {
+        const { menu_item_name, menu_item, icon_name, permission_code } = item;
+        const isActive = customActiveAppKey === permission_code;
+        const isHover = state.hoverItem === permission_code;
+        const renderLabel = () => (React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }), onClick: () => onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(permission_code || 'null', [permission_code || 'null']) },
+            React.createElement(IconWrapper, null, isNil(icon_name) ? null : React.createElement(Icon, { type: icon_name })),
+            React.createElement(Typography.Text, null, menu_item_name)));
+        return (React.createElement(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(permission_code || 'null') }, renderLabel()));
+    }, [customActiveAppKey, onMenuItemClick, onMouseEnter, state.hoverItem]);
+    const renderCustomizedMenuItems = useCallback((items) => items === null || items === void 0 ? void 0 : items.map(item => {
+        const { key, icon, label } = item;
+        const isActive = key === customActiveAppKey;
+        const isHover = key === state.hoverItem;
+        return (React.createElement(FeatureMenuItem, { key: key, onClick: () => onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick(key, [key]), onMouseEnter: () => onMouseEnter(key) },
+            React.createElement("li", { role: "menuitem", className: classNames({ isActive, isHover }) },
+                React.createElement(IconWrapper, null, isNil(icon) ? null : React.createElement(Icon, { type: icon })),
+                React.createElement(Typography.Text, null, label),
+                isExpandable && React.createElement("div", { className: "popup-triangle" }))));
+    }), [customActiveAppKey, state.hoverItem, isExpandable, onMenuItemClick, onMouseEnter]);
+    const renderAppMenuItems = useCallback(() => {
+        var _a;
+        return isCustomized
+            ? renderCustomizedMenuItems(items)
+            : (_a = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.filter(item => item.menu_item_code !== APP_KEYS.SETTINGS)) === null || _a === void 0 ? void 0 : _a.map(item => isRecommendation ? renderRecommendationMenuItem(item) : renderFeatureMenuItem(item));
+    }, [
+        isCustomized,
+        isRecommendation,
+        items,
+        permissionMenu,
+        renderCustomizedMenuItems,
+        renderFeatureMenuItem,
+        renderRecommendationMenuItem,
+    ]);
+    const renderSettings = () => {
+        if (!isCustomized) {
+            const settingApp = permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === APP_KEYS.SETTINGS);
+            if (settingApp)
+                return isRecommendation
+                    ? renderRecommendationMenuItem(settingApp)
+                    : renderFeatureMenuItem(settingApp);
+        }
+        return null;
+    };
+    return (React.createElement(LeftMenuNavWrapper, { style: style, "$isExpandMenu": state.isExpandMenu, className: className },
+        React.createElement(LeftMenuNav, { className: "left-menu-nav" },
+            React.createElement(FeatureMenuWrapper, { vertical: true, onMouseEnter: () => onShowPopover(), onMouseLeave: onMouseLeave },
+                showLogo && (React.createElement(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: onHoverMenuBar },
+                    React.createElement("div", { className: "image-wrapper" },
+                        React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" })))),
+                React.createElement(FeatureMenu, { role: "menu", className: "antsomi-scroll-box" },
+                    React.createElement("div", { className: "menu-content scroll-content" }, renderAppMenuItems()),
+                    React.createElement("div", { className: "nav-blank", onMouseEnter: onHoverMenuBar }),
+                    !isRecommendation && (React.createElement(PopoverWrapper, { show: state.isShowPopover && isExpandable, hasMarginTop: !isRecommendation, className: "antsomi-scroll-box antsomi-child-menu-popover" },
+                        React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childHoverMenu)))),
+                React.createElement("div", { style: { flexShrink: 0 } }, renderSettings())),
+            isExpandable && !isRecommendation && (React.createElement(ExpandWrapper, { onMouseEnter: onMouseLeave },
+                React.createElement(Icon, { type: "icon-ants-expand-more", style: {
+                        cursor: 'pointer',
+                        fontSize: '20px',
+                        transform: `rotate(${state.isExpandMenu ? '90deg' : '270deg'})`,
+                    }, onClick: onToggleChildMenu })))),
+        React.createElement(ChildMenuWrapper, { isExpand: state.isExpandMenu && isExpandable, isMarginTop: showLogo, className: "antsomi-scroll-box" },
+            React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childActiveMenu))));
+}, (prevProps, nextProps) => isEqual(prevProps, nextProps));

package/es/components/organism/LeftMenu/components/CommonMenu/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface CommonMenuProps {
+    isHover?: boolean;
+}
+export declare const CommonMenu: React.FC<CommonMenuProps>;
+export {};

package/es/components/organism/LeftMenu/components/CommonMenu/index.js

@@ -0,0 +1,16 @@
+// Libraries
+import React, { memo, useMemo } from 'react';
+// Components
+import { ChildMenu } from '../common';
+// Stores
+import { useLeftMenuContext } from '../../contexts';
+// Utils
+import { getMenuItem } from '../../utils';
+export const CommonMenu = memo(({ isHover }) => {
+    const appMenuChildren = useLeftMenuContext(store => store.appMenuChildren);
+    const appHoverMenuChildren = useLeftMenuContext(store => store.appHoverMenuChildren);
+    const onMenuClick = useLeftMenuContext(store => store.onMenuClick);
+    const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(item => getMenuItem(item)), [appMenuChildren]);
+    const customHoverChildren = useMemo(() => appHoverMenuChildren === null || appHoverMenuChildren === void 0 ? void 0 : appHoverMenuChildren.map(item => getMenuItem(item)), [appHoverMenuChildren]);
+    return (React.createElement(ChildMenu, { items: isHover ? customHoverChildren : customChildren, onMenuClick: onMenuClick }));
+});

package/es/components/organism/LeftMenu/components/CustomMenu/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface CustomMenuProps {
+    isHover?: boolean;
+}
+export declare const CustomMenu: React.FC<CustomMenuProps>;
+export {};

package/es/components/organism/LeftMenu/components/CustomMenu/index.js

@@ -0,0 +1,12 @@
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { ChildMenu } from '../common';
+// Hooks
+import { useLeftMenuContext } from '../../contexts';
+export const CustomMenu = memo(({ isHover }) => {
+    const appCustomMenuChildren = useLeftMenuContext(store => store.customMenuChildren);
+    const appCustomHoverMenuChildren = useLeftMenuContext(store => store.customHoverMenuChildren);
+    const onMenuClick = useLeftMenuContext(store => store.onMenuClick);
+    return (React.createElement(ChildMenu, { items: isHover ? appCustomHoverMenuChildren : appCustomMenuChildren, onMenuClick: onMenuClick }));
+});

package/es/components/organism/LeftMenu/components/HomeMenu/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const CONFIG_OPTIONS: {
+    CONFIGURE: {
+        key: string;
+        label: string;
+    };
+    REMOVE: {
+        key: string;
+        label: string;
+    };
+};

package/es/components/organism/LeftMenu/components/HomeMenu/constants.js

@@ -0,0 +1,10 @@
+export const CONFIG_OPTIONS = {
+    CONFIGURE: {
+        key: 'configure',
+        label: 'Configure',
+    },
+    REMOVE: {
+        key: 'remove',
+        label: 'Remove',
+    },
+};

package/es/components/organism/LeftMenu/components/HomeMenu/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface HomeMenuProps {
+    isHover?: boolean;
+}
+export declare const HomeMenu: React.FC<HomeMenuProps>;

package/es/components/organism/LeftMenu/components/HomeMenu/index.js

@@ -0,0 +1,23 @@
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { ChildMenu } from '../common';
+import { Flex } from '../../../../atoms';
+// Constants
+import Icon from '@antscorp/icons';
+// Styled
+import { CreateButton, HomeMenuWrapper, ModalWrapper } from './styled';
+// Hooks
+import { useHomeMenu } from './useHomeMenu';
+export const HomeMenu = memo(props => {
+    const { children, removedDashboardId, isDashboardRemoving, isRecommendation, setRemovedDashboardId, onCreateNewReport, onMenuClick, onRemoveDashboard, } = useHomeMenu(props);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HomeMenuWrapper, { gap: 10, vertical: true },
+            !isRecommendation && (React.createElement(CreateButton, { type: "primary", onClick: onCreateNewReport },
+                React.createElement(Flex, { gap: 10, align: "center" },
+                    React.createElement(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 14 } }),
+                    React.createElement("span", null, "Create")))),
+            React.createElement("div", { className: "menu-list" },
+                React.createElement(ChildMenu, { items: children, onMenuClick: onMenuClick }))),
+        React.createElement(ModalWrapper, { open: !!removedDashboardId, centered: true, onCancel: () => setRemovedDashboardId(''), title: "Remove this dashboard", okText: "Confirm", cancelText: "Cancel", closable: false, okButtonProps: { loading: isDashboardRemoving }, onOk: onRemoveDashboard }, "Removing this dashboard will delete it permanently. Are you sure you want to perform this action?")));
+});

package/es/components/organism/LeftMenu/components/HomeMenu/styled.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const HomeMenuWrapper: 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 CreateButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/button/button").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;
+export declare const ModalWrapper: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;

package/es/components/organism/LeftMenu/components/HomeMenu/styled.js

@@ -0,0 +1,50 @@
+var _a;
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Button, Flex } from '../../../../atoms';
+import { Modal } from '../../../../molecules';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const HomeMenuWrapper = styled(Flex) `
+  height: 100%;
+  width: 100%;
+
+  & > .menu-list {
+    width: 100%;
+    flex: 1 1 0%;
+    overflow: hidden;
+
+    & .antsomi-menu {
+      & > li > ul {
+        font-weight: 400 !important;
+        font-size: 11px !important;
+      }
+
+      ::-webkit-scrollbar {
+        width: 13px !important;
+        height: 8px;
+      }
+    }
+  }
+`;
+export const CreateButton = styled(Button) `
+  width: 106px;
+  height: 37px !important;
+  border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px !important;
+  box-shadow: none !important;
+  font-size: 14px !important;
+  flex-shrink: 0;
+`;
+export const ModalWrapper = styled(Modal) `
+  &.antsomi-modal {
+    width: 379px !important;
+
+    & .antsomi-modal-content {
+      & > .antsomi-modal-header,
+      & > .antsomi-modal-footer {
+        margin: 0px;
+      }
+    }
+  }
+`;

package/es/components/organism/LeftMenu/components/HomeMenu/useHomeMenu.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { HomeMenuProps } from '.';
+export declare const useHomeMenu: (props: HomeMenuProps) => {
+    children: import("../../types").TMenuItem[];
+    removedDashboardId: string;
+    isDashboardRemoving: boolean;
+    isRecommendation: boolean | undefined;
+    setRemovedDashboardId: import("react").Dispatch<import("react").SetStateAction<string>>;
+    onCreateNewReport: import("react").MouseEventHandler<HTMLElement>;
+    onOptionCallback: (args: {
+        menuItemKey: string;
+        optionKey: string;
+    }) => void;
+    onMenuClick: (key: string, _keyPath: string[]) => void;
+    onRemoveDashboard: () => Promise<void>;
+};

package/es/components/organism/LeftMenu/components/HomeMenu/useHomeMenu.js

@@ -0,0 +1,135 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// Libraries
+import { useCallback, useMemo, useState } from 'react';
+// Constants
+import { CONFIG_OPTIONS } from './constants';
+import { HOME_REPORT_ROUTES, HOME_ROUTE } from '../../constants';
+import { API_RESPONSE_CODE, CDP_API, CDP_ROUTE } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { getGeneratePath, getMenuItem } from '../../utils';
+// Hooks;
+import { useLeftMenuContext } from '../../contexts';
+import { useLayoutStore } from '@antscorp/antsomi-ui/es/components/template';
+import { useCustomRouter } from '@antscorp/antsomi-ui/es/hooks';
+// Queries
+import { useRemoveDashboard } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
+import { ENV } from '@antscorp/antsomi-ui/es/config';
+export const useHomeMenu = (props) => {
+    const { isHover } = props;
+    const { pathname, search, origin } = window.location;
+    const { navigate, replace } = useCustomRouter();
+    const appMenuChildren = useLeftMenuContext(store => store.appMenuChildren);
+    const appHoverMenuChildren = useLeftMenuContext(store => store.appHoverMenuChildren);
+    const isRecommendation = useLeftMenuContext(store => store.isRecommendation);
+    const auth = useLeftMenuContext(store => { var _a; return (_a = store.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
+    const env = useLeftMenuContext(store => { var _a; return (_a = store.appConfig) === null || _a === void 0 ? void 0 : _a.env; });
+    const dashboardParams = useLeftMenuContext(store => store.dashboardParams);
+    const dashboardList = useLeftMenuContext(store => (store === null || store === void 0 ? void 0 : store.dashboardList) || []);
+    const onClickCreateDashboard = useLayoutStore(store => store.state.leftMenu.onClickCreateDashboard);
+    const [removedDashboardId, setRemovedDashboardId] = useState('');
+    const urlParams = useMemo(() => new URLSearchParams(search), [search]);
+    const { mutateAsync: removeDashboard, isLoading: isDashboardRemoving } = useRemoveDashboard();
+    const onOptionCallback = useCallback((args) => {
+        const { optionKey, menuItemKey } = args;
+        switch (optionKey) {
+            case CONFIG_OPTIONS.CONFIGURE.key: {
+                const newPathName = getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: menuItemKey }));
+                navigate(newPathName);
+                urlParams.set('type', HOME_REPORT_ROUTES.CONFIGURE);
+                replace({ search: urlParams.toString() });
+                break;
+            }
+            case CONFIG_OPTIONS.REMOVE.key:
+                setRemovedDashboardId(menuItemKey);
+                break;
+            default:
+                break;
+        }
+    }, [auth, navigate, replace, urlParams]);
+    const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(appMenuItem => {
+        var _a;
+        return getMenuItem(Object.assign(Object.assign({}, appMenuItem), { children: (_a = appMenuItem === null || appMenuItem === void 0 ? void 0 : appMenuItem.children) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), ((item === null || item === void 0 ? void 0 : item.dashboardEditable)
+                ? { options: Object.values(CONFIG_OPTIONS), optionCallback: onOptionCallback }
+                : {})))) }));
+    }), [appMenuChildren, onOptionCallback]);
+    const customHoverChildren = useMemo(() => appHoverMenuChildren === null || appHoverMenuChildren === void 0 ? void 0 : appHoverMenuChildren.map(appMenuItem => getMenuItem(Object.assign(Object.assign({}, appMenuItem), { children: appMenuItem === null || appMenuItem === void 0 ? void 0 : appMenuItem.children }))), [appHoverMenuChildren]);
+    const onCreateNewReport = useCallback(e => {
+        if (onClickCreateDashboard) {
+            onClickCreateDashboard(e);
+        }
+        else {
+            urlParams.set('type', HOME_REPORT_ROUTES.CREATE);
+            if (env !== ENV.DEV && origin !== (CDP_ROUTE === null || CDP_ROUTE === void 0 ? void 0 : CDP_ROUTE[`${env}`])) {
+                window.location.assign(`${CDP_ROUTE === null || CDP_ROUTE === void 0 ? void 0 : CDP_ROUTE[`${env}`]}${getGeneratePath(HOME_ROUTE, auth)}?${urlParams.toString()}`);
+            }
+            else {
+                navigate(getGeneratePath(HOME_ROUTE, auth));
+                replace({ search: urlParams.toString() });
+            }
+        }
+    }, [auth, env, navigate, onClickCreateDashboard, origin, replace, urlParams]);
+    const onMenuClick = useCallback((key, _keyPath) => {
+        if (!isRecommendation) {
+            const newPathName = getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: key }));
+            if (newPathName !== pathname) {
+                navigate(newPathName);
+            }
+        }
+    }, [isRecommendation, auth, pathname, navigate]);
+    const onRemoveDashboard = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        if (removedDashboardId && auth && env) {
+            const params = {
+                params: Object.assign(Object.assign({}, dashboardParams), { dashboardId: +removedDashboardId }),
+                auth: Object.assign(Object.assign({}, auth), { url: `${CDP_API === null || CDP_API === void 0 ? void 0 : CDP_API[env]}/hub` }),
+            };
+            const response = yield removeDashboard(params);
+            if ((response === null || response === void 0 ? void 0 : response.code) === API_RESPONSE_CODE.SUCCESS) {
+                let nextDashboardId;
+                for (const [index, item] of dashboardList.entries()) {
+                    if (item.dashboardId === +removedDashboardId) {
+                        const newDashboardList = dashboardList === null || dashboardList === void 0 ? void 0 : dashboardList.filter(item => item.dashboardId !== +removedDashboardId);
+                        nextDashboardId =
+                            ((_a = newDashboardList === null || newDashboardList === void 0 ? void 0 : newDashboardList[index + 1]) === null || _a === void 0 ? void 0 : _a.dashboardId) || ((_b = newDashboardList === null || newDashboardList === void 0 ? void 0 : newDashboardList[0]) === null || _b === void 0 ? void 0 : _b.dashboardId);
+                        break;
+                    }
+                }
+                const newPathName = nextDashboardId
+                    ? getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: String(nextDashboardId) }))
+                    : getGeneratePath(HOME_ROUTE, Object.assign({}, auth));
+                if (newPathName !== pathname) {
+                    navigate(newPathName);
+                }
+                setRemovedDashboardId('');
+            }
+        }
+    }), [
+        removedDashboardId,
+        auth,
+        env,
+        dashboardParams,
+        removeDashboard,
+        dashboardList,
+        pathname,
+        navigate,
+    ]);
+    return {
+        children: isHover ? customHoverChildren : customChildren,
+        removedDashboardId,
+        isDashboardRemoving,
+        isRecommendation,
+        setRemovedDashboardId,
+        onCreateNewReport,
+        onOptionCallback,
+        onMenuClick,
+        onRemoveDashboard,
+    };
+};

package/es/components/organism/LeftMenu/components/HomeMenu/utils.d.ts

@@ -0,0 +1 @@
+export declare const getDefaultDashboardName: (listDashboardName: string[]) => string;

package/es/components/organism/LeftMenu/components/HomeMenu/utils.js

@@ -0,0 +1,30 @@
+export const getDefaultDashboardName = (listDashboardName) => {
+    let listDefaultName = [];
+    let number = 1;
+    const regexDefaultName = /^Untitled dashboard #(\d+)$/;
+    if (listDashboardName && listDashboardName.length) {
+        listDefaultName = listDashboardName
+            .filter(dashboardName => regexDefaultName.test(dashboardName))
+            .map(dashboardName => +dashboardName.replace('Untitled dashboard #', ''))
+            .sort((num1, num2) => num1 - num2)
+            .reduce((accum, current) => {
+            if (!accum.length || current !== accum[accum.length - 1]) {
+                accum.push(current);
+            }
+            return accum;
+        }, []);
+    }
+    if (listDefaultName.length) {
+        let index = 0;
+        while (index < listDefaultName.length) {
+            if (listDefaultName[index] === number) {
+                number++;
+                index++;
+            }
+            else {
+                break;
+            }
+        }
+    }
+    return `Untitled dashboard #${number}`;
+};

package/es/components/organism/LeftMenu/components/common/ChildMenu/components/MenuItemImage/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface MenuItemImageProps {
+    imageUrl: string;
+    fallbackIcon?: string | null;
+    className?: string;
+}
+export declare const MenuItemImage: React.FC<MenuItemImageProps>;
+export {};

package/es/components/organism/LeftMenu/components/common/ChildMenu/components/MenuItemImage/index.js

@@ -0,0 +1,12 @@
+// Libraries
+import React, { memo, useState } from 'react';
+import Icon from '@antscorp/icons';
+import { isNil } from 'lodash';
+// Constants
+import { MenuItemImageWrapper, MaskImage } from './styled';
+export const MenuItemImage = memo(({ fallbackIcon, imageUrl, className }) => {
+    const [isExistImage, setIsExistImage] = useState(true);
+    return (React.createElement(MenuItemImageWrapper, { align: "center", justify: "center", className: className }, isExistImage ? (React.createElement(React.Fragment, null,
+        React.createElement(MaskImage, { url: imageUrl }),
+        React.createElement("img", { src: imageUrl, alt: "", onError: () => setIsExistImage(false), style: { display: 'none' } }))) : isNil(fallbackIcon) ? null : (React.createElement(Icon, { type: fallbackIcon }))));
+});

package/es/components/organism/LeftMenu/components/common/ChildMenu/components/MenuItemImage/styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const MaskImage: import("styled-components").StyledComponent<"div", any, {
+    url: string;
+}, never>;
+export declare const MenuItemImageWrapper: 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/LeftMenu/components/common/ChildMenu/components/MenuItemImage/styled.js

@@ -0,0 +1,25 @@
+var _a;
+import styled from 'styled-components';
+// Constants
+import { ICON_SIZE } from '../../../../../constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+// Components
+import { Flex } from '../../../../../../../atoms';
+export const MaskImage = styled.div `
+  width: ${ICON_SIZE}px;
+  height: ${ICON_SIZE}px;
+  background: #595959;
+  mask-size: contain;
+  mask-position: center center;
+  mask-repeat: no-repeat;
+  mask-image: ${({ url }) => `url(${url})`};
+`;
+export const MenuItemImageWrapper = styled(Flex) `
+  margin-right: '10px';
+
+  &.isActive {
+    ${MaskImage} {
+      background: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary} !important;
+    }
+  }
+`;

package/es/components/organism/LeftMenu/components/common/ChildMenu/components/index.d.ts

@@ -0,0 +1 @@
+export { MenuItemImage } from './MenuItemImage';

package/es/components/organism/LeftMenu/components/common/ChildMenu/components/index.js

@@ -0,0 +1 @@
+export { MenuItemImage } from './MenuItemImage';

package/es/components/organism/LeftMenu/components/common/ChildMenu/constants/index.d.ts

@@ -0,0 +1 @@
+export * from './sampleData';

package/es/components/organism/LeftMenu/components/common/ChildMenu/constants/index.js

@@ -0,0 +1 @@
+export * from './sampleData';

package/es/components/organism/LeftMenu/components/common/ChildMenu/constants/sampleData.d.ts

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

package/es/components/organism/LeftMenu/components/common/ChildMenu/constants/sampleData.js

@@ -0,0 +1,39 @@
+export const SAMPLE_ITEMS = [
+    {
+        key: 'all-Channels',
+        label: 'All Channels',
+        icon: 'icon-ants-emoji',
+    },
+    {
+        key: 'campaigns',
+        label: 'Campaigns',
+        icon: 'icon-ants-emoji',
+        children: [
+            {
+                key: 'on-site-message',
+                label: 'On-site Message',
+                icon: 'icon-ants-emoji',
+            },
+            {
+                key: 'web-notification',
+                label: 'Web notification',
+                icon: 'icon-ants-emoji',
+            },
+            {
+                key: 'app-notification',
+                label: 'App notification',
+                icon: 'icon-ants-emoji',
+            },
+            {
+                key: 'email',
+                label: 'Email',
+                icon: 'icon-ants-emoji',
+            },
+        ],
+    },
+    {
+        key: 'orchestration',
+        label: 'Orchestration',
+        icon: 'icon-ants-emoji',
+    },
+];

package/es/components/organism/LeftMenu/components/common/ChildMenu/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TMenuItem } from '../../../types';
+interface ChildMenuProps {
+    items?: TMenuItem[];
+    onMenuClick?: (key: string, keyPath: string[]) => void;
+}
+export declare const ChildMenu: React.FC<ChildMenuProps>;
+export {};