diff --git a/README.md b/README.md index 34c096ca2b..ca854f320a 100644 --- a/README.md +++ b/README.md @@ -223,6 +223,7 @@ Property | Type | Description `newOptionCreator` | function | Factory to create new option. Expected signature: `({ label: string, labelKey: string, valueKey: string }): Object` | `onNewOptionClick` | function | new option click handler, it calls when new option has been selected. `function(option) {}` | `shouldKeyDownEventCreateNewOption` | function | Decides if a keyDown event (eg its `keyCode`) should result in the creation of a new option. ENTER, TAB and comma keys create new options by default. Expected signature: `({ keyCode: number }): boolean` | +`newOptionPosition` | string | Set the position of the new option. Expected value: 'bottom' or 'top' (default: 'top') | `promptTextCreator` | function | Factory for overriding default option creator prompt label. By default it will read 'Create option "{label}"'. Expected signature: `(label: String): String` | ### Combining Async and Creatable diff --git a/src/Creatable.js b/src/Creatable.js index a523ac80dd..1c1f28b34f 100644 --- a/src/Creatable.js +++ b/src/Creatable.js @@ -31,7 +31,11 @@ const Creatable = React.createClass({ // ({ label: string, labelKey: string, valueKey: string }): Object newOptionCreator: React.PropTypes.func, - // input change handler: function (inputValue) {} + // Set the position of the new option. + // Expected value: 'bottom' or 'top' + newOptionPosition: React.PropTypes.string, + + // input change handler: function (inputValue) {} onInputChange: React.PropTypes.func, // input keyDown handler: function (event) {} @@ -67,6 +71,7 @@ const Creatable = React.createClass({ isValidNewOption, menuRenderer: defaultMenuRenderer, newOptionCreator, + newOptionPosition: 'top', promptTextCreator, shouldKeyDownEventCreateNewOption, }; @@ -99,7 +104,7 @@ const Creatable = React.createClass({ }, filterOptions (...params) { - const { filterOptions, isValidNewOption, options, promptTextCreator } = this.props; + const { filterOptions, isValidNewOption, newOptionPosition, options, promptTextCreator } = this.props; // TRICKY Check currently selected options as well. // Don't display a create-prompt for a value that's selected. @@ -133,7 +138,11 @@ const Creatable = React.createClass({ valueKey: this.valueKey }); - filteredOptions.unshift(this._createPlaceholderOption); + if (newOptionPosition === 'top') { + filteredOptions.unshift(this._createPlaceholderOption); + } else if (newOptionPosition === 'bottom') { + filteredOptions.push(this._createPlaceholderOption); + } } }