fix(linear-progress): upgrade mdc-web to v1 (#787)

Author: gugu

package-lock.json

@@ -74,7 +74,7 @@
     "@material/icon-button": "^0.41.0",
     "@material/layout-grid": "^0.41.0",
     "@material/line-ripple": "^1.0.0",
-    "@material/linear-progress": "^0.41.0",
+    "@material/linear-progress": "^1.1.0",
     "@material/list": "^1.0.0",
     "@material/menu-surface": "^1.0.1",
     "@material/notched-outline": "^0.41.0",

package.json

@@ -22,8 +22,8 @@
 
 import classnames from 'classnames';
 import * as React from 'react';
-// @ts-ignore no .d.ts file
-import {MDCLinearProgressFoundation} from '@material/linear-progress/dist/mdc.linearProgress';
+import {MDCLinearProgressFoundation} from '@material/linear-progress/foundation';
+import {MDCLinearProgressAdapter} from '@material/linear-progress/adapter';
 
 export interface LinearProgressProps<T> extends React.HTMLProps<T> {
   buffer?: number;
@@ -72,10 +72,10 @@ class LinearProgress<T extends {} = HTMLDivElement> extends React.Component<
     const {buffer, closed, indeterminate, progress, reversed} = this.props;
     this.isComponentMounted = true;
     this.foundation.init();
-    this.foundation.setBuffer(buffer);
+    this.foundation.setBuffer(buffer!);
     this.foundation.setDeterminate(!indeterminate);
-    this.foundation.setProgress(progress);
-    this.foundation.setReverse(reversed);
+    this.foundation.setProgress(progress!);
+    this.foundation.setReverse(reversed!);
     if (closed) {
       this.foundation.close();
     }
@@ -91,7 +91,7 @@ class LinearProgress<T extends {} = HTMLDivElement> extends React.Component<
     } = prevProps;
     const {buffer, closed, indeterminate, progress, reversed} = this.props;
     if (buffer !== prevBuffer) {
-      this.foundation.setBuffer(buffer);
+      this.foundation.setBuffer(buffer!);
     }
     if (closed && !prevClosed) {
       this.foundation.close();
@@ -103,10 +103,10 @@ class LinearProgress<T extends {} = HTMLDivElement> extends React.Component<
       this.foundation.setDeterminate(!indeterminate);
     }
     if (progress !== prevProgress) {
-      this.foundation.setProgress(progress);
+      this.foundation.setProgress(progress!);
     }
     if (reversed !== prevReversed) {
-      this.foundation.setReverse(reversed);
+      this.foundation.setReverse(reversed!);
     }
   }
 
@@ -115,7 +115,7 @@ class LinearProgress<T extends {} = HTMLDivElement> extends React.Component<
     this.foundation.destroy();
   }
 
-  get adapter() {
+  get adapter(): MDCLinearProgressAdapter {
     return {
       addClass: (className: string) => {
         if (this.isComponentMounted) {

packages/linear-progress/index.tsx

@@ -17,7 +17,7 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
-    "@material/linear-progress": "^0.41.0",
+    "@material/linear-progress": "^1.1.0",
     "classnames": "^2.2.6",
     "react": "^16.4.2"
   },

packages/linear-progress/package.json

@@ -68,97 +68,97 @@ test('Keeps custom props', () => {
 test('#foundation.init gets called when the component mounts', () => {
   const wrapper = mount<LinearProgress>(<LinearProgress />);
   const instance = wrapper.instance();
-  instance.foundation.init = td.func();
+  instance.foundation.init = td.func<() => void>();
   instance.componentDidMount();
   td.verify(instance.foundation.init(), {times: 1});
 });
 
 test('#foundation.setBuffer gets called when the component mounts', () => {
   const wrapper = mount<LinearProgress>(<LinearProgress buffer={0.1} />);
   const instance = wrapper.instance();
-  instance.foundation.setBuffer = td.func();
+  instance.foundation.setBuffer = td.func<(value: number) => void>();
   instance.componentDidMount();
   td.verify(instance.foundation.setBuffer(0.1), {times: 1});
 });
 
 test('#foundation.setDeterminate gets called when the component mounts', () => {
   const wrapper = mount<LinearProgress>(<LinearProgress indeterminate={true} />);
   const instance = wrapper.instance();
-  instance.foundation.setDeterminate = td.func();
+  instance.foundation.setDeterminate = td.func<(isDeterminate: boolean) => void>();
   instance.componentDidMount();
   td.verify(instance.foundation.setDeterminate(false), {times: 1});
 });
 
 test('#foundation.setProgress gets called when the component mounts', () => {
   const wrapper = mount<LinearProgress>(<LinearProgress progress={0.1} />);
   const instance = wrapper.instance();
-  instance.foundation.setProgress = td.func();
+  instance.foundation.setProgress = td.func<(value: number) => null>();
   instance.componentDidMount();
   td.verify(instance.foundation.setProgress(0.1), {times: 1});
 });
 
 test('#foundation.setReverse gets called when the component mounts', () => {
   const wrapper = mount<LinearProgress>(<LinearProgress reversed={true} />);
   const instance = wrapper.instance();
-  instance.foundation.setReverse = td.func();
+  instance.foundation.setReverse = td.func<(isReversed: boolean) => void>();
   instance.componentDidMount();
   td.verify(instance.foundation.setReverse(true), {times: 1});
 });
 
 test('#foundation.close gets called when the component mounts', () => {
   const wrapper = mount<LinearProgress>(<LinearProgress closed />);
   const instance = wrapper.instance();
-  instance.foundation.close = td.func();
+  instance.foundation.close = td.func<() => void>();
   instance.componentDidMount();
   td.verify(instance.foundation.close(), {times: 1});
 });
 
 test('#foundation.setBuffer gets called when props.buffer updates', () => {
   const wrapper = mount<LinearProgress>(<LinearProgress buffer={0.1} />);
-  wrapper.instance().foundation.setBuffer = td.func();
+  wrapper.instance().foundation.setBuffer = td.func<(value: number) => void>();
   wrapper.setProps({buffer: 0.2});
   td.verify(wrapper.instance().foundation.setBuffer(0.2), {times: 1});
 });
 
 test('#foundation.close gets called when props.closed updates', () => {
   const wrapper = mount<LinearProgress>(<LinearProgress closed={false} />);
-  wrapper.instance().foundation.close = td.func();
+  wrapper.instance().foundation.close = td.func<() => void>();
   wrapper.setProps({closed: true});
   td.verify(wrapper.instance().foundation.close(), {times: 1});
 });
 
 test('#foundation.open gets called when props.closed updates', () => {
   const wrapper = mount<LinearProgress>(<LinearProgress closed={true} />);
-  wrapper.instance().foundation.open = td.func();
+  wrapper.instance().foundation.open = td.func<() => void>();
   wrapper.setProps({closed: false});
   td.verify(wrapper.instance().foundation.open(), {times: 1});
 });
 
 test('#foundation.setDeterminate gets called when props.indeterminate updates', () => {
   const wrapper = mount<LinearProgress>(<LinearProgress indeterminate={false} />);
-  wrapper.instance().foundation.setDeterminate = td.func();
+  wrapper.instance().foundation.setDeterminate = td.func<(isDeterminate: boolean) => void>();
   wrapper.setProps({indeterminate: true});
   td.verify(wrapper.instance().foundation.setDeterminate(false), {times: 1});
 });
 
 test('#foundation.setProgress gets called when props.progress updates', () => {
   const wrapper = mount<LinearProgress>(<LinearProgress progress={0.1} />);
-  wrapper.instance().foundation.setProgress = td.func();
+  wrapper.instance().foundation.setProgress = td.func<(value: number) => void>();
   wrapper.setProps({progress: 0.2});
   td.verify(wrapper.instance().foundation.setProgress(0.2), {times: 1});
 });
 
 test('#foundation.setReverse gets called when props.reversed updates', () => {
   const wrapper = mount<LinearProgress>(<LinearProgress reversed={false} />);
-  wrapper.instance().foundation.setReverse = td.func();
+  wrapper.instance().foundation.setReverse = td.func<(isReversed: boolean) => void>();
   wrapper.setProps({reversed: true});
   td.verify(wrapper.instance().foundation.setReverse(true), {times: 1});
 });
 
 test('#foundation.destroy gets called when the component unmounts', () => {
   const wrapper = mount<LinearProgress>(<LinearProgress />);
   const instance = wrapper.instance();
-  instance.foundation.destroy = td.func();
+  instance.foundation.destroy = td.func<() => void>();
   wrapper.unmount();
   td.verify(instance.foundation.destroy(), {times: 1});
 });