@antscorp/antsomi-ui 1.3.5-beta.407 → 1.3.5-beta.408

package/es/components/molecules/ModalSelect/ModalSelect.js

@@ -13,8 +13,9 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Menu } from 'antd';
 import { StyledModal } from './styled';
 import { isFunction } from 'lodash';
+import clsx from 'clsx';
 export const ModalSelect = (props) => {
-    const { value, content, options = [], okButtonProps = {}, cancelButtonProps = {}, title, open: openProp, menuRef: menuRefProp, onChange, onOk } = props, rest = __rest(props, ["value", "content", "options", "okButtonProps", "cancelButtonProps", "title", "open", "menuRef", "onChange", "onOk"]);
+    const { value, content, options = [], okButtonProps = {}, cancelButtonProps = {}, title, open: openProp, menuRef: menuRefProp, onChange, onOk, contentWrapperProps = {} } = props, rest = __rest(props, ["value", "content", "options", "okButtonProps", "cancelButtonProps", "title", "open", "menuRef", "onChange", "onOk", "contentWrapperProps"]);
     const [selected, setSelected] = useState(null);
     const [open, setOpen] = useState(false);
     const handleSetMenuRef = useCallback((ref) => {
@@ -51,5 +52,5 @@ export const ModalSelect = (props) => {
     };
     return (React.createElement(StyledModal, Object.assign({}, rest, { open: open, onOk: handleOk, okButtonProps: Object.assign(Object.assign({}, okButtonProps), { className: `${okButtonProps.className} ok-btn` }), cancelButtonProps: Object.assign(Object.assign({}, cancelButtonProps), { className: `${cancelButtonProps.className} cancel-btn` }), title: title || 'Select' }),
         React.createElement(Menu, { ref: handleSetMenuRef, items: options, selectedKeys: [selected || ''], onClick: info => handleClickItem(info.key) }),
-        React.createElement("div", { className: "content" }, renderContent())));
+        React.createElement("div", Object.assign({}, contentWrapperProps, { className: clsx(contentWrapperProps === null || contentWrapperProps === void 0 ? void 0 : contentWrapperProps.className, 'ModalSelect-content') }), renderContent())));
 };

package/es/components/molecules/ModalSelect/styled.js

@@ -63,12 +63,14 @@ export const StyledModal = styled(Modal) `
         }
       }
 
-      > .content {
-        overflow: hidden;
+      > .ModalSelect-content {
         margin-left: 80px;
+        border-radius: 10px;
+        overflow: hidden;
 
         &:hover {
           overflow: auto;
+          scrollbar-width: none;
         }
       }
     }
@@ -143,7 +145,6 @@ export const CardRecommendedContainer = styled.div `
       line-height: 14px;
       font-size: 12px;
       padding: 5px 10px;
-      border-radius: 24px;
 
       &.antsomi-tag-borderless {
         border-width: 0;

package/es/components/molecules/ModalSelect/types.d.ts

@@ -6,6 +6,7 @@ export type ModalSelectProps = {
     value?: string;
     options?: MenuProps['items'];
     content?: (active: string | null) => React.ReactNode;
+    contentWrapperProps?: React.ComponentProps<'div'>;
     onChange?: (active: string) => void;
     menuRef?: RefCallback<HTMLUListElement>;
     onOk?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, active: string | null) => void;

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

@@ -5,6 +5,7 @@ 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
@@ -17,14 +18,10 @@ const SubLogoAntsomi = 'https://st-media-template.antsomi.com/icons/antsomi/ants
 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, } = useLeftMenu(props);
+    const { state, activeAppCode, permissionMenu, customActiveAppKey, onToggleChildMenu, onMouseEnter, onMouseLeave, onHoverMenuBar, onShowPopover, } = useLeftMenu(props);
     const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
-    const childMenu = useMemo(() => {
-        const appActiveKey = state.hoverItem
-            ? state.hoverItem
-            : isCustomized || isRecommendation
-                ? customActiveAppKey
-                : activeAppCode;
+    const childActiveMenu = useMemo(() => {
+        const appActiveKey = isCustomized || isRecommendation ? customActiveAppKey : activeAppCode;
         if (isCustomized)
             return React.createElement(CustomMenu, null);
         switch (appActiveKey) {
@@ -33,7 +30,18 @@ export const LeftMenuComponent = memo(props => {
             default:
                 return React.createElement(CommonMenu, null);
         }
-    }, [activeAppCode, customActiveAppKey, isCustomized, isRecommendation, state.hoverItem]);
+    }, [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: true });
+            default:
+                return React.createElement(CommonMenu, { isHover: true });
+        }
+    }, [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;
@@ -90,15 +98,15 @@ export const LeftMenuComponent = memo(props => {
     };
     return (React.createElement(LeftMenuNavWrapper, { style: style, "$isExpandMenu": state.isExpandMenu, className: className },
         React.createElement(LeftMenuNav, { className: "left-menu-nav" },
-            React.createElement(FeatureMenuWrapper, { vertical: true },
+            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", onMouseLeave: onMouseLeave },
+                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 }),
-                    React.createElement(PopoverWrapper, { className: "antsomi-scroll-box antsomi-child-menu-popover", onMouseLeave: onMouseLeave },
-                        React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childMenu))),
+                    React.createElement(PopoverWrapper, { show: state.isShowPopover && isExpandable, 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: {
@@ -107,5 +115,5 @@ export const LeftMenuComponent = memo(props => {
                         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%' } }, childMenu))));
-});
+            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

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

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

@@ -6,9 +6,11 @@ import { ChildMenu } from '../common';
 import { useLeftMenuContext } from '../../contexts';
 // Utils
 import { getMenuItem } from '../../utils';
-export const CommonMenu = memo(() => {
+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]);
-    return React.createElement(ChildMenu, { items: customChildren, onMenuClick: onMenuClick });
+    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

@@ -1,5 +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

@@ -4,8 +4,9 @@ import React, { memo } from 'react';
 import { ChildMenu } from '../common';
 // Hooks
 import { useLeftMenuContext } from '../../contexts';
-export const CustomMenu = memo(() => {
+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: appCustomMenuChildren, onMenuClick: onMenuClick });
+    return (React.createElement(ChildMenu, { items: isHover ? appCustomHoverMenuChildren : appCustomMenuChildren, onMenuClick: onMenuClick }));
 });

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

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

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

@@ -9,44 +9,8 @@ import Icon from '@antscorp/icons';
 import { CreateButton, HomeMenuWrapper, ModalWrapper } from './styled';
 // Hooks
 import { useHomeMenu } from './useHomeMenu';
-// const MAP_TITLE = {
-//   REMOVE_ACCESS: {
-//     HEADING: getTranslateMessage(TRANSLATE_KEY._TITL_REMOV_ACCESS_TAB, 'Remove access to this tab'),
-//     BODY: getTranslateMessage(
-//       TRANSLATE_KEY.REMOV_ACCESS_TAB,
-//       'This action will remove your access to this tab. You will not see it anymore. Are you sure you want to continue?',
-//     ),
-//     HEADING_DASHBOARD: getTranslateMessage(
-//       TRANSLATE_KEY._TITL_REMOV_ACCESS_DB,
-//       'Remove access to this dashboard',
-//     ),
-//     BODY_DASHBOARD: getTranslateMessage(
-//       TRANSLATE_KEY.REMOV_ACCESS_DB,
-//       'This action will remove your access to selected dashboard. You will not see it anymore. Are you sure you want to continue?',
-//     ),
-//   },
-//   DELETE_TAB: {
-//     HEADING: getTranslateMessage(TRANSLATE_KEY._TITL_DELETE_TAB, 'Remove this tab'),
-//     BODY: getTranslateMessage(
-//       TRANSLATE_KEY.DELETE_TAB_MESS,
-//       'Removing this tab will delete it permanently. Are you sure you want to perform this action?',
-//     ),
-//     HEADING_DASHBOARD: getTranslateMessage(TRANSLATE_KEY._TITL_DELETE_DB, 'Remove this dashboard'),
-//     BODY_DASHBOARD: getTranslateMessage(
-//       TRANSLATE_KEY.DELETE_DB_MESS,
-//       'Removing this dashboard will delete it permanently. Are you sure you want to perform this action?',
-//     ),
-//   },
-//   'my-report-template': {
-//     HEADING: getTranslateMessage(TRANSLATE_KEY._TITL_SHARE_RP, 'Share Report'),
-//     BODY: getTranslateMessage(
-//       TRANSLATE_KEY._SHARE_RP_MESS,
-//       'Sharing this tab with Public access will make your report public for everyone on the portal.',
-//     ),
-//   },
-// };
-export const HomeMenu = memo(() => {
-    const { children, removedDashboardId, isDashboardRemoving, isRecommendation, setRemovedDashboardId, onCreateNewReport, onMenuClick, onRemoveDashboard, } = 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 },

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export declare const useHomeMenu: () => {
+import { HomeMenuProps } from '.';
+export declare const useHomeMenu: (props: HomeMenuProps) => {
     children: import("../../types").TMenuItem[];
     removedDashboardId: string;
     isDashboardRemoving: boolean;

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

@@ -21,10 +21,12 @@ 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';
-export const useHomeMenu = () => {
+export const useHomeMenu = (props) => {
+    const { isHover } = props;
     const { pathname, search } = 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; });
@@ -55,6 +57,10 @@ export const useHomeMenu = () => {
         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), { options: Object.values(CONFIG_OPTIONS), optionCallback: onOptionCallback }))) }));
     }), [appMenuChildren, onOptionCallback]);
+    const customHoverChildren = useMemo(() => appHoverMenuChildren === null || appHoverMenuChildren === void 0 ? void 0 : appHoverMenuChildren.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), { options: Object.values(CONFIG_OPTIONS), optionCallback: onOptionCallback }))) }));
+    }), [appHoverMenuChildren, onOptionCallback]);
     const onCreateNewReport = useCallback(e => {
         if (onClickCreateDashboard) {
             onClickCreateDashboard(e);
@@ -110,7 +116,7 @@ export const useHomeMenu = () => {
         navigate,
     ]);
     return {
-        children: customChildren,
+        children: isHover ? customHoverChildren : customChildren,
         removedDashboardId,
         isDashboardRemoving,
         isRecommendation,

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

@@ -1,9 +1,10 @@
 // Libraries
-import React, { memo, useLayoutEffect, useState } from 'react';
+import React, { memo, useLayoutEffect, useMemo, useState } from 'react';
 import Icon from '@antscorp/icons';
 import { isEmpty, isNil, uniq } from 'lodash';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
+import { Cookies } from 'react-cookie';
 // Components
 import { Dropdown, Menu } from 'antd';
 import { MenuItemImage } from './components';
@@ -18,10 +19,10 @@ import { findActiveAppCodeByUrl, findLastMatchedItemByUrl, getMenuItem } from '.
 import { findItemByPermissionCode, recursiveFindItemByKey, recursiveFindParentOfActiveItem, } from './utils';
 // Hooks
 import { useNavigatePath } from '../../../hooks';
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 // Contexts
 import { useLeftMenuContext } from '../../../contexts';
 import { MARKETING_CHANNEL_CODE } from '@antscorp/antsomi-ui/es/components/template/Layout/constants';
-import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 const noDashboardItem = {
     key: 'no_dashboard',
     label: 'No dashboard available',
@@ -38,8 +39,9 @@ const styles = {
     menuItemTitle: { flex: '1 1 0%', maxWidth: '100%', overflow: 'hidden' },
 };
 export const ChildMenu = memo(props => {
-    var _a;
+    var _a, _b;
     const { items = [], onMenuClick } = props;
+    const cookies = useMemo(() => new Cookies(), []);
     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 activeAppCode = useLeftMenuContext(store => store.activeAppCode);
@@ -47,17 +49,20 @@ export const ChildMenu = memo(props => {
     const customItems = useLeftMenuContext(store => store.customItems);
     const isCustomized = useLeftMenuContext(store => store.isCustomized);
     const isRecommendation = useLeftMenuContext(store => store.isRecommendation);
+    const customActiveAppKey = useLeftMenuContext(store => store.customActiveAppKey);
     const customActiveCurrentKey = useLeftMenuContext(store => store.customActiveCurrentKey);
     const setLeftMenuState = useLeftMenuContext(store => store.setState);
-    const layout = JSON.parse(localStorage.getItem('layout') || '{}');
-    const openMenuKeys = ((_a = layout === null || layout === void 0 ? void 0 : layout.leftMenu) === null || _a === void 0 ? void 0 : _a.openMenuKeys) || [];
+    const activeApp = useMemo(() => (isCustomized ? customActiveAppKey : activeAppCode), [activeAppCode, customActiveAppKey, isCustomized]);
+    const leftMenuCookies = cookies.get('_leftmenu_state');
+    const openMenuKeys = ((_b = (_a = cookies.get('_leftmenu_state')) === null || _a === void 0 ? void 0 : _a.openMenuKeys) === null || _b === void 0 ? void 0 : _b[activeApp]) || [];
     const [currentActiveItem, setCurrentActiveItem] = useState('');
     const [openKeys, setOpenKeys] = useState(openMenuKeys);
     const { pathname, hash } = window.location;
     const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
     useLayoutEffect(() => {
-        localStorage.setItem('layout', JSON.stringify(Object.assign(Object.assign({}, layout), { leftMenu: Object.assign(Object.assign({}, layout === null || layout === void 0 ? void 0 : layout.leftMenu), { openMenuKeys: uniq(openKeys) }) })));
-    }, [layout, openKeys]);
+        if (activeApp)
+            cookies.set('_leftmenu_state', Object.assign(Object.assign({}, leftMenuCookies), { openMenuKeys: Object.assign(Object.assign({}, leftMenuCookies === null || leftMenuCookies === void 0 ? void 0 : leftMenuCookies.openMenuKeys), { [activeApp]: uniq(openKeys === null || openKeys === void 0 ? void 0 : openKeys.filter(item => item !== activeApp)) }) }));
+    }, [activeApp, cookies, leftMenuCookies, openKeys]);
     useDeepCompareEffect(() => {
         var _a;
         switch (true) {
@@ -69,7 +74,7 @@ export const ChildMenu = memo(props => {
                     menuItems: customItems,
                 });
                 if (parentKey) {
-                    setOpenKeys(prev => [...prev, parentKey]);
+                    setOpenKeys(prev => uniq([...prev, parentKey]));
                 }
                 break;
             }
@@ -129,7 +134,7 @@ export const ChildMenu = memo(props => {
                         menuItems: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(item => (Object.assign(Object.assign({}, getMenuItem(item)), { key: (item === null || item === void 0 ? void 0 : item.permission_code) || '' }))),
                     });
                     if (parentKey) {
-                        setOpenKeys(prev => [...prev, parentKey]);
+                        setOpenKeys(prev => uniq([...prev, parentKey]));
                     }
                 }
                 break;
@@ -151,7 +156,7 @@ export const ChildMenu = memo(props => {
                         menuItems: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(item => getMenuItem(item)),
                     });
                     if (parentKey) {
-                        setOpenKeys(prev => [...prev, parentKey]);
+                        setOpenKeys(prev => uniq([...prev, parentKey]));
                     }
                     // Active App Item having code matching url
                     const matchAppCode = findActiveAppCodeByUrl({ menuItems, url, auth });
@@ -247,6 +252,6 @@ export const ChildMenu = memo(props => {
     };
     return (React.createElement(MenuWrapper, null,
         React.createElement(Menu, { selectedKeys: [currentActiveItem], defaultOpenKeys: [currentActiveItem], openKeys: uniq(openKeys), mode: "inline", items: customMenuItems({ items }), inlineIndent: 12, onOpenChange: openKeys => {
-                setOpenKeys(openKeys);
+                setOpenKeys(uniq(openKeys));
             }, expandIcon: ({ isOpen }) => (React.createElement(Icon, { type: "icon-ants-expand-more", style: Object.assign(Object.assign({}, styles.expandIcon), { transform: `rotate(${isOpen ? '180deg' : '0deg'})` }) })), onClick: onClick })));
 });

package/es/components/organism/LeftMenu/hooks/useLeftMenu.d.ts

@@ -2,6 +2,7 @@ import { LeftMenuProps } from '..';
 interface TState {
     hoverItem: string;
     isExpandMenu: boolean;
+    isShowPopover: boolean;
 }
 export declare const useLeftMenu: (props: LeftMenuProps) => {
     state: TState;
@@ -12,5 +13,6 @@ export declare const useLeftMenu: (props: LeftMenuProps) => {
     onMouseEnter: (key: string) => void;
     onMouseLeave: () => void;
     onHoverMenuBar: () => void;
+    onShowPopover: (hoverItem?: string) => void;
 };
 export {};

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

@@ -1,6 +1,7 @@
 // Libraries
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { isArray, isNil } from 'lodash';
+import { Cookies } from 'react-cookie';
 // Utils
 import { findActiveAppCodeByChild, findActiveAppCodeByUrl, recursiveGetMenuItemByPermission, } from '../utils';
 // Store
@@ -9,12 +10,11 @@ import { useLeftMenuContext } from '../contexts';
 import { DASHBOARD_MODULE_CONFIG } from '../../../template/Layout/constants';
 // Hooks
 import { usePermission } from './usePermission';
-import { Cookies } from 'react-cookie';
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 export const useLeftMenu = (props) => {
     // Props
     const { objectType = DASHBOARD_MODULE_CONFIG.objectType, objectId = DASHBOARD_MODULE_CONFIG.objectId, isGrouped = DASHBOARD_MODULE_CONFIG.isGrouped, appConfig, customization, onActiveMenuCodeChange, } = props;
-    const { isExpandable = true, expandMenu = false, isCustomized = false, isRecommendation = false, items, activeKey, onMenuItemClick, } = customization || {};
+    const { expandMenu = false, isCustomized = false, isRecommendation = false, items, activeKey, onMenuItemClick, } = customization || {};
     const mappedActiveKey = useMemo(() => {
         if (!isRecommendation)
             return activeKey;
@@ -32,16 +32,18 @@ export const useLeftMenu = (props) => {
                 return activeKey;
         }
     }, [activeKey, isRecommendation]);
-    const cookie = new Cookies();
+    const cookies = new Cookies();
     const { pathname, hash, origin } = window.location;
     const activeAppCode = useLeftMenuContext(store => store.activeAppCode);
     const customActiveAppKey = useLeftMenuContext(store => store.customActiveAppKey);
     const setLeftMenuContextState = useLeftMenuContext(store => store.setState);
     const { auth, env } = appConfig || {};
-    const leftMenuCookies = cookie.get('_leftmenu_state');
+    const timeoutPopover = useRef(null);
+    const leftMenuCookies = cookies.get('_leftmenu_state');
     const isOpenMenu = !isNil(leftMenuCookies === null || leftMenuCookies === void 0 ? void 0 : leftMenuCookies.expand) ? leftMenuCookies === null || leftMenuCookies === void 0 ? void 0 : leftMenuCookies.expand : true;
     const [state, setState] = useState({
         hoverItem: '',
+        isShowPopover: false,
         isExpandMenu: expandMenu || isOpenMenu,
     });
     const { mappingChildrenMenu, flattenMenuPermission, permissionMenu, activeItemPath } = usePermission();
@@ -53,7 +55,7 @@ export const useLeftMenu = (props) => {
     }, [customActiveAppKey, isRecommendation, onMenuItemClick, setLeftMenuContextState]);
     useDeepCompareEffect(() => {
         if (!expandMenu) {
-            cookie.set('_leftmenu_state', Object.assign(Object.assign({}, leftMenuCookies), { expand: state.isExpandMenu }));
+            cookies.set('_leftmenu_state', Object.assign(Object.assign({}, leftMenuCookies), { expand: state.isExpandMenu }));
             // const domain = '.antsomi.com';
             // const cookieValue = {
             //   ...leftMenuCookies,
@@ -119,25 +121,27 @@ export const useLeftMenu = (props) => {
     ]);
     // Change list menu children when hovering or activating items, giving priority to hovering items
     useDeepCompareEffect(() => {
-        var _a, _b, _c;
-        const appActiveKey = state.hoverItem
-            ? state.hoverItem
-            : isCustomized || isRecommendation
-                ? customActiveAppKey
-                : activeAppCode;
+        var _a, _b, _c, _d, _e, _f;
+        const appActiveKey = isCustomized || isRecommendation ? customActiveAppKey : activeAppCode;
         switch (true) {
             case isCustomized: {
                 setLeftMenuContextState({
                     customItems: items,
                     customMenuChildren: ((_a = items === null || items === void 0 ? void 0 : items.find(item => item.key === appActiveKey)) === null || _a === void 0 ? void 0 : _a.children) || [],
+                    customHoverMenuChildren: state.hoverItem
+                        ? ((_b = items === null || items === void 0 ? void 0 : items.find(item => item.key === state.hoverItem)) === null || _b === void 0 ? void 0 : _b.children) || []
+                        : [],
                 });
                 break;
             }
             case isRecommendation: {
                 setLeftMenuContextState({
                     menuItems: mappingChildrenMenu,
-                    appMenuChildren: ((_b = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.permission_code === appActiveKey)) === null || _b === void 0 ? void 0 : _b.children) ||
+                    appMenuChildren: ((_c = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.permission_code === appActiveKey)) === null || _c === void 0 ? void 0 : _c.children) ||
                         [],
+                    appHoverMenuChildren: state.hoverItem
+                        ? ((_d = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.permission_code === state.hoverItem)) === null || _d === void 0 ? void 0 : _d.children) || []
+                        : [],
                 });
                 break;
             }
@@ -145,8 +149,11 @@ export const useLeftMenu = (props) => {
                 if (isArray(mappingChildrenMenu)) {
                     setLeftMenuContextState({
                         menuItems: mappingChildrenMenu,
-                        appMenuChildren: ((_c = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.menu_item_code === appActiveKey)) === null || _c === void 0 ? void 0 : _c.children) ||
+                        appMenuChildren: ((_e = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.menu_item_code === appActiveKey)) === null || _e === void 0 ? void 0 : _e.children) ||
                             [],
+                        appHoverMenuChildren: state.hoverItem
+                            ? ((_f = mappingChildrenMenu === null || mappingChildrenMenu === void 0 ? void 0 : mappingChildrenMenu.find(item => item.menu_item_code === state.hoverItem)) === null || _f === void 0 ? void 0 : _f.children) || []
+                            : [],
                     });
                 }
                 break;
@@ -204,24 +211,38 @@ export const useLeftMenu = (props) => {
         isRecommendation,
         onActiveMenuCodeChange,
     ]);
+    useEffect(() => clearTimeout(timeoutPopover === null || timeoutPopover === void 0 ? void 0 : timeoutPopover.current), [timeoutPopover]);
+    const onShowPopover = useCallback((hoverItem) => {
+        if (timeoutPopover)
+            clearTimeout(timeoutPopover === null || timeoutPopover === void 0 ? void 0 : timeoutPopover.current);
+        if (!state.isShowPopover)
+            setState(prev => (Object.assign(Object.assign({}, prev), { isShowPopover: true })));
+        if (hoverItem)
+            setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem })));
+    }, [state.isShowPopover]);
     const onToggleChildMenu = useCallback(() => {
         setState(prev => (Object.assign(Object.assign({}, prev), { isExpandMenu: !prev.isExpandMenu })));
     }, []);
     const onMouseEnter = useCallback((key) => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: key })));
-        // if (!state.isExpandMenu || !isExpandable) {
-        //   setState(prev => ({ ...prev, hoverItem: key }));
-        // }
-    }, []);
+        if (state.hoverItem !== key) {
+            onShowPopover(key);
+            // if (!state.isExpandMenu || !isExpandable) {
+            //   setState(prev => ({ ...prev, hoverItem: key }));
+            // }
+        }
+    }, [state.hoverItem, onShowPopover]);
     const onMouseLeave = useCallback(() => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: '' })));
+        timeoutPopover.current = setTimeout(() => {
+            setState(prev => (Object.assign(Object.assign({}, prev), { hoverItem: '' })));
+            setState(prev => (Object.assign(Object.assign({}, prev), { isShowPopover: false })));
+        }, 500);
         // if (!state.isExpandMenu || !isExpandable) {
         //   setState(prev => ({ ...prev, hoverItem: '' }));
         // }
     }, []);
-    const onHoverMenuBar = () => {
+    const onHoverMenuBar = useCallback(() => {
         onMouseEnter(isCustomized ? customActiveAppKey : activeAppCode);
-    };
+    }, [activeAppCode, customActiveAppKey, isCustomized, onMouseEnter]);
     return {
         state,
         activeAppCode,
@@ -231,5 +252,6 @@ export const useLeftMenu = (props) => {
         onMouseEnter,
         onMouseLeave,
         onHoverMenuBar,
+        onShowPopover,
     };
 };

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

@@ -1,10 +1,10 @@
 // Libraries
-import { useContextSelector } from 'use-context-selector';
 import { useCallback, useMemo } from 'react';
 import { isNil } from 'lodash';
 import { useLocation } from 'react-router-dom';
+import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 // Contexts
-import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
+import { useLeftMenuContext } from '../contexts';
 // Utils
 import { getGeneratePath } from '../utils';
 import { hasSelectAccountPermission } from '../../../template/Layout/utils';
@@ -13,11 +13,12 @@ import { ENV } from '@antscorp/antsomi-ui/es/config';
 // Hooks
 import { usePermission } from './usePermission';
 export const useNavigatePath = () => {
-    const { auth, env } = useContextSelector(AppConfigContext, state => state);
+    const appConfig = useLeftMenuContext(store => store.appConfig);
+    const { auth, env } = appConfig || {};
     const { search } = useLocation();
     const isDev = env === ENV.DEV;
     const { activeItemPath, flattenMenuPermission } = usePermission();
-    const hasRole = useMemo(() => hasSelectAccountPermission(activeItemPath, flattenMenuPermission), [activeItemPath, flattenMenuPermission]);
+    const hasRole = useDeepCompareMemo(() => hasSelectAccountPermission(activeItemPath, flattenMenuPermission), [activeItemPath, flattenMenuPermission]);
     const urlParams = useMemo(() => new URLSearchParams(search), [search]);
     const oidParam = hasRole ? urlParams.get('oid') : null;
     const searchParams = oidParam ? `?oid=${oidParam}` : '';

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

@@ -8,7 +8,9 @@ export interface LeftMenuStoreProps {
     menuItems: TFeatureMenu[];
     customItems: TMenuItem[];
     customMenuChildren: TMenuItem[];
+    customHoverMenuChildren: TMenuItem[];
     appMenuChildren: TFeatureMenu[];
+    appHoverMenuChildren: TFeatureMenu[];
     appConfig?: AppConfigProviderProps;
     isCustomized?: boolean;
     isRecommendation?: boolean;

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

@@ -6,8 +6,10 @@ const DEFAULT_PROPS = {
     customActiveCurrentKey: '',
     menuItems: [],
     appMenuChildren: [],
+    appHoverMenuChildren: [],
     customItems: [],
     customMenuChildren: [],
+    customHoverMenuChildren: [],
     isCustomized: false,
     isRecommendation: false,
     dashboardParams: {

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

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PopoverWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PopoverWrapper: import("styled-components").StyledComponent<"div", any, {
+    show: boolean;
+}, never>;
 export declare const FeatureMenuWrapper: 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 ExpandWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LeftMenuNavWrapper: import("styled-components").StyledComponent<"div", any, {

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

@@ -19,8 +19,16 @@ export const IconWrapper = styled.div `
   }
 `;
 export const PopoverWrapper = styled.div `
-  opacity: 0;
-  visibility: hidden;
+  ${({ show }) => show
+    ? `
+      opacity: 1;
+      visibility: visible;
+      `
+    : `
+      opacity: 0;
+      visibility: hidden;
+    `}
+
   position: absolute;
   background-color: white;
   left: 65px;
@@ -36,13 +44,6 @@ export const PopoverWrapper = styled.div `
 export const FeatureMenuWrapper = styled(Flex) `
   flex: 1 1 0%;
   overflow: hidden;
-
-  &:hover {
-    ${PopoverWrapper} {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
 `;
 export const ExpandWrapper = styled.div `
   height: 35px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.407",
+  "version": "1.3.5-beta.408",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",