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

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.layout.reports.web
Liferay Layout Reports 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 ClayLabel from '@clayui/label';
import classNames from 'classnames';
import {sub} from 'frontend-js-web';
import React, {
	Dispatch,
	SetStateAction,
	useEffect,
	useMemo,
	useState,
} from 'react';

import {
	Entries,
	FILTER_NAMES,
	Fragment,
	FragmentFilter,
} from '../../constants/Fragment';

interface PropsResultsBar {
	className: string;
	filters: FragmentFilter;
	fragments: Fragment[];
	onSetFilters: Dispatch>;
}

interface PropsResultsBarItemLabel {
	filterKey: keyof FragmentFilter;
	label: string;
	onSetFeedback: Dispatch>;
	onSetFilters: Dispatch>;
}

const ResultsBarItem = ({
	children,
	expand,
}: {
	children: React.ReactElement;
	expand?: boolean;
}) => {
	return (
		
			{children}
		
	);
};

const ResultsBarItemLabel = ({
	filterKey,
	label,
	onSetFeedback,
	onSetFilters,
}: PropsResultsBarItemLabel) => {
	return (
		
			 {
						onSetFilters((filters) => ({
							...filters,
							[filterKey]: null,
						}));
						onSetFeedback(Liferay.Language.get('filter-removed'));
					},
				}}
				displayType="unstyled"
				withClose
			>
				{label}
			
		
	);
};

export default function ResultsBar({
	className,
	filters,
	fragments,
	onSetFilters,
}: PropsResultsBar) {
	const [feedback, setFeedback] = useState('');

	useEffect(() => {
		if (feedback) {
			const timeout = setTimeout(() => setFeedback(''), 1000);

			return () => clearTimeout(timeout);
		}
	}, [feedback]);

	const hasActiveFilters = useMemo(
		() => Object.entries(filters).some(([, value]) => value),
		[filters]
	);

	return (
		<>
			
				{feedback}
			

			{hasActiveFilters ? (
				
					
						
							
								{sub(
									Liferay.Language.get('x-results-for'),
									fragments.length
								)}
							
						

						{(
							Object.entries(filters) as Entries
						).map(([key, value]) =>
							value ? (
								
							) : null
						)}

						
							 {
									onSetFilters({
										origin: null,
										status: null,
										type: null,
									});
									setFeedback(
										Liferay.Language.get('filters-cleared')
									);
								}}
							>
								{Liferay.Language.get('clear')}
							
						
					
				
			) : null}
		
	);
}