Add support to keyboard navigation in Dropdowns

The user can navigate through the Themes and Languages selects using the
keyboard arrow down and up keys.

components/Dropdown.js

@@ -1,134 +1,155 @@
 import React from 'react'
-import enhanceWithClickOutside from 'react-click-outside'
+import Downshift from 'downshift'
 import ArrowDown from './svg/Arrowdown'
-import Checkmark from './svg/Checkmark'
+import CheckMark from './svg/Checkmark'
 import { COLORS } from '../lib/constants'
 
-class Dropdown extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      isVisible: false
-    }
-    this.select = this.select.bind(this)
-    this.toggle = this.toggle.bind(this)
+const Dropdown = ({ list, selected, onChange }) => {
+  return (
+    <Downshift
+      render={renderDropdown(list)}
+      selectedItem={selected}
+      defaultHighlightedIndex={list.findIndex(it => it === selected)}
+      itemToString={item => item.name}
+      onChange={onChange}
+      stateReducer={reduceState(list)}
+    />
+  )
 }
 
-  select(item) {
-    if (this.props.selected !== item) {
-      this.props.onChange(item)
+const reduceState = list => (state, changes) => {
+  switch (changes.type) {
+    case Downshift.stateChangeTypes.keyDownArrowUp:
+    case Downshift.stateChangeTypes.keyDownArrowDown:
+      return { ...changes, selectedItem: list[changes.highlightedIndex] }
+    default:
+      return changes
   }
 }
 
-  toggle() {
-    this.setState({ isVisible: !this.state.isVisible })
-  }
-
-  handleClickOutside() {
-    this.setState({ isVisible: false })
+const renderDropdown = list => ({
+  isOpen,
+  highlightedIndex,
+  setHighlightedIndex,
+  selectHighlightedItem,
+  selectedItem,
+  getRootProps,
+  getButtonProps,
+  getInputProps,
+  getItemProps
+}) => {
+  return (
+    <DropdownContainer {...getRootProps({ refKey: 'innerRef' })} minWidth={minWidth(list)}>
+      <SelectedItem {...getButtonProps()} {...getInputProps()} isOpen={isOpen}>
+        {selectedItem.name}
+      </SelectedItem>
+      {isOpen ? (
+        <ListItems>
+          {list.map((item, index) => (
+            <ListItem
+              key={index}
+              {...getItemProps({
+                item,
+                isSelected: selectedItem === item,
+                isHighlighted: highlightedIndex === index
+              })}
+            >
+              {item.name}
+            </ListItem>
+          ))}
+        </ListItems>
+      ) : null}
+    </DropdownContainer>
+  )
 }
 
-  renderListItems() {
-    return this.props.list.map((item, i) => (
-      <div className="dropdown-list-item" key={i} onClick={this.select.bind(null, item)}>
-        <span>{item.name}</span>
-        {this.props.selected === item ? <Checkmark /> : null}
+const DropdownContainer = ({ children, innerRef, minWidth, ...rest }) => {
+  return (
+    <div {...rest} ref={innerRef} className="dropdown-container">
+      {children}
       <style jsx>{`
-          .dropdown-list-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            background: ${COLORS.BLACK};
-            user-select: none;
-            padding: 8px 16px;
-            border-bottom: 1px solid ${COLORS.SECONDARY};
-          }
-
-          .dropdown-list-item:hover {
-            background: ${COLORS.HOVER};
-          }
-
-          .dropdown-list-item:last-of-type {
-            border-bottom: none;
-            border-radius: 0px 0px 2px 2px;
+        .dropdown-container {
+          min-width: ${minWidth}px;
+          cursor: pointer;
         }
       `}</style>
     </div>
-    ))
-  }
-
-  render() {
-    // find longest list value in number of characters
-    const MIN_WIDTH = this.props.list.reduce(
-      (max, { name }) => (name && name.length > max ? name.length : max),
-      0
   )
+}
 
+const SelectedItem = ({ children, isOpen, ...rest }) => {
   return (
-      <div
-        className="dropdown-container"
-        style={{ minWidth: MIN_WIDTH * 14 }}
-        onClick={this.toggle}
-      >
-        <div className={`dropdown-display ${this.state.isVisible ? 'is-visible' : ''}`}>
-          <span>{this.props.selected ? this.props.selected.name : ''}</span>
-          <div className="arrow-down">
+    <span {...rest} tabIndex="0" className="dropdown-display">
+      <span className="dropdown-display-text">{children}</span>
+      <div className={`dropdown-arrow ${isOpen ? 'is-reverse' : ''}`}>
         <ArrowDown />
       </div>
-        </div>
-        <div className="dropdown-list">{this.renderListItems()}</div>
       <style jsx>{`
-          .arrow-down {
-            position: absolute;
-            right: 16px;
-          }
-
-          .is-visible > .arrow-down {
-            transform: rotate(180deg);
-          }
-
-          .is-visible {
-            border-radius: 3px 3px 0px 0px !important;
-          }
-
-          .dropdown-container {
-            height: 100%;
-            cursor: pointer;
-          }
-
         .dropdown-display {
+          display: flex;
+          align-items: center;
           height: 100%;
           border: 1px solid ${COLORS.SECONDARY};
           border-radius: 3px;
-            user-select: none;
           padding: 8px 16px;
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            position: relative;
-            z-index: 1;
         }
-
-          .dropdown-display:hover {
-            background: ${COLORS.HOVER};
+        .dropdown-display-text {
+          flex-grow: 1;
         }
-
-          .is-visible + .dropdown-list {
-            display: block;
+        .dropdown-arrow.is-reverse {
+          transform: rotate(180deg);
+        }
+      `}</style>
+    </span>
+  )
 }
 
+const ListItems = ({ children }) => {
+  return (
+    <ul className="dropdown-list">
+      {children}
+      <style jsx>{`
         .dropdown-list {
-            display: none;
           margin-top: -1px;
           border: 1px solid ${COLORS.SECONDARY};
-            border-radius: 0px 0px 3px 3px;
+          border-radius: 0 0 3px 3px;
           max-height: 350px;
           overflow-y: scroll;
         }
       `}</style>
-      </div>
+    </ul>
   )
 }
+
+const ListItem = ({ children, isHighlighted, isSelected, ...rest }) => {
+  return (
+    <li {...rest} className="dropdown-list-item">
+      <span className="dropdown-list-item-text">{children}</span>
+      {isSelected ? <CheckMark /> : null}
+      <style jsx>{`
+        .dropdown-list-item {
+          display: flex;
+          align-items: center;
+          background: ${isHighlighted ? COLORS.HOVER : COLORS.BLACK};
+          padding: 8px 16px;
+          border-bottom: 1px solid ${COLORS.SECONDARY};
+        }
+        .dropdown-list-item:hover {
+          background: ${COLORS.HOVER};
+        }
+        .dropdown-list-item-text {
+          flex-grow: 1;
+        }
+      `}</style>
+    </li>
+  )
+}
+
+function minWidth(list) {
+  return list.reduce((max, { name }) => {
+    const wordSize = name.length * 12
+    return wordSize > max ? wordSize : max
+  }, 0)
 }
 
-export default enhanceWithClickOutside(Dropdown)
+export default Dropdown

package.json

@@ -23,6 +23,7 @@
     "codemirror-graphql": "^0.6.12",
     "codemirror-mode-elixir": "^1.1.1",
     "dom-to-image": "^2.5.2",
+    "downshift": "^1.28.0",
     "dropperx": "^0.1.0",
     "express": "^4.16.2",
     "form-data": "^2.2.0",