feat(snackbar): MDC Web v1.0.0 (#755)

Author: gugu

package-lock.json

@@ -44,6 +44,7 @@
           "radio",
           "ripple",
           "select",
+          "snackbar",
           "top-app-bar",
           "switch",
           "tab",
@@ -80,7 +81,7 @@
     "@material/radio": "^0.41.0",
     "@material/ripple": "^1.0.0",
     "@material/select": "^0.40.1",
-    "@material/snackbar": "^0.43.0",
+    "@material/snackbar": "^1.0.0",
     "@material/switch": "^0.41.0",
     "@material/tab": "^1.0.0",
     "@material/tab-bar": "^0.41.0",

package.json

@@ -23,11 +23,8 @@
 import * as React from 'react';
 import classnames from 'classnames';
 
-// TODO: replace with MDC Web types when available
-import {IMDCSnackbarAdapter, IMDCSnackbarFoundation} from './types';
-
-// @ts-ignore no .d.ts file
-import {MDCSnackbarFoundation} from '@material/snackbar';
+import {MDCSnackbarFoundation} from '@material/snackbar/foundation';
+import {MDCSnackbarAdapter} from '@material/snackbar/adapter';
 
 export interface Props {
   message: string;
@@ -51,7 +48,7 @@ type State = {
 };
 
 export class Snackbar extends React.Component<Props, State> {
-  foundation: IMDCSnackbarFoundation
+  foundation: MDCSnackbarFoundation
 
   static defaultProps: Partial<Props> = {
     open: true,
@@ -84,7 +81,7 @@ export class Snackbar extends React.Component<Props, State> {
       this.foundation.setCloseOnEscape(closeOnEscape);
     }
   }
-  get adapter(): IMDCSnackbarAdapter {
+  get adapter(): MDCSnackbarAdapter {
     return {
       addClass: (className: string) => {
         const {classes} = this.state;

packages/snackbar/index.tsx

@@ -17,7 +17,7 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
-    "@material/snackbar": "^0.43.0",
+    "@material/snackbar": "^1.0.0",
     "classnames": "^2.2.6",
     "react": "^16.4.2"
   },

packages/snackbar/package.json

@@ -3,6 +3,12 @@ import * as td from 'testdouble';
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
 import {Snackbar} from '../../../packages/snackbar/index';
+import {MDCSnackbarAdapter} from '@material/snackbar/adapter';
+
+function getAdapter(instance: Snackbar): MDCSnackbarAdapter {
+  // @ts-ignore adapter_ is a protected property, we need to override it
+  return instance.foundation.adapter_;
+}
 
 suite('Snackbar');
 
@@ -71,7 +77,7 @@ test('opening notification works', () => {
   const openingHandler = td.func<() => void>();
   const wrapper = shallow<Snackbar>(
     <Snackbar open={false} onOpening={openingHandler} message='example' actionText='action' />);
-  wrapper.instance().foundation.adapter_.notifyOpening();
+  getAdapter(wrapper.instance()).notifyOpening();
   td.verify(openingHandler(), {times: 1});
   wrapper.unmount();
 });
@@ -80,7 +86,7 @@ test('open notification works', () => {
   const openHandler = td.func<() => void>();
   const wrapper = shallow<Snackbar>(
     <Snackbar open={false} onOpen={openHandler} message='example' actionText='action' />);
-  wrapper.instance().foundation.adapter_.notifyOpened();
+  getAdapter(wrapper.instance()).notifyOpened();
   td.verify(openHandler(), {times: 1});
   wrapper.unmount();
 });
@@ -89,7 +95,7 @@ test('closing notification works', () => {
   const closingHandler = td.func<(reason: string) => void>();
   const wrapper = shallow<Snackbar>(
     <Snackbar open={false} onClosing={closingHandler} message='example' actionText='action' />);
-  wrapper.instance().foundation.adapter_.notifyClosing('unit_test');
+  getAdapter(wrapper.instance()).notifyClosing('unit_test');
   td.verify(closingHandler('unit_test'), {times: 1});
   wrapper.unmount();
 });
@@ -98,7 +104,7 @@ test('close notification works', () => {
   const closeHandler = td.func<(reason: string) => void>();
   const wrapper = shallow<Snackbar>(
     <Snackbar open={false} onClose={closeHandler} message='example' actionText='action' />);
-  wrapper.instance().foundation.adapter_.notifyClosed('unit_test');
+  getAdapter(wrapper.instance()).notifyClosed('unit_test');
   td.verify(closeHandler('unit_test'), {times: 1});
   wrapper.unmount();
 });