cuz/src/components/Category/CategoryGroup.js

Front-end modular development kit.

import React, { cloneElement } from 'react';
import classNames from 'classnames';
import {utils} from 'react-bootstrap';

const CategoryGroup = React.createClass({
  propTypes: {
    children: React.PropTypes.any,
    className: React.PropTypes.string,
    onSelect: React.PropTypes.func,
    onHover: React.PropTypes.func,
    level: React.PropTypes.number,
    activeIndex: React.PropTypes.number,
    triggerType: React.PropTypes.string,
  },

  getInitialState() {
    return {
      activeIndex: this.props.activeIndex || 0,
      focus: false
    };
  },

  handleActive(index, focus) {
    this.setState({
      activeIndex: index,
      focus,
    });
  },

  renderItem(child, index) {
    const { level, onSelect, triggerType, onHover } = this.props;
    return cloneElement(
      child,
      {
        index,
        level,
        triggerType,
        onSelect,
        onHover,
        focus: this.state.focus,
        active: this.state.activeIndex === index,
        handleActive: this.handleActive,
      }
    );
  },

  render() {
    const { className, children, ...props } = this.props;
    return (
      <ul className={classNames('category-group', className)} { ...props }>
        {utils.ValidComponentChildren.map(this.props.children, this.renderItem)}
      </ul>
    );
  }
});

export default CategoryGroup;