@withjoy/joykit
Version:
UI Component Library for Joy web
82 lines (81 loc) • 2.82 kB
TypeScript
import React from 'react';
import { OnChangeIndexCallback } from 'react-swipeable-views';
import { AbstractPureComponent } from '../../common';
import { BaseComponentProps } from '../../common/props';
import { TabProps } from './components/Tab';
import { StackProps } from '../Stack';
export interface TabsProps extends BaseComponentProps {
align: 'start' | 'center' | 'end' | 'justify';
/**
* The initial selected `id` of a child `<Tab />`.
*
* Providing an ID will put the component in uncontrolled usage.
*/
defaultSelectedTabId?: string;
/**
* Unique identifier for this <Tabs /> container component
*
* Will be combined with the `id` of each direct `<Tab />` child
* to generate ARIA accessibility.
*/
id: string;
/**
* Accessible label for Tabs.
*/
a11yLabel: string;
/**
* Callback function that is invoked after a tab selection.
*
* Required if this component is in controlled mode - that is, if `selectedTabId` is provided.
*/
onChange?: (nextTabId: string, prevTabId: string, event: React.MouseEvent<HTMLElement>) => void;
/**
* Position of the tab labels in relation to the tab panels.
*
* @default top
*/
position: 'bottom' | 'top';
/**
* Amount of spacing to be applied between the tab labels and tab panels.
*/
spacing: StackProps['spacing'];
/**
* The `id` of the currently selected `<Tab />`.
*
* Providing an ID will put the component in controlled usage.
*/
selectedTabId?: string;
}
declare type State = Readonly<{
selectedTabId?: string;
}>;
export declare const TABS_DISPLAY_NAME: string;
/**
* A container that provide easy management for viewing related content in the same layout region.
*/
export declare class Tabs extends AbstractPureComponent<TabsProps, State> {
static displayName: string;
static defaultProps: {
align: string;
position: string;
spacing: number;
};
static Tab: React.NamedExoticComponent<TabProps>;
tabsRef: React.RefObject<HTMLDivElement>;
static getDerivedStateFromProps(nextProps: TabsProps, state: State): {
selectedTabId: string;
} | null;
constructor(props: TabsProps);
protected validateProps(props: TabsProps): void;
handleOnTabLabelsListKeyPress: React.KeyboardEventHandler<HTMLDivElement>;
handleOnTabClick: React.MouseEventHandler<HTMLElement>;
handleOnChangeIndex: OnChangeIndexCallback;
render(): JSX.Element;
private renderLabelMarkup;
private renderPanelMarkup;
private renderTabLabels;
private renderTabPanels;
private getInitialSelectedID;
private getTabChildren;
}
export {};