feat(linear-progress): typescript (#526)

packages/linear-progress/index.tsx

@@ -0,0 +1,200 @@
+// The MIT License
+//
+// Copyright (c) 2018 Google, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import * as classnames from 'classnames';
+import * as React from 'react';
+// no .d.ts file
+// @ts-ignore
+import {MDCLinearProgressFoundation} from '@material/linear-progress/dist/mdc.linearProgress';
+
+export interface LinearProgressProps<T> extends React.HTMLProps<T> {
+  buffer: number;
+  bufferingDots: boolean;
+  className: string;
+  closed: boolean;
+  indeterminate: boolean;
+  progress: number;
+  reversed: boolean;
+  tag: string;
+};
+
+interface LinearProgressState {
+  classList: Set<string>;
+};
+
+class LinearProgress<T extends {} = HTMLDivElement> extends React.Component<
+  LinearProgressProps<T>,
+  LinearProgressState
+  > {
+  isComponentMounted: boolean = false;
+  bufferElement: React.RefObject<HTMLDivElement> = React.createRef();
+  primaryBarElement: React.RefObject<HTMLDivElement> = React.createRef();
+  foundation: MDCLinearProgressFoundation;
+
+  constructor(props: LinearProgressProps<T>) {
+    super(props);
+    this.foundation = new MDCLinearProgressFoundation(this.adapter);
+    this.state = {
+      classList: new Set(),
+    };
+  }
+
+  static defaultProps: LinearProgressProps<HTMLDivElement> = {
+    buffer: 0,
+    bufferingDots: true,
+    className: '',
+    closed: false,
+    indeterminate: false,
+    progress: 0,
+    reversed: false,
+    tag: 'div',
+  };
+
+  componentDidMount() {
+    const {buffer, closed, indeterminate, progress, reversed} = this.props;
+    this.isComponentMounted = true;
+    this.foundation.init();
+    this.foundation.setBuffer(buffer);
+    this.foundation.setDeterminate(!indeterminate);
+    this.foundation.setProgress(progress);
+    this.foundation.setReverse(reversed);
+    if (closed) {
+      this.foundation.close();
+    }
+  }
+
+  componentDidUpdate(prevProps: LinearProgressProps<T>) {
+    const {
+      buffer: prevBuffer,
+      closed: prevClosed,
+      indeterminate: prevIndeterminate,
+      progress: prevProgress,
+      reversed: prevReversed,
+    } = prevProps;
+    const {buffer, closed, indeterminate, progress, reversed} = this.props;
+    if (buffer !== prevBuffer) {
+      this.foundation.setBuffer(buffer);
+    }
+    if (closed && !prevClosed) {
+      this.foundation.close();
+    }
+    if (!closed && prevClosed) {
+      this.foundation.open();
+    }
+    if (indeterminate !== prevIndeterminate) {
+      this.foundation.setDeterminate(!indeterminate);
+    }
+    if (progress !== prevProgress) {
+      this.foundation.setProgress(progress);
+    }
+    if (reversed !== prevReversed) {
+      this.foundation.setReverse(reversed);
+    }
+  }
+
+  componentWillUnmount() {
+    this.isComponentMounted = false;
+    this.foundation.destroy();
+  }
+
+  get adapter() {
+    return {
+      addClass: (className: string) => {
+        if (this.isComponentMounted) {
+          const {classList} = this.state;
+          classList.add(className);
+          this.setState({classList});
+        }
+      },
+      getBuffer: () => {
+        return this.bufferElement.current;
+      },
+      getPrimaryBar: () => {
+        return this.primaryBarElement.current;
+      },
+      hasClass: (className: string) => {
+        return this.state.classList.has(className);
+      },
+      removeClass: (className: string) => {
+        if (this.isComponentMounted) {
+          const {classList} = this.state;
+          classList.delete(className);
+          this.setState({classList});
+        }
+      },
+      setStyle: (element: HTMLElement, propertyName: string, value: string) => {
+        if (this.isComponentMounted) {
+          element.style.setProperty(propertyName, value);
+        }
+      },
+    };
+  }
+
+  get classes() {
+    const {className, indeterminate, reversed} = this.props;
+    const {classList} = this.state;
+    return classnames('mdc-linear-progress', Array.from(classList), className, {
+      'mdc-linear-progress--indeterminate': indeterminate,
+      'mdc-linear-progress--reversed': reversed,
+    });
+  }
+
+  render() {
+    const {
+      /* eslint-disable no-unused-vars */
+      buffer,
+      bufferingDots,
+      className,
+      closed,
+      indeterminate,
+      progress,
+      reversed,
+      tag: Tag,
+      /* eslint-enable no-unused-vars */
+      ...otherProps
+    } = this.props;
+    return (
+      // https://github.com/Microsoft/TypeScript/issues/28892
+      // @ts-ignore
+      <Tag className={this.classes} role='progressbar' {...otherProps}>
+        {bufferingDots && (
+          <div className='mdc-linear-progress__buffering-dots' />
+        )}
+        <div
+          className='mdc-linear-progress__buffer'
+          ref={this.bufferElement}
+        />
+        <div
+          className='mdc-linear-progress__bar mdc-linear-progress__primary-bar'
+          ref={this.primaryBarElement}
+        >
+          <span className='mdc-linear-progress__bar-inner' />
+        </div>
+        <div className='mdc-linear-progress__bar mdc-linear-progress__secondary-bar'>
+          <span className='mdc-linear-progress__bar-inner' />
+        </div>
+      </Tag>
+    );
+  }
+}
+
+export default LinearProgress;

test/screenshot/golden.json

@@ -8,6 +8,7 @@
   "icon-button": "5ffb1f7fbd06d2c0533f6ba8d4d9ea170cec1a248a61de1cc1bb626cb58ebcd2",
   "layout-grid": "fe40f7a34853bc2a1d9a836e812599d4d47b5b26b839a8eaed7f98ea91946790",
   "line-ripple": "56b136db2dc7e09260849447e6bde9b55a837af332a05d9f52506ab1c95e2e57",
+  "linear-progress": "f7a23058842b37875a02b3562e0b9c82f7fb24f9b88e9727d10b921b001d115e",
   "list": "a53f22639b6eae05613ffd0bb943ede1e7edba4a50d28463389a00828896a644",
   "material-icon": "442b39fb22d2c7a74efb23ca098429b471501ce21df8662327bbf9871fe0bcb0",
   "menu-surface": "f5face1a24fe166e86e8a3dc35ea85b2d4431469a3d06bf6fc1a30fbdc175aff",