@appearhere/bloom/components/Tabs/Tabs.js

Appear Here's pattern library and styleguide

import PropTypes from 'prop-types';
import React, { Component, Children, cloneElement } from 'react';
import uniqueId from 'lodash/fp/uniqueId';
import cx from 'classnames';

import ScreenReadable from '../ScreenReadable/ScreenReadable';
import keyboardHandler from './tabKeyboardHandler';
import css from './Tabs.css';

/**
 * Taken heavy influence from http://codepen.io/svinkle/pen/edmDF?editors=0010
 * for a11y
 */
export default class Tabs extends Component {
  static propTypes = {
    accessibilityDescription: PropTypes.string,
    children: PropTypes.node,
  };

  static defaultProps = {
    accessibilityDescription: 'Use left and right arrows to navigate between tabs.',
  };

  constructor(props) {
    super(props);

    this.id = uniqueId('tabs_');
  }

  state = {
    activeTabIndex: 0,
    focusedTabIndex: null,
  };

  tabs = {};

  updateTabIndexes = (i) => {
    this.setState({
      activeTabIndex: i,
      focusedTabIndex: i,
    });

    this.tabs[i].focus();
  };

  handleClick = (e, i) => {
    this.updateTabIndexes(i);
  };

  handleFocus = (e, i) => {
    this.setState({ focusedTabIndex: i });
  }

  handleBlur = () => {
    this.setState({ focusedTabIndex: null });
  }

  handleKeyDown = (e) => {
    const { activeTabIndex } = this.state;
    const { children } = this.props;
    const i = keyboardHandler(e.which, activeTabIndex, Children.count(children));

    if (i > -1) {
      e.preventDefault();
      e.stopPropagation();

      this.updateTabIndexes(i);
    }
  }

  render() {
    const { children, accessibilityDescription } = this.props;
    const { activeTabIndex } = this.state;

    return (
      <div className={css.tabs}>
        <ScreenReadable>
          <span id={`${this.id}-description`}>
            { accessibilityDescription }
          </span>
        </ScreenReadable>
        <div className={css.tabsContainer}>
          { Children.map(children, (child, i) => {
            const id = `${this.id}-${i}-tab`;

            return cloneElement(child, {
              ref: (c) => { this.tabs[i] = c; },
              key: id,
              id,
              value: i,
              selected: activeTabIndex === i,
              onClick: this.handleClick,
              onFocus: this.handleFocus,
              onBlur: this.handleBlur,
              onKeyDown: this.handleKeyDown,
              'aria-controls': `${this.id}-${i}-panel`,
              'aria-describedby': `${this.id}-description`,
              role: 'tab',
            }, child.props.label);
          }) }
        </div>
        <div className={css.tabsContent}>
          { Children.map(children, (child, i) => {
            const id = `${this.id}-${i}-panel`;
            const classes = cx(
              css.tabContent,
              activeTabIndex === i ? css.tabContentActive : null,
            );

            return (
              <div
                key={id}
                id={id}
                aria-labelledby={`${this.id}-${i}-tab`}
                aria-hidden={activeTabIndex !== i}
                role="tabpanel"
                className={classes}
              >
                { child.props.children }
              </div>
            );
          }) }
        </div>
      </div>
    );
  }
}