@antscorp/antsomi-ui 1.3.5-beta.533 → 1.3.5-beta.534

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

@@ -3,8 +3,7 @@ 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 { isNil } from 'lodash';
 import isEqual from 'react-fast-compare';
 // Styled
 import { ChildMenuWrapper, ExpandWrapper, FeatureMenu, FeatureMenuItem, LeftMenuNav, LeftMenuNavWrapper, PopoverWrapper, NavLogoWrapper, FeatureMenuWrapper, IconWrapper, } from './styled';
@@ -13,13 +12,12 @@ import { APP_KEYS } from './constants';
 // Components
 import { CustomMenu, CommonMenu, HomeMenu } from './components';
 // Hooks
-import { useLeftMenu, useNavigatePath } from './hooks';
+import { useLeftMenu } 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 { state, activeAppCode, permissionMenu, customActiveAppKey, onToggleChildMenu, onMouseEnter, onMouseLeave, onHoverMenuBar, onShowPopover, onClickFeatureMenuItem, } = useLeftMenu(props);
     const childActiveMenu = useMemo(() => {
         const appActiveKey = isCustomized || isRecommendation ? customActiveAppKey : activeAppCode;
         if (isCustomized)
@@ -43,15 +41,16 @@ export const LeftMenuComponent = memo(props => {
         }
     }, [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 { menu_item_name, menu_item, icon_name, menu_item_code } = 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]);
+        return (React.createElement(FeatureMenuItem, { key: menu_item, onMouseEnter: () => onMouseEnter(menu_item_code) },
+            React.createElement("div", { onClick: () => onClickFeatureMenuItem(item) }, renderLabel())));
+    }, [activeAppCode, state.hoverItem, onClickFeatureMenuItem, onMouseEnter]);
     const renderRecommendationMenuItem = useCallback((item) => {
         const { menu_item_name, menu_item, icon_name, permission_code } = item;
         const isActive = customActiveAppKey === permission_code;

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

@@ -34,7 +34,7 @@ export const HOME_MENU_ITEMS = {
         menu_item_name: 'Dashboard',
         menu_item_code: 'ownedDashboard',
         icon_name: 'icon-ants-dashboard',
-        // menu_item_path: `${HOME_ROUTE}/detail`,
+        menu_item_path: HOME_ROUTE,
         page_title: '_dashboard',
     },
 };

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

@@ -1,4 +1,5 @@
 import { LeftMenuProps } from '..';
+import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
 interface TState {
     hoverItem: string;
     isExpandMenu: boolean;
@@ -7,12 +8,13 @@ interface TState {
 export declare const useLeftMenu: (props: LeftMenuProps) => {
     state: TState;
     activeAppCode: string;
-    permissionMenu: import("../../../../models/LeftMenu").TFeatureMenu[];
+    permissionMenu: TFeatureMenu[];
     customActiveAppKey: string;
     onToggleChildMenu: () => void;
     onMouseEnter: (key: string) => void;
     onMouseLeave: () => void;
     onHoverMenuBar: () => void;
     onShowPopover: (hoverItem?: string) => void;
+    onClickFeatureMenuItem: (item: TFeatureMenu) => void;
 };
 export {};

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

@@ -10,7 +10,9 @@ import { useLeftMenuContext } from '../contexts';
 import { DASHBOARD_MODULE_CONFIG } from '../../../template/Layout/constants';
 // Hooks
 import { usePermission } from './usePermission';
-import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+import { useCustomRouter, useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+import { useNavigatePath } from './useNavigatePath';
+import { flatTree } from '@antscorp/antsomi-ui/es/utils';
 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;
@@ -36,6 +38,8 @@ export const useLeftMenu = (props) => {
     }, [activeKey, isRecommendation]);
     const cookies = new ReactCookies();
     const { pathname, hash, origin } = window.location;
+    const { navigate } = useCustomRouter();
+    const { isPushDifferentDomain, getPath, navigatePath } = useNavigatePath();
     const activeAppCode = useLeftMenuContext(store => store.activeAppCode);
     const customActiveAppKey = useLeftMenuContext(store => store.customActiveAppKey);
     const setLeftMenuContextState = useLeftMenuContext(store => store.setState);
@@ -244,6 +248,38 @@ export const useLeftMenu = (props) => {
     const onHoverMenuBar = useCallback(() => {
         onMouseEnter(isCustomized ? customActiveAppKey : activeAppCode);
     }, [activeAppCode, customActiveAppKey, isCustomized, onMouseEnter]);
+    const onClickFeatureMenuItem = useCallback((item) => {
+        // Destructure permission_code from the item object
+        const { permission_code } = item;
+        // Initialize navigateInfo object with menu_item_domain and menu_item_path from the item
+        let navigateInfo = {
+            menu_item_domain: item.menu_item_domain,
+            menu_item_path: item.menu_item_path,
+        };
+        // Check if permission_code exists
+        if (permission_code) {
+            // Flatten the tree structure of item.children into a single array, filtering out items that have children
+            const flattenChildMenu = flatTree(item.children, 'children').filter(item => !item.children);
+            // Find the first child menu item that matches the permission_code or fallback to the first item in the array or the original item
+            const matchedChildMenu = (flattenChildMenu === null || flattenChildMenu === void 0 ? void 0 : flattenChildMenu.find(child => child.permission_code === permission_code)) ||
+                (flattenChildMenu === null || flattenChildMenu === void 0 ? void 0 : flattenChildMenu[0]) ||
+                item;
+            // If a matching child menu item is found, update navigateInfo with its domain and path
+            if (matchedChildMenu) {
+                navigateInfo = {
+                    menu_item_domain: matchedChildMenu.menu_item_domain,
+                    menu_item_path: matchedChildMenu.menu_item_path,
+                };
+            }
+        }
+        // Check if navigating to a different domain
+        if (!isPushDifferentDomain(navigateInfo.menu_item_domain, navigateInfo.menu_item_path)) {
+            // If not, navigate to the path using getPath and return
+            return navigate(getPath(navigateInfo.menu_item_path));
+        }
+        // If navigating to a different domain, use navigatePath with domain and path
+        navigatePath(navigateInfo.menu_item_domain, navigateInfo.menu_item_path);
+    }, [getPath, isPushDifferentDomain, navigate, navigatePath]);
     return {
         state,
         activeAppCode,
@@ -254,5 +290,6 @@ export const useLeftMenu = (props) => {
         onMouseLeave,
         onHoverMenuBar,
         onShowPopover,
+        onClickFeatureMenuItem,
     };
 };

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

@@ -339,6 +339,10 @@ export const findLastMatchedItemByUrl = (args) => {
             }
         };
         recursiveFindActiveItem(menuItems || []);
+        const recommendationItem = matchedItems.find(item => item.menu_item_code === HOME_MENU_ITEMS.RECOMMENDATION.menu_item_code);
+        if (recommendationItem) {
+            return recommendationItem;
+        }
         return matchedItems === null || matchedItems === void 0 ? void 0 : matchedItems.pop();
     }
     catch (error) {

package/package.json

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