# All files / react/Tabs index.jsx

10.71% Statements 3/28
0% Branches 0/8
0% Functions 0/13
10.71% Lines 3/28

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

    1x

    1x

    1x

     import React, { Component } from 'react'
    import styles from './styles.styl'
    import classnames from 'classnames'

    export class Tab extends Component {
      constructor(props) {
        super(props)
        this.onClick = this.onClick.bind(this)
      }

      render() {
        const { children, className, active, activeClass } = this.props
        const activeStyle = {
          [styles['coz-tab--active']]: active
        }
        if (activeClass) {
          activeStyle[activeClass] = active
        }
        return (
          <div
            className={classnames(styles['coz-tab'], className, activeStyle)}
            onClick={this.onClick}
          >
            {children}
          </div>
        )
      }

      onClick() {
        const { changeTab, name, onClick } = this.props
        changeTab(name)
        if (onClick) {
          onClick()
        }
      }
    }

    export const TabList = function({ children, activeTab, changeTab, className }) {
      return (
        <div className={classnames(styles['coz-tab-list'], className)}>
          {React.Children.map(children, child =>
            React.cloneElement(child, {
              active: child.props.name === activeTab,
              changeTab
            })
          )}
        </div>
      )
    }

    export const TabPanel = function({ children, active, className }) {
      return active ? (
        <div className={classnames(styles['coz-tab-panel'], className)}>
          {children}
        </div>
      ) : null
    }

    export const TabPanels = function({
      children,
      activeTab,
      changeTab,
      className
    }) {
      return (
        <div className={classnames(styles['coz-tab-panels'], className)}>
          {React.Children.map(children, child =>
            React.cloneElement(child, {
              active: child.props.active || activeTab === child.props.name,
              changeTab
            })
          )}
        </div>
      )
    }

    export class Tabs extends Component {
      constructor(props) {
        super(props)
        this.changeTab = this.changeTab.bind(this)
      }
      getInitialState() {
        return { activeTab: this.props.initialActiveTab }
      }

      changeTab(tabName) {
        this.setState({ activeTab: tabName })
      }

      render() {
        const { children, className } = this.props
        const { activeTab } = this.state
        const changeTab = this.changeTab
        return (
          <div className={classnames(styles['coz-tabs'], className)}>
            {React.Children.map(children, child =>
              React.cloneElement(child, { activeTab, changeTab })
            )}
          </div>
        )
      }
    }