ListBox item is now an object, not string

There are few reasons behind this change, so here they are:

 * We are about to replace CodeMirror with Ace, and there we have a
   different set of supported syntaxes. Due to internals, it would be
   easiery for us to maintain syntaxes mode names on server side instead
   of syntaxes human names (e.g. c_cpp instead of "C and C++"). Since
   we want to separate enum value from its representational name,
   ListBox component is ought to separate these concepts.

 * ListBox is designed as a replacement for standard HTML <select> tag
   and the latter separates the value it will send as selected from the
   value it shows on the page. So why don't we?

 * The change makes component more general, which is one step closer to
   make it independent library.

The important note here is that it maintains both user interfaces, just
like <select> tag and one can pass either an array of strings or an
array of objects (with "name" and "value" props).

Author: ikalnytskyi

src/components/ListBox.jsx

@@ -20,19 +20,21 @@ class ListBox extends React.Component {
     // If selected item is not a part of new items, aggressively fallback to
     // first item from the list. We're doing it to be protected from cases
     // when nothing is selected.
-    if (!selected || !nextProps.items.contains(selected)) {
+    if (!selected || !nextProps.items.find(item => item.value === selected)) {
       selected = nextProps.items.get(0);
+      if (!selected) return;
+      selected = selected.value;
       nextProps.onClick(selected);
     }
 
     this.setState({ selected });
   }
 
   onClick(e) {
-    const { item } = e.target.dataset;
+    const { value } = e.target.dataset;
 
-    this.setState({ selected: item });
-    this.props.onClick(item);
+    this.setState({ selected: value });
+    this.props.onClick(value);
   }
 
   render() {
@@ -48,11 +50,11 @@ class ListBox extends React.Component {
           {items.size ? null : <li className="new-snippet-lang-empty">No results found</li>}
           {items.map(item => (
             <li
-              className={`new-snippet-lang-item ${item === selected ? 'active' : ''}`}
-              data-item={item}
-              key={item}
+              className={`new-snippet-lang-item ${item.value === selected ? 'active' : ''}`}
+              data-value={item.value}
+              key={item.value}
             >
-              {item}
+              {item.name}
             </li>
           ))}
         </ul>

src/components/ListBoxWithSearch.jsx

@@ -20,11 +20,19 @@ class ListBoxWithSearch extends React.PureComponent {
     const { searchQuery } = this.state;
     let { items } = this.props;
 
+    // Normalize items arrays so each item is always an object.
+    items = items.map((item) => {
+      if (item !== Object(item)) {
+        return { name: item, value: item };
+      }
+      return item;
+    });
+
     // Filter out only those items that match search query. If no query is
     // set, do nothing and use the entire set.
     if (searchQuery) {
       const regExp = new RegExp(regExpEscape(searchQuery), 'gi');
-      items = items.filter(item => item.match(regExp));
+      items = items.filter(item => item.name.match(regExp));
     }
 
     return (