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 | * Whether to make the tabs list fill the height of its parent.
|
59 | *
|
60 | * This has no effect when `vertical={true}`.
|
61 | * This is not recommended when tab panels are defined within this component subtree, as the height computation will
|
62 | * include the panel height, which is usually not intended. Instead, it works well if the panels are rendered
|
63 | * elsewhere in the React tree.
|
64 | *
|
65 | * @default false
|
66 | */
|
67 | fill?: boolean;
|
68 | /**
|
69 | * A callback function that is invoked when a tab in the tab list is clicked.
|
70 | */
|
71 | onChange?(newTabId: TabId, prevTabId: TabId | undefined, event: React.MouseEvent<HTMLElement>): void;
|
72 | }
|
73 | export interface ITabsState {
|
74 | indicatorWrapperStyle?: React.CSSProperties;
|
75 | selectedTabId?: TabId;
|
76 | }
|
77 | /**
|
78 | * Tabs component.
|
79 | *
|
80 | * @see https://blueprintjs.com/docs/#core/components/tabs
|
81 | */
|
82 | export declare class Tabs extends AbstractPureComponent2<TabsProps, ITabsState> {
|
83 | /** Insert a `Tabs.Expander` between any two children to right-align all subsequent children. */
|
84 | static Expander: React.FC<{}>;
|
85 | static Tab: typeof Tab;
|
86 | static defaultProps: Partial<TabsProps>;
|
87 | static displayName: string;
|
88 | static getDerivedStateFromProps({ selectedTabId }: TabsProps): {
|
89 | selectedTabId: TabId;
|
90 | } | null;
|
91 | private tablistElement;
|
92 | private refHandlers;
|
93 | constructor(props: TabsProps);
|
94 | render(): JSX.Element;
|
95 | componentDidMount(): void;
|
96 | componentDidUpdate(prevProps: TabsProps, prevState: ITabsState): void;
|
97 | private getInitialSelectedTabId;
|
98 | private getKeyCodeDirection;
|
99 | private getTabChildrenProps;
|
100 | /** Filters children to only `<Tab>`s */
|
101 | private getTabChildren;
|
102 | /** Queries root HTML element for all tabs with optional filter selector */
|
103 | private getTabElements;
|
104 | private handleKeyDown;
|
105 | private handleKeyPress;
|
106 | private handleTabClick;
|
107 | /**
|
108 | * Calculate the new height, width, and position of the tab indicator.
|
109 | * Store the CSS values so the transition animation can start.
|
110 | */
|
111 | private moveSelectionIndicator;
|
112 | private renderTabPanel;
|
113 | private renderTabTitle;
|
114 | }
|