@veracity/vui/dist/tabs/tabs.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { P } from "../p/p.js";
import { Tab } from "./tab.js";
import { TabsNavBar } from "./tabsNavBar.js";
import { useTabsState } from "./useTabsState.js";
import { Children, useEffect } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/tabs/tabs.tsx
const TabsBase = styled.divBox`
  width: 100%;
`;
/**
* Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**
*/
const Tabs = vui((props, ref) => {
	const { actions, activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props;
	const styles = useStyleConfig("Tabs", props);
	const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState("fadeIn", 0);
	useEffect(() => {
		const _tabs = [];
		if (children) Children.toArray(children).forEach((child, index) => {
			if (child?.props?.title) _tabs.push({
				id: child.props.id,
				index,
				title: child.props.title,
				icon: child.props.icon,
				className: child.props.className,
				children: child.props.children,
				disabled: child.props.disabled,
				onClick: child.props.onClick,
				onDelete: child.props.onDelete
			});
		});
		setTabs(_tabs);
		if (activeTabId !== void 0) {
			const tab = _tabs.find((t) => t?.id === activeTabId || t?.index === activeTabId);
			if (tab?.index !== void 0) setActiveTabIndex(tab.index);
		}
	}, [children, activeTabId]);
	const onNavItemClick = (tabIndex, e) => {
		const tab = tabs.find((t) => t.index === tabIndex);
		if (tab?.children !== void 0 && tab?.index !== void 0) {
			setAnimationDirection(tab.index < activeTabIndex ? "fadeLeft" : "fadeRight");
			setActiveTabIndex(tab.index);
			onTabClick?.(tab.id || tab.index);
		}
		tab?.onClick?.(e);
	};
	const activeTab = tabs?.[activeTabIndex];
	return /* @__PURE__ */ jsxs(TabsBase, {
		className: cs("vui-tabs", className),
		ref,
		...styles.container,
		...rest,
		children: [!!tabs?.length && /* @__PURE__ */ jsx(TabsNavBar, {
			actions,
			activeNavItem: activeTabIndex,
			animationDirection,
			onNavItemClick: (tabIndex, e) => onNavItemClick(tabIndex, e),
			showBorder,
			size,
			tabs
		}), tabs?.length ? /* @__PURE__ */ jsx(Tab, {
			onClick: activeTab?.onClick,
			title: activeTab?.title,
			children: !activeTab?.disabled && activeTab?.children
		}) : /* @__PURE__ */ jsx(P, {
			p: 2,
			children: "Please specify Tabs."
		})]
	});
});
Tabs.displayName = "Tabs";

//#endregion
export { Tabs, Tabs as default, TabsBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=tabs.js.map