import classNames from "classnames" ; import * as React from "react" ; import { polyfill } from "react-lifecycles-compat" ; import { AbstractPureComponent2 , Classes } from "../../common" ; import { DISPLAYNAME_PREFIX , removeNonHTMLProps } from "../../common/props" ; import { TabProps , TabId } from "./tab" ; export type TabTitleProps = ITabTitleProps ; deprecated export interface ITabTitleProps extends TabProps { /** Handler invoked when this tab is clicked. */ onClick : ( id : TabId , event : React . MouseEvent < HTMLElement > ) => void ; /** ID of the parent `Tabs` to which this tab belongs. Used to generate ID for ARIA attributes. */ parentId : TabId ; /** Whether the tab is currently selected. */ selected : boolean ; } @ polyfill export class TabTitle extends AbstractPureComponent2 < TabTitleProps > { public static displayName = `${ DISPLAYNAME_PREFIX }.TabTitle` ; public render ( ) { const { className , children , disabled , id , parentId , selected , title , ... htmlProps } = this . props ; return ( < div { ... removeNonHTMLProps ( htmlProps ) } aria - controls = { generateTabPanelId ( parentId , id ) } aria - disabled = { disabled } aria - expanded = { selected } aria - selected = { selected } className = { classNames ( Classes . TAB , className ) } data - tab - id = { id } id = { generateTabTitleId ( parentId , id ) } onClick = { disabled ? undefined : this . handleClick } role = "tab" tabIndex = { disabled ? undefined : selected ? 0 : - 1 } > { title } { children } < /div>); } private handleClick = ( e ) => this . props . onClick ( this . props . id , e ) ; } export function generateTabPanelId ( parentId , tabId ) { return `${ Classes . TAB_PANEL }_${ parentId }_${ tabId }` ; } export function generateTabTitleId ( parentId , tabId ) { return `${ Classes . TAB }-title_${ parentId }_${ tabId }` ; }