diff --git a/src/components/tabview/TabView.d.ts b/src/components/tabview/TabView.d.ts index 22986a091e..9a597dff36 100644 --- a/src/components/tabview/TabView.d.ts +++ b/src/components/tabview/TabView.d.ts @@ -38,6 +38,11 @@ interface TabViewTabChangeParams { index: number; } +interface TabViewTabCloseParams { + originalEvent: React.SyntheticEvent; + index: number; +} + export interface TabViewProps { id?: string; activeIndex?: number; @@ -46,6 +51,7 @@ export interface TabViewProps { renderActiveOnly?: boolean; scrollable?: boolean; onTabChange?(e: TabViewTabChangeParams): void; + onTabClose?(e: TabViewTabCloseParams): void; } // tslint:disable-next-line:max-classes-per-file diff --git a/src/components/tabview/TabView.js b/src/components/tabview/TabView.js index e6a85d2aa6..b7a7a4e524 100644 --- a/src/components/tabview/TabView.js +++ b/src/components/tabview/TabView.js @@ -46,6 +46,7 @@ export class TabView extends Component { className: null, renderActiveOnly: true, onTabChange: null, + onTabClose: null, scrollable: false } @@ -56,6 +57,7 @@ export class TabView extends Component { className: PropTypes.string, renderActiveOnly: PropTypes.bool, onTabChange: PropTypes.func, + onTabClose: PropTypes.func, scrollable: PropTypes.bool }; @@ -111,6 +113,10 @@ export class TabView extends Component { tabInfo && this.onTabHeaderClick(event, tabInfo.tab, tabInfo.index); }); + if (this.props.onTabClose) { + this.props.onTabClose({ originalEvent: event, index: index }); + } + event.preventDefault(); } diff --git a/src/showcase/tabview/TabViewDoc.js b/src/showcase/tabview/TabViewDoc.js index e51e336d96..0653573b9c 100644 --- a/src/showcase/tabview/TabViewDoc.js +++ b/src/showcase/tabview/TabViewDoc.js @@ -1117,6 +1117,13 @@ template: (options) => { Callback to invoke when an active tab is changed. + + onTabClose + event.originalEvent: Browser event
+ event.index: Index of the selected tab + + Callback to invoke when a tab is closed. +