Skip to content
This repository was archived by the owner on Jul 29, 2025. It is now read-only.

Commit ab83c77

Browse files
committed
fix(top-app-bar): mdc-web v1 upgrade
1 parent f69db2e commit ab83c77

File tree

5 files changed

+124
-37
lines changed

5 files changed

+124
-37
lines changed

package-lock.json

Lines changed: 82 additions & 22 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
"@material/tab-indicator": "^1.0.0",
8989
"@material/tab-scroller": "^1.0.0",
9090
"@material/textfield": "^0.41.0",
91-
"@material/top-app-bar": "^0.41.0",
91+
"@material/top-app-bar": "^1.0.0",
9292
"@material/typography": "^0.41.0",
9393
"@types/chai": "^4.1.7",
9494
"@types/classnames": "^2.2.6",

packages/top-app-bar/index.tsx

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,11 @@ import TopAppBarRow from './Row';
2828
import TopAppBarTitle from './Title';
2929
import TopAppBarIcon from './Icon';
3030
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';
3736

3837
export type MDCTopAppBarFoundationTypes
3938
= MDCFixedTopAppBarFoundation | MDCTopAppBarFoundation | MDCShortTopAppBarFoundation;
@@ -57,6 +56,7 @@ export interface TopAppBarProps<T> extends React.HTMLProps<T>, DeprecatedProps {
5756
style?: React.CSSProperties;
5857
scrollTarget?: React.RefObject<HTMLElement>;
5958
tag?: string;
59+
onNavIconClicked?: () => void;
6060
}
6161

6262
interface TopAppBarState {
@@ -72,7 +72,7 @@ class TopAppBar<T extends HTMLElement = HTMLHeadingElement> extends React.Compon
7272
TopAppBarState
7373
> {
7474
topAppBarElement: React.RefObject<HTMLElement> = React.createRef();
75-
foundation?: MDCTopAppBarFoundationTypes;
75+
foundation!: MDCTopAppBarFoundationTypes;
7676

7777
state: TopAppBarState = {
7878
classList: new Set(),
@@ -171,7 +171,7 @@ class TopAppBar<T extends HTMLElement = HTMLHeadingElement> extends React.Compon
171171
return Object.assign({}, style, this.props.style);
172172
};
173173

174-
get adapter() {
174+
get adapter(): MDCTopAppBarAdapter {
175175
return {
176176
addClass: (className: string) =>
177177
this.setState({classList: this.state.classList.add(className)}),
@@ -192,14 +192,14 @@ class TopAppBar<T extends HTMLElement = HTMLHeadingElement> extends React.Compon
192192
}
193193
return 0;
194194
},
195-
registerScrollHandler: (handler: EventListener) => {
195+
registerScrollHandler: (handler: SpecificEventListener<'scroll'>) => {
196196
if (this.state.scrollTarget && this.state.scrollTarget.current) {
197197
this.state.scrollTarget.current.addEventListener('scroll', handler);
198198
} else {
199199
window.addEventListener('scroll', handler);
200200
}
201201
},
202-
deregisterScrollHandler: (handler: EventListener) => {
202+
deregisterScrollHandler: (handler: SpecificEventListener<'scroll'>) => {
203203
if (this.state.scrollTarget && this.state.scrollTarget.current) {
204204
this.state.scrollTarget.current.removeEventListener('scroll', handler);
205205
} else {
@@ -219,6 +219,33 @@ class TopAppBar<T extends HTMLElement = HTMLHeadingElement> extends React.Compon
219219
}
220220
return 0;
221221
},
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+
},
222249
};
223250
}
224251

packages/top-app-bar/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
],
1515
"dependencies": {
1616
"@material/react-ripple": "^0.9.0",
17-
"@material/top-app-bar": "^0.44.0",
17+
"@material/top-app-bar": "^1.0.0",
1818
"classnames": "^2.2.6",
1919
"react": "^16.4.2"
2020
},

test/unit/top-app-bar/index.test.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ test('Updating scrollTarget prop will call foundation method destroyScrollHandle
158158
const wrapper = mount<TopAppBarWithScroll>(<TopAppBarWithScroll/>);
159159
const topAppBar: TopAppBar = coerceForTesting<TopAppBar>(wrapper.find('TopAppBar').instance());
160160
const foundation = topAppBar.foundation;
161-
foundation.destroyScrollHandler = td.func();
161+
foundation.destroyScrollHandler = td.func<() => void>();
162162
wrapper.instance().withRef();
163163

164164
td.verify(foundation.destroyScrollHandler(), {times: 1});
@@ -168,7 +168,7 @@ test('Updating scrollTarget prop will call foundation method initScrollHandler',
168168
const wrapper = mount<TopAppBarWithScroll>(<TopAppBarWithScroll/>);
169169
const topAppBar: TopAppBar = coerceForTesting<TopAppBar>(wrapper.find('TopAppBar').instance());
170170
const foundation = topAppBar.foundation;
171-
foundation.initScrollHandler = td.func();
171+
foundation.initScrollHandler = td.func<() => void>();
172172
wrapper.instance().withRef();
173173

174174
td.verify(foundation.initScrollHandler(), {times: 1});
@@ -413,7 +413,7 @@ test(
413413
test('#componentWillUnmount destroys foundation', () => {
414414
const wrapper = shallow<TopAppBar>(<TopAppBar />);
415415
const foundation = wrapper.instance().foundation;
416-
foundation.destroy = td.func();
416+
foundation.destroy = td.func<() => void>();
417417
wrapper.unmount();
418418
td.verify(foundation.destroy());
419419
});

0 commit comments

Comments
 (0)