META-INF.resources.js.components.AutoSearch.tsx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of com.liferay.frontend.data.set.admin.web

Liferay Frontend Data Set Admin Web

The newest version!

/**
 * 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 React, {useState} from 'react';

interface ISearchInterface {
	onSearch: Function;
	query: string;
}

const AutoSearch = ({onSearch, query}: ISearchInterface) => {
	const [focused, setFocused] = useState(false);

	return (
		
			
				{!focused && (
					
						
					
				)}

				 onSearch(event.target.value)}
					onFocus={() => setFocused(true)}
					placeholder={Liferay.Language.get('search')}
					type="text"
					value={query}
				/>

				{focused && (
					
						 {
								onSearch('');
								setFocused(false);
							}}
							size="sm"
							symbol="times"
							title={Liferay.Language.get('clear-search')}
						/>
					
				)}
			
		
	);
};

export default AutoSearch;