1 | /*
|
2 | * Copyright 2015 Palantir Technologies, Inc. All rights reserved.
|
3 | *
|
4 | * Licensed under the Apache License, Version 2.0 (the "License");
|
5 | * you may not use this file except in compliance with the License.
|
6 | * You may obtain a copy of the License at
|
7 | *
|
8 | * http://www.apache.org/licenses/LICENSE-2.0
|
9 | *
|
10 | * Unless required by applicable law or agreed to in writing, software
|
11 | * distributed under the License is distributed on an "AS IS" BASIS,
|
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13 | * See the License for the specific language governing permissions and
|
14 | * limitations under the License.
|
15 | */
|
16 |
|
17 | import classNames from "classnames";
|
18 | import * as React from "react";
|
19 | import { polyfill } from "react-lifecycles-compat";
|
20 |
|
21 | import { AbstractPureComponent2, Classes } from "../../common";
|
22 | import { DISPLAYNAME_PREFIX, HTMLDivProps, Props } from "../../common/props";
|
23 |
|
24 | export type TabId = string | number;
|
25 |
|
26 | // eslint-disable-next-line deprecation/deprecation
|
27 | export type TabProps = ITabProps;
|
28 | /** @deprecated use TabProps */
|
29 | export interface ITabProps extends Props, Omit<HTMLDivProps, "id" | "title" | "onClick"> {
|
30 | /**
|
31 | * Content of tab title, rendered in a list above the active panel.
|
32 | * Can also be set via the `title` prop.
|
33 | */
|
34 | children?: React.ReactNode;
|
35 |
|
36 | /**
|
37 | * Whether the tab is disabled.
|
38 | *
|
39 | * @default false
|
40 | */
|
41 | disabled?: boolean;
|
42 |
|
43 | /**
|
44 | * Unique identifier used to control which tab is selected
|
45 | * and to generate ARIA attributes for accessibility.
|
46 | */
|
47 | id: TabId;
|
48 |
|
49 | /**
|
50 | * Panel content, rendered by the parent `Tabs` when this tab is active.
|
51 | * If omitted, no panel will be rendered for this tab.
|
52 | */
|
53 | panel?: JSX.Element;
|
54 |
|
55 | /**
|
56 | * Space-delimited string of class names applied to tab panel container.
|
57 | */
|
58 | panelClassName?: string;
|
59 |
|
60 | /**
|
61 | * Content of tab title element, rendered in a list above the active panel.
|
62 | * Can also be set via React `children`.
|
63 | */
|
64 | title?: React.ReactNode;
|
65 | }
|
66 |
|
67 |
|
68 | export class Tab extends AbstractPureComponent2<TabProps> {
|
69 | public static defaultProps: Partial<TabProps> = {
|
70 | disabled: false,
|
71 | };
|
72 |
|
73 | public static displayName = `${DISPLAYNAME_PREFIX}.Tab`;
|
74 |
|
75 | // this component is never rendered directly; see Tabs#renderTabPanel()
|
76 | /* istanbul ignore next */
|
77 | public render() {
|
78 | const { className, panel } = this.props;
|
79 | return (
|
80 | <div className={classNames(Classes.TAB_PANEL, className)} role="tablist">
|
81 | {panel}
|
82 | </div>
|
83 | );
|
84 | }
|
85 | }
|