All files / components/tabs/header index.js

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react'
import PropTypes from 'prop-types'
import cx from 'classnames'
 
import Tab from './tab'
import Slide from './slide'
 
const Header = ({ tabs, onChangeTab, activeTab, full }) => {
  const width = 100 / tabs.length
  let left = width * activeTab
 
  return (
    <div className='header'>
      <div className={cx('tab-container', {'full': full})}>
        <ul>
          { tabs.map((tab, key) => (
            <Tab
              key={key}
              label={tab.props.label}
              icon={tab.props.icon}
              active={key === activeTab}
              onClick={() => onChangeTab(key)}
            />
          )) }
        </ul>
 
        <Slide left={`${left}%`} width={`${width}%`} />
      </div>
    </div>
  )
}
 
Header.propTypes = {
  tabs: PropTypes.arrayOf(
    PropTypes.element
  ).isRequired,
  onChangeTab: PropTypes.func.isRequired,
  activeTab: PropTypes.number.isRequired,
  full: PropTypes.bool
}
 
Header.defaultProps = {
  full: false
}
 
export default Header