diff --git a/examples/src/app.js b/examples/src/app.js index bfda0ce816..bb3da77f19 100644 --- a/examples/src/app.js +++ b/examples/src/app.js @@ -9,6 +9,7 @@ import GithubUsers from './components/GithubUsers'; import CustomComponents from './components/CustomComponents'; import CustomRender from './components/CustomRender'; import Multiselect from './components/Multiselect'; +import SearchField from './components/SearchField'; import NumericSelect from './components/NumericSelect'; import Virtualized from './components/Virtualized'; import States from './components/States'; @@ -23,6 +24,7 @@ ReactDOM.render( + {/* */} diff --git a/examples/src/components/SearchField.js b/examples/src/components/SearchField.js new file mode 100644 index 0000000000..ff530804cf --- /dev/null +++ b/examples/src/components/SearchField.js @@ -0,0 +1,68 @@ +import React from 'react'; +import Select from 'react-select'; + +const FLAVOURS = [ + { label: 'Chocolate', value: 'chocolate' }, + { label: 'Vanilla', value: 'vanilla' }, + { label: 'Strawberry', value: 'strawberry' }, + { label: 'Caramel', value: 'caramel' }, + { label: 'Cookies and Cream', value: 'cookiescream' }, + { label: 'Peppermint', value: 'peppermint' }, +]; + +const WHY_WOULD_YOU = [ + { label: 'Chocolate (are you crazy?)', value: 'chocolate', disabled: true }, +].concat(FLAVOURS.slice(1)); + +var SearchField = React.createClass({ + displayName: 'SearchField', + propTypes: { + label: React.PropTypes.string, + }, + getInitialState () { + return { + disabled: false, + crazy: false, + options: FLAVOURS, + value: [], + }; + }, + handleSelectChange (value) { + console.log('You\'ve selected:', value); + this.setState({ value }); + }, + toggleDisabled (e) { + this.setState({ disabled: e.target.checked }); + }, + toggleChocolate (e) { + let crazy = e.target.checked; + this.setState({ + crazy: crazy, + options: crazy ? WHY_WOULD_YOU : FLAVOURS, + }); + }, + handleValueSubmit () { + console.log('Submitted value: ', this.state.value, '. Do something interesting with it ...'); + }, + render () { + return ( +
+

{this.props.label}

+ + Disable the control + + +
+ + ); + } +}); + +module.exports = SearchField; diff --git a/less/select.less b/less/select.less index 7e3a488b13..c512e0bc8d 100644 --- a/less/select.less +++ b/less/select.less @@ -48,7 +48,7 @@ @select-clear-size: floor((@select-input-height / 2)); @select-clear-color: #999; @select-clear-hover-color: #D0021B; // red -@select-clear-width: (@select-input-internal-height / 2); +@select-clear-width: 25px; // arrow indicator @select-arrow-color: #999; diff --git a/src/Select.js b/src/Select.js index 4f4f3a1cfa..f1a2ff4e84 100644 --- a/src/Select.js +++ b/src/Select.js @@ -55,6 +55,7 @@ const Select = React.createClass({ menuContainerStyle: React.PropTypes.object, // optional style to apply to the menu container menuRenderer: React.PropTypes.func, // renders a custom menu with options menuStyle: React.PropTypes.object, // optional style to apply to the menu + minCharsToOpen: React.PropTypes.number, multi: React.PropTypes.bool, // multi-value input name: React.PropTypes.string, // generates a hidden tag with this field name for html forms newOptionCreator: React.PropTypes.func, // factory to create new options when allowCreate set @@ -68,6 +69,7 @@ const Select = React.createClass({ onMenuScrollToBottom: React.PropTypes.func, // fires when the menu is scrolled to the bottom; can be used to paginate options onOpen: React.PropTypes.func, // fires when the menu is opened onValueClick: React.PropTypes.func, // onClick handler for value labels: function (value, event) {} + onValueSubmit: React.PropTypes.func, // handler for submitting value on enter key press: function () {} openAfterFocus: React.PropTypes.bool, // boolean to enable opening dropdown when focused openOnFocus: React.PropTypes.bool, // always open options menu on focus optionClassName: React.PropTypes.string, // additional class(es) to apply to the