@@ -2,13 +2,14 @@ import * as React from 'react';
2
2
import classnames from 'classnames' ;
3
3
import TabScroller from '@material/react-tab-scroller' ;
4
4
import Tab , { TabProps } from '@material/react-tab' ; // eslint-disable-line no-unused-vars
5
- // @ts -ignore No mdc .d.ts files
6
- import { MDCTabBarFoundation } from '@material/tab-bar/dist/mdc.tabBar ' ;
5
+ import { MDCTabBarFoundation } from '@material/tab-bar/foundation' ;
6
+ import { MDCTabBarAdapter } from '@material/tab-bar/adapter ' ;
7
7
8
8
export interface TabBarProps extends React . HTMLAttributes < HTMLDivElement > {
9
9
indexInView ?: number ;
10
10
activeIndex : number ;
11
11
handleActiveIndexUpdate ?: ( index : number ) => void ;
12
+ onActivated ?: ( index : number ) => void ;
12
13
className ?: string ;
13
14
isRtl ?: boolean ;
14
15
children : React . ReactElement < TabProps > | React . ReactElement < TabProps > [ ] ;
@@ -24,7 +25,7 @@ class TabBar extends React.Component<
24
25
tabBarRef : React . RefObject < HTMLDivElement > = React . createRef ( ) ;
25
26
tabScrollerRef : React . RefObject < TabScroller > = React . createRef ( ) ;
26
27
tabList : Tab [ ] = [ ] ;
27
- foundation ? : MDCTabBarFoundation ;
28
+ foundation ! : MDCTabBarFoundation ;
28
29
29
30
constructor ( props : TabBarProps ) {
30
31
super ( props ) ;
@@ -60,7 +61,7 @@ class TabBar extends React.Component<
60
61
} ;
61
62
this . tabList [ activeIndex ] . activate ( defaultDOMRect /* previousIndicatorClientRect */ ) ;
62
63
}
63
- this . foundation . scrollIntoView ( indexInView ) ;
64
+ this . foundation . scrollIntoView ( indexInView ! ) ;
64
65
}
65
66
66
67
componentDidUpdate ( prevProps : TabBarProps ) {
@@ -70,7 +71,7 @@ class TabBar extends React.Component<
70
71
) ;
71
72
}
72
73
if ( this . props . indexInView !== prevProps . indexInView ) {
73
- this . foundation . scrollIntoView ( this . props . indexInView ) ;
74
+ this . foundation . scrollIntoView ( this . props . indexInView ! ) ;
74
75
}
75
76
}
76
77
@@ -82,7 +83,7 @@ class TabBar extends React.Component<
82
83
return classnames ( 'mdc-tab-bar' , this . props . className ) ;
83
84
}
84
85
85
- get adapter ( ) {
86
+ get adapter ( ) : MDCTabBarAdapter {
86
87
return {
87
88
scrollTo : ( scrollX : number ) => {
88
89
this . tabScrollerRef . current && this . tabScrollerRef . current . scrollTo ( scrollX ) ;
@@ -91,15 +92,15 @@ class TabBar extends React.Component<
91
92
this . tabScrollerRef . current && this . tabScrollerRef . current . incrementScroll ( scrollXIncrement ) ;
92
93
} ,
93
94
getScrollPosition : ( ) => {
94
- if ( ! this . tabScrollerRef . current ) return ;
95
+ if ( ! this . tabScrollerRef . current ) return 0 ;
95
96
return this . tabScrollerRef . current . getScrollPosition ( ) ;
96
97
} ,
97
98
getScrollContentWidth : ( ) => {
98
- if ( ! this . tabScrollerRef . current ) return ;
99
+ if ( ! this . tabScrollerRef . current ) return 0 ;
99
100
return this . tabScrollerRef . current . getScrollContentWidth ( ) ;
100
101
} ,
101
102
getOffsetWidth : ( ) => {
102
- if ( this . tabBarRef . current === null ) return ;
103
+ if ( this . tabBarRef . current === null ) return 0 ;
103
104
return this . tabBarRef . current . offsetWidth ;
104
105
} ,
105
106
isRTL : ( ) => ! ! this . props . isRtl ,
@@ -127,8 +128,9 @@ class TabBar extends React.Component<
127
128
}
128
129
return - 1 ;
129
130
} ,
130
- getIndexOfTab : ( tabToFind : Tab ) => this . tabList . indexOf ( tabToFind ) ,
131
+ getIndexOfTabById : ( id : string ) => this . tabList . map ( ( tab ) => tab . props . id ) . indexOf ( id ) ,
131
132
getTabListLength : ( ) => this . tabList . length ,
133
+ notifyTabActivated : ( index : number ) => this . props . onActivated && this . props . onActivated ( index ) ,
132
134
} ;
133
135
}
134
136
@@ -140,7 +142,7 @@ class TabBar extends React.Component<
140
142
// Persist the synthetic event to access its `key`.
141
143
e . persist ( ) ;
142
144
this . setState ( { previousActiveIndex : this . props . activeIndex } , ( ) =>
143
- this . foundation . handleKeyDown ( e )
145
+ this . foundation . handleKeyDown ( e . nativeEvent )
144
146
) ;
145
147
if ( this . props . onKeyDown ) {
146
148
this . props . onKeyDown ( e ) ;
0 commit comments