# All files / components/Tabs Tabs.js

28.57% Statements 4/14
0% Branches 0/10
0% Functions 0/5
28.57% Lines 4/14

    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

    5x

    5x
    5x
    5x

     import React from 'react';
    import PropTypes from 'prop-types';
    import { withProps } from 'recompose';
    import DefaultTabList from './styles/TabList';
    import TabContainer from './styles/TabContainer';
    import TabContent from './styles/TabContent';
    import Tab from './styles/Tab';

    class Tabs extends React.Component {
      static propTypes = {
        /**
         * Tab elements within container
         */
        children: PropTypes.node.isRequired,
        /**
         * Called when user selects the tab
         */
        onTabSelected: PropTypes.func,
        /**
         * The currently selected tab
         */
        selectedTabIndex: PropTypes.number,
        /**
         * Override the component used to render the Tab list
         */
        List: PropTypes.func,
      };

      static defaultProps = {
        onTabSelected: null,
        List: DefaultTabList,
      };

      /**
       * Creates a click handler for a tab which preserves its own
       * onClick usage, and also hooks in so that this component can
       * appropriately call its onTabSelected callback with the right
       * index.
       */
      createTabClickHandler = (tab, index) =>
        this.props.onTabSelected
          ? ev => {
              if (tab.props.onClick) {
                tab.props.onClick(ev);
              }
              this.props.onTabSelected(index);
            }
          : tab.props.onClick;

      renderTabs = () =>
        React.Children.map(this.props.children, (child, index) => {
          if (!React.isValidElement(child)) {
            return child;
          }

          // rendering Tab
          return React.cloneElement(child, {
            onClick:
              child.props.disabled || child.props.active
                ? null
                : this.createTabClickHandler(child, index),
            active: index === this.props.selectedTabIndex,
          });
        });

      render() {
        const { List } = this.props;

        return <List>{this.renderTabs()}</List>;
      }
    }

    Tabs.Vertical = withProps({
      List: DefaultTabList.Vertical,
    })(Tabs);

    Tabs.Tab = Tab;
    Tabs.Container = TabContainer;
    Tabs.Content = TabContent;

    export default Tabs;