1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
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, removeNonHTMLProps } from "../../common/props";
|
23 | import { TabProps, TabId } from "./tab";
|
24 |
|
25 |
|
26 | export type TabTitleProps = ITabTitleProps;
|
27 |
|
28 | export interface ITabTitleProps extends TabProps {
|
29 |
|
30 | onClick: (id: TabId, event: React.MouseEvent<HTMLElement>) => void;
|
31 |
|
32 |
|
33 | parentId: TabId;
|
34 |
|
35 |
|
36 | selected: boolean;
|
37 | }
|
38 |
|
39 | @polyfill
|
40 | export class TabTitle extends AbstractPureComponent2<TabTitleProps> {
|
41 | public static displayName = `${DISPLAYNAME_PREFIX}.TabTitle`;
|
42 |
|
43 | public render() {
|
44 | const { className, children, disabled, id, parentId, selected, title, ...htmlProps } = this.props;
|
45 | return (
|
46 | <div
|
47 | {...removeNonHTMLProps(htmlProps)}
|
48 | aria-controls={generateTabPanelId(parentId, id)}
|
49 | aria-disabled={disabled}
|
50 | aria-expanded={selected}
|
51 | aria-selected={selected}
|
52 | className={classNames(Classes.TAB, className)}
|
53 | data-tab-id={id}
|
54 | id={generateTabTitleId(parentId, id)}
|
55 | onClick={disabled ? undefined : this.handleClick}
|
56 | role="tab"
|
57 | tabIndex={disabled ? undefined : selected ? 0 : -1}
|
58 | >
|
59 | {title}
|
60 | {children}
|
61 | </div>
|
62 | );
|
63 | }
|
64 |
|
65 | private handleClick = (e: React.MouseEvent<HTMLElement>) => this.props.onClick(this.props.id, e);
|
66 | }
|
67 |
|
68 | export function generateTabPanelId(parentId: TabId, tabId: TabId) {
|
69 | return `${Classes.TAB_PANEL}_${parentId}_${tabId}`;
|
70 | }
|
71 |
|
72 | export function generateTabTitleId(parentId: TabId, tabId: TabId) {
|
73 | return `${Classes.TAB}-title_${parentId}_${tabId}`;
|
74 | }
|