├── examples
├── src
│ ├── .npmignore
│ ├── favicon.ico
│ ├── .gitignore
│ ├── data
│ │ ├── users.js
│ │ └── states.js
│ ├── components
│ │ ├── CustomSingleValue.js
│ │ ├── UsersField.js
│ │ ├── CustomOption.js
│ │ ├── SelectedValuesField.js
│ │ ├── DisabledUpsellOptions.js
│ │ ├── CustomRenderField.js
│ │ ├── RemoteSelectField.js
│ │ ├── MultiSelectField.js
│ │ ├── StatesField.js
│ │ └── ValuesAsNumbersField.js
│ ├── standalone.html
│ ├── app.js
│ ├── index.html
│ └── example.less
└── dist
│ ├── .gitignore
│ ├── standalone.html
│ ├── index.html
│ └── example.css
├── less
├── default.less
├── spinner.less
├── mixins.less
├── menu.less
├── select.less
├── multi.less
└── control.less
├── .npmignore
├── .coveralls.yml
├── .eslintignore
├── .travis.yml
├── .gitignore
├── testHelpers
└── jsdomHelper.js
├── .editorconfig
├── wallaby.js
├── gulpfile.js
├── src
├── SingleValue.js
├── Option.js
├── Value.js
└── Select.js
├── lib
├── SingleValue.js
├── Option.js
├── Value.js
└── Select.js
├── bower.json
├── .eslintrc
├── LICENSE
├── package.json
├── CONTRIBUTING.md
├── test
└── Value-test.js
├── dist
├── default.css
└── react-select.min.js
├── README.md
└── HISTORY.md
/examples/src/.npmignore:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/less/default.less:
--------------------------------------------------------------------------------
1 | @import "select.less";
2 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .editorconfig
2 | bower.json
3 | examples/dist
4 |
--------------------------------------------------------------------------------
/.coveralls.yml:
--------------------------------------------------------------------------------
1 | service-name: travis-ci
2 | repo_token: itdMRdBNgDK8Gb5nIA63zVMEryaxTQxkR
3 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | lib/*
2 | dist/*
3 | examples/dist/*
4 | node_modules/*
5 | bower_components/*
6 |
--------------------------------------------------------------------------------
/examples/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StephenGrider/react-select/master/examples/src/favicon.ico
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 | language: node_js
3 | node_js:
4 | - "0.10"
5 | - "0.11"
6 | - "0.12"
7 | - "iojs-v2.5.0"
8 | script:
9 | - npm run coveralls
10 |
--------------------------------------------------------------------------------
/examples/dist/.gitignore:
--------------------------------------------------------------------------------
1 | ## This file is here to ensure it is included in the gh-pages branch,
2 | ## when `gulp deploy` is used to push updates to the demo site.
3 |
4 | # Dependency directory
5 | node_modules
6 |
--------------------------------------------------------------------------------
/examples/src/.gitignore:
--------------------------------------------------------------------------------
1 | ## This file is here to ensure it is included in the gh-pages branch,
2 | ## when `gulp deploy` is used to push updates to the demo site.
3 |
4 | # Dependency directory
5 | node_modules
6 |
--------------------------------------------------------------------------------
/examples/src/data/users.js:
--------------------------------------------------------------------------------
1 | exports.users = [
2 | { value: 'John Smith', label: 'John Smith', email: 'john@smith.com' },
3 | { value: 'Merry Jane', label: 'Merry Jane', email: 'merry@jane.com' },
4 | { value: 'Stan Hoper', label: 'Stan Hoper', email: 'stan@hoper.com' }
5 | ];
6 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Coverage tools
11 | lib-cov
12 | coverage
13 |
14 | # Dependency directory
15 | node_modules
16 | bower_components
17 |
18 | # Publish directory
19 | .publish
20 |
21 | # Other
22 | .DS_Store
23 |
--------------------------------------------------------------------------------
/testHelpers/jsdomHelper.js:
--------------------------------------------------------------------------------
1 |
2 | module.exports = function (html) {
3 | if (typeof document !== 'undefined') {
4 | return;
5 | }
6 |
7 | var jsdom = require('jsdom').jsdom;
8 | global.document = jsdom(html || '');
9 | global.window = global.document.parentWindow;
10 | global.navigator = {
11 | userAgent: 'JSDOM'
12 | };
13 | };
14 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # This file is for unifying the coding style for different editors and IDEs
2 | # editorconfig.org
3 | root = true
4 |
5 | [*]
6 | end_of_line = lf
7 | charset = utf-8
8 | trim_trailing_whitespace = true
9 | insert_final_newline = true
10 | indent_style = tab
11 |
12 | [*.json]
13 | indent_style = space
14 | indent_size = 2
15 |
16 | [*.yml]
17 | indent_style = space
18 | indent_size = 2
19 |
20 | [*.md]
21 | trim_trailing_whitespace = false
22 |
--------------------------------------------------------------------------------
/wallaby.js:
--------------------------------------------------------------------------------
1 | /*
2 | This is the config file for the [Wallabyjs](http://wallabyjs.com) test runner
3 | */
4 |
5 | var babel = require('babel');
6 |
7 | module.exports = function (wallaby) { // eslint-disable-line no-unused-vars
8 | return {
9 | files: ['src/*.js', 'testHelpers/*.js'],
10 | tests: ['test/*-test.js' ],
11 | env: {
12 | type: 'node',
13 | runner: 'node'
14 | },
15 | preprocessors: {
16 | '**/*.js': file => babel.transform(file.content, { sourceMap: true })
17 | }
18 | };
19 | };
20 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp'),
2 | initGulpTasks = require('react-component-gulp-tasks');
3 |
4 | var taskConfig = {
5 |
6 | component: {
7 | name: 'Select',
8 | less: {
9 | path: 'less',
10 | entry: 'default.less'
11 | }
12 | },
13 |
14 | example: {
15 | src: 'examples/src',
16 | dist: 'examples/dist',
17 | standalone: true,
18 | files: [
19 | 'index.html',
20 | 'standalone.html',
21 | '.gitignore'
22 | ],
23 | scripts: [
24 | 'app.js'
25 | ],
26 | less: [
27 | 'example.less'
28 | ]
29 | }
30 |
31 | };
32 |
33 | initGulpTasks(gulp, taskConfig);
34 |
--------------------------------------------------------------------------------
/less/spinner.less:
--------------------------------------------------------------------------------
1 | //
2 | // Spinner
3 | // ------------------------------
4 |
5 | .Select-spinner(@size, @orbit, @satellite) {
6 | .animation( Select-animation-spin 400ms infinite linear );
7 | .square(@size);
8 | box-sizing: border-box;
9 | border-radius: 50%;
10 | border: floor((@size / 8)) solid @orbit;
11 | border-right-color: @satellite;
12 | display: inline-block;
13 | position: relative;
14 |
15 | }
16 |
17 | @keyframes Select-animation-spin {
18 | to { transform: rotate(1turn); }
19 | }
20 | @-webkit-keyframes Select-animation-spin {
21 | to { -webkit-transform: rotate(1turn); }
22 | }
23 |
--------------------------------------------------------------------------------
/src/SingleValue.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var classes = require('classnames');
3 |
4 | var SingleValue = React.createClass({
5 | propTypes: {
6 | placeholder: React.PropTypes.string, // this is default value provided by React-Select based component
7 | value: React.PropTypes.object // selected option
8 | },
9 | render: function() {
10 |
11 | var classNames = classes('Select-placeholder', this.props.value && this.props.value.className);
12 | return (
13 | {this.props.placeholder}
18 | );
19 | }
20 | });
21 |
22 | module.exports = SingleValue;
23 |
--------------------------------------------------------------------------------
/lib/SingleValue.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var React = require('react');
4 | var classes = require('classnames');
5 |
6 | var SingleValue = React.createClass({
7 | displayName: 'SingleValue',
8 |
9 | propTypes: {
10 | placeholder: React.PropTypes.string, // this is default value provided by React-Select based component
11 | value: React.PropTypes.object // selected option
12 | },
13 | render: function render() {
14 |
15 | var classNames = classes('Select-placeholder', this.props.value && this.props.value.className);
16 | return React.createElement(
17 | 'div',
18 | {
19 | className: classNames,
20 | style: this.props.value && this.props.value.style,
21 | title: this.props.value && this.props.value.title
22 | },
23 | this.props.placeholder
24 | );
25 | }
26 | });
27 |
28 | module.exports = SingleValue;
--------------------------------------------------------------------------------
/examples/src/components/CustomSingleValue.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Gravatar from 'react-gravatar';
3 |
4 | var SingleValue = React.createClass({
5 | propTypes: {
6 | placeholder: React.PropTypes.string,
7 | value: React.PropTypes.object
8 | },
9 | render () {
10 | var obj = this.props.value;
11 | var size = 15;
12 | var gravatarStyle = {
13 | borderRadius: 3,
14 | display: 'inline-block',
15 | marginRight: 10,
16 | position: 'relative',
17 | top: -2,
18 | verticalAlign: 'middle',
19 | };
20 |
21 | return (
22 |
23 | {obj ? (
24 |
25 |
28 | ) : (
29 | this.props.placeholder
30 | )
31 | }
32 |
{this.props.hint}
17 | );
18 | },
19 | render () {
20 |
21 | return (
22 |
23 |
{this.props.label}
24 |
30 | {this.renderHint()}
31 |
32 | );
33 | }
34 | });
35 |
36 | module.exports = UsersField;
--------------------------------------------------------------------------------
/examples/src/components/CustomOption.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Gravatar from 'react-gravatar';
3 |
4 | var Option = React.createClass({
5 | propTypes: {
6 | addLabelText: React.PropTypes.string,
7 | className: React.PropTypes.string,
8 | mouseDown: React.PropTypes.func,
9 | mouseEnter: React.PropTypes.func,
10 | mouseLeave: React.PropTypes.func,
11 | option: React.PropTypes.object.isRequired,
12 | renderFunc: React.PropTypes.func
13 | },
14 | render () {
15 | var obj = this.props.option;
16 | var size = 15;
17 | var gravatarStyle = {
18 | borderRadius: 3,
19 | display: 'inline-block',
20 | marginRight: 10,
21 | position: 'relative',
22 | top: -2,
23 | verticalAlign: 'middle',
24 | };
25 | return (
26 |
31 |
34 | );
35 | }
36 | });
37 |
38 | module.exports = Option;
39 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Jed Watson
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/examples/src/components/SelectedValuesField.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Select from 'react-select';
3 |
4 | function logChange() {
5 | console.log.apply(console, [].concat(['Select value changed:'], Array.prototype.slice.apply(arguments)));
6 | }
7 |
8 | var SelectedValuesField = React.createClass({
9 | displayName: 'SelectedValuesField',
10 | propTypes: {
11 | allowCreate: React.PropTypes.bool,
12 | hint: React.PropTypes.string,
13 | label: React.PropTypes.string,
14 | options: React.PropTypes.array,
15 | },
16 | onLabelClick (data, event) {
17 | console.log(data, event);
18 | },
19 | renderHint () {
20 | if (!this.props.hint) return null;
21 | return (
22 | {this.props.hint}
23 | );
24 | },
25 | render () {
26 | return (
27 |
28 |
{this.props.label}
29 | React-Select Example
4 |
8 |
React Select
9 |
Standalone example
10 |
16 |
19 |
React-Select Example
4 |
8 |
React Select
9 |
Standalone example
10 |
16 |
19 |
Upgrade here! ;
18 | },
19 | renderOption: function(option) {
20 | return {option.label} {option.link} ;
21 | },
22 | render: function() {
23 | var ops = [
24 | { label: 'Basic customer support', value: 'basic' },
25 | { label: 'Premium customer support', value: 'premium' },
26 | { label: 'Pro customer support', value: 'pro', disabled: true, link: this.renderLink() },
27 | ];
28 | return (
29 |
30 |
{this.props.label}
31 | {option.label} ({option.hex}) ;
17 |
18 | },
19 | renderValue (option) {
20 | return {option.label} ;
21 | },
22 | render () {
23 | var ops = [
24 | { label: 'Red', value: 'red', hex: '#EC6230' },
25 | { label: 'Green', value: 'green', hex: '#4ED84E' },
26 | { label: 'Blue', value: 'blue', hex: '#6D97E2' }
27 | ];
28 | return (
29 |
30 |
{this.props.label}
31 | {this.props.hint}
52 | );
53 | },
54 | render () {
55 | return (
56 |
57 |
{this.props.label}
58 |
37 |
{this.props.label}
38 |
39 |
40 |
41 |
42 | Disabled
44 |
45 |
46 |
37 | {renderedLabel}
38 |
39 | ) : (
40 |
47 | { obj.create ? this.props.addLabelText.replace('{label}', obj.label) : renderedLabel }
48 |
49 | );
50 | }
51 | });
52 |
53 | module.exports = Option;
54 |
--------------------------------------------------------------------------------
/lib/Option.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var React = require('react');
4 | var classes = require('classnames');
5 |
6 | var Option = React.createClass({
7 | displayName: 'Option',
8 |
9 | propTypes: {
10 | addLabelText: React.PropTypes.string, // string rendered in case of allowCreate option passed to ReactSelect
11 | className: React.PropTypes.string, // className (based on mouse position)
12 | mouseDown: React.PropTypes.func, // method to handle click on option element
13 | mouseEnter: React.PropTypes.func, // method to handle mouseEnter on option element
14 | mouseLeave: React.PropTypes.func, // method to handle mouseLeave on option element
15 | option: React.PropTypes.object.isRequired, // object that is base for that option
16 | renderFunc: React.PropTypes.func // method passed to ReactSelect component to render label text
17 | },
18 |
19 | blockEvent: function blockEvent(event) {
20 | event.preventDefault();
21 | if (event.target.tagName !== 'A' || !('href' in event.target)) {
22 | return;
23 | }
24 |
25 | if (event.target.target) {
26 | window.open(event.target.href);
27 | } else {
28 | window.location.href = event.target.href;
29 | }
30 | },
31 |
32 | render: function render() {
33 | var obj = this.props.option;
34 | var renderedLabel = this.props.renderFunc(obj);
35 | var optionClasses = classes(this.props.className, obj.className);
36 |
37 | return obj.disabled ? React.createElement(
38 | 'div',
39 | { className: optionClasses,
40 | onMouseDown: this.blockEvent,
41 | onClick: this.blockEvent },
42 | renderedLabel
43 | ) : React.createElement(
44 | 'div',
45 | { className: optionClasses,
46 | style: obj.style,
47 | onMouseEnter: this.props.mouseEnter,
48 | onMouseLeave: this.props.mouseLeave,
49 | onMouseDown: this.props.mouseDown,
50 | onClick: this.props.mouseDown,
51 | title: obj.title },
52 | obj.create ? this.props.addLabelText.replace('{label}', obj.label) : renderedLabel
53 | );
54 | }
55 | });
56 |
57 | module.exports = Option;
--------------------------------------------------------------------------------
/less/select.less:
--------------------------------------------------------------------------------
1 | /**
2 | * React Select
3 | * ============
4 | * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/
5 | * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs
6 | * MIT License: https://github.com/keystonejs/react-select
7 | */
8 |
9 | // Variables
10 | // ------------------------------
11 |
12 | @select-input-bg: #fff;
13 | @select-text-color: #333;
14 | @select-input-border-color: #ccc;
15 | @select-input-border-radius: 4px;
16 | @select-input-placeholder: #aaa;
17 | @select-input-border-focus: #08c; // blue
18 |
19 | @select-padding-vertical: 8px;
20 | @select-padding-horizontal: 10px;
21 |
22 | @select-arrow-color: #999;
23 | @select-arrow-width: 5px;
24 |
25 | @select-menu-zindex: 1000;
26 | @select-menu-max-height: 200px;
27 |
28 | @select-option-color: lighten(@select-text-color, 20%);
29 | @select-option-focused-color: @select-text-color;
30 | @select-option-focused-bg: #f2f9fc; // pale blue
31 | @select-option-disabled-color: lighten(@select-text-color, 60%);
32 |
33 | @select-noresults-color: lighten(@select-text-color, 40%);
34 |
35 | @select-clear-color: #999;
36 | @select-clear-hover-color: #c0392b; // red
37 |
38 | @select-item-border-radius: 2px;
39 | @select-item-gutter: 2px;
40 | @select-item-padding-vertical: 3px;
41 | @select-item-padding-horizontal: 5px;
42 | @select-item-font-size: 1em;
43 | @select-item-color: #08c; // pale blue
44 | @select-item-bg: #f2f9fc;
45 | @select-item-border-color: darken(@select-item-bg, 10%);
46 | @select-item-hover-color: darken(@select-item-color, 5%); // pale blue
47 | @select-item-hover-bg: darken(@select-item-bg, 5%);
48 | @select-item-disabled-color: #888;
49 | @select-item-disabled-bg: #f2f2f2;
50 | @select-item-disabled-border-color: darken(@select-item-disabled-bg, 10%);
51 |
52 |
53 | @import "control.less";
54 | @import "menu.less";
55 | @import "mixins.less";
56 | @import "multi.less";
57 | @import "spinner.less";
58 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-select",
3 | "version": "0.6.11",
4 | "description": "A Select control built with and for ReactJS",
5 | "main": "lib/Select.js",
6 | "style": "dist/default.css",
7 | "author": "Jed Watson",
8 | "license": "MIT",
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/JedWatson/react-select.git"
12 | },
13 | "dependencies": {
14 | "classnames": "^2.1.3",
15 | "react-input-autosize": "^0.5.3"
16 | },
17 | "devDependencies": {
18 | "babel": "^5.8.23",
19 | "babel-eslint": "^4.1.2",
20 | "chai": "^3.2.0",
21 | "coveralls": "^2.11.4",
22 | "eslint": "^1.4.3",
23 | "eslint-plugin-react": "^3.4.1",
24 | "gulp": "^3.9.0",
25 | "istanbul": "^0.3.20",
26 | "jsdom": "^3.1.2",
27 | "mocha": "^2.3.2",
28 | "react": ">=0.13.3 || ^0.14.0-beta",
29 | "react-gravatar": "^2.0.1",
30 | "react-component-gulp-tasks": "^0.7.1",
31 | "sinon": "^1.16.1",
32 | "unexpected": "^9.12.3",
33 | "unexpected-dom": "^1.3.0",
34 | "unexpected-sinon": "^7.1.1"
35 | },
36 | "peerDependencies": {
37 | "react": ">=0.13.3 || ^0.14.0-rc1"
38 | },
39 | "browserify-shim": {
40 | "classnames": "global:classNames",
41 | "react": "global:React",
42 | "react-input-autosize": "global:AutosizeInput"
43 | },
44 | "scripts": {
45 | "build": "gulp clean && NODE_ENV=production gulp build",
46 | "bump": "gulp bump",
47 | "bump:major": "gulp bump:major",
48 | "bump:minor": "gulp bump:minor",
49 | "cover": "istanbul cover _mocha -- -u exports --compilers js:babel/register -R spec",
50 | "coveralls": "NODE_ENV=test istanbul cover _mocha --report lcovonly -- -u exports --compilers js:babel/register -R spec && cat coverage/lcov.info | coveralls",
51 | "examples": "gulp dev:server",
52 | "lint": "eslint .",
53 | "publish:examples": "NODE_ENV=production gulp publish:examples",
54 | "release": "NODE_ENV=production gulp release",
55 | "start": "gulp dev",
56 | "test": "mocha --compilers js:babel/register",
57 | "watch": "gulp watch:lib"
58 | },
59 | "keywords": [
60 | "combobox",
61 | "form",
62 | "input",
63 | "multiselect",
64 | "react",
65 | "react-component",
66 | "select",
67 | "ui"
68 | ]
69 | }
70 |
--------------------------------------------------------------------------------
/src/Value.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var classes = require('classnames');
3 |
4 | var Value = React.createClass({
5 |
6 | displayName: 'Value',
7 |
8 | propTypes: {
9 | disabled: React.PropTypes.bool, // disabled prop passed to ReactSelect
10 | onOptionLabelClick: React.PropTypes.func, // method to handle click on value label
11 | onRemove: React.PropTypes.func, // method to handle remove of that value
12 | option: React.PropTypes.object.isRequired, // option passed to component
13 | optionLabelClick: React.PropTypes.bool, // indicates if onOptionLabelClick should be handled
14 | renderer: React.PropTypes.func // method to render option label passed to ReactSelect
15 | },
16 |
17 | blockEvent: function(event) {
18 | event.stopPropagation();
19 | },
20 |
21 | handleOnRemove: function(event) {
22 | if (!this.props.disabled) {
23 | this.props.onRemove(event);
24 | }
25 | },
26 |
27 | render: function() {
28 | var label = this.props.option.label;
29 | if (this.props.renderer) {
30 | label = this.props.renderer(this.props.option);
31 | }
32 |
33 | if(!this.props.onRemove && !this.props.optionLabelClick) {
34 | return (
35 | {label}
40 | );
41 | }
42 |
43 | if (this.props.optionLabelClick) {
44 |
45 | label = (
46 |
52 | {label}
53 |
54 | );
55 | }
56 |
57 | return (
58 |
61 | ×
65 | {label}
66 |
67 | );
68 | }
69 |
70 | });
71 |
72 | module.exports = Value;
73 |
--------------------------------------------------------------------------------
/examples/src/app.js:
--------------------------------------------------------------------------------
1 | /* eslint react/prop-types: 0 */
2 |
3 | import React from 'react';
4 | import Select from 'react-select';
5 |
6 | import CustomRenderField from './components/CustomRenderField';
7 | import MultiSelectField from './components/MultiSelectField';
8 | import RemoteSelectField from './components/RemoteSelectField';
9 | import SelectedValuesField from './components/SelectedValuesField';
10 | import StatesField from './components/StatesField';
11 | import UsersField from './components/UsersField';
12 | import ValuesAsNumbersField from './components/ValuesAsNumbersField';
13 | import DisabledUpsellOptions from './components/DisabledUpsellOptions';
14 |
15 | var FLAVOURS = [
16 | { label: 'Chocolate', value: 'chocolate' },
17 | { label: 'Vanilla', value: 'vanilla' },
18 | { label: 'Strawberry', value: 'strawberry' },
19 | { label: 'Cookies and Cream', value: 'cookiescream' },
20 | { label: 'Peppermint', value: 'peppermint' }
21 | ];
22 | var FLAVOURS_WITH_DISABLED_OPTION = FLAVOURS.slice(0);
23 | FLAVOURS_WITH_DISABLED_OPTION.unshift({ label: 'Caramel (You don\'t like it, apparently)', value: 'caramel', disabled: true });
24 |
25 | function logChange() {
26 | console.log.apply(console, [].concat(['Select value changed:'], Array.prototype.slice.apply(arguments)));
27 | }
28 |
29 | React.render(
30 |
31 |
,
44 | document.getElementById('example')
45 | );
46 |
--------------------------------------------------------------------------------
/lib/Value.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var React = require('react');
4 | var classes = require('classnames');
5 |
6 | var Value = React.createClass({
7 |
8 | displayName: 'Value',
9 |
10 | propTypes: {
11 | disabled: React.PropTypes.bool, // disabled prop passed to ReactSelect
12 | onOptionLabelClick: React.PropTypes.func, // method to handle click on value label
13 | onRemove: React.PropTypes.func, // method to handle remove of that value
14 | option: React.PropTypes.object.isRequired, // option passed to component
15 | optionLabelClick: React.PropTypes.bool, // indicates if onOptionLabelClick should be handled
16 | renderer: React.PropTypes.func // method to render option label passed to ReactSelect
17 | },
18 |
19 | blockEvent: function blockEvent(event) {
20 | event.stopPropagation();
21 | },
22 |
23 | handleOnRemove: function handleOnRemove(event) {
24 | if (!this.props.disabled) {
25 | this.props.onRemove(event);
26 | }
27 | },
28 |
29 | render: function render() {
30 | var label = this.props.option.label;
31 | if (this.props.renderer) {
32 | label = this.props.renderer(this.props.option);
33 | }
34 |
35 | if (!this.props.onRemove && !this.props.optionLabelClick) {
36 | return React.createElement(
37 | 'div',
38 | {
39 | className: classes('Select-value', this.props.option.className),
40 | style: this.props.option.style,
41 | title: this.props.option.title
42 | },
43 | label
44 | );
45 | }
46 |
47 | if (this.props.optionLabelClick) {
48 |
49 | label = React.createElement(
50 | 'a',
51 | { className: classes('Select-item-label__a', this.props.option.className),
52 | onMouseDown: this.blockEvent,
53 | onTouchEnd: this.props.onOptionLabelClick,
54 | onClick: this.props.onOptionLabelClick,
55 | style: this.props.option.style,
56 | title: this.props.option.title },
57 | label
58 | );
59 | }
60 |
61 | return React.createElement(
62 | 'div',
63 | { className: classes('Select-item', this.props.option.className),
64 | style: this.props.option.style,
65 | title: this.props.option.title },
66 | React.createElement(
67 | 'span',
68 | { className: 'Select-item-icon',
69 | onMouseDown: this.blockEvent,
70 | onClick: this.handleOnRemove,
71 | onTouchEnd: this.handleOnRemove },
72 | '×'
73 | ),
74 | React.createElement(
75 | 'span',
76 | { className: 'Select-item-label' },
77 | label
78 | )
79 | );
80 | }
81 |
82 | });
83 |
84 | module.exports = Value;
--------------------------------------------------------------------------------
/less/multi.less:
--------------------------------------------------------------------------------
1 | //
2 | // Multi-Select
3 | // ------------------------------
4 |
5 |
6 | // Base
7 |
8 | .Select.is-multi {
9 |
10 | // control: reduce padding to allow for items
11 | .Select-control {
12 | padding:
13 | @select-padding-vertical - @select-item-gutter - @select-item-padding-vertical - 1
14 | @select-padding-horizontal * 3 + 22
15 | @select-padding-vertical - @select-item-gutter - @select-item-padding-vertical - 1
16 | @select-padding-horizontal - @select-item-gutter - @select-item-padding-horizontal
17 | }
18 |
19 | // add margin to the input element
20 | .Select-input {
21 | vertical-align: middle;
22 | border: 1px solid transparent;
23 | margin: @select-item-gutter;
24 | padding: @select-item-padding-vertical 0;
25 | }
26 |
27 | }
28 |
29 | // Items
30 |
31 | .Select-item {
32 | background-color: @select-item-bg;
33 | border-radius: @select-item-border-radius;
34 | border: 1px solid @select-item-border-color;
35 | color: @select-item-color;
36 | display: inline-block;
37 | font-size: @select-item-font-size;
38 | margin: @select-item-gutter;
39 | }
40 |
41 | // common
42 | .Select-item-icon,
43 | .Select-item-label {
44 | display: inline-block;
45 | vertical-align: middle;
46 | }
47 |
48 | // label
49 | .Select-item-label {
50 | cursor: default;
51 | .border-right-radius( @select-item-border-radius );
52 | padding: @select-item-padding-vertical @select-item-padding-horizontal;
53 |
54 | .Select-item-label__a {
55 | color: @select-item-color;
56 | cursor: pointer;
57 | }
58 | }
59 |
60 | // icon
61 | .Select-item-icon {
62 | cursor: pointer;
63 | .border-left-radius( @select-item-border-radius );
64 | border-right: 1px solid @select-item-border-color;
65 |
66 | // move the baseline up by 1px
67 | padding: @select-item-padding-vertical - 1 @select-item-padding-horizontal @select-item-padding-vertical + 1;
68 |
69 | &:hover,
70 | &:focus {
71 | background-color: @select-item-hover-bg;
72 | color: @select-item-hover-color;
73 | }
74 | &:active {
75 | background-color: @select-item-border-color;
76 | }
77 | }
78 |
79 | .Select.is-multi.is-disabled {
80 | .Select-item {
81 | background-color: @select-item-disabled-bg;
82 | border: 1px solid @select-item-disabled-border-color;
83 | color: @select-item-disabled-color;
84 | }
85 | // icon
86 | .Select-item-icon {
87 | cursor: not-allowed;
88 | border-right: 1px solid @select-item-disabled-border-color;
89 |
90 | &:hover,
91 | &:focus,
92 | &:active {
93 | background-color: @select-item-disabled-bg;
94 | }
95 | }
96 | }
97 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | Thanks for your interest in React-Select. All forms of contribution are
4 | welcome, from issue reports to PRs and documentation / write-ups.
5 |
6 | Before you open a PR:
7 |
8 | * If you're planning to add or change a major feature in a PR, please ensure
9 | the change is aligned with the project roadmap by opening an issue first,
10 | especially if you're going to spend a lot of time on it.
11 | * In development, run `npm start` to build (+watch) the project source, and run
12 | the [development server](http://localhost:8000).
13 | * Please ensure all the examples work correctly after your change. If you're
14 | adding a major new use-case, add a new example demonstrating its use.
15 | * Please **do not** commit the build files. Make sure **only** your changes to
16 | `/src/`, `/less/` and `/examples/src` are included in your PR.
17 | * Be careful to follow the code style of the project. Run `npm run lint` after
18 | your changes and ensure you do not introduce any new errors or warnings.
19 |
20 | * Ensure that your effort is aligned with the project's roadmap by talking to
21 | the maintainers, especially if you are going to spend a lot of time on it.
22 | * Make sure there's an issue open for any work you take on and intend to submit
23 | as a pull request - it helps core members review your concept and direction
24 | early and is a good way to discuss what you're planning to do.
25 | * If you open an issue and are interested in working on a fix, please let us
26 | know. We'll help you get started, rather than adding it to the queue.
27 | * Make sure you do not add regressions by running `npm test`.
28 | * Where possible, include tests with your changes, either that demonstrates the
29 | bug, or tests the new functionality. If you're not sure how to test your
30 | changes, feel free to ping @bruderstein
31 | * Run `npm run cover` to check that the coverage hasn't dropped, and look at the
32 | report (under the generated `coverage` directory) to check that your changes are
33 | covered
34 | * Please [follow our established coding conventions](https://github.com/keystonejs/keystone/wiki/Coding-Standards)
35 | (with regards to formatting, etc)
36 | * You can also run `npm run lint` and `npm run style` - our linter is a WIP
37 | but please ensure there are not more violations than before your changes.
38 | * All new features and changes need documentation. We have three translations,
39 | please read our [Documentation Guidelines](https://github.com/keystonejs/keystone/wiki/Documentation-Translation-Guidelines).
40 |
41 | * _Make sure you revert your build before submitting a PR_ to reduce the change
42 | of conflicts. `gulp build-scripts` is run after PRs are merged and before any
43 | releases are made.
44 |
--------------------------------------------------------------------------------
/test/Value-test.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | /* global describe, it, beforeEach */
3 |
4 | var helper = require('../testHelpers/jsdomHelper');
5 | helper();
6 |
7 | var unexpected = require('unexpected');
8 | var unexpectedDom = require('unexpected-dom');
9 | var unexpectedSinon = require('unexpected-sinon');
10 | var sinon = require('sinon');
11 |
12 | var expect = unexpected
13 | .clone()
14 | .installPlugin(unexpectedSinon)
15 | .installPlugin(unexpectedDom);
16 |
17 | var React = require('react/addons');
18 | var TestUtils = React.addons.TestUtils;
19 |
20 | var OPTION = { label: 'TEST-LABEL', value: 'TEST-VALUE' };
21 |
22 | var Value = require('../src/Value');
23 |
24 | describe('Value component', function() {
25 |
26 | var props;
27 | var value;
28 |
29 | beforeEach(function() {
30 | props = {
31 | option: OPTION,
32 | onRemove: sinon.spy()
33 | };
34 | value = TestUtils.renderIntoDocument(React-Select Example
5 | React-Select Example
5 | ?" item when a value not already in the `options` array is entered)
170 | asyncOptions | func | function to call to get options
171 | autoload | bool | whether to auto-load the default async options set
172 | backspaceRemoves | bool | whether pressing backspace removes the last item when there is no input value
173 | cacheAsyncResults | bool | enables the options cache for asyncOptions (default: `true`)
174 | className | string | className for the outer element
175 | clearable | bool | should it be possible to reset value
176 | clearAllText | string | title for the "clear" control when multi: true
177 | clearValueText | string | title for the "clear" control
178 | delimiter | string | delimiter to use to join multiple values
179 | disabled | bool | whether the Select is disabled or not
180 | filterOption | func | method to filter a single option: function(option, filterString)
181 | filterOptions | func | method to filter the options array: function([options], filterString, [values])
182 | ignoreCase | bool | whether to perform case-insensitive filtering
183 | inputProps | object | custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
184 | isLoading | bool | whether the Select is loading externally or not (such as options being loaded)
185 | matchPos | string | (any, start) match the start or entire string when filtering
186 | matchProp | string | (any, label, value) which option property to filter on
187 | multi | bool | multi-value input
188 | name | string | field name, for hidden ` elements should be considered private and prone to change.
208 |
209 | ```js
210 | // focuses the input element
211 | .focus();
212 | ```
213 |
214 | # Contributing
215 |
216 | See our [CONTRIBUTING.md](https://github.com/JedWatson/react-select/blob/master/CONTRIBUTING.md) for information on how to contribute.
217 |
218 |
219 | # License
220 |
221 | MIT Licensed. Copyright (c) Jed Watson 2015.
222 |
--------------------------------------------------------------------------------
/examples/dist/example.css:
--------------------------------------------------------------------------------
1 | /**
2 | * React Select
3 | * ============
4 | * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/
5 | * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs
6 | * MIT License: https://github.com/keystonejs/react-select
7 | */
8 | .Select {
9 | position: relative;
10 | }
11 | .Select-control {
12 | position: relative;
13 | overflow: hidden;
14 | background-color: #ffffff;
15 | border: 1px solid #cccccc;
16 | border-color: #d9d9d9 #cccccc #b3b3b3;
17 | border-radius: 4px;
18 | box-sizing: border-box;
19 | color: #333333;
20 | cursor: default;
21 | outline: none;
22 | padding: 8px 52px 8px 10px;
23 | }
24 | .Select-control:hover {
25 | box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
26 | }
27 | .is-searchable.is-open > .Select-control {
28 | cursor: text;
29 | }
30 | .is-open > .Select-control {
31 | border-bottom-right-radius: 0;
32 | border-bottom-left-radius: 0;
33 | background: #ffffff;
34 | border-color: #b3b3b3 #cccccc #d9d9d9;
35 | }
36 | .is-open > .Select-control > .Select-arrow {
37 | border-color: transparent transparent #999999;
38 | border-width: 0 5px 5px;
39 | }
40 | .is-searchable.is-focused:not(.is-open) > .Select-control {
41 | cursor: text;
42 | }
43 | .is-focused:not(.is-open) > .Select-control {
44 | border-color: #0088cc #0099e6 #0099e6;
45 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px rgba(0, 136, 204, 0.5);
46 | }
47 | .Select-placeholder {
48 | color: #aaaaaa;
49 | padding: 8px 52px 8px 10px;
50 | position: absolute;
51 | top: 0;
52 | left: 0;
53 | right: -15px;
54 | max-width: 100%;
55 | overflow: hidden;
56 | text-overflow: ellipsis;
57 | white-space: nowrap;
58 | }
59 | .has-value > .Select-control > .Select-placeholder {
60 | color: #333333;
61 | }
62 | .Select-value {
63 | color: #aaaaaa;
64 | padding: 8px 52px 8px 10px;
65 | position: absolute;
66 | top: 0;
67 | left: 0;
68 | right: -15px;
69 | max-width: 100%;
70 | overflow: hidden;
71 | text-overflow: ellipsis;
72 | white-space: nowrap;
73 | }
74 | .has-value > .Select-control > .Select-value {
75 | color: #333333;
76 | }
77 | .Select-input > input {
78 | cursor: default;
79 | background: none transparent;
80 | box-shadow: none;
81 | height: auto;
82 | border: 0 none;
83 | font-family: inherit;
84 | font-size: inherit;
85 | margin: 0;
86 | padding: 0;
87 | outline: none;
88 | display: inline-block;
89 | -webkit-appearance: none;
90 | }
91 | .is-focused .Select-input > input {
92 | cursor: text;
93 | }
94 | .Select-control:not(.is-searchable) > .Select-input {
95 | outline: none;
96 | }
97 | .Select-loading {
98 | -webkit-animation: Select-animation-spin 400ms infinite linear;
99 | -o-animation: Select-animation-spin 400ms infinite linear;
100 | animation: Select-animation-spin 400ms infinite linear;
101 | width: 16px;
102 | height: 16px;
103 | box-sizing: border-box;
104 | border-radius: 50%;
105 | border: 2px solid #cccccc;
106 | border-right-color: #333333;
107 | display: inline-block;
108 | position: relative;
109 | margin-top: -8px;
110 | position: absolute;
111 | right: 30px;
112 | top: 50%;
113 | }
114 | .has-value > .Select-control > .Select-loading {
115 | right: 46px;
116 | }
117 | .Select-clear {
118 | color: #999999;
119 | cursor: pointer;
120 | display: inline-block;
121 | font-size: 16px;
122 | padding: 6px 10px;
123 | position: absolute;
124 | right: 17px;
125 | top: 0;
126 | }
127 | .Select-clear:hover {
128 | color: #c0392b;
129 | }
130 | .Select-clear > span {
131 | font-size: 1.1em;
132 | }
133 | .Select-arrow-zone {
134 | content: " ";
135 | display: block;
136 | position: absolute;
137 | right: 0;
138 | top: 0;
139 | bottom: 0;
140 | width: 30px;
141 | cursor: pointer;
142 | }
143 | .Select-arrow {
144 | border-color: #999999 transparent transparent;
145 | border-style: solid;
146 | border-width: 5px 5px 0;
147 | content: " ";
148 | display: block;
149 | height: 0;
150 | margin-top: -ceil(2.5px);
151 | position: absolute;
152 | right: 10px;
153 | top: 14px;
154 | width: 0;
155 | cursor: pointer;
156 | }
157 | .Select-menu-outer {
158 | border-bottom-right-radius: 4px;
159 | border-bottom-left-radius: 4px;
160 | background-color: #ffffff;
161 | border: 1px solid #cccccc;
162 | border-top-color: #e6e6e6;
163 | box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
164 | box-sizing: border-box;
165 | margin-top: -1px;
166 | max-height: 200px;
167 | position: absolute;
168 | top: 100%;
169 | width: 100%;
170 | z-index: 1000;
171 | -webkit-overflow-scrolling: touch;
172 | }
173 | .Select-menu {
174 | max-height: 198px;
175 | overflow-y: auto;
176 | }
177 | .Select-option {
178 | box-sizing: border-box;
179 | color: #666666;
180 | cursor: pointer;
181 | display: block;
182 | padding: 8px 10px;
183 | }
184 | .Select-option:last-child {
185 | border-bottom-right-radius: 4px;
186 | border-bottom-left-radius: 4px;
187 | }
188 | .Select-option.is-focused {
189 | background-color: #f2f9fc;
190 | color: #333333;
191 | }
192 | .Select-option.is-disabled {
193 | color: #cccccc;
194 | cursor: not-allowed;
195 | }
196 | .Select-noresults,
197 | .Select-search-prompt,
198 | .Select-searching {
199 | box-sizing: border-box;
200 | color: #999999;
201 | cursor: default;
202 | display: block;
203 | padding: 8px 10px;
204 | }
205 | .Select.is-multi .Select-control {
206 | padding: 2px 52px 2px 3px;
207 | }
208 | .Select.is-multi .Select-input {
209 | vertical-align: middle;
210 | border: 1px solid transparent;
211 | margin: 2px;
212 | padding: 3px 0;
213 | }
214 | .Select-item {
215 | background-color: rgba(0, 126, 255, 0.08);
216 | border-radius: 2px;
217 | border: 1px solid rgba(0, 126, 255, 0.24);
218 | color: #007eff;
219 | display: inline-block;
220 | font-size: 1em;
221 | margin: 2px;
222 | }
223 | .Select-item-icon,
224 | .Select-item-label {
225 | display: inline-block;
226 | vertical-align: middle;
227 | }
228 | .Select-item-label {
229 | cursor: default;
230 | border-bottom-right-radius: 2px;
231 | border-top-right-radius: 2px;
232 | padding: 3px 5px;
233 | }
234 | .Select-item-label .Select-item-label__a {
235 | color: #007eff;
236 | cursor: pointer;
237 | }
238 | .Select-item-icon {
239 | cursor: pointer;
240 | border-bottom-left-radius: 2px;
241 | border-top-left-radius: 2px;
242 | border-right: 1px solid rgba(0, 126, 255, 0.24);
243 | padding: 2px 5px 4px;
244 | }
245 | .Select-item-icon:hover,
246 | .Select-item-icon:focus {
247 | background-color: rgba(0, 113, 230, 0.08);
248 | color: #0071e6;
249 | }
250 | .Select-item-icon:active {
251 | background-color: rgba(0, 126, 255, 0.24);
252 | }
253 | .Select.is-multi.is-disabled .Select-item {
254 | background-color: #f2f2f2;
255 | border: 1px solid #d9d9d9;
256 | color: #888888;
257 | }
258 | .Select.is-multi.is-disabled .Select-item-icon {
259 | cursor: not-allowed;
260 | border-right: 1px solid #d9d9d9;
261 | }
262 | .Select.is-multi.is-disabled .Select-item-icon:hover,
263 | .Select.is-multi.is-disabled .Select-item-icon:focus,
264 | .Select.is-multi.is-disabled .Select-item-icon:active {
265 | background-color: #f2f2f2;
266 | }
267 | @keyframes Select-animation-spin {
268 | to {
269 | transform: rotate(1turn);
270 | }
271 | }
272 | @-webkit-keyframes Select-animation-spin {
273 | to {
274 | -webkit-transform: rotate(1turn);
275 | }
276 | }
277 | body {
278 | color: #333333;
279 | font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
280 | font-size: 14px;
281 | line-height: 1.4;
282 | margin: 0;
283 | padding: 0;
284 | }
285 | a {
286 | color: #007eff;
287 | text-decoration: none;
288 | }
289 | a:hover {
290 | text-decoration: underline;
291 | }
292 | .container {
293 | margin-left: auto;
294 | margin-right: auto;
295 | max-width: 400px;
296 | padding: 0 30px;
297 | }
298 | h1,
299 | h2,
300 | h3,
301 | h4,
302 | h5,
303 | h6,
304 | .h1,
305 | .h2,
306 | .h3,
307 | .h4,
308 | .h5,
309 | .h6 {
310 | color: black;
311 | font-weight: 500;
312 | line-height: 1;
313 | margin-bottom: .66em;
314 | margin-top: 0;
315 | }
316 | h1,
317 | .h1 {
318 | font-size: 3em;
319 | }
320 | h2,
321 | .h2 {
322 | font-size: 2em;
323 | font-weight: 300;
324 | }
325 | h3,
326 | .h3 {
327 | font-size: 1.25em;
328 | }
329 | h4,
330 | .h4 {
331 | font-size: 1em;
332 | }
333 | h5,
334 | .h5 {
335 | font-size: .85em;
336 | }
337 | h6,
338 | .h6 {
339 | font-size: .75em;
340 | }
341 | .page-body,
342 | .page-footer,
343 | .page-header {
344 | padding: 30px 0;
345 | }
346 | .page-header {
347 | background-color: #007eff;
348 | color: #bfdfff;
349 | }
350 | .page-header h1,
351 | .page-header h2,
352 | .page-header h3 {
353 | color: white;
354 | }
355 | .page-header p {
356 | font-size: 1.2em;
357 | margin: 0;
358 | }
359 | .page-header a {
360 | border-bottom: 1px solid rgba(255, 255, 255, 0.3);
361 | color: white;
362 | text-decoration: none;
363 | }
364 | .page-header a:hover,
365 | .page-header a:focus {
366 | border-bottom-color: white;
367 | outline: none;
368 | text-decoration: none;
369 | }
370 | .page-subheader {
371 | background-color: #e6f2ff;
372 | line-height: 20px;
373 | padding: 30px 0;
374 | }
375 | .page-subheader__button {
376 | float: right;
377 | }
378 | .page-subheader__link {
379 | border-bottom: 1px solid rgba(0, 126, 255, 0.3);
380 | outline: none;
381 | text-decoration: none;
382 | }
383 | .page-subheader__link:hover,
384 | .page-subheader__link:focus {
385 | border-bottom-color: #007eff;
386 | outline: none;
387 | text-decoration: none;
388 | }
389 | .page-footer {
390 | background-color: #fafafa;
391 | color: #999;
392 | padding: 30px 0;
393 | text-align: center;
394 | }
395 | @media (min-width: 480px) {
396 | .page-body,
397 | .page-header {
398 | padding: 60px 0;
399 | }
400 | .page-header {
401 | font-size: 1.4em;
402 | }
403 | .page-subheader {
404 | font-size: 1.125em;
405 | line-height: 28px;
406 | }
407 | }
408 | .checkbox-list {
409 | margin-top: .5em;
410 | overflow: hidden;
411 | }
412 | .checkbox-list > .checkbox {
413 | clear: left;
414 | float: left;
415 | margin-top: .5em;
416 | }
417 | .checkbox-control {
418 | margin-right: .5em;
419 | position: relative;
420 | top: -1px;
421 | }
422 | .switcher {
423 | color: #999;
424 | cursor: default;
425 | font-size: 12px;
426 | margin: 10px 0;
427 | text-transform: uppercase;
428 | }
429 | .switcher .link {
430 | color: #007eff;
431 | cursor: pointer;
432 | font-weight: bold;
433 | margin-left: 10px;
434 | }
435 | .switcher .link:hover {
436 | text-decoration: underline;
437 | }
438 | .switcher .active {
439 | color: #666;
440 | font-weight: bold;
441 | margin-left: 10px;
442 | }
443 | .section {
444 | margin-bottom: 40px;
445 | }
446 | .hint {
447 | font-size: .85em;
448 | margin: 15px 0;
449 | color: #666;
450 | }
451 | /*
452 |
453 | // include these styles to test normal form fields
454 |
455 | .form-input {
456 | margin-bottom: 15px;
457 | }
458 |
459 | .form-input input {
460 | background-color: white;
461 | border-color: lighten(@select-input-border-color, 5%) @select-input-border-color darken(@select-input-border-color, 10%);
462 | border-radius: @select-input-border-radius;
463 | border: 1px solid @select-input-border-color;
464 | box-sizing: border-box;
465 | color: @select-text-color;
466 | font-size: 14px;
467 | outline: none;
468 | padding: @select-padding-vertical @select-padding-horizontal;
469 | transition: all 200ms ease;
470 | width: 100%;
471 |
472 | &:hover {
473 | box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
474 | }
475 |
476 | &:focus {
477 | border-color: @select-input-border-focus lighten(@select-input-border-focus, 5%) lighten(@select-input-border-focus, 5%);
478 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade(@select-input-border-focus,50%);
479 | }
480 | }
481 |
482 | */
483 |
--------------------------------------------------------------------------------
/HISTORY.md:
--------------------------------------------------------------------------------
1 | # React-Select
2 |
3 | ## v0.6.11 / 2015-09-28
4 |
5 | * added; `isLoading` prop, allows indication of async options loading in situations where more control is required, thanks [Jon Gautsch](https://github.com/jgautsch)
6 |
7 | ## v0.6.10 / 2015-09-24
8 |
9 | * fixed; a build issue with the previous release that prevented the stylesheet being generated / included
10 | * fixed; a LESS syntax issue, thanks [Bob Cardenas](https://github.com/bcardi)
11 |
12 | ## v0.6.9 / 2015-09-19
13 |
14 | * added; `style` key for package.json, thanks [Stephen Wan](https://github.com/stephen)
15 | * added; `onInputChange` handler that returns the current input value, thanks [Tom Leslie](https://github.com/lomteslie)
16 | * fixed; simplifying handleKey function & preventDefault behaviour, thanks [davidpene](https://github.com/davidpene)
17 | * fixed; Display spinner while auto-loading initial data, thanks [Ben Jenkinson](https://github.com/BenJenkinson)
18 | * fixed; better support for touch events, thanks [Montlouis-Calixte Stéphane](https://github.com/bulby97)
19 | * fixed; prevent value splitting on non-multi-value select, thanks [Alan R. Soares](https://github.com/alanrsoares)
20 |
21 | ## v0.6.8 / 2015-09-16
22 |
23 | * fixed; broader range of allowed prereleases for React 0.14, including rc1
24 | * fixed; preventing backspace from navigating back in the browser history, thanks [davidpene](https://github.com/davidpene)
25 |
26 | ## v0.6.7 / 2015-08-28
27 |
28 | * fixed; missing styles for `.Select-search-prompt` and `.Select-searching` issues, thanks [Jaak Erisalu](https://github.com/jaakerisalu) and [davidpene](https://github.com/davidpene)
29 |
30 | ## v0.6.6 / 2015-08-26
31 |
32 | * fixed; issue in Chrome where clicking the scrollbar would close the menu, thanks [Vladimir Matsola](https://github.com/vomchik)
33 |
34 | ## v0.6.5 / 2015-08-24
35 |
36 | * fixed; completely ignores clicks on disabled items, unless the target of the click is a link, thanks [Ben Stahl](https://github.com/bhstahl)
37 |
38 | ## v0.6.4 / 2015-08-24
39 |
40 | This release includes a huge improvement to the examples / website thanks to @jossmac. Also:
41 |
42 | * added; support for React 0.14 beta3
43 | * fixed; disabled options after searching, thanks @bruderstein
44 | * added; support for "Searching..." text (w/ prop) while loading async results, thanks @bruderstein and @johnomalley
45 | * added; `className`, `style` and `title` keys are now supported in option properties, thanks @bruderstein
46 |
47 | ## v0.6.3 / 2015-08-18
48 |
49 | Otherwise known as "the real 0.6.2" this includes the updated build for the last version; sorry about that!
50 |
51 | ## v0.6.2 / 2015-08-13
52 |
53 | * changed; if the `searchable` prop is `false`, the menu is opened _or closed_ on click, more like a standard Select input. thanks [MaaikeB](https://github.com/MaaikeB)
54 |
55 | ## v0.6.1 / 2015-08-09
56 |
57 | * added; Support for options with numeric values, thanks [Dave Brotherstone](https://github.com/bruderstein)
58 | * changed; Disabled options now appear in the search results
, thanks [Dave Brotherstone](https://github.com/bruderstein)
59 | * fixed; asyncOptions are reloaded on componentWillReceiveProps when the value has changed, thanks [Francis Cote](https://github.com/drfeelgoud)
60 | * added; `cacheAsyncResults` prop (default `true`) now controls whether the internal cache is used for `asyncOptions`
61 |
62 | ## v0.6.0 / 2015-08-05
63 |
64 | * improved; option, value and single value have been split out into their own components, and can be customised with props. see [#328](https://github.com/JedWatson/react-select/pull/328) for more details.
65 | * improved; Near-complete test coverage thanks to the awesome work of [Dave Brotherstone](https://github.com/bruderstein)
66 | * improved; Support all alpha/beta/rc's of React 0.14.0, thanks [Sébastien Lorber](https://github.com/slorber)
67 | * fixed; Close multi-select menu when tabbing away, thanks [Ben Alpert](https://github.com/spicyj)
68 | * fixed; Bug where Select shows the value instead of the label (reapplying fix)
69 | * fixed; `valueRenderer` now works when `multi={false}`, thanks [Chris Portela](https://github.com/0xCMP)
70 | * added; New property `backspaceRemoves` (default `true`), allows the default behaviour of removing values with backspace when `multi={true}`, thanks [Leo Lehikoinen](https://github.com/lehikol2)
71 |
72 | ## v0.5.6 / 2015-07-27
73 |
74 | * fixed; Allow entering of commas when allowCreate is on but multi is off, thanks [Angelo DiNardi](https://github.com/adinardi)
75 | * fixed; Times (clear) character is now rendered from string unicode character for consistent output, thanks [Nibbles](https://github.com/Siliconrob)
76 | * fixed; allowCreate bug, thanks [goodzsq](https://github.com/goodzsq)
77 | * fixed; changes to props.placeholder weren't being reflected correctly, thanks [alesn](https://github.com/alesn)
78 | * fixed; error when escape is pressedn where `clearValue` was not passed the event, thanks [Mikhail Kotelnikov](https://github.com/mkotelnikov)
79 | * added; More tests, thanks [Dave Brotherstone](https://github.com/bruderstein)
80 |
81 | ## v0.5.5 / 2015-07-12
82 |
83 | * fixed; replaced usage of `component.getDOMNode()` with `React.findDOMNode(component)` for compatibility with React 0.14
84 |
85 | ## v0.5.4 / 2015-07-06
86 |
87 | * fixed; regression in 0.5.3 that broke componentWillMount, sorry everyone!
88 | * added; `addLabelText` prop for customising the "add {label}?" text when in tags mode, thanks [Fenn](https://github.com/Fenntasy)
89 |
90 | ## v0.5.3 / 2015-07-05
91 |
92 | * fixed; autoload issues, thanks [Maxime Tyler](https://github.com/iam4x)
93 | * fixed; style incompatibilities with Foundation framework, thanks [Timothy Kempf](https://github.com/Fauntleroy)
94 |
95 | ## v0.5.2 / 2015-06-28
96 |
97 | * fixed; bug where Select shows the value instead of the label, thanks [Stephen Demjanenko](https://github.com/sdemjanenko)
98 | * added; 'is-selected' classname is added to the selected option, thanks [Alexey Volodkin](https://github.com/miraks)
99 | * fixed; async options are now loaded with the initial value, thanks [Pokai Chang](https://github.com/Neson)
100 | * fixed; `react-input-autosize` now correctly escapes ampersands (&), not actually a fix in react-select but worth noting here because it would have been causing a problem in `react-select` as well.
101 |
102 | ## v0.5.1 / 2015-06-21
103 |
104 | * added; custom option and value rendering capability, thanks [Brian Reavis](https://github.com/brianreavis)
105 | * fixed; collapsing issue when single-select or empty multi-select fields are disabled
106 | * fixed; issue where an empty value would be left after clearing all values in a multi-select field
107 |
108 | ## v0.5.0 / 2015-06-20
109 |
110 | * fixed; `esc` key incorrectly created empty options, thanks [rgrzelak](https://github.com/rgrzelak)
111 | * adeed; New feature to allow option creation ("tags mode"), enable with `allowCreate` prop, thanks [Florent Vilmart](https://github.com/flovilmart) and [Brian Reavis](https://github.com/brianreavis)
112 | * fixed; IE8 compatibility fallback for `addEventListener/removeEventListener`, which don't exist in IE8, thanks [Stefan Billiet](https://github.com/StefanBilliet)
113 | * fixed; Undefined values when using asyncOptions, thanks [bannaN](https://github.com/bannaN)
114 | * fixed; Prevent add the last focused value when the drop down menu is closed / Pushing enter without dropdown open adds a value, thanks [Giuseppe](https://github.com/giuse88)
115 | * fixed; Callback context is undefined, thanks [Giuseppe](https://github.com/giuse88)
116 | * fixed; Issue with event being swallowed on Enter `keydown`, thanks [Kevin Burke](https://github.com/kembuco)
117 | * added; Support for case-insensitive filtering when `matchPos="start"`, thanks [wesrage](https://github.com/wesrage)
118 | * added; Support for customizable background color, thanks [John Morales](https://github.com/JohnMorales)
119 | * fixed; Updated ESLint and cleared up warnings, thanks [Alexander Shemetovsky](https://github.com/AlexKVal)
120 | * fixed; Close dropdown when clicking on select, thanks [Nik Butenko](https://github.com/nkbt)
121 | * added; Tests, and mocha test framework, thanks [Craig Dallimore](https://github.com/craigdallimore)
122 | * fixed; You can now start the example server and watch for changes with `npm start`
123 |
124 |
125 | ## v0.4.9 / 2015-05-11
126 |
127 | * fixed; focus was being grabbed by the select when `autoload` and `asyncOptions` were set
128 | * added; `focus` method on the component
129 | * added; support for disabled options, thanks [Pasha Palangpour](https://github.com/pashap)
130 | * improved; more closures, less binds, for better performance, thanks [Daniel Cousens](https://github.com/dcousens)
131 |
132 | ## v0.4.8 / 2015-05-02
133 |
134 | * fixed; restored `dist/default.css`
135 | * fixed; standalone example works again
136 | * fixed; clarified dependency documentation and added dependencies for Bower
137 | * fixed; Scoping issues in `_bindCloseMenuIfClickedOutside`, thanks [bannaN](https://github.com/bannaN)
138 | * fixed; Doesnt try to set focus afterupdate if component is disabled, thanks [bannaN](https://github.com/bannaN)
139 |
140 | ## v0.4.7 / 2015-04-21
141 |
142 | * improved; lodash is no longer a dependency, thanks [Daniel Lo Nigro](https://github.com/Daniel15)
143 |
144 | ## v0.4.6 / 2015-04-06
145 |
146 | * updated; dependencies, build process and input-autosize component
147 |
148 | ## v0.4.5 / 2015-03-28
149 |
150 | * fixed; issue with long options overlapping arrow and clear icons, thanks [Rohit Kalkur](https://github.com/rovolution)
151 |
152 | ## v0.4.4 / 2015-03-26
153 |
154 | * fixed; error handling click events when the menu is closed, thanks [Ilya Petrov](https://github.com/muromec)
155 | * fixed; issue where options will not be filtered in certain conditions, thanks [G. Kay Lee](https://github.com/gsklee)
156 |
157 | ## v0.4.3 / 2015-03-25
158 |
159 | * added tests and updated dependencies
160 |
161 | ## v0.4.2 / 2015-03-23
162 |
163 | * added; ESLint and contributing guide
164 | * fixed; incorrect `classnames` variable assignement in window scope
165 | * fixed; all ESLint errors and warnings (except invalid JSX undefined/unused vars due to ESLint bug)
166 | * fixed; first option is now focused correctly, thanks [Eivind Siqveland Larsen](https://github.com/esiqveland)
167 |
168 | ## v0.4.1 / 2015-03-20
169 |
170 | * fixed; IE11 issue: clicking on scrollbar within menu no longer closes menu, thanks [Rohit Kalkur](https://github.com/rovolution)
171 |
172 | ## v0.4.0 / 2015-03-12
173 |
174 | * updated; compatible with React 0.13
175 |
176 | ## v0.3.5 / 2015-03-09
177 |
178 | * improved; less/no repaint on scroll for preformance wins, thanks [jsmunich](https://github.com/jsmunich)
179 | * added; `onBlur` and `onFocus` event handlers, thanks [Jonas Budelmann](https://github.com/cloudkite)
180 | * added; support for `inputProps` prop, passed to the `n.bottom||i.top-1)return!1;if(this.props.filterOption)return this.props.filterOption.call(this,e,s);var t=String(e.value),o=String(e.label);return this.props.ignoreCase&&(t=t.toLowerCase(),o=o.toLowerCase(),s=s.toLowerCase()),s&&"start"!==this.props.matchPos?"label"!==this.props.matchProp&&t.indexOf(s)>=0||"value"!==this.props.matchProp&&o.indexOf(s)>=0:"label"!==this.props.matchProp&&t.substr(0,s.length)===s||"value"!==this.props.matchProp&&o.substr(0,s.length)===s};return(e||[]).filter(o,this)},selectFocusedOption:function(){return this.props.allowCreate&&!this.state.focusedOption?this.selectValue(this.state.inputValue):this.state.focusedOption?this.selectValue(this.state.focusedOption):void 0},focusOption:function(e){this.setState({focusedOption:e})},focusNextOption:function(){this.focusAdjacentOption("next")},focusPreviousOption:function(){this.focusAdjacentOption("previous")},focusAdjacentOption:function(e){this._focusedOptionReveal=!0;var t=this.state.filteredOptions.filter(function(e){return!e.disabled});if(!this.state.isOpen)return void this.setState({isOpen:!0,inputValue:"",focusedOption:this.state.focusedOption||t["next"===e?0:t.length-1]},this._bindCloseMenuIfClickedOutside);if(t.length){for(var s=-1,i=0;i-1&&s0?t[s-1]:t[t.length-1]),this.setState({focusedOption:o})}},unfocusOption:function(e){this.state.focusedOption===e&&this.setState({focusedOption:null})},buildMenu:function(){var e=this.state.focusedOption?this.state.focusedOption.value:null,t=this.props.optionRenderer||function(e){return e.label};this.state.filteredOptions.length>0&&(e=null==e?this.state.filteredOptions[0]:e);var s=this.state.filteredOptions;if(this.props.allowCreate&&this.state.inputValue.trim()){var i=this.state.inputValue;s=s.slice();var n=this.props.newOptionCreator?this.props.newOptionCreator(i):{value:i,label:i,create:!0};s.unshift(n)}var p=Object.keys(s).map(function(i){var n=s[i],p=this.state.value===n.value,r=e===n.value,l=a({"Select-option":!0,"is-selected":p,"is-focused":r,"is-disabled":n.disabled}),u=r?"focused":null,c=this.focusOption.bind(this,n),h=this.unfocusOption.bind(this,n),d=this.selectValue.bind(this,n),f=o.createElement(this.props.optionComponent,{key:"option-"+n.value,className:l,renderFunc:t,mouseEnter:c,mouseLeave:h,mouseDown:d,click:d,addLabelText:this.props.addLabelText,option:n,ref:u});return f},this);if(p.length)return p;var r,l;return this.isLoading()?(l="Select-searching",r=this.props.searchingText):this.state.inputValue||!this.props.asyncOptions?(l="Select-noresults",r=this.props.noResultsText):(l="Select-search-prompt",r=this.props.searchPromptText),o.createElement("div",{className:l},r)},handleOptionLabelClick:function(e,t){this.props.onOptionLabelClick&&this.props.onOptionLabelClick(e,t)},isLoading:function(){return this.props.isLoading||this.state.isLoading},render:function(){var e=a("Select",this.props.className,{"is-multi":this.props.multi,"is-searchable":this.props.searchable,"is-open":this.state.isOpen,"is-focused":this.state.isFocused,"is-loading":this.isLoading(),"is-disabled":this.props.disabled,"has-value":this.state.value}),t=[];if(this.props.multi&&this.state.values.forEach(function(e){var s=this.handleOptionLabelClick.bind(this,e),i=this.removeValue.bind(this,e),n=o.createElement(this.props.valueComponent,{key:e.value,option:e,renderer:this.props.valueRenderer,optionLabelClick:!!this.props.onOptionLabelClick,onOptionLabelClick:s,onRemove:i,disabled:this.props.disabled});t.push(n)},this),!(this.state.inputValue||this.props.multi&&t.length)){var s=this.state.values[0]||null;if(this.props.valueRenderer&&this.state.values.length)t.push(o.createElement(p,{key:0,option:s,renderer:this.props.valueRenderer,disabled:this.props.disabled}));else{var r=o.createElement(this.props.singleValueComponent,{key:"placeholder",value:s,placeholder:this.state.placeholder});t.push(r)}}var l,u,c=this.isLoading()?o.createElement("span",{className:"Select-loading","aria-hidden":"true"}):null,h=this.props.clearable&&this.state.value&&!this.props.disabled?o.createElement("span",{className:"Select-clear",title:this.props.multi?this.props.clearAllText:this.props.clearValueText,"aria-label":this.props.multi?this.props.clearAllText:this.props.clearValueText,onMouseDown:this.clearValue,onTouchEnd:this.clearValue,onClick:this.clearValue,dangerouslySetInnerHTML:{__html:"×"}}):null;this.state.isOpen&&(u={ref:"menu",className:"Select-menu",onMouseDown:this.handleMouseDown},l=o.createElement("div",{ref:"selectMenuContainer",className:"Select-menu-outer"},o.createElement("div",u,this.buildMenu())));var d,f={ref:"input",className:"Select-input "+(this.props.inputProps.className||""),tabIndex:this.props.tabIndex||0,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur};for(var v in this.props.inputProps)this.props.inputProps.hasOwnProperty(v)&&"className"!==v&&(f[v]=this.props.inputProps[v]);return this.props.disabled?this.props.multi&&this.state.values.length||(d=o.createElement("div",{className:"Select-input"}," ")):d=this.props.searchable?o.createElement(n,i({value:this.state.inputValue,onChange:this.handleInputChange,minWidth:"5"},f)):o.createElement("div",f," "),o.createElement("div",{ref:"wrapper",className:e},o.createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:this.state.value,disabled:this.props.disabled}),o.createElement("div",{className:"Select-control",ref:"control",onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown,onTouchEnd:this.handleMouseDown},t,d,o.createElement("span",{className:"Select-arrow-zone",onMouseDown:this.handleMouseDownOnArrow}),o.createElement("span",{className:"Select-arrow",onMouseDown:this.handleMouseDownOnArrow}),c,h),l)}});t.exports=c}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Option":1,"./SingleValue":3,"./Value":4}],3:[function(e,t,s){(function(e){"use strict";var s="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,i="undefined"!=typeof window?window.classNames:"undefined"!=typeof e?e.classNames:null,o=s.createClass({displayName:"SingleValue",propTypes:{placeholder:s.PropTypes.string,value:s.PropTypes.object},render:function(){var e=i("Select-placeholder",this.props.value&&this.props.value.className);return s.createElement("div",{className:e,style:this.props.value&&this.props.value.style,title:this.props.value&&this.props.value.title},this.props.placeholder)}});t.exports=o}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],4:[function(e,t,s){(function(e){"use strict";var s="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,i="undefined"!=typeof window?window.classNames:"undefined"!=typeof e?e.classNames:null,o=s.createClass({displayName:"Value",propTypes:{disabled:s.PropTypes.bool,onOptionLabelClick:s.PropTypes.func,onRemove:s.PropTypes.func,option:s.PropTypes.object.isRequired,optionLabelClick:s.PropTypes.bool,renderer:s.PropTypes.func},blockEvent:function(e){e.stopPropagation()},handleOnRemove:function(e){this.props.disabled||this.props.onRemove(e)},render:function(){var e=this.props.option.label;return this.props.renderer&&(e=this.props.renderer(this.props.option)),this.props.onRemove||this.props.optionLabelClick?(this.props.optionLabelClick&&(e=s.createElement("a",{className:i("Select-item-label__a",this.props.option.className),onMouseDown:this.blockEvent,onTouchEnd:this.props.onOptionLabelClick,onClick:this.props.onOptionLabelClick,style:this.props.option.style,title:this.props.option.title},e)),s.createElement("div",{className:i("Select-item",this.props.option.className),style:this.props.option.style,title:this.props.option.title},s.createElement("span",{className:"Select-item-icon",onMouseDown:this.blockEvent,onClick:this.handleOnRemove,onTouchEnd:this.handleOnRemove},"×"),s.createElement("span",{className:"Select-item-label"},e))):s.createElement("div",{className:i("Select-value",this.props.option.className),style:this.props.option.style,title:this.props.option.title},e)}});t.exports=o}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[2])(2)});
--------------------------------------------------------------------------------
/src/Select.js:
--------------------------------------------------------------------------------
1 | /* disable some rules until we refactor more completely; fixing them now would
2 | cause conflicts with some open PRs unnecessarily. */
3 | /* eslint react/jsx-sort-prop-types: 0, react/sort-comp: 0, react/prop-types: 0 */
4 |
5 | var React = require('react');
6 | var Input = require('react-input-autosize');
7 | var classes = require('classnames');
8 | var Value = require('./Value');
9 | var SingleValue = require('./SingleValue');
10 | var Option = require('./Option');
11 |
12 | var requestId = 0;
13 |
14 | var Select = React.createClass({
15 |
16 | displayName: 'Select',
17 |
18 | propTypes: {
19 | addLabelText: React.PropTypes.string, // placeholder displayed when you want to add a label on a multi-value input
20 | allowCreate: React.PropTypes.bool, // whether to allow creation of new entries
21 | asyncOptions: React.PropTypes.func, // function to call to get options
22 | autoload: React.PropTypes.bool, // whether to auto-load the default async options set
23 | backspaceRemoves: React.PropTypes.bool, // whether backspace removes an item if there is no text input
24 | cacheAsyncResults: React.PropTypes.bool, // whether to allow cache
25 | className: React.PropTypes.string, // className for the outer element
26 | clearAllText: React.PropTypes.string, // title for the "clear" control when multi: true
27 | clearValueText: React.PropTypes.string, // title for the "clear" control
28 | clearable: React.PropTypes.bool, // should it be possible to reset value
29 | delimiter: React.PropTypes.string, // delimiter to use to join multiple values
30 | disabled: React.PropTypes.bool, // whether the Select is disabled or not
31 | filterOption: React.PropTypes.func, // method to filter a single option: function(option, filterString)
32 | filterOptions: React.PropTypes.func, // method to filter the options array: function([options], filterString, [values])
33 | ignoreCase: React.PropTypes.bool, // whether to perform case-insensitive filtering
34 | inputProps: React.PropTypes.object, // custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
35 | isLoading: React.PropTypes.bool, // whether the Select is loading externally or not (such as options being loaded)
36 | matchPos: React.PropTypes.string, // (any|start) match the start or entire string when filtering
37 | matchProp: React.PropTypes.string, // (any|label|value) which option property to filter on
38 | multi: React.PropTypes.bool, // multi-value input
39 | name: React.PropTypes.string, // field name, for hidden
746 | {noResultsText}
747 |
748 | );
749 | }
750 | },
751 |
752 | handleOptionLabelClick: function (value, event) {
753 | if (this.props.onOptionLabelClick) {
754 | this.props.onOptionLabelClick(value, event);
755 | }
756 | },
757 |
758 | isLoading: function() {
759 | return this.props.isLoading || this.state.isLoading;
760 | },
761 |
762 | render: function() {
763 | var selectClass = classes('Select', this.props.className, {
764 | 'is-multi': this.props.multi,
765 | 'is-searchable': this.props.searchable,
766 | 'is-open': this.state.isOpen,
767 | 'is-focused': this.state.isFocused,
768 | 'is-loading': this.isLoading(),
769 | 'is-disabled': this.props.disabled,
770 | 'has-value': this.state.value
771 | });
772 | var value = [];
773 | if (this.props.multi) {
774 | this.state.values.forEach(function(val) {
775 | var onOptionLabelClick = this.handleOptionLabelClick.bind(this, val);
776 | var onRemove = this.removeValue.bind(this, val);
777 | var valueComponent = React.createElement(this.props.valueComponent, {
778 | key: val.value,
779 | option: val,
780 | renderer: this.props.valueRenderer,
781 | optionLabelClick: !!this.props.onOptionLabelClick,
782 | onOptionLabelClick: onOptionLabelClick,
783 | onRemove: onRemove,
784 | disabled: this.props.disabled
785 | });
786 | value.push(valueComponent);
787 | }, this);
788 | }
789 |
790 | if (!this.state.inputValue && (!this.props.multi || !value.length)) {
791 | var val = this.state.values[0] || null;
792 | if (this.props.valueRenderer && !!this.state.values.length) {
793 | value.push(
821 |
{this.buildMenu()}
822 |
;
845 | }
846 | } else if (!this.props.multi || !this.state.values.length) {
847 | input =
;
848 | }
849 |
850 | return (
851 |
852 |
853 |
854 | {value}
855 | {input}
856 |
861 | {menu}
862 |