META-INF.resources.js.components.experience_selector.ExperienceSelector.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 {Option, Picker, Text} from '@clayui/core';
import Form from '@clayui/form';
import ClayLabel from '@clayui/label';
import Layout from '@clayui/layout';
import classNames from 'classnames';
import {useId} from 'frontend-js-components-web';
import {navigate} from 'frontend-js-web';
import React from 'react';

import SegmentExperience from '../../types/SegmentExperience';

import './ExperienceSelector.scss';

interface BaseProps {
	displayType?: 'light' | 'dark';
	selectedItem?: SegmentExperience;
}

interface ExperienceSelectorProps extends BaseProps {
	className?: string;
	disabled?: boolean;
	label?: string;
	onChangeExperience?: (key: React.Key) => void;
	segmentsExperiences: SegmentExperience[];
	selectedSegmentsExperience: SegmentExperience;
}

const TriggerLabel = React.forwardRef(
	(
		{displayType, selectedItem, ...otherProps}: BaseProps,
		ref: React.LegacyRef
	) => {
		if (!selectedItem) {
			return null;
		}

		return (
			
		);
	}
);

export default function ExperienceSelector({
	disabled = false,
	displayType = 'light',
	label,
	onChangeExperience,
	segmentsExperiences,
	selectedSegmentsExperience,
	...otherProps
}: ExperienceSelectorProps) {
	const selectorId = useId();

	const handleExperienceChange = (key: React.Key) => {
		const newSelectedExperience = segmentsExperiences.find(
			(experience) => experience.segmentsExperienceId === key
		);

		if (newSelectedExperience && newSelectedExperience.url) {
			navigate(newSelectedExperience.url);
		}
	};

	return (
		
			{label ? {label} : null}

			
				{({
					active,
					segmentsEntryName: entryName,
					segmentsExperienceId: id,
					segmentsExperienceName: name,
					statusLabel,
				}) => (
					
				)}
			
		
	);
}