META-INF.resources.js.pages.questions.components.ManagementToolbar.ManagementToolbar.es.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 ClayButton, {ClayButtonWithIcon} from '@clayui/button';
import {ClayInput} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import ClayManagementToolbar from '@clayui/management-toolbar';
import React, {useEffect, useState} from 'react';

import {slugToText} from '../../../../utils/utils.es';
import ManagementToolbarResults from './ManagementToolbarResults.es';

const ManagementToolbar = ({
	filterAndOrder,
	keywords,
	loading,
	maxNumberOfSearchResults,
	onClear,
	onSearch,
	plusButton,
	resultBar,
	search,
	subscribeButton,
	totalResults,
}) => {
	const [searchInput, setSearchInput] = useState('');
	const [searchMobile, setSearchMobile] = useState(false);

	const showResultsBar = !!(keywords || resultBar?.length);

	useEffect(() => {
		setSearchInput(slugToText(search));
	}, [search]);

	return (
		
			
				
					
						{subscribeButton}
					

					
						{filterAndOrder}
					
				

				 {
						event.preventDefault();

						onSearch(searchInput);
					}}
					showMobile={searchMobile}
				>
					
						
							
									setSearchInput(event.target.value)
								}
								placeholder={Liferay.Language.get('search')}
								type="text"
								value={searchInput}
							/>

							
								 setSearchMobile(false)}
									symbol="times"
								/>

								
							
						
					
				

				
					
						 setSearchMobile(true)}
						>
							
						
					

					
						{plusButton}
					
				
			

			{showResultsBar && (
				
			)}
		
	);
};

export default ManagementToolbar;