\r\n \r\n {menuOptions}\r\n \r\n \r\n {\r\n isCategoryImageDisplay && ArrayExtensions.hasElements(categoryImages) && categoryImages.map(item => (\r\n \r\n { getCategoryImage(this.props, item.src ?? '', item.altText!.toString())}\r\n { isPromotionalContentDisplay && this._renderPromotionalLink(item.altText, item.additionalProperties?.linkUrl)}\r\n ))\r\n }\r\n
\r\n \r\n );\r\n }\r\n\r\n /**\r\n * Handle Category image update.\r\n * @param categoryImageSource - Image source.\r\n * @param option - Menu Item data.\r\n * @returns Returns empty.\r\n */\r\n private readonly _updateCategoryImage = (categoryImageSource: string, option: IMenuItemData) => () => {\r\n const linkText = option.linkText ? option.linkText : '';\r\n const promotionalImage: Msdyn365.IImageData[] = [{ src: categoryImageSource, altText: linkText }];\r\n\r\n // Read category and promotional image in one array\r\n if (ArrayExtensions.hasElements(option.promotionalContent)) {\r\n for (const item of option.promotionalContent) {\r\n const imageSource = item.image.src;\r\n promotionalImage.push({ src: imageSource, altText: item.text, additionalProperties: { linkUrl: item.linkUrl.destinationUrl } });\r\n }\r\n }\r\n this.setState({\r\n categoryImage: ArrayExtensions.hasElements(promotionalImage) ? promotionalImage : [{ src: 'empty' }]\r\n });\r\n };\r\n\r\n /**\r\n * Handle dropdown toggle.\r\n * @param data - Menu Item data.\r\n * @param parentId - Number.\r\n * @returns Returns empty.\r\n */\r\n private readonly _handleDropdownToggle = (data: IMenuItemData, parentId?: number) => () => {\r\n if (!this.state.isOnlyMobile) {\r\n this.setState({\r\n activeMenu: data.id,\r\n parentMenu: parentId\r\n });\r\n if (this.props.navProps.showCategoryImage) {\r\n this._updateCategoryImage(data.imageSource!, data)();\r\n }\r\n } else {\r\n NavigationMenuRootDisabled.isBackTrack = false;\r\n this.setState({\r\n activeMenu: data.id,\r\n mobileViewLabelText: data.linkText!,\r\n parentMenu: parentId\r\n });\r\n }\r\n\r\n };\r\n\r\n /**\r\n * Handle back navigation for menu items for mobile view.\r\n * @returns Returns empty.\r\n */\r\n private readonly _handleGoBack = () => () => {\r\n NavigationMenuRootDisabled.isBackTrack = true;\r\n this.setState((previousState) => ({ activeMenu: previousState.parentMenu }));\r\n };\r\n\r\n /**\r\n * Function to close the nav menu on click on body.\r\n * @param event - MouseEvent.\r\n */\r\n private readonly _handleClickOutside = (event: MouseEvent) => {\r\n if (this.menuNode.current &&\r\n !this.menuNode.current.contains(event.target as Node)) {\r\n if (!this.state.isOnlyMobile) {\r\n this.setState({ activeMenu: 1, mobileViewLabelText: '', isNavOpen: false });\r\n } else {\r\n this.setState({ activeMenu: undefined, mobileViewLabelText: '', isNavOpen: false });\r\n }\r\n }\r\n };\r\n\r\n /**\r\n * Checks to assign a ref for focus.\r\n * @param index -Sub menu list index.\r\n * @param mobileViewLabelText -Mobile view label text.\r\n * @param optionLinkText -Sub menu item link text.\r\n * @returns Boolean.\r\n */\r\n private readonly _shouldAddFocusMenuRef = (index: number, mobileViewLabelText?: string, optionLinkText?: string) => {\r\n const firstIndex: number = 0;\r\n if (!NavigationMenuRootDisabled.isBackTrack && index === firstIndex) {\r\n return true;\r\n }\r\n if (!optionLinkText || !mobileViewLabelText) {\r\n return false;\r\n }\r\n return mobileViewLabelText === optionLinkText;\r\n };\r\n\r\n /**\r\n * Function to handle nav menu close.\r\n */\r\n private readonly _closeNavMenu = (): void => {\r\n if (!this.state.isOnlyMobile) {\r\n this.setState({ activeMenu: 1, mobileViewLabelText: '', isNavOpen: false });\r\n } else {\r\n this.setState({ activeMenu: undefined, mobileViewLabelText: '', isNavOpen: false });\r\n }\r\n };\r\n\r\n /**\r\n * Function to close the nav menu on esc key.\r\n * @param event - Event.\r\n */\r\n private readonly _escFunction = (event: React.KeyboardEvent) => {\r\n if (event.keyCode === this.escapeKey && !this.state.isOnlyMobile && this.state.isNavOpen) {\r\n this.setState({ activeMenu: 1, mobileViewLabelText: '', isNavOpen: false });\r\n }\r\n };\r\n\r\n /**\r\n * Custom update viewport.\r\n */\r\n private readonly _customUpdateViewport = (): void => {\r\n this.setState({ isOnlyMobile: this.isOnlyMobile });\r\n };\r\n}\r\n\r\nexport default NavigationMenuRootDisabled;\r\n","/*--------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * See License.txt in the project root for license information.\r\n *--------------------------------------------------------------*/\r\n\r\nimport * as Msdyn365 from '@msdyn365-commerce/core';\r\nimport { IMenuItemData, MenuSource, MenuTypeIndexId } from '@msdyn365-commerce-modules/navigation-menu';\r\nimport { ArrayExtensions, StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\r\nimport {\r\n addThrottledEvent,\r\n Button,\r\n Collapse, Drawer,\r\n getPayloadObject,\r\n getTelemetryAttributes,\r\n getTelemetryObject,\r\n IPayLoad,\r\n isMobile,\r\n ITelemetryContent,\r\n Module,\r\n Node,\r\n onTelemetryClick,\r\n VariantType\r\n} from '@msdyn365-commerce-modules/utilities';\r\nimport classnames from 'classnames';\r\nimport { computed } from 'mobx';\r\nimport * as React from 'react';\r\n\r\nimport { getCategoryImage, INavigationMenuViewRootProps, INavigationState, NavMenuConstants } from './navigation-menu-utilities';\r\n\r\n/**\r\n *\r\n * NavigationMenuRootEnabled component.\r\n * @extends {React.PureComponent