forked from cerc-io/snowballtools-base
60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import React, {
|
|
forwardRef,
|
|
type ComponentPropsWithoutRef,
|
|
type ElementRef,
|
|
type PropsWithChildren,
|
|
type ReactNode,
|
|
} from 'react';
|
|
import { Trigger } from '@radix-ui/react-tabs';
|
|
|
|
import { tabsTheme } from 'components/shared/Tabs/Tabs.theme';
|
|
import { useTabs } from 'components/shared/Tabs/TabsProvider';
|
|
|
|
export interface TabsTriggerProps
|
|
extends ComponentPropsWithoutRef<typeof Trigger> {
|
|
/**
|
|
* The icon to display in the trigger.
|
|
*/
|
|
icon?: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* A component that represents the trigger for the tabs component.
|
|
*/
|
|
const TabsTrigger = forwardRef<
|
|
ElementRef<typeof Trigger>,
|
|
PropsWithChildren<TabsTriggerProps>
|
|
>(({ className, icon, children, ...props }, ref) => {
|
|
const config = useTabs();
|
|
const { triggerWrapper, trigger } = tabsTheme(config);
|
|
const orientation = config.orientation;
|
|
|
|
return (
|
|
<Trigger
|
|
ref={ref}
|
|
// Disabled focus state for horizontal tabs
|
|
tabIndex={orientation === 'horizontal' ? -1 : undefined}
|
|
className={triggerWrapper({ className })}
|
|
{...props}
|
|
>
|
|
{/* Need to add button in the trigger children because there's focus state inside the children */}
|
|
<button
|
|
data-orientation={orientation}
|
|
// Disabled focus state for vertical tabs
|
|
tabIndex={orientation === 'vertical' ? -1 : undefined}
|
|
className={trigger()}
|
|
>
|
|
{/* Put the icon on the left of the text for veritcal tab */}
|
|
{orientation === 'vertical' && icon}
|
|
{children}
|
|
{/* Put the icon on the right of the text for horizontal tab */}
|
|
{orientation === 'horizontal' && icon}
|
|
</button>
|
|
</Trigger>
|
|
);
|
|
});
|
|
|
|
TabsTrigger.displayName = 'TabsTrigger';
|
|
|
|
export { TabsTrigger };
|