Merge pull request #119 from hyjeko/onSelect-new-property

Add new property onSelect

README.md

@@ -56,7 +56,8 @@ This component requires 3 dependencies :
 | keepSearchOnSelect | bool | false | Prevents the autocomplete field's value to be reset after each selection.|
 | disabled | bool | false | Include this property to disable superSelectField.|
 | value | null, object, object[] | null | Selected value(s).<br>/!\ REQUIRED: each object must expose a 'value' property. |
-| onChange | function | () => {} | Triggers when selecting/unselecting an option from the Menu.<br>signature: (selectedValues, name) with `selectedValues` array of selected values based on selected nodes' value property, and `name` the value of the superSelectField instance's name property |
+| onChange | function | () => {} | Triggers when closing the menu. Use this if you do not want to update your component state with each selection and only on menu close. <br>signature: (selectedValues, name) with `selectedValues` array of selected values based on selected nodes' value property, and `name` the value of the superSelectField instance's name property |
+| onSelect | function | () => {} | Triggers when selecting an item in the menu. Use this to update your componenet state with each selection from the menu (while still open). <br>signature: (selectedValues, name) with `selectedValues` array of selected values based on selected nodes' value property, and `name` the value of the superSelectField instance's name property |
 | onMenuOpen | function | () => {} | Triggers when opening the Menu. |
 | onAutoCompleteTyping | function | () => {} | Exposes the word typed in AutoComplete. Useful for triggering onType API requests. |
 | children | any | [] | Datasource is an array of any type of nodes, styled at your convenience.<br>/!\ REQUIRED: each node must expose a `value` property. This value property will be used by default for both option's value and label.<br>A `label` property can be provided to specify a different value than `value`. |

src/SuperSelectField.js

@@ -78,6 +78,11 @@ class SelectField extends Component {
     })
   }
 
+  getSelected = () => {
+    const {onSelect, name} = this.props;
+    onSelect(this.state.selectedItems, name);
+  }
+
   openMenu() {
     if (!this.state.isOpen) this.props.onMenuOpen()
     if (this.state.itemsLength || this.props.showAutocompleteThreshold === 'always') this.setState({ isOpen: true }, () => this.focusTextField())
@@ -146,7 +151,7 @@ class SelectField extends Component {
       const updatedValues = selectedItemExists
         ? selectedItems.filter(obj => !areEqual(obj.value, selectedItem.value))
         : selectedItems.concat(selectedItem)
-      this.setState({ selectedItems: updatedValues })
+      this.setState({ selectedItems: updatedValues }, this.getSelected())
       this.clearTextField(() => this.focusTextField())
     }
     else {

src/defaultProps.js

@@ -48,6 +48,7 @@ export const selectFieldDefaultProps = {
   },
   value: null,
   onChange: () => {},
+  onSelect: () => {},
   onMenuOpen: () => {},
   onAutoCompleteTyping: () => {},
   children: []

src/types/index.js

@@ -144,6 +144,7 @@ export const selectFieldTypes = {
   keepSearchOnSelect: bool,
   disabled: bool,
   onChange: func,
+  onSelect: func,
   onMenuOpen: func,
   onAutoCompleteTyping: func
 }