Merge pull request JedWatson#1658 from agirton/migrate-to-external-pkgs

Migrate to prop-types and create-react-class packages

examples/src/components/BooleanSelect.js

@@ -1,10 +1,12 @@
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 import Select from 'react-select';
 
-var ValuesAsBooleansField = React.createClass({
+var ValuesAsBooleansField = createClass({
 	displayName: 'ValuesAsBooleansField',
 	propTypes: {
-		label: React.PropTypes.string
+		label: PropTypes.string
 	},
 	getInitialState () {
 		return {

examples/src/components/Contributors.js

@@ -1,14 +1,16 @@
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 import Select from 'react-select';
 
 const CONTRIBUTORS = require('../data/contributors');
 const MAX_CONTRIBUTORS = 6;
 const ASYNC_DELAY = 500;
 
-const Contributors = React.createClass({
+const Contributors = createClass({
 	displayName: 'Contributors',
 	propTypes: {
-		label: React.PropTypes.string,
+		label: PropTypes.string,
 	},
 	getInitialState () {
 		return {

examples/src/components/Creatable.js

@@ -1,11 +1,13 @@
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 import Select from 'react-select';
 
-var CreatableDemo = React.createClass({
+var CreatableDemo = createClass({
 	displayName: 'CreatableDemo',
 	propTypes: {
-		hint: React.PropTypes.string,
-		label: React.PropTypes.string
+		hint: PropTypes.string,
+		label: PropTypes.string
 	},
 	getInitialState () {
 		return {

examples/src/components/CustomComponents.js

@@ -1,20 +1,22 @@
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 import Select from 'react-select';
 import Gravatar from 'react-gravatar';
 
 const USERS = require('../data/users');
 const GRAVATAR_SIZE = 15;
 
-const GravatarOption = React.createClass({
+const GravatarOption = createClass({
 	propTypes: {
-		children: React.PropTypes.node,
-		className: React.PropTypes.string,
-		isDisabled: React.PropTypes.bool,
-		isFocused: React.PropTypes.bool,
-		isSelected: React.PropTypes.bool,
-		onFocus: React.PropTypes.func,
-		onSelect: React.PropTypes.func,
-		option: React.PropTypes.object.isRequired,
+		children: PropTypes.node,
+		className: PropTypes.string,
+		isDisabled: PropTypes.bool,
+		isFocused: PropTypes.bool,
+		isSelected: PropTypes.bool,
+		onFocus: PropTypes.func,
+		onSelect: PropTypes.func,
+		option: PropTypes.object.isRequired,
 	},
 	handleMouseDown (event) {
 		event.preventDefault();
@@ -50,11 +52,11 @@ const GravatarOption = React.createClass({
 	}
 });
 
-const GravatarValue = React.createClass({
+const GravatarValue = createClass({
 	propTypes: {
-		children: React.PropTypes.node,
-		placeholder: React.PropTypes.string,
-		value: React.PropTypes.object
+		children: PropTypes.node,
+		placeholder: PropTypes.string,
+		value: PropTypes.object
 	},
 	render () {
 		var gravatarStyle = {
@@ -76,10 +78,10 @@ const GravatarValue = React.createClass({
 	}
 });
 
-const UsersField = React.createClass({
+const UsersField = createClass({
 	propTypes: {
-		hint: React.PropTypes.string,
-		label: React.PropTypes.string,
+		hint: PropTypes.string,
+		label: PropTypes.string,
 	},
 	getInitialState () {
 		return {};

examples/src/components/CustomRender.js

@@ -1,11 +1,13 @@
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 import Select from 'react-select';
 import Highlighter from 'react-highlight-words';
 
-var DisabledUpsellOptions = React.createClass({
+var DisabledUpsellOptions = createClass({
 	displayName: 'DisabledUpsellOptions',
 	propTypes: {
-		label: React.PropTypes.string,
+		label: PropTypes.string,
 	},
 	getInitialState () {
 		return {};

examples/src/components/GithubUsers.js

@@ -1,12 +1,14 @@
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 import Select from 'react-select';
 import fetch from 'isomorphic-fetch';
 
 
-const GithubUsers = React.createClass({
+const GithubUsers = createClass({
 	displayName: 'GithubUsers',
 	propTypes: {
-		label: React.PropTypes.string,
+		label: PropTypes.string,
 	},
 	getInitialState () {
 		return {

examples/src/components/Multiselect.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 import Select from 'react-select';
 
 const FLAVOURS = [
@@ -14,10 +16,10 @@ const WHY_WOULD_YOU = [
 	{ label: 'Chocolate (are you crazy?)', value: 'chocolate', disabled: true },
 ].concat(FLAVOURS.slice(1));
 
-var MultiSelectField = React.createClass({
+var MultiSelectField = createClass({
 	displayName: 'MultiSelectField',
 	propTypes: {
-		label: React.PropTypes.string,
+		label: PropTypes.string,
 	},
 	getInitialState () {
 		return {

examples/src/components/NumericSelect.js

@@ -1,10 +1,12 @@
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 import Select from 'react-select';
 
-var ValuesAsNumbersField = React.createClass({
+var ValuesAsNumbersField = createClass({
 	displayName: 'ValuesAsNumbersField',
 	propTypes: {
-		label: React.PropTypes.string
+		label: PropTypes.string
 	},
 	getInitialState () {
 		return {

examples/src/components/States.js

@@ -1,13 +1,15 @@
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 import Select from 'react-select';
 
 const STATES = require('../data/states');
 
-var StatesField = React.createClass({
+var StatesField = createClass({
 	displayName: 'StatesField',
 	propTypes: {
-		label: React.PropTypes.string,
-		searchable: React.PropTypes.bool,
+		label: PropTypes.string,
+		searchable: PropTypes.bool,
 	},
 	getDefaultProps () {
 		return {

examples/src/components/Virtualized.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import createClass from 'create-react-class';
 import VirtualizedSelect from 'react-virtualized-select';
 
 const DATA = require('../data/cities');
 
-var CitiesField = React.createClass({
+var CitiesField = createClass({
 	displayName: 'CitiesField',
 	getInitialState () {
 		return {};

gulpfile.js

@@ -9,7 +9,9 @@ var taskConfig = {
 			'classnames',
 			'react-input-autosize',
 			'react',
-			'react-dom'
+			'react-dom',
+			'create-react-class',
+			'prop-types'
 		],
 		less: {
 			path: 'less',

package.json

@@ -11,8 +11,10 @@
     "url": "https://github.com/JedWatson/react-select.git"
   },
   "dependencies": {
+    "create-react-class": "^15.5.2",
     "classnames": "^2.2.4",
-    "react-input-autosize": "^1.1.0"
+    "react-input-autosize": "^1.1.3",
+    "prop-types": "^15.5.8"
   },
   "devDependencies": {
     "babel": "^5.8.23",

src/Async.js

@@ -1,35 +1,36 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Select from './Select';
 import stripDiacritics from './utils/stripDiacritics';
 
 const propTypes = {
-	autoload: React.PropTypes.bool.isRequired,       // automatically call the `loadOptions` prop on-mount; defaults to true
-	cache: React.PropTypes.any,                      // object to use to cache results; set to null/false to disable caching
-	children: React.PropTypes.func.isRequired,       // Child function responsible for creating the inner Select component; (props: Object): PropTypes.element
-	ignoreAccents: React.PropTypes.bool,             // strip diacritics when filtering; defaults to true
-	ignoreCase: React.PropTypes.bool,                // perform case-insensitive filtering; defaults to true
-	loadingPlaceholder: React.PropTypes.oneOfType([  // replaces the placeholder while options are loading
-		React.PropTypes.string,
-		React.PropTypes.node
+	autoload: PropTypes.bool.isRequired,       // automatically call the `loadOptions` prop on-mount; defaults to true
+	cache: PropTypes.any,                      // object to use to cache results; set to null/false to disable caching
+	children: PropTypes.func.isRequired,       // Child function responsible for creating the inner Select component; (props: Object): PropTypes.element
+	ignoreAccents: PropTypes.bool,             // strip diacritics when filtering; defaults to true
+	ignoreCase: PropTypes.bool,                // perform case-insensitive filtering; defaults to true
+	loadingPlaceholder: PropTypes.oneOfType([  // replaces the placeholder while options are loading
+		PropTypes.string,
+		PropTypes.node
 	]),
-	loadOptions: React.PropTypes.func.isRequired,    // callback to load options asynchronously; (inputValue: string, callback: Function): ?Promise
-	multi: React.PropTypes.bool,                     // multi-value input
+	loadOptions: PropTypes.func.isRequired,    // callback to load options asynchronously; (inputValue: string, callback: Function): ?Promise
+	multi: PropTypes.bool,                     // multi-value input
 	options: PropTypes.array.isRequired,             // array of options
-	placeholder: React.PropTypes.oneOfType([         // field placeholder, displayed when there's no value (shared with Select)
-		React.PropTypes.string,
-		React.PropTypes.node
+	placeholder: PropTypes.oneOfType([         // field placeholder, displayed when there's no value (shared with Select)
+		PropTypes.string,
+		PropTypes.node
 	]),
-	noResultsText: React.PropTypes.oneOfType([       // field noResultsText, displayed when no options come back from the server
-		React.PropTypes.string,
-		React.PropTypes.node
+	noResultsText: PropTypes.oneOfType([       // field noResultsText, displayed when no options come back from the server
+		PropTypes.string,
+		PropTypes.node
 	]),
-	onChange: React.PropTypes.func,                  // onChange handler: function (newValue) {}
-	searchPromptText: React.PropTypes.oneOfType([    // label to prompt for search input
-		React.PropTypes.string,
-		React.PropTypes.node
+	onChange: PropTypes.func,                  // onChange handler: function (newValue) {}
+	searchPromptText: PropTypes.oneOfType([    // label to prompt for search input
+		PropTypes.string,
+		PropTypes.node
 	]),
-	onInputChange: React.PropTypes.func,             // optional for keeping track of what is being typed
-	value: React.PropTypes.any,                      // initial field value
+	onInputChange: PropTypes.func,             // optional for keeping track of what is being typed
+	value: PropTypes.any,                      // initial field value
 };
 
 const defaultCache = {};
@@ -214,4 +215,4 @@ function defaultChildren (props) {
 	return (
 		<Select {...props} />
 	);
-};
+}

src/AsyncCreatable.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import createClass from 'create-react-class';
 import Select from './Select';
 
 function reduce(obj, props = {}){
@@ -10,7 +11,7 @@ function reduce(obj, props = {}){
   }, props);
 }
 
-const AsyncCreatable = React.createClass({
+const AsyncCreatable = createClass({
 	displayName: 'AsyncCreatableSelect',
 
 	focus () {

src/Creatable.js

@@ -1,54 +1,56 @@
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 import Select from './Select';
 import defaultFilterOptions from './utils/defaultFilterOptions';
 import defaultMenuRenderer from './utils/defaultMenuRenderer';
 
-const Creatable = React.createClass({
+const Creatable = createClass({
 	displayName: 'CreatableSelect',
 
 	propTypes: {
 		// Child function responsible for creating the inner Select component
 		// This component can be used to compose HOCs (eg Creatable and Async)
 		// (props: Object): PropTypes.element
-		children: React.PropTypes.func,
+		children: PropTypes.func,
 
 		// See Select.propTypes.filterOptions
-		filterOptions: React.PropTypes.any,
+		filterOptions: PropTypes.any,
 
 		// Searches for any matching option within the set of options.
 		// This function prevents duplicate options from being created.
 		// ({ option: Object, options: Array, labelKey: string, valueKey: string }): boolean
-		isOptionUnique: React.PropTypes.func,
+		isOptionUnique: PropTypes.func,
 
 	    // Determines if the current input text represents a valid option.
 	    // ({ label: string }): boolean
-	    isValidNewOption: React.PropTypes.func,
+	    isValidNewOption: PropTypes.func,
 
 		// See Select.propTypes.menuRenderer
-		menuRenderer: React.PropTypes.any,
+		menuRenderer: PropTypes.any,
 
 	    // Factory to create new option.
 	    // ({ label: string, labelKey: string, valueKey: string }): Object
-		newOptionCreator: React.PropTypes.func,
+		newOptionCreator: PropTypes.func,
 
 		// input change handler: function (inputValue) {}
-		onInputChange: React.PropTypes.func,
+		onInputChange: PropTypes.func,
 
 		// input keyDown handler: function (event) {}
-		onInputKeyDown: React.PropTypes.func,
+		onInputKeyDown: PropTypes.func,
 
 		// new option click handler: function (option) {}
-		onNewOptionClick: React.PropTypes.func,
+		onNewOptionClick: PropTypes.func,
 
 		// See Select.propTypes.options
-		options: React.PropTypes.array,
+		options: PropTypes.array,
 
 	    // Creates prompt/placeholder option text.
 	    // (filterText: string): string
-		promptTextCreator: React.PropTypes.func,
+		promptTextCreator: PropTypes.func,
 
 		// Decides if a keyDown event (eg its `keyCode`) should result in the creation of a new option.
-		shouldKeyDownEventCreateNewOption: React.PropTypes.func,
+		shouldKeyDownEventCreateNewOption: PropTypes.func,
 	},
 
 	// Default prop methods