META-INF.resources.Tabs.js Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of com.liferay.frontend.taglib.clay Show documentation

Liferay Frontend Taglib Clay

There is a newer version: 15.1.5

Show 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 ClayTabs from '@clayui/tabs';
import React, {useEffect, useRef, useState} from 'react';

const Panel = ({children: tabPanel}) => {
	const ref = useRef();

	useEffect(() => {
		const fragment = document.createDocumentFragment();

		while (tabPanel.firstChild) {
			fragment.appendChild(tabPanel.firstChild);
		}

		ref.current.appendChild(fragment);
	}, [tabPanel]);

	return ;
};

export default function Tabs({
	activation,
	additionalProps: _additionalProps,
	children: panelsContent,
	componentId: _componentId,
	cssClass,
	displayType,
	fade,
	justified,
	locale: _locale,
	portletId: _portletId,
	portletNamespace: _portletNamespace,
	tabsItems,
	...otherProps
}) {
	const activeIndex = tabsItems.findIndex((item) => item.active);

	const [active, setActive] = useState(activeIndex === -1 ? 0 : activeIndex);

	return (
		<>
			
				
					{tabsItems.map(({disabled, href, label}, i) => (
						
							{label}
						
					))}
				

				
					{Array.from(panelsContent).map((panelContent, i) => (
						
							{panelContent}
						
					))}
				
			
		
	);
}