cuz/src/components/Category/CategoryItem.js

Front-end modular development kit.

import React from 'react';
import classNames from 'classnames';

const CategoryItem = React.createClass({
  propTypes: {
    children: React.PropTypes.any,
    className: React.PropTypes.string,
    onSelect: React.PropTypes.func,
    onHover: React.PropTypes.func,
    id: React.PropTypes.any,
    level: React.PropTypes.number,
    active: React.PropTypes.bool,
    handleActive: React.PropTypes.func,
    index: React.PropTypes.number,
    triggerType: React.PropTypes.string,
    onClick: React.PropTypes.func,
    onMouseEnter: React.PropTypes.func,
    focus: React.PropTypes.bool,
  },

  getDefaultProps() {
    return {
      active: false,
    };
  },

  handleClick(event) {
    const { level, id, children, onSelect, handleActive, index } = this.props;
    handleActive(index, true);
    onSelect(id, children, level, index, event);
    if (this.props.onClick) {
      this.props.onClick(event);
    }
  },

  handleEnter(event) {
    const { id, children, level, handleActive, index, onHover, triggerType, focus } = this.props;
    if (triggerType === 'hover' && focus === false) {
      handleActive(index, focus);
    }
    if (onHover) {
      onHover(id, children, level, index, event);
    }
    if (this.props.onMouseEnter) {
      this.props.onMouseEnter(event);
    }
  },

  render() {
    const { className, children, ...props } = this.props;
    return (
      <li className={
        classNames(
          'category-group-item',
          {'active': this.props.active},
          className)
      }
      {...props}
      onClick={this.handleClick}
      onMouseEnter={this.handleEnter}>
        <span>{children}</span>
      </li>
    );
  }
});

export default CategoryItem;