META-INF.resources.js.components.sidebar.SidebarHeader.tsx 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 {ClayButtonWithIcon} from '@clayui/button';
import {ClayInput} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import {ClayResultsBar} from '@clayui/management-toolbar';
import classNames from 'classnames';
import {sub} from 'frontend-js-web';
import React, {Dispatch, SetStateAction} from 'react';

interface SidebarHeaderProps {
	navHistory: ObjectDefinition[][];
	searchKeyword: string;
	setNavHistory: Dispatch>;
	setSearchKeyword: Dispatch>;
}

export default function SidebarHeader({
	navHistory,
	searchKeyword,
	setNavHistory,
	setSearchKeyword,
}: SidebarHeaderProps) {
	const getParentLabel = (history: ObjectDefinition[][]) => {
		let label;

		for (const item of history[1]) {
			const matches: boolean[] = [];

			if (item.objectRelationships.length === history[0].length) {
				item.objectRelationships.forEach(
					({objectDefinitionId2}, index) =>
						matches.push(
							objectDefinitionId2 === history[0][index].id
						)
				);
			}

			if (matches.length && !matches.includes(false)) {
				label = item.label[Liferay.ThemeDisplay.getDefaultLanguageId()];

				break;
			}
		}

		return label ?? '';
	};

	return (
		 1,
				'sidebar-header': true,
			})}
		>
			
				{Liferay.Language.get('properties')}
			

			

			
				
					
						
								setSearchKeyword(value)
							}
							placeholder={Liferay.Language.get('search')}
							type="text"
							value={searchKeyword}
						/>

						{searchKeyword === '' ? (
							
								
							
						) : (
							
								 setSearchKeyword('')}
									symbol="times"
								/>
							
						)}
					
				
			

			{navHistory?.length > 1 && (
				<>
					

					
						
							
								
										navHistory.length > 1 &&
										setNavHistory([...navHistory.slice(1)])
									}
									symbol="angle-left"
								/>
							

							
								"${getParentLabel(
												navHistory
											)}"`
										),
									}}
								/>
							

							
								
										setNavHistory((previous) => [
											previous[previous.length - 1],
										])
									}
									symbol="times-circle"
								/>
							
						
					
				
			)}
		
	);
}