selector2/src/javascript/components/SelectorOption.jsx

Virtual selector component for react.js

/**
 * Virutal option for selector.
 *
 * @author artisan
 * @Date(2015-11-27)
 */

import _ from 'underscore';
import React from 'react';
import classnames from 'classnames';

class SelectorOption extends React.Component {

  constructor(props) {
    super(props);

    /**
     * Component display name in react develop tool.
     * 
     * @type {String}
     */
    this.displayName = 'SelectorOption';
  }

  /**
   * Click handler.
   * 
   * @param  {object} option active option.
   * @param  {object} event  Event object.
   * @return {undefined}
   */
  handleClick(option, event) {
    let {onClick} = this.props;

    if (_.isFunction(onClick)) {
      onClick(option, event);
    }
  }

  /**
   * Generate group component.
   * 
   * @param  {String} options.group   group name.
   * @param  {Array} options.options group options.
   * @return {Object}                 group component.
   */
  group({group, options}) {
    return (
      <div className="selector-group">
        <span className="group-title">{group}</span>
        <ul className="group-option">
          {
            options.map(this.gengerator.bind(this))
          }
        </ul>
      </div>
    );
  }

  handleMouseOver(option) {
    let { onPrepare } = this.props;
    if (_.isFunction(onPrepare)) {
      onPrepare(option, true);
    }
  }

  /**
   * Gengerate option item.
   * 
   * @param  {Object} option option.
   * @return {Object}        virtual option component.
   */
  gengerator(option = {}) {
    let templates, {
        selected, template,
        prepare, onPrepare
      } = this.props,
      
      isPrepare = prepare === option.unique;

    if (_.isString(template)) { // Custom option template.
      templates = _.template(template)(option);
    } else {
      templates = option.label;
    }

    return (
      <li key={ option.unique } className={classnames('selector-option', {
        'option-prepare' : isPrepare && !option.disabled,
        'option-disabled': option.disabled,
        'option-selected': _.find(selected, option)
      })} onClick={ this.handleClick.bind(this, option) }
        onMouseOver={ this.handleMouseOver.bind(this, option) }>
        <span dangerouslySetInnerHTML={{__html: templates}}></span>
      </li>
    );
  }

  render() {
    let options = null,
        {option, group} = this.props;

    // Group.
    if (group === true) {
      options = this.group(option); // Render group.
    } else {
      // Single.
      options = this.gengerator(option);
    }
    return options;
  }
}

SelectorOption.defaultProps = {
  onPrepare: null,
  onClick: null,
  option: [],
  group: false,
  prepare: null,
  selected: [],
  template: ''
};

SelectorOption.propTypes = {
  onPrepare: React.PropTypes.func,
  onClick: React.PropTypes.func,
  option: React.PropTypes.object,
  group: React.PropTypes.bool,
  prepare: React.PropTypes.number,
  selected: React.PropTypes.array,
  template: React.PropTypes.string
};

export default SelectorOption;