META-INF.resources.js.data_set.visualization_modes.VisualizationModes.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 ClayLayout from '@clayui/layout';
import ClayTabs from '@clayui/tabs';
import React, {ComponentType, useState} from 'react';

import {DEFAULT_VISUALIZATION_MODES} from '../../utils/constants';
import {TVisualizationMode} from '../../utils/types';
import {IDataSetSectionProps} from '../DataSet';
import Cards from './modes/Cards';
import List from './modes/List';
import Table from './modes/Table';

const VISUALIZATION_MODE_COMPONENT_MAP: {
	[key in TVisualizationMode['mode']]: ComponentType;
} = {
	cards: Cards,
	list: List,
	table: Table,
};

const ORDERED_DEFAULT_VISUALIZATION_MODES = [
	...DEFAULT_VISUALIZATION_MODES,
].reverse();

export default function VisualizationModes(props: IDataSetSectionProps) {
	const [activeVisualizationModeIndex, setActiveVisualizationModeIndex] =
		useState(0);

	return (
		
			
				
					
						{Liferay.Language.get('visualization-modes')}
					
				

				
					{ORDERED_DEFAULT_VISUALIZATION_MODES.map(
						(visualizationMode) => (
							
								{visualizationMode.label}
							
						)
					)}
				

				
					{ORDERED_DEFAULT_VISUALIZATION_MODES.map(
						(visualizationMode) => {
							const Component =
								VISUALIZATION_MODE_COMPONENT_MAP[
									visualizationMode.mode as TVisualizationMode['mode']
								];

							return (
								
									
								
							);
						}
					)}
				
			
		
	);
}