META-INF.resources.sxp_blueprint_options.js.configuration.ManagementToolbar.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 {ClayDropDownWithItems} from '@clayui/drop-down';
import {ClayInput} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import {ManagementToolbar as FrontendManagementToolbar} from 'frontend-js-components-web';
import React, {useState} from 'react';

import sub from '../../../sxp_blueprint_admin/js/utils/language/sub';

const ManagementToolbar = ({
	filterItems,
	loading,
	onChangeSortOrder,
	onSearch,
	searchValue,
	sortOrder,
	totalCount,
}) => {
	const [searchInputValue, setSearchInputValue] = useState(searchValue);
	const [searchMobile, setSearchMobile] = useState(false);

	return (
		<>
			
				
					
								
									
										{Liferay.Language.get(
											'filter-and-order'
										)}
									

									
								

								
									
								
							
						}
					/>

					
						
							{sortOrder === 'asc' ? (
								
							) : (
								
							)}
						
					
				

				
					
						
							 {
									setSearchInputValue(event.target.value);
								}}
								onKeyDown={(event) => {
									if (event.key === 'Enter') {
										event.preventDefault();

										onSearch(searchInputValue);
									}
								}}
								placeholder={Liferay.Language.get('search')}
								type="text"
								value={searchInputValue}
							/>

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

								 onSearch(searchInputValue)}
									symbol="search"
								/>
							
						
					
				

				
					
						 setSearchMobile(true)}
						>
							
						
					
				
			

			{!!searchValue && !loading && (
				
					
						
							
								{sub(
									totalCount === 1
										? Liferay.Language.get('x-result-for-x')
										: Liferay.Language.get(
												'x-results-for-x'
											),
									[totalCount, searchValue]
								)}
							
						
					

					
						 {
								onSearch('');
								setSearchInputValue('');
							}}
						>
							{Liferay.Language.get('clear')}
						
					
				
			)}
		
	);
};

export default ManagementToolbar;