compolicious/demo/components/tab-set/tab-set.jsx

React component demo utility

import PropTypes from 'prop-types';
import compose from 'recompose/compose';
import defaultProps from 'recompose/defaultProps';
import setDisplayName from 'recompose/setDisplayName';
import setPropTypes from 'recompose/setPropTypes';
import times from 'lodash/fp/times';
import classnames from 'classnames';

import Styles from './tab-set.css.js';

const TabSet = ({tabs, children, activeTabIndex, onChange}) => {
  const tabsCount = Math.max(tabs.length, children.length);
  const boundedActiveTabIndex = Math.abs(activeTabIndex) % tabsCount;

  return (
    <div>
      <div className={Styles.tabTitles}>
        {times((index) => {
          const tabTitle = tabs[index] || `Tab #${index + 1}`;

          return (
            <div
              key={index}
              className={classnames(Styles.tabTitle, {
                [Styles.activeTabTitle]: index === boundedActiveTabIndex
              })}
              onClick={() => onChange({index})}
            >
              {tabTitle}
            </div>
          );
        })(tabsCount)}
      </div>
      <div className={Styles.tabContents}>
        {times((index) => {
          const tabContent = children[index] || <div />;
          const tabStyle = {};

          if (index !== boundedActiveTabIndex) {
            tabStyle.display = 'none';
          }

          return (
            <div key={index} style={tabStyle} className={Styles.tabContent}>
              {tabContent}
            </div>
          );
        })(tabsCount)}
      </div>
    </div>
  );
};

export default compose(
  setDisplayName('TabSet'),
  setPropTypes({
    tabs: PropTypes.array,
    children: PropTypes.arrayOf(PropTypes.node),
    activeTabIndex: PropTypes.number,
    onChange: PropTypes.func
  }),
  defaultProps({
    tabs: [],
    children: [],
    activeTabIndex: 0,
    onChange: () => {}
  })
)(TabSet);