All files / px-tabs index.js

13.33% Statements 2/15
100% Branches 0/0
0% Functions 0/7
13.33% Lines 2/15
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              1x                                                                                                                                                 1x        
import React from 'react';
import classnames from 'classnames';
 
import tabStyle  from './sass/px-tab.scss';
import Tab from './px-tab';
import style from './style.scss';
 
const Pane = (props) => {
  return (<div>{props.children}</div>);
};
 
/**
 * px-tabs component
 */
class Tabs extends React.Component {
	constructor(props) {
		super(props);
		this.displayName = 'Tabs';
    this.state = {
      selected: this.props.selected
    };
	}
 
  handleClick(index, event) {
    event.preventDefault();
    this.setState({
      selected: index
    });
  }
 
  _renderTitles() {
    function labels(child, index) {
      let selected = (this.state.selected === index);
      let baseClasses = classnames(
        'px-tab',
        {'iron-selected': selected}
      );
      return (
        <li key={index}
          className={baseClasses} >
          <a href='#'
            onClick={this.handleClick.bind(this, index)}
          className='tab-title'>
            {child.props.label}
          </a>
        </li>
      );
    }
    return (
      <ul className="tabs-container__nav flex">
        {this.props.children.map(labels.bind(this))}
      </ul>
    );
  }
 
	_renderContent() {
		return (
			<div className='tabs-container__content'>
				{this.props.children[this.state.selected]}
			</div>
		);
	}
 
	render() {
    let cssClasses = classnames(
      'px-tabs',
      'root'
    );
		return (
      <div className={cssClasses}>
        <div className='tabs-container'>
          {this._renderTitles()}
          {this._renderContent()}
        </div>
        <style jsx global>{style}</style>
        <style jsx global>{tabStyle}</style>
      </div>
		);
	}
}
Tabs.defaultProps = {
  selected: 0
};
export default Tabs;