META-INF.resources.js.admin.components.SearchField.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.knowledge.base.web
Liferay Knowledge Base 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 ClayEmptyState from '@clayui/empty-state';
import {ClayInput} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import ClayLink from '@clayui/link';
import ClayList from '@clayui/list';
import classnames from 'classnames';
import {sub} from 'frontend-js-web';
import React, {useEffect, useState} from 'react';

const ITEM_TYPES_SYMBOL = {
	KBArticle: 'document-text',
	KBFolder: 'folder',
};

const SEARCH_DELTA = 2;

const highlithKeywordInText = (text, keyword) => {
	const parts = text.split(new RegExp(`(${keyword})`, 'gi'));

	return (
		
			{parts.map((part) =>
				part.toLowerCase() === keyword.toLowerCase() ? (
					{part}
				) : (
					part
				)
			)}
		
	);
};

const SearchResult = ({filteredItems, handleOnclickItem, keyword}) => {
	const [selectedResultId, setSelectedResultId] = useState();

	return filteredItems.length ? (
		
			{filteredItems.map((item) => {
				return (
					
						 {
								setSelectedResultId(item.id);
								if (handleOnclickItem) {
									handleOnclickItem(item);
								}
							}}
						>
							

							{highlithKeywordInText(item.name, keyword)}
						
					
				);
			})}
		
	) : (
		
	);
};

export default function SearchField({
	handleOnclickItem,
	handleSearchChange,
	items,
}) {
	const initialSearchInfo = {
		filteredItems: [],
		query: '',
	};

	const [searchInfo, setSearchInfo] = useState(initialSearchInfo);

	const [searchActive, setSearchActive] = useState(false);

	useEffect(() => {
		handleSearchChange({isSearchActive: searchActive});
	}, [handleSearchChange, searchActive]);

	const handleQueryChange = (event) => {
		const newQuery = event.target.value;
		let results = [];

		if (newQuery.length > SEARCH_DELTA) {
			results = items.filter((item) =>
				item.name.toLowerCase().includes(newQuery.toLowerCase())
			);
		}

		setSearchActive(newQuery.length > SEARCH_DELTA);
		setSearchInfo({
			filteredItems: results,
			query: newQuery,
		});
	};

	const handleSearchClick = () => {
		if (searchInfo.query) {
			setSearchInfo(initialSearchInfo);
			setSearchActive(false);
		}
	};

	const iconTitle = searchInfo.query
		? Liferay.Language.get('clear')
		: Liferay.Language.get('search');

	return (
		<>
			
				
					

					
						
					
				
			

			

			{searchActive && (
				
			)}
		
	);
}