22
22
23
23
import * as React from 'react' ;
24
24
import classnames from 'classnames' ;
25
- import {
26
- MDCTabScrollerFoundation ,
27
- util ,
28
- // @ts -ignore no .d.ts file
29
- } from '@material/tab-scroller/dist/mdc.tabScroller' ;
30
- // @ts -ignore no mdc .d.ts file
25
+ import { MDCTabScrollerFoundation } from '@material/tab-scroller/foundation' ;
26
+ import { MDCTabScrollerAdapter } from '@material/tab-scroller/adapter' ;
27
+ import * as util from '@material/tab-scroller/util' ;
31
28
import { matches } from '@material/dom/ponyfill' ;
32
29
33
30
const convertDashToCamelCase = ( propName : string ) =>
@@ -55,7 +52,7 @@ export default class TabScroller extends React.Component<
55
52
> {
56
53
areaElement : React . RefObject < HTMLDivElement > = React . createRef ( ) ;
57
54
contentElement : React . RefObject < HTMLDivElement > = React . createRef ( ) ;
58
- foundation ? : MDCTabScrollerFoundation ;
55
+ foundation ! : MDCTabScrollerFoundation ;
59
56
60
57
state : TabScrollerState = {
61
58
classList : new Set ( ) ,
@@ -113,7 +110,7 @@ export default class TabScroller extends React.Component<
113
110
} ) ;
114
111
} ;
115
112
116
- get adapter ( ) {
113
+ get adapter ( ) : MDCTabScrollerAdapter {
117
114
return {
118
115
eventTargetMatchesSelector : ( evtTarget : HTMLDivElement , selector : string ) => {
119
116
if ( selector ) {
@@ -141,25 +138,27 @@ export default class TabScroller extends React.Component<
141
138
setScrollContentStyleProperty : ( prop : string , value : string ) =>
142
139
this . setStyleToElement ( prop , value , 'scrollContentStyleProperty' ) ,
143
140
getScrollContentStyleValue : ( propName : string ) =>
144
- this . contentElement . current &&
145
- window
146
- . getComputedStyle ( this . contentElement . current )
147
- . getPropertyValue ( propName ) ,
141
+ this . contentElement . current ?
142
+ window
143
+ . getComputedStyle ( this . contentElement . current )
144
+ . getPropertyValue ( propName ) : '' ,
148
145
setScrollAreaScrollLeft : ( scrollX : number ) => {
149
146
if ( ! this . areaElement . current ) return ;
150
147
this . areaElement . current . scrollLeft = scrollX ;
151
148
} ,
152
149
getScrollAreaScrollLeft : ( ) =>
153
- this . areaElement . current && this . areaElement . current . scrollLeft ,
150
+ this . areaElement . current ? this . areaElement . current . scrollLeft : 0 ,
154
151
getScrollContentOffsetWidth : this . getScrollContentWidth ,
155
152
getScrollAreaOffsetWidth : ( ) =>
156
- this . areaElement . current && this . areaElement . current . offsetWidth ,
153
+ this . areaElement . current ? this . areaElement . current . offsetWidth : 0 ,
157
154
computeScrollAreaClientRect : ( ) =>
158
- this . areaElement . current &&
159
- this . areaElement . current . getBoundingClientRect ( ) ,
155
+ this . areaElement . current ?
156
+ this . areaElement . current . getBoundingClientRect ( ) :
157
+ new ClientRect ( ) ,
160
158
computeScrollContentClientRect : ( ) =>
161
- this . contentElement . current &&
162
- this . contentElement . current . getBoundingClientRect ( ) ,
159
+ this . contentElement . current ?
160
+ this . contentElement . current . getBoundingClientRect ( ) :
161
+ new ClientRect ( ) ,
163
162
computeHorizontalScrollbarHeight : ( ) =>
164
163
util . computeHorizontalScrollbarHeight ( document ) ,
165
164
} ;
@@ -172,7 +171,7 @@ export default class TabScroller extends React.Component<
172
171
// needs to be public class method for react tab-bar
173
172
getScrollContentWidth = ( ) => {
174
173
return (
175
- this . contentElement . current && this . contentElement . current . offsetWidth
174
+ this . contentElement . current ? this . contentElement . current . offsetWidth : 0
176
175
) ;
177
176
} ;
178
177
@@ -186,32 +185,32 @@ export default class TabScroller extends React.Component<
186
185
187
186
handleWheel_ = ( evt : React . WheelEvent < HTMLDivElement > ) => {
188
187
this . props . onWheel && this . props . onWheel ( evt ) ;
189
- this . foundation . handleInteraction ( evt ) ;
188
+ this . foundation . handleInteraction ( ) ;
190
189
} ;
191
190
192
191
handleTouchStart_ = ( evt : React . TouchEvent < HTMLDivElement > ) => {
193
192
this . props . onTouchStart && this . props . onTouchStart ( evt ) ;
194
- this . foundation . handleInteraction ( evt ) ;
193
+ this . foundation . handleInteraction ( ) ;
195
194
} ;
196
195
197
196
handlePointerDown_ = ( evt : React . PointerEvent < HTMLDivElement > ) => {
198
197
this . props . onPointerDown && this . props . onPointerDown ( evt ) ;
199
- this . foundation . handleInteraction ( evt ) ;
198
+ this . foundation . handleInteraction ( ) ;
200
199
} ;
201
200
202
201
handleMouseDown_ = ( evt : React . MouseEvent < HTMLDivElement > ) => {
203
202
this . props . onMouseDown && this . props . onMouseDown ( evt ) ;
204
- this . foundation . handleInteraction ( evt ) ;
203
+ this . foundation . handleInteraction ( ) ;
205
204
} ;
206
205
207
206
handleKeyDown_ = ( evt : React . KeyboardEvent < HTMLDivElement > ) => {
208
207
this . props . onKeyDown && this . props . onKeyDown ( evt ) ;
209
- this . foundation . handleInteraction ( evt ) ;
208
+ this . foundation . handleInteraction ( ) ;
210
209
} ;
211
210
212
211
handleTransitionEnd_ = ( evt : React . TransitionEvent < HTMLDivElement > ) => {
213
212
this . props . onTransitionEnd && this . props . onTransitionEnd ( evt ) ;
214
- this . foundation . handleTransitionEnd ( evt ) ;
213
+ this . foundation . handleTransitionEnd ( evt . nativeEvent ) ;
215
214
} ;
216
215
217
216
render ( ) {
0 commit comments