virtual-selector/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 {

  /**
   * Component display name in react develop tool.
   * 
   * @type {String}
   */
  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.option.bind(this))
          }
        </ul>
      </div>
    );
  }

  /**
   * Gengerate option item.
   * 
   * @param  {Object} option option.
   * @return {Object}        virtual option component.
   */
  option(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;
    }

    if (isPrepare) {
      onPrepare(option);
    }

    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)}>
        <span dangerouslySetInnerHTML={{__html: templates}}></span>
      </li>
    );
  }

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

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

export default SelectorOption;