feat(tab-indicator): add new component (#202)

Author: Matt Goo

package-lock.json

@@ -35,6 +35,7 @@
           "ripple",
           "top-app-bar",
           "infrastructure",
+          "tab-indicator",
           "text-field"
         ],
         "validate": true
@@ -52,6 +53,7 @@
     "@material/list": "^0.38.0",
     "@material/notched-outline": "^0.38.0",
     "@material/ripple": "^0.38.0",
+    "@material/tab-indicator": "^0.38.0",
     "@material/select": "^0.38.0",
     "@material/textfield": "^0.38.0",
     "@material/top-app-bar": "^0.38.0",

package.json

@@ -0,0 +1 @@
+index.js

packages/tab-indicator/.npmignore

@@ -0,0 +1,90 @@
+# React Tab Indicator
+
+A React version of an [MDC Tab Indicator](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab-indicator).
+
+## Installation
+
+```
+npm install @material/react-tab-indicator
+```
+
+## Usage
+
+### Styles
+
+with Sass:
+```js
+import '@material/react-tab-indicator/index.scss';
+```
+
+with CSS:
+```js
+import '@material/react-tab-indicator/dist/tab-indicator.css';
+```
+
+### Javascript Instantiation
+
+#### With an Underline (default)
+
+```js
+import React from 'react';
+import TabIndicator from '@material/react-tab-indicator';
+
+class MyApp extends React.Component {
+  state = {active: false};
+
+  render() {
+    return (
+      <div>
+        <TabIndicator active={this.state.active} />
+      </div>
+    );
+  }
+}
+```
+
+
+#### With Icon
+
+If you want the underline instead of an icon, pass the icon element as a child
+of the Tab Indicator component.
+
+```js
+import React from 'react';
+import TabIndicator from '@material/react-tab-indicator';
+
+class MyApp extends React.Component {
+  state = {active: false};
+
+  render() {
+    return (
+      <div>
+        <TabIndicator
+          active={this.state.active}
+          icon
+        >
+          <MaterialIcon icon='star' />
+        </TabIndicator>
+      </div>
+    );
+  }
+}
+```
+
+## Props
+
+Prop Name | Type | Description
+--- | --- | ---
+active | boolean | If true will activate the indicator.
+className | string | Classes to appear on className attribute of root element.
+fade | boolean | If enabled will use the fade animation for transitioning to other tabs.
+icon | boolean | Indicates that the indicator is an icon instead of an underline.
+previousIndicatorClientRect | ClientRect | The indicator's clientRect that was previously activated.
+onTransitionEnd | function | transitionend event callback handler.
+
+## Sass Mixins
+
+Sass mixins may be available to customize various aspects of the components. Please refer to the
+MDC Web repository for more information on what mixins are available, and how to use them.
+
+[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab-indicator/README.md#sass-mixins)

packages/tab-indicator/README.md

@@ -0,0 +1,152 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import {
+  MDCFadingTabIndicatorFoundation,
+  MDCSlidingTabIndicatorFoundation,
+} from '@material/tab-indicator/dist/mdc.tabIndicator';
+
+export default class TabIndicator extends Component {
+  tabIndicatorContentElement_ = React.createRef();
+  allowTransitionEnd_ = false;
+
+  state = {
+    classList: new Set(),
+    contentStyle: {},
+  };
+
+  componentDidMount() {
+    if (this.props.fade) {
+      this.foundation_ = new MDCFadingTabIndicatorFoundation(this.adapter);
+    } else {
+      this.foundation_ = new MDCSlidingTabIndicatorFoundation(this.adapter);
+    }
+    this.foundation_.init();
+  }
+
+  componentWillUnmount() {
+    this.foundation_.destroy();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.active !== prevProps.active) {
+      this.allowTransitionEnd_ = true;
+      if (this.props.active) {
+        this.foundation_.activate(this.props.previousIndicatorClientRect);
+      } else {
+        this.foundation_.deactivate();
+      }
+    }
+  }
+
+  get classes() {
+    const {classList} = this.state;
+    const {active, className, fade} = this.props;
+    return classnames('mdc-tab-indicator', Array.from(classList), className, {
+      'mdc-tab-indicator--fade': fade,
+      'mdc-tab-indicator--active': active,
+    });
+  }
+
+  get contentClasses() {
+    const {icon} = this.props;
+    return classnames('mdc-tab-indicator__content', {
+      'mdc-tab-indicator__content--icon': icon,
+      'mdc-tab-indicator__content--underline': !icon,
+    });
+  }
+
+  get adapter() {
+    return {
+      addClass: (className) => {
+        const classList = new Set(this.state.classList);
+        classList.add(className);
+        this.setState({classList});
+      },
+      removeClass: (className) => {
+        const classList = new Set(this.state.classList);
+        classList.delete(className);
+        this.setState({classList});
+      },
+      computeContentClientRect:
+        () => this.tabIndicatorContentElement_.current
+          && this.tabIndicatorContentElement_.current.getBoundingClientRect(),
+      setContentStyleProperty: (prop, value) => this.setState({contentStyle: {[prop]: value}}),
+    };
+  }
+
+  handleTransitionEnd = (e) => {
+    this.props.onTransitionEnd(e);
+
+    if (!this.allowTransitionEnd_) return;
+
+    this.allowTransitionEnd_ = false;
+    this.foundation_.handleTransitionEnd();
+  }
+
+  render() {
+    const {
+      /* eslint-disable */
+      active,
+      children,
+      className,
+      fade,
+      icon,
+      onTransitionEnd,
+      previousIndicatorClientRect,
+      /* eslint-enable */
+      ...otherProps
+    } = this.props;
+
+    return (
+      <span
+        className={this.classes}
+        onTransitionEnd={this.handleTransitionEnd}
+        {...otherProps}
+      >
+        {this.renderContent()}
+      </span>
+    );
+  }
+
+  addContentClassesToChildren = () => {
+    const child = React.Children.only(this.props.children);
+    const className = classnames(child.props.className, this.contentClasses);
+    const props = Object.assign({}, child.props, {className});
+    return React.cloneElement(child, props);
+  };
+
+  renderContent() {
+    if (this.props.children) {
+      return this.addContentClassesToChildren();
+    }
+    return (
+      <span
+        className={this.contentClasses}
+        ref={this.tabIndicatorContentElement_}
+        style={this.state.contentStyle}
+      />
+    );
+  }
+}
+
+TabIndicator.propTypes = {
+  active: PropTypes.bool,
+  className: PropTypes.string,
+  children: PropTypes.element,
+  fade: PropTypes.bool,
+  icon: PropTypes.bool,
+  previousIndicatorClientRect: PropTypes.object,
+  onTransitionEnd: PropTypes.func,
+};
+
+TabIndicator.defaultProps = {
+  active: false,
+  className: '',
+  children: null,
+  fade: false,
+  icon: false,
+  previousIndicatorClientRect: {},
+  onTransitionEnd: () => {},
+};

packages/tab-indicator/index.js

@@ -0,0 +1 @@
+@import "@material/tab-indicator/mdc-tab-indicator";

packages/tab-indicator/index.scss

@@ -0,0 +1,28 @@
+{
+  "name": "@material/react-tab-indicator",
+  "version": "0.0.0",
+  "description": "Material Components React Tab Indicator",
+  "license": "Apache-2.0",
+  "main": "dist/index.js",
+  "keywords": [
+    "mdc web react",
+    "material components react",
+    "material design",
+    "tab indicator",
+    "tabindicator",
+    "tabs"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/material-components/material-components-web-react.git"
+  },
+  "dependencies": {
+    "@material/tab-indicator": "^0.38.0",
+    "classnames": "^2.2.5",
+    "prop-types": "^15.6.1",
+    "react": "^16.3.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/tab-indicator/package.json

@@ -82,6 +82,7 @@ function getMaterialExternals() {
     'notched-outline',
     'ripple',
     'select',
+    'tab-indicator',
     'textfield',
     'top-app-bar',
     'typography',

packages/webpack.config.js

@@ -8,6 +8,7 @@ export default [
   require('./material-icon/screenshot-suite').default,
   require('./notched-outline/screenshot-suite').default,
   require('./select/screenshot-suite').default,
+  require('./tab-indicator/screenshot-suite').default,
   require('./text-field/screenshot-suite').default,
   require('./text-field/helper-text/screenshot-suite').default,
   require('./text-field/icon/screenshot-suite').default,

test/screenshot/full-suite.js

@@ -18,5 +18,6 @@
   "text-field/index.html": "5d753f3ebcc1ccfebf07057b87e579fa21448b0bb98329212d8420bcae21330e",
   "top-app-bar/fixed.html": "90534d59d40f8c050aae022e94b0afa022a00d1e00c19e3f92dcc1908efcd831",
   "chips/index.html": "949725ee6658e0c4edcdecd2bf057fda5fb814473f7a527da5c96e6392b84015",
-  "select/index.html": "5ce288649fe5e78d21ab9315a35cc2a22504176b8abaf56b92579121df51f073"
+  "select/index.html": "5ce288649fe5e78d21ab9315a35cc2a22504176b8abaf56b92579121df51f073",
+  "tab-indicator/index.html": "19f1befc0947128b46d84e1fdee73741bffcd63950bf0cddaadd9ae283ab85f8"
 }