feat(pickState): only pick relevant state (#183)

Make `toggleMenu` and friends more user-friendly by only picking out
state that is relevant to downshift, allowing users to use them as event
event handlers. Closes #182.

src/__tests__/utils.pick-state.js

@@ -0,0 +1,16 @@
+import {pickState} from '../utils'
+
+test('pickState only picks state that downshift cares about', () => {
+  const otherStateToSet = {
+    isOpen: true,
+    foo: 0,
+  }
+  const result = pickState(otherStateToSet)
+  const expected = {isOpen: true}
+  const resultKeys = Object.keys(result)
+  const expectedKeys = Object.keys(expected) 
+  resultKeys.sort()
+  expectedKeys.sort()
+  expect(result).toEqual(expected)
+  expect(resultKeys).toEqual(expectedKeys)
+})

src/downshift.js

@@ -18,6 +18,7 @@ import {
   getElementProps,
   noop,
   requiredProp,
+  pickState,
 } from './utils'
 
 class Downshift extends Component {
@@ -154,6 +155,7 @@ class Downshift extends Component {
     highlightedIndex = this.props.defaultHighlightedIndex,
     otherStateToSet = {},
   ) => {
+    otherStateToSet = pickState(otherStateToSet)
     this.internalSetState({highlightedIndex, ...otherStateToSet}, () => {
       const node = this.getItemNodeFromIndex(this.getState().highlightedIndex)
       const rootNode = this._rootNode
@@ -213,6 +215,7 @@ class Downshift extends Component {
   }
 
   selectItem = (item, otherStateToSet, cb) => {
+    otherStateToSet = pickState(otherStateToSet)
     this.internalSetState(
       {
         isOpen: false,
@@ -596,6 +599,7 @@ class Downshift extends Component {
   //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ITEM
 
   reset = (otherStateToSet = {}, cb) => {
+    otherStateToSet = pickState(otherStateToSet)
     this.internalSetState(
       ({selectedItem}) => ({
         isOpen: false,
@@ -608,6 +612,7 @@ class Downshift extends Component {
   }
 
   toggleMenu = (otherStateToSet = {}, cb) => {
+    otherStateToSet = pickState(otherStateToSet)
     this.internalSetState(
       ({isOpen}) => {
         return {isOpen: !isOpen, ...otherStateToSet}

src/utils.js

@@ -229,6 +229,27 @@ function requiredProp(fnName, propName) {
   throw new Error(`The property "${propName}" is required in "${fnName}"`)
 }
 
+const stateKeys = [
+  'highlightedIndex',
+  'inputValue',
+  'isOpen',
+  'selectedItem',
+  'type',
+]
+/**
+ * @param {Object} state The state object
+ * @return {Object} State that is relevant to downshift
+ */
+function pickState(state = {}) {
+  const result = {}
+  stateKeys.forEach((k) => {
+    if (state.hasOwnProperty(k)) {
+      result[k] = state[k]
+    }
+  })
+  return result
+}
+
 export {
   cbToCb,
   findParent,
@@ -245,4 +266,5 @@ export {
   noop,
   requiredProp,
   setIdCounter,
+  pickState,
 }