feat(select input): added keybinds

blockchain · Jul 17, 2018 · fb515dd · fb515dd
1 parent b55180d
commit fb515dd
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 9 deletions.
diff --git a/packages/blockchain-info-components/src/Form/SelectInput/index.js b/packages/blockchain-info-components/src/Form/SelectInput/index.js
@@ -11,12 +11,15 @@ class SelectInputContainer extends React.PureComponent {
     this.state = {
       expanded: this.props.opened,
       search: '',
-      value: this.props.value
+      value: this.props.value,
+      hovered: -1
     }
     this.handleBlur = this.handleBlur.bind(this)
     this.handleChange = this.handleChange.bind(this)
     this.handleClick = this.handleClick.bind(this)
     this.handleFocus = this.handleFocus.bind(this)
+    this.handleMouseEnter = this.handleMouseEnter.bind(this)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -33,7 +36,7 @@ class SelectInputContainer extends React.PureComponent {
   }
 
   handleChange (event) {
-    this.setState({ search: event.target.value })
+    this.setState({ search: event.target.value, hovered: -1 })
   }
 
   handleBlur () {
@@ -53,6 +56,27 @@ class SelectInputContainer extends React.PureComponent {
     }
   }
 
+  handleMouseEnter (index) {
+    this.setState({ hovered: index })
+  }
+
+  handleKeyDown (e, max, item) {
+    switch (e.key) {
+      case 'ArrowUp':
+        this.setState({
+          hovered: (this.state.hovered === 0 ? 0 : this.state.hovered - 1)
+        })
+        break
+      case 'ArrowDown':
+        this.setState({
+          hovered: (this.state.hovered === max ? max : this.state.hovered + 1)
+        })
+        break
+      case 'Enter':
+        this.handleClick(item)
+    }
+  }
+
   handleClickOutside () {
     this.setState({ expanded: false, search: '' })
   }
@@ -97,6 +121,9 @@ class SelectInputContainer extends React.PureComponent {
         handleChange={this.handleChange}
         handleClick={this.handleClick}
         handleFocus={this.handleFocus}
+        handleMouseEnter={this.handleMouseEnter}
+        onKeyDown={this.handleKeyDown}
+        hovered={this.state.hovered}
         searchEnabled={this.props.searchEnabled}
         {...rest}
       />

diff --git a/packages/blockchain-info-components/src/Form/SelectInput/template.js b/packages/blockchain-info-components/src/Form/SelectInput/template.js
@@ -116,11 +116,9 @@ const DefaultItem = styled.div`
   color: ${props => props.theme['gray-4']};
   cursor: pointer;
 
-  &:hover {
-    color: ${props => props.theme['gray-4']};
-    background-color: ${props => props.theme['gray-1']};
-  }
+  ${props => props.hovered ? 'background-color: ' + props.theme['gray-1'] : ''};
 `
+
 const Arrow = styled(Icon)`
   position: absolute;
   top: 15px;
@@ -143,7 +141,10 @@ const SelectInput = props => {
     handleChange,
     handleClick,
     handleFocus,
+    handleMouseEnter,
+    onKeyDown,
     hideArrow,
+    hovered,
     templateDisplay,
     templateHeader,
     templateItem,
@@ -154,7 +155,7 @@ const SelectInput = props => {
   const showArrow = !hideArrow
 
   return (
-    <SelectBoxInput>
+    <SelectBoxInput onKeyDown={(e) => onKeyDown(e, items.length, items[hovered])} tabIndex='0'>
       {!expanded || !searchEnabled ? (
         <Display
           onClick={handleFocus}
@@ -191,11 +192,11 @@ const SelectInput = props => {
                 )}
               </Header>
             ) : (
-              <Item key={index} onMouseDown={() => handleClick(item)}>
+              <Item key={index} onMouseDown={() => handleClick(item)} onMouseEnter={() => handleMouseEnter(index)} >
                 {templateItem ? (
                   templateItem(item)
                 ) : (
-                  <DefaultItem fontSize={fontSize}>{item.text}</DefaultItem>
+                  <DefaultItem fontSize={fontSize} hovered={(hovered === index)}>{item.text}</DefaultItem>
                 )}
               </Item>
             )