META-INF.resources.js.components.Translation.tsx 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 from '@clayui/button';
import ClayDropDown from '@clayui/drop-down';
import ClayIcon from '@clayui/icon';
import ClayLabel from '@clayui/label';
import ClayLayout from '@clayui/layout';
import {ClayTooltipProvider} from '@clayui/tooltip';
import React, {useContext, useMemo, useState} from 'react';

import {ChartStateContext, TimeSpan} from '../context/ChartStateContext';
import {StoreStateContext} from '../context/StoreContext';

interface ViewURL {
	default: boolean;
	languageId: string;
	languageLabel: string;
	selected: boolean;
	viewURL: string;
}

interface Props {
	onSelectedLanguageClick: (
		url: string,
		timeSpanKey: TimeSpan | undefined,
		timeSpanOffset: number
	) => void;
	viewURLs: ViewURL[];
}

export default function Translation({
	onSelectedLanguageClick,
	viewURLs,
}: Props) {
	const {languageTag: defaultLanguage} = useContext(StoreStateContext);

	const [active, setActive] = useState(false);

	const selectedLanguage = useMemo(() => {
		return (
			viewURLs.find((language) => language.selected)?.languageId ||
			defaultLanguage ||
			viewURLs[0].languageId
		);
	}, [defaultLanguage, viewURLs]);

	const {timeSpanKey, timeSpanOffset} = useContext(ChartStateContext);

	return (
		
			
				
							

							
								{selectedLanguage}
							
						
					}
				>
					
						{Object.values(viewURLs).map((language, index) => (
							 {
									onSelectedLanguageClick(
										language.viewURL,
										timeSpanKey,
										timeSpanOffset
									);
								}}
								symbolLeft={language.languageId.toLowerCase()}
							>
								
									
										
											
												
													{language.languageLabel}
												
											
										
									

									{language.default && (
										
											{Liferay.Language.get('default')}
										
									)}
								
							
						))}
					
				
			
		
	);
}