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

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.0.0",
     "@material/typography": "^0.41.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/foundation';
+import {MDCShortTopAppBarFoundation} from '@material/top-app-bar/short/foundation';
+import {EventType, 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,33 @@ 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);
+      },
+      registerNavigationIconInteractionHandler: <K extends EventType>(type: K, handler: SpecificEventListener<K>) => {
+        if (this.topAppBarElement && this.topAppBarElement.current) {
+          const navIcon = this.topAppBarElement.current.querySelector(`.${cssClasses.NAV_ICON}`);
+          if (navIcon) {
+            navIcon.addEventListener(type, handler);
+          }
+        }
+      },
+      deregisterNavigationIconInteractionHandler: <K extends EventType>(type: K, handler: SpecificEventListener<K>) => {
+        if (this.topAppBarElement && this.topAppBarElement.current) {
+          const navIcon = this.topAppBarElement.current.querySelector(`.${cssClasses.NAV_ICON}`);
+          if (navIcon) {
+            navIcon.removeEventListener(type, handler);
+          }
+        }
+      },
+      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.0.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});
@@ -413,7 +413,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());
 });