Update Custom Menu example to use isItemSelectable

Author: CMTegner

examples/custom-menu/app.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import DOM from 'react-dom'
 import Autocomplete from '../../lib/index'
-import { fakeRequest } from '../../lib/utils'
+import { fakeCategorizedRequest } from '../../lib/utils'
 
 class App extends React.Component {
 
@@ -13,7 +13,6 @@ class App extends React.Component {
       loading: false
     }
     this.requestTimer = null
-    this.renderItems = this.renderItems.bind(this)
   }
 
   render() {
@@ -22,29 +21,33 @@ class App extends React.Component {
         <h1>Custom Menu</h1>
         <p>
           While Autocomplete ships with a decent looking menu, you can control the
-          look as well as the rendering of it. In this case we put headers for each
-          letter of the alphabet.
+          look as well as the rendering of it. In this example we'll group the states
+          into the region where they belong.
         </p>
         <label htmlFor="states-autocomplete">Choose a state from the US</label>
         <Autocomplete
           value={this.state.value}
           inputProps={{ id: 'states-autocomplete' }}
-          wrapperStyle={{ position: 'relative', display: 'inline-block' }}
           items={this.state.unitedStates}
           getItemValue={(item) => item.name}
           onSelect={(value, state) => this.setState({ value, unitedStates: [state] }) }
           onChange={(event, value) => {
             this.setState({ value, loading: true, unitedStates: [] })
             clearTimeout(this.requestTimer)
-            this.requestTimer = fakeRequest(value, (items) => {
+            this.requestTimer = fakeCategorizedRequest(value, (items) => {
               this.setState({ unitedStates: items, loading: false })
             })
           }}
           renderItem={(item, isHighlighted) => (
-            <div
-              className={`item ${isHighlighted ? 'item-highlighted' : ''}`}
-              key={item.abbr}
-            >{item.name}</div>
+            item.header ?
+              <div
+                className="item item-header"
+                key={item.header}
+              >{item.header}</div>
+              : <div
+                className={`item ${isHighlighted ? 'item-highlighted' : ''}`}
+                key={item.abbr}
+              >{item.name}</div>
           )}
           renderMenu={(items, value) => (
             <div className="menu">
@@ -54,25 +57,14 @@ class App extends React.Component {
                 <div className="item">Loading...</div>
               ) : items.length === 0 ? (
                 <div className="item">No matches for {value}</div>
-              ) : this.renderItems(items)}
+              ) : items}
             </div>
           )}
+          isItemSelectable={(item) => !item.header}
         />
       </div>
     )
   }
-
-  renderItems(items) {
-    return items.map((item, index) => {
-      const text = item.props.children
-      if (index === 0 || items[index - 1].props.children.charAt(0) !== text.charAt(0)) {
-        return [<div className="item item-header">{text.charAt(0)}</div>, item]
-      }
-      else {
-        return item
-      }
-    })
-  }
 }
 
 DOM.render(<App/>, document.getElementById('container'))