index.js

import React, { Children, PropTypes } from 'react';
import cssModules from 'react-css-modules';
import styles from './style.css';
import { omit } from 'lodash';
import { find } from 'wu';

const isLabel    = node => node.tagName === 'label';
const isContent  = node => node.tagName === 'content';
const getLabel   = node => find(node.childNodes.values(), isLabel);
const getContent = node => find(node.childNodes.values(), isContent);

class Tabs extends React.Component {
  static propTypes = {
    onSelect: PropTypes.func,
    children: PropTypes.oneOf(
      PropTypes.node,
      PropTypes.arrayOf(PropTypes.node),
    ),
  };

  state = { selected: 0 };

  render() {
    const { onSelect } = this.props;
    const { getTabLabel, getTabPage } = this;
    const { selected } = this.state;
    const props = omit(this.props, ['styles']);
    const children = Children.toArray(this.props.children);

    return (
      <article styleName="wrapper" {...props}>
        <header styleName="tab-labels">
          {children.map(getLabel)}
        </header>
        <section styleName="tab-page">
          {getContent(Children.toArray(children)[selected])}
        </section>
      </article>
    );
  }
}


export default cssModules(Tabs, styles);