Merge pull request JedWatson#1822 from jochenberger/use-es6-3

convert Option to ES6 class

Author: agirton

src/Option.js

@@ -1,22 +1,20 @@
 import React from 'react';
-import createClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const Option = createClass({
-	propTypes: {
-		children: PropTypes.node,
-		className: PropTypes.string,             // className (based on mouse position)
-		instancePrefix: PropTypes.string.isRequired,  // unique prefix for the ids (used for aria)
-		isDisabled: PropTypes.bool,              // the option is disabled
-		isFocused: PropTypes.bool,               // the option is focused
-		isSelected: PropTypes.bool,              // the option is selected
-		onFocus: PropTypes.func,                 // method to handle mouseEnter on option element
-		onSelect: PropTypes.func,                // method to handle click on option element
-		onUnfocus: PropTypes.func,               // method to handle mouseLeave on option element
-		option: PropTypes.object.isRequired,     // object that is base for that option
-		optionIndex: PropTypes.number,           // index of the option, used to generate unique ids for aria
-	},
+class Option extends React.Component {
+
+	constructor(props) {
+		super(props);
+
+		this.handleMouseDown = this.handleMouseDown.bind(this);
+		this.handleMouseEnter = this.handleMouseEnter.bind(this);
+		this.handleMouseMove = this.handleMouseMove.bind(this);
+		this.handleTouchStart = this.handleTouchStart.bind(this);
+		this.onFocus = this.onFocus.bind(this);
+	}
+
+
 	blockEvent (event) {
 		event.preventDefault();
 		event.stopPropagation();
@@ -28,45 +26,46 @@ const Option = createClass({
 		} else {
 			window.location.href = event.target.href;
 		}
-	},
+	}
 
 	handleMouseDown (event) {
 		event.preventDefault();
 		event.stopPropagation();
 		this.props.onSelect(this.props.option, event);
-	},
+	}
 
 	handleMouseEnter (event) {
 		this.onFocus(event);
-	},
+	}
 
 	handleMouseMove (event) {
 		this.onFocus(event);
-	},
+	}
 
 	handleTouchEnd(event){
 		// Check if the view is being dragged, In this case
 		// we don't want to fire the click event (because the user only wants to scroll)
 		if(this.dragging) return;
 
 		this.handleMouseDown(event);
-	},
+	}
 
 	handleTouchMove (event) {
 		// Set a flag that the view is being dragged
 		this.dragging = true;
-	},
+	}
 
 	handleTouchStart (event) {
 		// Set a flag that the view is not being dragged
 		this.dragging = false;
-	},
+	}
 
 	onFocus (event) {
 		if (!this.props.isFocused) {
 			this.props.onFocus(this.props.option, event);
 		}
-	},
+	}
+	
 	render () {
 		var { option, instancePrefix, optionIndex } = this.props;
 		var className = classNames(this.props.className, option.className);
@@ -93,6 +92,20 @@ const Option = createClass({
 			</div>
 		);
 	}
-});
+};
+
+Option.propTypes = {
+	children: PropTypes.node,
+	className: PropTypes.string,             // className (based on mouse position)
+	instancePrefix: PropTypes.string.isRequired,  // unique prefix for the ids (used for aria)
+	isDisabled: PropTypes.bool,              // the option is disabled
+	isFocused: PropTypes.bool,               // the option is focused
+	isSelected: PropTypes.bool,              // the option is selected
+	onFocus: PropTypes.func,                 // method to handle mouseEnter on option element
+	onSelect: PropTypes.func,                // method to handle click on option element
+	onUnfocus: PropTypes.func,               // method to handle mouseLeave on option element
+	option: PropTypes.object.isRequired,     // object that is base for that option
+	optionIndex: PropTypes.number,           // index of the option, used to generate unique ids for aria
+};
 
 module.exports = Option;