@@ -28,12 +28,11 @@ import TopAppBarRow from './Row';
28
28
import TopAppBarTitle from './Title' ;
29
29
import TopAppBarIcon from './Icon' ;
30
30
import { cssClasses } from './constants' ;
31
- import {
32
- MDCFixedTopAppBarFoundation ,
33
- MDCTopAppBarFoundation ,
34
- MDCShortTopAppBarFoundation ,
35
- // @ts -ignore no .d.ts file
36
- } from '@material/top-app-bar/dist/mdc.topAppBar' ;
31
+ import { MDCFixedTopAppBarFoundation } from '@material/top-app-bar/fixed/foundation' ;
32
+ import { MDCTopAppBarAdapter } from '@material/top-app-bar/adapter' ;
33
+ import MDCTopAppBarFoundation from '@material/top-app-bar/foundation' ;
34
+ import { MDCShortTopAppBarFoundation } from '@material/top-app-bar/short/foundation' ;
35
+ import { EventType , SpecificEventListener } from '@material/base/types' ;
37
36
38
37
export type MDCTopAppBarFoundationTypes
39
38
= MDCFixedTopAppBarFoundation | MDCTopAppBarFoundation | MDCShortTopAppBarFoundation ;
@@ -57,6 +56,7 @@ export interface TopAppBarProps<T> extends React.HTMLProps<T>, DeprecatedProps {
57
56
style ?: React . CSSProperties ;
58
57
scrollTarget ?: React . RefObject < HTMLElement > ;
59
58
tag ?: string ;
59
+ onNavIconClicked ?: ( ) => void ;
60
60
}
61
61
62
62
interface TopAppBarState {
@@ -72,7 +72,7 @@ class TopAppBar<T extends HTMLElement = HTMLHeadingElement> extends React.Compon
72
72
TopAppBarState
73
73
> {
74
74
topAppBarElement : React . RefObject < HTMLElement > = React . createRef ( ) ;
75
- foundation ? : MDCTopAppBarFoundationTypes ;
75
+ foundation ! : MDCTopAppBarFoundationTypes ;
76
76
77
77
state : TopAppBarState = {
78
78
classList : new Set ( ) ,
@@ -171,7 +171,7 @@ class TopAppBar<T extends HTMLElement = HTMLHeadingElement> extends React.Compon
171
171
return Object . assign ( { } , style , this . props . style ) ;
172
172
} ;
173
173
174
- get adapter ( ) {
174
+ get adapter ( ) : MDCTopAppBarAdapter {
175
175
return {
176
176
addClass : ( className : string ) =>
177
177
this . setState ( { classList : this . state . classList . add ( className ) } ) ,
@@ -192,14 +192,14 @@ class TopAppBar<T extends HTMLElement = HTMLHeadingElement> extends React.Compon
192
192
}
193
193
return 0 ;
194
194
} ,
195
- registerScrollHandler : ( handler : EventListener ) => {
195
+ registerScrollHandler : ( handler : SpecificEventListener < 'scroll' > ) => {
196
196
if ( this . state . scrollTarget && this . state . scrollTarget . current ) {
197
197
this . state . scrollTarget . current . addEventListener ( 'scroll' , handler ) ;
198
198
} else {
199
199
window . addEventListener ( 'scroll' , handler ) ;
200
200
}
201
201
} ,
202
- deregisterScrollHandler : ( handler : EventListener ) => {
202
+ deregisterScrollHandler : ( handler : SpecificEventListener < 'scroll' > ) => {
203
203
if ( this . state . scrollTarget && this . state . scrollTarget . current ) {
204
204
this . state . scrollTarget . current . removeEventListener ( 'scroll' , handler ) ;
205
205
} else {
@@ -219,6 +219,33 @@ class TopAppBar<T extends HTMLElement = HTMLHeadingElement> extends React.Compon
219
219
}
220
220
return 0 ;
221
221
} ,
222
+ registerResizeHandler : ( handler : SpecificEventListener < 'resize' > ) => {
223
+ window . addEventListener ( 'resize' , handler ) ;
224
+ } ,
225
+ deregisterResizeHandler : ( handler : SpecificEventListener < 'resize' > ) => {
226
+ window . removeEventListener ( 'resize' , handler ) ;
227
+ } ,
228
+ registerNavigationIconInteractionHandler : < K extends EventType > ( type : K , handler : SpecificEventListener < K > ) => {
229
+ if ( this . topAppBarElement && this . topAppBarElement . current ) {
230
+ const navIcon = this . topAppBarElement . current . querySelector ( `.${ cssClasses . NAV_ICON } ` ) ;
231
+ if ( navIcon ) {
232
+ navIcon . addEventListener ( type , handler ) ;
233
+ }
234
+ }
235
+ } ,
236
+ deregisterNavigationIconInteractionHandler : < K extends EventType > ( type : K , handler : SpecificEventListener < K > ) => {
237
+ if ( this . topAppBarElement && this . topAppBarElement . current ) {
238
+ const navIcon = this . topAppBarElement . current . querySelector ( `.${ cssClasses . NAV_ICON } ` ) ;
239
+ if ( navIcon ) {
240
+ navIcon . removeEventListener ( type , handler ) ;
241
+ }
242
+ }
243
+ } ,
244
+ notifyNavigationIconClicked : ( ) => {
245
+ if ( this . props . onNavIconClicked ) {
246
+ this . props . onNavIconClicked ( ) ;
247
+ }
248
+ } ,
222
249
} ;
223
250
}
224
251
0 commit comments