META-INF.resources.js.NavigationMenuItemsTree.js Maven / Gradle / Ivy

Go to download
/**
 * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
 * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
 */

import {TreeView as ClayTreeView} from '@clayui/core';
import ClayIcon from '@clayui/icon';
import {useSessionState} from 'frontend-js-components-web';
import PropTypes from 'prop-types';
import React, {useRef} from 'react';

const ENTER_KEYCODE = 13;

export default function NavigationMenuItemsTree({
	portletNamespace,
	selectedSiteNavigationMenuItemId,
	siteNavigationMenuItems,
}) {
	const [expandedKeys, setExpandedKeys] = useSessionState(
		`${portletNamespace}_navigationMenusExpandedKeys`,
		[selectedSiteNavigationMenuItemId]
	);

	return (
		 {
				setExpandedKeys(Array.from(keys));
			}}
			showExpanderOnHover={false}
		>
			{(item) => (
				
			)}
		
	);
}

NavigationMenuItemsTree.propTypes = {
	portletNamespace: PropTypes.string.isRequired,
	selectedSiteNavigationMenuItemId: PropTypes.string.isRequired,
	siteNavigationMenuItems: PropTypes.array.isRequired,
};

function TreeItem({item, selectedItemId}) {
	const hasUrl = item.url && item.url !== '#';

	const stackAnchorRef = useRef(null);
	const itemAnchorRef = useRef(null);

	return (
		
			 {
					if (event.keyCode === ENTER_KEYCODE && hasUrl) {
						stackAnchorRef.current.click();
					}
				}}
			>
				

				
					{hasUrl ? (
						
							{item.name}
						
					) : (
						{item.name}
					)}
				
			

			
				{(item) => (
					 {
							if (event.keyCode === ENTER_KEYCODE && hasUrl) {
								stackAnchorRef.current.click();
							}
						}}
					>
						

						
							{hasUrl ? (
								
									{item.name}
								
							) : (
								{item.name}
							)}
						
					
				)}
			
		
	);
}

TreeItem.propTypes = {
	items: PropTypes.array.isRequired,
	selectedItemId: PropTypes.string.isRequired,
};