content: import React from 'react';
  import classNames from 'classnames';
  
  const Value = React.createClass({
  
  	displayName: 'Value',
  
  	propTypes: {
  		disabled: React.PropTypes.bool,               // disabled prop passed to ReactSelect
  		onClick: React.PropTypes.func,                // method to handle click on value label
  		onRemove: React.PropTypes.func,               // method to handle removal of the value
  		value: React.PropTypes.object.isRequired,     // the option object for this value
  	},
  
  	handleMouseDown (event) {
  		if (event.type === 'mousedown' && event.button !== 0) {
  			return;
  		}
  		if (this.props.onClick) {
  			event.stopPropagation();
  			this.props.onClick(this.props.value, event);
  			return;
  		}
  		if (this.props.value.href) {
  			event.stopPropagation();
  		}
  	},
  
  	onRemove (event) {
  		event.preventDefault();
  		event.stopPropagation();
  		this.props.onRemove(this.props.value);
  	},
  
  	renderRemoveIcon () {
  		if (this.props.disabled || !this.props.onRemove) return;
  		return (
  			<span className="Select-value-icon"
  				onMouseDown={this.onRemove}
  				onTouchEnd={this.onRemove}>
  				&times;
  			</span>
  		);
  	},
  
  	renderLabel () {
  		let className = 'Select-value-label';
  		return this.props.onClick || this.props.value.href ? (
  			<a className={className} href={this.props.value.href} target={this.props.value.target} onMouseDown={this.handleMouseDown} onTouchEnd={this.handleMouseDown}>
  				{this.props.children}
  			</a>
  		) : (
  			<span className={className}>
  				{this.props.children}
  			</span>
  		);
  	},
  
  	render () {
  		return (
  			<div className={classNames('Select-value', this.props.value.className)}
  				style={this.props.value.style}
  				title={this.props.value.title}
  				>
  				{this.renderRemoveIcon()}
  				{this.renderLabel()}
  			</div>
  		);
  	}
  
  });
  
  module.exports = Value;
  