From d46f9607cf611bfa7f98b50591cf8300ee0327d1 Mon Sep 17 00:00:00 2001 From: Chan Lee Siong Date: Fri, 11 Nov 2016 12:29:51 +0800 Subject: [PATCH] Add onNewOptionClick handler This is useful when we want to customize the click action of the new option instead of creating the option immediately. --- README.md | 1 + src/Creatable.js | 12 ++++++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 164cf74beb..34c096ca2b 100644 --- a/README.md +++ b/README.md @@ -221,6 +221,7 @@ Property | Type | Description `isOptionUnique` | function | Searches for any matching option within the set of options. This function prevents duplicate options from being created. By default this is a basic, case-sensitive comparison of label and value. Expected signature: `({ option: Object, options: Array, labelKey: string, valueKey: string }): boolean` | `isValidNewOption` | function | Determines if the current input text represents a valid option. By default any non-empty string will be considered valid. Expected signature: `({ label: string }): boolean` | `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` | `promptTextCreator` | function | Factory for overriding default option creator prompt label. By default it will read 'Create option "{label}"'. Expected signature: `(label: String): String` | diff --git a/src/Creatable.js b/src/Creatable.js index 9d2ec905c7..f80ebb21fe 100644 --- a/src/Creatable.js +++ b/src/Creatable.js @@ -34,6 +34,9 @@ const Creatable = React.createClass({ // input keyDown handler: function (event) {} onInputKeyDown: React.PropTypes.func, + // new option click handler: function (option) {} + onNewOptionClick: React.PropTypes.func, + // See Select.propTypes.options options: React.PropTypes.array, @@ -70,6 +73,7 @@ const Creatable = React.createClass({ const { isValidNewOption, newOptionCreator, + onNewOptionClick, options = [], shouldKeyDownEventCreateNewOption } = this.props; @@ -80,9 +84,13 @@ const Creatable = React.createClass({ // Don't add the same option twice. if (isOptionUnique) { - options.unshift(option); + if (onNewOptionClick) { + onNewOptionClick(option); + } else { + options.unshift(option); - this.select.selectValue(option); + this.select.selectValue(option); + } } } },