fix(top-app-bar): mdc-web v1 upgrade (#780)

Author: gugu

package-lock.json

@@ -88,7 +88,7 @@
     "@material/tab-indicator": "^1.0.0",
     "@material/tab-scroller": "^1.0.0",
     "@material/textfield": "^0.41.0",
-    "@material/top-app-bar": "^0.41.0",
+    "@material/top-app-bar": "^1.1.0",
     "@material/typography": "^1.0.0",
     "@types/chai": "^4.1.7",
     "@types/classnames": "^2.2.6",

package.json

@@ -28,12 +28,11 @@ import TopAppBarRow from './Row';
 import TopAppBarTitle from './Title';
 import TopAppBarIcon from './Icon';
 import {cssClasses} from './constants';
-import {
-  MDCFixedTopAppBarFoundation,
-  MDCTopAppBarFoundation,
-  MDCShortTopAppBarFoundation,
-// @ts-ignore no .d.ts file
-} from '@material/top-app-bar/dist/mdc.topAppBar';
+import {MDCFixedTopAppBarFoundation} from '@material/top-app-bar/fixed/foundation';
+import {MDCTopAppBarAdapter} from '@material/top-app-bar/adapter';
+import {MDCTopAppBarFoundation} from '@material/top-app-bar/standard/foundation';
+import {MDCShortTopAppBarFoundation} from '@material/top-app-bar/short/foundation';
+import {SpecificEventListener} from '@material/base/types';
 
 export type MDCTopAppBarFoundationTypes
   = MDCFixedTopAppBarFoundation | MDCTopAppBarFoundation | MDCShortTopAppBarFoundation;
@@ -57,6 +56,7 @@ export interface TopAppBarProps<T> extends React.HTMLProps<T>, DeprecatedProps {
   style?: React.CSSProperties;
   scrollTarget?: React.RefObject<HTMLElement>;
   tag?: string;
+  onNavIconClicked?: () => void;
 }
 
 interface TopAppBarState {
@@ -72,7 +72,7 @@ class TopAppBar<T extends HTMLElement = HTMLHeadingElement> extends React.Compon
   TopAppBarState
   > {
   topAppBarElement: React.RefObject<HTMLElement> = React.createRef();
-  foundation?: MDCTopAppBarFoundationTypes;
+  foundation!: MDCTopAppBarFoundationTypes;
 
   state: TopAppBarState = {
     classList: new Set(),
@@ -171,7 +171,7 @@ class TopAppBar<T extends HTMLElement = HTMLHeadingElement> extends React.Compon
     return Object.assign({}, style, this.props.style);
   };
 
-  get adapter() {
+  get adapter(): MDCTopAppBarAdapter {
     return {
       addClass: (className: string) =>
         this.setState({classList: this.state.classList.add(className)}),
@@ -192,14 +192,14 @@ class TopAppBar<T extends HTMLElement = HTMLHeadingElement> extends React.Compon
         }
         return 0;
       },
-      registerScrollHandler: (handler: EventListener) => {
+      registerScrollHandler: (handler: SpecificEventListener<'scroll'>) => {
         if (this.state.scrollTarget && this.state.scrollTarget.current) {
           this.state.scrollTarget.current.addEventListener('scroll', handler);
         } else {
           window.addEventListener('scroll', handler);
         }
       },
-      deregisterScrollHandler: (handler: EventListener) => {
+      deregisterScrollHandler: (handler: SpecificEventListener<'scroll'>) => {
         if (this.state.scrollTarget && this.state.scrollTarget.current) {
           this.state.scrollTarget.current.removeEventListener('scroll', handler);
         } else {
@@ -219,6 +219,21 @@ class TopAppBar<T extends HTMLElement = HTMLHeadingElement> extends React.Compon
         }
         return 0;
       },
+      registerResizeHandler: (handler: SpecificEventListener<'resize'>) => {
+        window.addEventListener('resize', handler);
+      },
+      deregisterResizeHandler: (handler: SpecificEventListener<'resize'>) => {
+        window.removeEventListener('resize', handler);
+      },
+      // onClick handler of navigation bar is used instead
+      // see https://github.com/material-components/material-components-web/issues/2813
+      registerNavigationIconInteractionHandler: () => null,
+      deregisterNavigationIconInteractionHandler: () => null,
+      notifyNavigationIconClicked: () => {
+        if (this.props.onNavIconClicked) {
+          this.props.onNavIconClicked();
+        }
+      },
     };
   }
 

packages/top-app-bar/index.tsx

@@ -14,7 +14,7 @@
   ],
   "dependencies": {
     "@material/react-ripple": "^0.9.0",
-    "@material/top-app-bar": "^0.44.0",
+    "@material/top-app-bar": "^1.1.0",
     "classnames": "^2.2.6",
     "react": "^16.4.2"
   },

packages/top-app-bar/package.json

@@ -158,7 +158,7 @@ test('Updating scrollTarget prop will call foundation method destroyScrollHandle
   const wrapper = mount<TopAppBarWithScroll>(<TopAppBarWithScroll/>);
   const topAppBar: TopAppBar = coerceForTesting<TopAppBar>(wrapper.find('TopAppBar').instance());
   const foundation = topAppBar.foundation;
-  foundation.destroyScrollHandler = td.func();
+  foundation.destroyScrollHandler = td.func<() => void>();
   wrapper.instance().withRef();
 
   td.verify(foundation.destroyScrollHandler(), {times: 1});
@@ -168,7 +168,7 @@ test('Updating scrollTarget prop will call foundation method initScrollHandler',
   const wrapper = mount<TopAppBarWithScroll>(<TopAppBarWithScroll/>);
   const topAppBar: TopAppBar = coerceForTesting<TopAppBar>(wrapper.find('TopAppBar').instance());
   const foundation = topAppBar.foundation;
-  foundation.initScrollHandler = td.func();
+  foundation.initScrollHandler = td.func<() => void>();
   wrapper.instance().withRef();
 
   td.verify(foundation.initScrollHandler(), {times: 1});
@@ -245,6 +245,28 @@ test(
   }
 );
 
+test('#adapter.registerResizeHandler triggers handler on window resize', () => {
+  const wrapper = shallow<TopAppBar>(<TopAppBar />);
+  const testHandler = coerceForTesting<EventListener>(td.func());
+  wrapper.instance().adapter.registerResizeHandler(testHandler);
+  const event = new Event('resize');
+  window.dispatchEvent(event);
+  td.verify(testHandler(event), {times: 1});
+});
+
+test(
+  '#adapter.registerResizeHandler does not trigger handler ' +
+    'after deregistering scroll handler on window',
+  () => {
+    const wrapper = shallow<TopAppBar>(<TopAppBar />);
+    const testHandler = coerceForTesting<EventListener>(td.func());
+    wrapper.instance().adapter.registerResizeHandler(testHandler);
+    const event = new Event('resize');
+    wrapper.instance().adapter.deregisterResizeHandler(testHandler);
+    window.dispatchEvent(event);
+    td.verify(testHandler(event), {times: 0});
+  }
+);
 
 test('#adapter.getTotalActionItems returns one with one actionItem passed', () => {
   const wrapper = mount<TopAppBar>(
@@ -413,7 +435,7 @@ test(
 test('#componentWillUnmount destroys foundation', () => {
   const wrapper = shallow<TopAppBar>(<TopAppBar />);
   const foundation = wrapper.instance().foundation;
-  foundation.destroy = td.func();
+  foundation.destroy = td.func<() => void>();
   wrapper.unmount();
   td.verify(foundation.destroy());
 });