Some more changes

Author: jazibjohar

README.md

@@ -10,7 +10,7 @@ React-Select
 A Select control built with and for [React](http://facebook.github.io/react/index.html). Initially built for use in [KeystoneJS](http://www.keystonejs.com).
 
 
-## New version 1.0.0-rc
+## New version 1.0.1-rc
 
 I've nearly completed a major rewrite of this component (see issue [#568](https://github.com/JedWatson/react-select/issues/568) for details and progress). The new code has been merged into `master`, and `[email protected]` has been published to npm and bower.
 
@@ -19,13 +19,8 @@ I've nearly completed a major rewrite of this component (see issue [#568](https:
 Testing, feedback and PRs for the new version are appreciated.
 
 
-## Demo & Examples
+## Examples
 
-Live demo: [jedwatson.github.io/react-select](http://jedwatson.github.io/react-select/)
-
-The live demo is still running `v0.9.1`.
-
-To build the **new 1.0.0** examples locally, clone this repo then run:
 
 ```javascript
 npm install
@@ -40,13 +35,13 @@ Then open [`localhost:8000`](http://localhost:8000) in a browser.
 The easiest way to use React-Select is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), etc).
 
 ```javascript
-npm install react-select --save
+npm install smb-react-selection --save
 ```
 
 At this point you can import react-select and its styles in your application as follows:
 
 ```js
-import Select from 'react-select';
+import Select from 'smb-react-selection';
 
 // Be sure to include styles at some point, probably during your bootstrapping
 import 'react-select/dist/react-select.css';
@@ -157,7 +152,7 @@ Everything that applies to `loadOptions` with callbacks still applies to the Pro
 An example using the `fetch` API and ES6 syntax, with an API that returns an object like:
 
 ```javascript
-import Select from 'react-select';
+import Select from 'smb-react-selection';
 
 /*
  * assuming the API returns something like this:
@@ -188,7 +183,7 @@ const getOptions = (input) => {
 If you want to load options asynchronously externally from the `Select` component, you can have the `Select` component show a loading spinner by passing in the `isLoading` prop set to `true`.
 
 ```javascript
-var Select = require('react-select');
+var Select = require('smb-react-selection');
 
 var isLoadingExternally = true;
 
@@ -206,7 +201,7 @@ It decorates a `Select` and so it supports all of the default properties (eg sin
 The easiest way to use it is like so:
 
 ```js
-import { Creatable } from 'react-select';
+import { Creatable } from 'smb-react-selection';
 
 function render (selectProps) {
   return <Creatable {...selectProps} />;
@@ -232,7 +227,7 @@ Use it as follows:
 
 ```jsx
 import React from 'react';
-import { AsyncCreatable } from 'react-select';
+import { AsyncCreatable } from 'smb-react-selection';
 
 function render (props) {
   // props can be a mix of Async, Creatable, and Select properties
@@ -390,6 +385,7 @@ function onInputKeyDown(event) {
 	value 		|	any	|	undefined	|	initial field value
 	valueKey	|	string	|	'value'		|	the option property to use for the value
 	valueRenderer	|	func	|	undefined	|	function which returns a custom way to render the value selected `function (option) {}`
+	showSelectedCount	|	bool	|	false	|	Used with inputRenderer inorder to show one selected item for multi selected list
 
 ### Methods
 
@@ -402,11 +398,11 @@ Right now there's simply a `focus()` method that gives the control focus. All ot
 
 # Contributing
 
-See our [CONTRIBUTING.md](https://github.com/JedWatson/react-select/blob/master/CONTRIBUTING.md) for information on how to contribute.
+See our [CONTRIBUTING.md](https://github.com/jazibjohar/react-select/blob/master/CONTRIBUTING.md) for information on how to contribute.
 
 Thanks to the projects this was inspired by: [Selectize](http://brianreavis.github.io/selectize.js/) (in terms of behaviour and user experience), [React-Autocomplete](https://github.com/rackt/react-autocomplete) (as a quality React Combobox implementation), as well as other select controls including [Chosen](http://harvesthq.github.io/chosen/) and [Select2](http://ivaynberg.github.io/select2/).
 
 
 # License
 
-MIT Licensed. Copyright (c) Jed Watson 2016.
+MIT Licensed. Copyright (c) 2016.

examples/src/components/BooleanSelect.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Select from 'react-select';
+import Select from 'smb-react-selection';
 
 var ValuesAsBooleansField = React.createClass({
 	displayName: 'ValuesAsBooleansField',

examples/src/components/Contributors.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Select from 'react-select';
+import Select from 'smb-react-selection';
 
 const CONTRIBUTORS = require('../data/contributors');
 const MAX_CONTRIBUTORS = 6;

examples/src/components/Creatable.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Select from 'react-select';
+import Select from 'smb-react-selection';
 
 var CreatableDemo = React.createClass({
 	displayName: 'CreatableDemo',

examples/src/components/CustomComponents.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Select from 'react-select';
+import Select from 'smb-react-selection';
 import Gravatar from 'react-gravatar';
 
 const USERS = require('../data/users');

examples/src/components/CustomRender.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Select from 'react-select';
+import Select from 'smb-react-selection';
 import Highlighter from 'react-highlight-words';
 
 var DisabledUpsellOptions = React.createClass({

examples/src/components/GithubUsers.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Select from 'react-select';
+import Select from 'smb-react-selection';
 import fetch from 'isomorphic-fetch';
 
 

examples/src/components/MultiSelectWithDifferentLabel.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Select from 'react-select';
+import Select from 'smb-react-selection';
 
 const FLAVOURS = [
 	{ label: 'Chocolate', value: 'chocolate' },
@@ -18,7 +18,8 @@ const inputRender = (values) => {
   if (!values) {
     return null;
   }
-  return `${values.length}`;
+  const splitLen = values.split(',');
+  return `${splitLen.length}`;
 };
 
 var MultiSelectWithDifferentLabel = React.createClass({

examples/src/components/Multiselect.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Select from 'react-select';
+import Select from 'smb-react-selection';
 
 const FLAVOURS = [
 	{ label: 'Chocolate', value: 'chocolate' },

examples/src/components/NumericSelect.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Select from 'react-select';
+import Select from 'smb-react-selection';
 
 var ValuesAsNumbersField = React.createClass({
 	displayName: 'ValuesAsNumbersField',

examples/src/components/States.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Select from 'react-select';
+import Select from 'smb-react-selection';
 
 const STATES = require('../data/states');
 

src/Select.js

@@ -813,9 +813,9 @@ const Select = React.createClass({
 			return (
 				<ValueComponent
 					id={this._instancePrefix + '-value-item'}
-					disabled={true}
+					disabled={this.props.disabled}
 					instancePrefix={this._instancePrefix}
-					onClick={onClick}
+					onClick={null}
 					value={valueArray[0]}
 				>
 					{renderLabel(valueArray[0])}
@@ -1069,8 +1069,8 @@ const Select = React.createClass({
 			focusedOption = this._focusedOption = null;
 		}
 		let className = classNames('Select', this.props.className, {
-			'Select--multi': this.props.multi,
-			'Select--single': !this.props.multi,
+			'Select--multi': this.props.multi && !this.props.showSelectedCount,
+			'Select--single': !this.props.multi || this.props.showSelectedCount,
 			'is-disabled': this.props.disabled,
 			'is-focused': this.state.isFocused,
 			'is-loading': this.props.isLoading,