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