UNPKG

3.52 kBTypeScriptView Raw
1import * as React from "react";
2import { AbstractPureComponent2 } from "../../common";
3import { Props } from "../../common/props";
4import { Tab, TabId } from "./tab";
5export declare const Expander: React.FunctionComponent;
6export declare type TabsProps = ITabsProps;
7/** @deprecated use TabsProps */
8export interface ITabsProps extends Props {
9 /**
10 * Whether the selected tab indicator should animate its movement.
11 *
12 * @default true
13 */
14 animate?: boolean;
15 /**
16 * Initial selected tab `id`, for uncontrolled usage.
17 * Note that this prop refers only to `<Tab>` children; other types of elements are ignored.
18 *
19 * @default first tab
20 */
21 defaultSelectedTabId?: TabId;
22 /**
23 * Unique identifier for this `Tabs` container. This will be combined with the `id` of each
24 * `Tab` child to generate ARIA accessibility attributes. IDs are required and should be
25 * unique on the page to support server-side rendering.
26 */
27 id: TabId;
28 /**
29 * If set to `true`, the tab titles will display with larger styling.
30 * This will apply large styles only to the tabs at this level, not to nested tabs.
31 *
32 * @default false
33 */
34 large?: boolean;
35 /**
36 * Whether inactive tab panels should be removed from the DOM and unmounted in React.
37 * This can be a performance enhancement when rendering many complex panels, but requires
38 * careful support for unmounting and remounting.
39 *
40 * @default false
41 */
42 renderActiveTabPanelOnly?: boolean;
43 /**
44 * Selected tab `id`, for controlled usage.
45 * Providing this prop will put the component in controlled mode.
46 * Unknown ids will result in empty selection (no errors).
47 */
48 selectedTabId?: TabId;
49 /**
50 * Whether to show tabs stacked vertically on the left side.
51 *
52 * @default false
53 */
54 vertical?: boolean;
55 /**
56 * A callback function that is invoked when a tab in the tab list is clicked.
57 */
58 onChange?(newTabId: TabId, prevTabId: TabId | undefined, event: React.MouseEvent<HTMLElement>): void;
59}
60export interface ITabsState {
61 indicatorWrapperStyle?: React.CSSProperties;
62 selectedTabId?: TabId;
63}
64export declare class Tabs extends AbstractPureComponent2<TabsProps, ITabsState> {
65 /** Insert a `Tabs.Expander` between any two children to right-align all subsequent children. */
66 static Expander: React.FunctionComponent<{}>;
67 static Tab: typeof Tab;
68 static defaultProps: Partial<TabsProps>;
69 static displayName: string;
70 static getDerivedStateFromProps({ selectedTabId }: TabsProps): {
71 selectedTabId: string | number;
72 } | null;
73 private tablistElement;
74 private refHandlers;
75 constructor(props: TabsProps);
76 render(): JSX.Element;
77 componentDidMount(): void;
78 componentDidUpdate(prevProps: TabsProps, prevState: ITabsState): void;
79 private getInitialSelectedTabId;
80 private getKeyCodeDirection;
81 private getTabChildrenProps;
82 /** Filters children to only `<Tab>`s */
83 private getTabChildren;
84 /** Queries root HTML element for all tabs with optional filter selector */
85 private getTabElements;
86 private handleKeyDown;
87 private handleKeyPress;
88 private handleTabClick;
89 /**
90 * Calculate the new height, width, and position of the tab indicator.
91 * Store the CSS values so the transition animation can start.
92 */
93 private moveSelectionIndicator;
94 private renderTabPanel;
95 private renderTabTitle;
96}