META-INF.resources.js.SelectSiteNavigationMenuItem.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 ClayEmptyState from '@clayui/empty-state';
import ClayForm, {ClayInput} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import ClayLayout from '@clayui/layout';
import {getOpener} from 'frontend-js-web';
import React, {useState} from 'react';

const nodeByName = (items, name) => {
	return items.reduce(function reducer(acc, item) {
		if (item.name?.toLowerCase().includes(name.toLowerCase())) {
			acc.push(item);
		}
		else if (item.children) {
			acc.concat(item.children.reduce(reducer, acc));
		}

		return acc;
	}, []);
};

const SelectSiteNavigationMenuItem = ({itemSelectorSaveEvent, nodes}) => {
	const [items, setItems] = useState(nodes);

	const handleQueryChange = (event) => {
		const value = event.target.value;

		if (!value) {
			setItems(nodes);

			return;
		}

		setItems(nodeByName(nodes, value));
	};

	const handleTreeViewSelectionChange = (event, item) => {
		if (item.disabled) {
			return;
		}

		getOpener().Liferay.fire(itemSelectorSaveEvent, {
			data: {
				selectSiteNavigationMenuItemId: item.id,
				selectSiteNavigationMenuItemName: item.name,
			},
		});
	};

	const onClick = (event, item, expand) => {
		event.preventDefault();

		if (item.disabled) {
			expand.toggle(item.id);

			return;
		}

		handleTreeViewSelectionChange(event, item);
	};

	const onKeyUp = (event, item) => {
		if (event.key === ' ' || event.key === 'Enter') {
			event.preventDefault();

			handleTreeViewSelectionChange(event, item);
		}
	};

	return (
		
			
				
					
						

						
							
								
							
						
					
				
			

			{items.length ? (
				
					{(item, _selection, expand) => (
						
							
									onClick(event, item, expand)
								}
								onKeyDownCapture={(event) => {
									if (event.key === ' ' && item.disabled) {
										event.stopPropagation();
									}
								}}
								onKeyUp={(event) => onKeyUp(event, item)}
							>
								

								{item.name}
							

							
								{(item) => (
									
											onClick(event, item)
										}
										onKeyUp={(event) =>
											onKeyUp(event, item)
										}
									>
										

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

export default SelectSiteNavigationMenuItem;