All files / molecules/Tabs index.jsx

16% Statements 4/25
0% Branches 0/18
0% Functions 0/7
17.39% Lines 4/23

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117                                                                                                                                                            1x                                             1x                   1x   1x      
import React, { Children, cloneElement, Component } from 'react';
import PropTypes from 'prop-types';
import get from 'lodash/get';
 
import Paper from '../../atoms/Paper';
import withStyle from '../../Theme/withStyle';
 
import Indicator from './Indicator';
 
class Tabs extends Component {
  state = {
    activeTab: 0,
    domNode: null,
  };
 
  get activeTab() {
    return get(this.props, 'activeTab', this.state.activeTab);
  }
 
  get children() {
    const { children, color, noIndicator } = this.props;
    const { activeTab } = this;
    const childrenArray = Children.toArray(children);
    return childrenArray.map((child, index) => {
      const isActive = index === activeTab;
      const nextProps = {
        hardLeft: noIndicator && index > 0 ? true : undefined,
        hardRight: noIndicator && index < childrenArray.length - 1 ? true : undefined,
        hardBottom: noIndicator ? undefined : true,
        onClick: event => {
          this.setState({ activeTab: index });
          this.props.onChange(index);
          const { onClick } = child.props;
          if (typeof onClick === 'function') onClick(event);
        },
      };
      if (isActive) {
        Object.assign(nextProps, {
          color: child.props.color || color,
        });
      }
      return cloneElement(child, nextProps);
    });
  }
 
  ref = domNode => this.setState({ domNode });
 
  render() {
    const {
      activeTab,
      center,
      children,
      color,
      indicatorHeight,
      getColor,
      noIndicator,
      onChange,
      reverse,
      right,
      ...rest
    } = this.props;
    const { domNode } = this.state;
    return (
      <Paper {...rest} atomRef={this.ref}>
        {this.children}
        {!noIndicator && (
          <Indicator
            activeTab={this.activeTab}
            color={getColor(color)}
            height={indicatorHeight}
            domNode={domNode}
          />
        )}
      </Paper>
    );
  }
}
 
Tabs.propTypes = {
  // # of the active tab
  activeTab: PropTypes.number, // eslint-disable-line react/require-default-props
  // Align tabs to center
  center: PropTypes.bool,
  // Tabs
  children: PropTypes.node.isRequired,
  // Active tab color
  color: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  // Privider utility
  getColor: PropTypes.func.isRequired,
  // Indicator height
  indicatorHeight: PropTypes.number,
  // Do not render indicator
  noIndicator: PropTypes.bool,
  // Tab click handler
  onChange: PropTypes.func,
  // Reverse tabs
  reverse: PropTypes.bool,
  // Align tabs to end
  right: PropTypes.bool,
};
 
Tabs.defaultProps = {
  center: false,
  color: 'text',
  indicatorHeight: 2,
  noIndicator: false,
  onChange() {},
  reverse: false,
  right: false,
};
 
Tabs.displayName = 'Tabs';
 
export const SimpleTabs = Tabs;
 
export default withStyle(Tabs);