META-INF.resources.js.components.scope.ScopeSelect.es.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.portal.search.tuning.rankings.web
Liferay Portal Search Tuning Rankings 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 ClayButton from '@clayui/button';
import ClayDropDown from '@clayui/drop-down';
import ClayForm from '@clayui/form';
import ClayIcon from '@clayui/icon';
import ClayLoadingIndicator from '@clayui/loading-indicator';
import getCN from 'classnames';
import React, {useRef, useState} from 'react';

import {fetchResponse} from '../../utils/api.es';
import {sub} from '../../utils/language.es';
import ScopeSelectModal from './ScopeSelectModal.es';

/**
 * Input component that appears when site or blueprint option is chosen
 * under the "Scope" tab.
 *
 * If the scope has been defined already, component is disabled and
 * fetches the existing site/blueprint for display.
 *
 * If scope has not been defined yet, component is enabled and fetches a
 * list of sites/blueprints for the user to select from in the dropdown.
 */

const ScopeSelect = ({
	disabled = false,
	error,
	fetchItemsUrl,
	selected,
	locator = {
		id: 'externalReferenceCode',
		label: 'descriptiveName',
	},
	onSelect,
	onBlur,
	title,
	touched = false,
	type,
}) => {
	const [activeDropdown, setActiveDropdown] = useState(false);
	const [displayName, setDisplayName] = useState('');
	const [loading, setLoading] = useState(false);
	const [resourceItems, setResourceItems] = useState([]);

	const alignElementRef = useRef(null);
	const menuElementRef = useRef(null);

	const _fetchDropdownItems = () => {
		setLoading(true);

		fetchResponse(fetchItemsUrl, {
			page: 1,
			pageSize: 5,
		})
			.then(({items}) => {
				setResourceItems(items || []);
			})
			.catch(() => {
				setResourceItems([]);
			})
			.finally(() => {
				setLoading(false);
			});
	};

	const _handleActiveDropdownChange = () => {
		setActiveDropdown(!activeDropdown);

		if (!resourceItems.length) {
			_fetchDropdownItems();
		}
	};

	const _handleSelect = (value, displayName) => {
		setDisplayName(displayName);
		onSelect(typeof value === 'string' ? value : value.toString());

		setActiveDropdown(false);
	};

	return (
		
			
				{title}

				{!disabled && (
					
				)}
			

			

			
				
					{loading ? (
						
							
						
					) : resourceItems.length ? (
						
							{(item) => (
								
										_handleSelect(
											item[locator.id],
											item[locator.label]
										)
									}
								>
									
										{item[locator.label]}
									

									
										{sub(
											Liferay.Language.get(
												'external-reference-code-x'
											),
											[item.externalReferenceCode]
										)}
									
								
							)}
						
					) : (
						
							
								{Liferay.Language.get('no-results-found')}
							
						
					)}

					{!!resourceItems.length && (
						
							
								 setActiveDropdown(false)}
								>
									{Liferay.Language.get('view-more')}
								
							
						
					)}
				
			

			{error && touched && (
				
					{error}
				
			)}
		
	);
};

export default ScopeSelect;