add first draft of #dropdown search by keydown

dnbexperience · Apr 9, 2019 · 0453d26 · 0453d26
1 parent 70f9f2f
commit 0453d26
Show file tree

Hide file tree

Showing 4 changed files with 191 additions and 7 deletions.
diff --git a/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js b/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js
@@ -7,6 +7,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import keycode from 'keycode'
+// import * as bodyScrollLock from 'body-scroll-lock'
 import {
   registerElement,
   validateDOMAttributes,
@@ -18,6 +19,11 @@ import Icon from '../icon-primary/IconPrimary'
 import FormLabel from '../form-label/FormLabel'
 import FormStatus from '../form-status/FormStatus'
 
+// const { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } =
+// bodyScrollLock && bodyScrollLock.default
+//   ? bodyScrollLock.default
+//   : bodyScrollLock
+
 const renderProps = {
   on_show: null,
   on_hide: null,
@@ -35,6 +41,7 @@ export const propTypes = {
   status: PropTypes.string,
   status_state: PropTypes.string,
   status_animation: PropTypes.string,
+  scrollable: PropTypes.bool,
   no_animation: PropTypes.bool,
   data: PropTypes.oneOfType([
     PropTypes.string,
@@ -56,7 +63,7 @@ export const propTypes = {
   disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   class: PropTypes.string,
 
-  // React props
+  // React
   className: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 
@@ -79,6 +86,7 @@ export const defaultProps = {
   status: null,
   status_state: 'error',
   status_animation: null,
+  scrollable: false,
   no_animation: false,
   data: null,
   selected_item: 0,
@@ -116,7 +124,16 @@ export default class Dropdown extends Component {
     if (dataItem.selected_value) return dataItem.selected_value
     if (dataItem.content)
       return Array.isArray(dataItem.content)
-        ? dataItem.content.join(' ')
+        ? dataItem.content
+            .reduce((acc, cur) => {
+              // remove only numbers
+              const found = cur && cur.match(/[0-9.,-\s]+/)
+              if (!(found && found[0].length === cur.length)) {
+                acc.push(cur)
+              }
+              return acc
+            }, [])
+            .join(' ')
         : dataItem.content
     if (typeof dataItem === 'string') return dataItem
     return ''
@@ -163,6 +180,7 @@ export default class Dropdown extends Component {
       data: Dropdown.getData(props)
     }
 
+    this._refUl = React.createRef()
     this._refInput = React.createRef()
     this._refButton = React.createRef()
   }
@@ -214,6 +232,45 @@ export default class Dropdown extends Component {
     })
   }
 
+  findItemByValue(value) {
+    const itemNumberFound = this.state.data
+      .slice(0)
+      .reduce((acc, itemData, i, arr) => {
+        const str = Dropdown.parseContentTitle(itemData)
+        if (str) {
+          const found = new RegExp(`^${value}`, 'i').test(str)
+          if (found) {
+            arr.splice(1)
+            return i
+          }
+        }
+        return -1
+      }, -1)
+    if (itemNumberFound > -1) {
+      return this._refUl.current.querySelector(
+        `li:nth-of-type(${itemNumberFound + 1})`
+      )
+    }
+
+    return null
+  }
+
+  scrollToItem(liElement) {
+    if (!liElement) {
+      return
+    }
+    try {
+      const top = liElement.offsetTop
+      liElement.parentNode.scrollTo({
+        top,
+        behavior: 'smooth'
+      })
+      liElement.classList.add('dnb-dropdown__option--current')
+    } catch (e) {
+      console.log('Dropdown could not scroll into element:', e)
+    }
+  }
+
   onFocusHandler = () => {
     if (!this.state.opened) {
       this.setState({
@@ -236,7 +293,6 @@ export default class Dropdown extends Component {
     })
     this.setHidden()
   }
-
   onMouseDownHandler = () => {
     if (this.state.opened) {
       this.onBlurHandler()
@@ -272,6 +328,12 @@ export default class Dropdown extends Component {
         }
         e.preventDefault()
         break
+
+      default:
+        if (this._refUl.current) {
+          this.scrollToItem(this.findItemByValue(keycode(e)))
+        }
+        break
     }
 
     if (selected_item < 0) {
@@ -323,6 +385,7 @@ export default class Dropdown extends Component {
       status,
       status_state,
       status_animation,
+      scrollable,
       no_animation,
       className,
       class: _className,
@@ -346,6 +409,7 @@ export default class Dropdown extends Component {
     const classes = classnames(
       'dnb-dropdown',
       icon_position && `dnb-dropdown--icon-position-${icon_position}`,
+      scrollable && 'dnb-dropdown--scroll',
       opened && 'dnb-dropdown--opened',
       hidden && 'dnb-dropdown--hidden',
       showStatus && 'dnb-dropdown__form-status',
@@ -395,7 +459,8 @@ export default class Dropdown extends Component {
       role: 'listbox',
       tabIndex: '-1',
       ['aria-activedescendant']: `option-${id}-${selected_item}`,
-      ['aria-labelledby']: id
+      ['aria-labelledby']: id,
+      ref: this._refUl
     }
 
     // also used for code markup simulation

diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -50,6 +50,7 @@ exports[`Dropdown component have to match snapshot 1`] = `
   on_show={[Function]}
   on_state_update={[Function]}
   opened="opened"
+  scrollable={true}
   selected_item={2}
   status="status"
   status_animation="status_animation"
@@ -77,7 +78,7 @@ exports[`Dropdown component have to match snapshot 1`] = `
     </label>
   </FormLabel>
   <span
-    className="dnb-dropdown dnb-dropdown--icon-position-icon_position dnb-dropdown--hidden dnb-dropdown__form-status dnb-dropdown__status--error class className"
+    className="dnb-dropdown dnb-dropdown--icon-position-icon_position dnb-dropdown--scroll dnb-dropdown--hidden dnb-dropdown__form-status dnb-dropdown__status--error class className"
   >
     <span
       className="dnb-dropdown__shell"
@@ -375,6 +376,11 @@ exports[`Dropdown scss have to match default theme snapshot 1`] = `
     .dnb-dropdown__option__inner {
       padding-right: 2rem;
       background-color: var(--dropdown-option-background-color); }
+    .dnb-dropdown__option--current {
+      background-color: var(--dropdown-option-background-color--hover); }
+      .dnb-dropdown__option--current .dnb-dropdown__option__inner {
+        color: var(--dropdown-option-color--hover);
+        background-color: var(--dropdown-option-background-color--hover); }
     :not([dnb-is-touch]) .dnb-dropdown__option:hover[disabled] {
       cursor: not-allowed; }
     :not([dnb-is-touch]) .dnb-dropdown__option:hover:not([disabled]) {

diff --git a/packages/dnb-ui-lib/src/components/dropdown/style/themes/dnb-dropdown-theme-ui.scss b/packages/dnb-ui-lib/src/components/dropdown/style/themes/dnb-dropdown-theme-ui.scss
@@ -39,7 +39,7 @@
     border-radius: var(--dropdown-options-border-radius);
   }
 
-  // NB: his will remove the triangle!
+  // NB: this will remove the triangle!
   &--scroll &__options {
     max-height: 20rem;
     overflow-y: scroll;
@@ -64,6 +64,13 @@
       background-color: var(--dropdown-option-background-color);
     }
 
+    &--current {
+      background-color: var(--dropdown-option-background-color--hover);
+      .dnb-dropdown__option__inner {
+        color: var(--dropdown-option-color--hover);
+        background-color: var(--dropdown-option-background-color--hover);
+      }
+    }
     @include hover() {
       background-color: var(--dropdown-option-background-color--hover);
       .dnb-dropdown__option__inner {

diff --git a/packages/dnb-ui-lib/stories/componentsStories.js b/packages/dnb-ui-lib/stories/componentsStories.js
@@ -379,7 +379,20 @@ stories.push([
     <CustomStyle>
       <Wrapper>
         <Box>
-          <Dropdown data={dropdownData} selected_item={3} label="Label:" />
+          <select name="x" id="x">
+            <option value="Value 1">A 1</option>
+            <option value="Value 2">B 2</option>
+            <option value="Value 3">C 3</option>
+            <option value="Value 3">S 4</option>
+          </select>
+        </Box>
+        <Box>
+          <Dropdown
+            data={dropdownData}
+            selected_item={3}
+            scrollable
+            label="Label:"
+          />
         </Box>
         <Box>
           <Dropdown
@@ -529,6 +542,99 @@ const dropdownData = [
   {
     content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
   },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Aparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
+  {
+    content: ['1234.56.78902', 'Sparekonto - Ole Nordmann']
+  },
   {
     selected_value:
       'Feriekonto - Kari Nordmann med et kjempelangt etternavnsen',