react-geosuggest-sw/module/GeosuggestItem.js

A React autosuggest for the Google Maps Places API.

'use strict';

var React = require('react');

var GeosuggestItem = React.createClass({
  displayName: 'GeosuggestItem',

  /**
   * Get the default props
   * @return {Object} The props
   */

  propTypes: {
    setMouseHoveredSuggest: React.PropTypes.func.isRequired
  },
  getDefaultProps: function getDefaultProps() {
    return {
      isActive: false,
      suggest: {
        label: '',
        iconClass: ''
      },
      onSuggestSelect: function onSuggestSelect() {}
    };
  },

  handleMouseEnter: function handleMouseEnter(e) {
    var suggest = JSON.parse(e.target['getAttribute']('data-suggest'));
    this.props.setMouseHoveredSuggest(suggest);
  },

  handleMouseLeave: function handleMouseLeave(e) {
    this.props.setMouseHoveredSuggest(null);
  },

  /**
   * Render the view
   * @return {Function} The React element to render
   */
  render: function render() {
    return (// eslint-disable-line no-extra-parens
      React.createElement(
        'li',
        { className: this.getSuggestClasses(),
          'data-suggest': JSON.stringify(this.props.suggest),
          onMouseEnter: this.handleMouseEnter,
          onMouseLeave: this.handleMouseLeave },
        this.props.suggest.label
      )
    );
  },

  /**
   * The classes for the suggest item
   * @return {String} The classes
   */
  getSuggestClasses: function getSuggestClasses() {
    var classes = 'geosuggest-item';

    classes += this.props.isActive ? ' geosuggest-item--active' : '';
    classes += this.props.classDecorations ? ' ' + this.props.classDecorations : '';
    return classes;
  }
});

module.exports = GeosuggestItem;