Merge branch 'feat/dowjones#216' of https://github.com/ellinge/react-…

…dropdown-tree-select into developTemp
ellinge · Apr 2, 2019 · 27cbb5c · 27cbb5c
2 parents 62428e3 + c67cd7d
commit 27cbb5c
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 30 deletions.
diff --git a/src/index.js b/src/index.js
@@ -25,7 +25,6 @@ class DropdownTreeSelect extends Component {
     clearSearchOnChange: PropTypes.bool,
     keepTreeOnSearch: PropTypes.bool,
     keepChildrenOnSearch: PropTypes.bool,
-    keepOpenOnSelect: PropTypes.bool,
     placeholderText: PropTypes.string,
     showDropdown: PropTypes.bool,
     className: PropTypes.string,
@@ -35,7 +34,6 @@ class DropdownTreeSelect extends Component {
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     simpleSelect: PropTypes.bool,
-    radioSelect: PropTypes.bool,
     noMatchesText: PropTypes.string,
     showPartiallySelected: PropTypes.bool,
     disabled: PropTypes.bool,
@@ -185,27 +183,19 @@ class DropdownTreeSelect extends Component {
   }
 
   onKeyboardKeyDown = e => {
-    const { enableKeyboardNavigation, keepOpenOnSelect, simpleSelect, radioSelect } = this.props
-    if (!enableKeyboardNavigation) { return }
+    if (!this.props.enableKeyboardNavigation) { return }
 
     const { showDropdown, tags, searchModeOn } = this.state
-    const tm = this.treeManager
-    const singleSelect = simpleSelect || radioSelect
 
-    if (!showDropdown && (keyboardNavigation.isValidKey(e.key, false) || /\w/i.test(e.key))) {
+    if (!showDropdown && (keyboardNavigation.isValidKey(e.key, false) || /^\w$/i.test(e.key))) {
       // Triggers open of dropdown and retriggers event
       e.persist()
       this.handleClick(null, () => this.onKeyboardKeyDown(e))
       if (/\w/i.test(e.key)) return
     } else if (showDropdown && keyboardNavigation.isValidKey(e.key, true)) {
+      const tm = this.treeManager
       const tree = searchModeOn ? tm.matchTree : tm.tree
-      if (tm.handleNavigationKey(tree, e.key, !searchModeOn)) {
-        this.setState({ tags: tm.getTags() })
-        if (e.key === 'Enter' && singleSelect && !keepOpenOnSelect) {
-          this.keepDropdownActive = false
-          this.handleClick()
-        }
-      }
+      tm.handleNavigationKey(tree, e.key, !searchModeOn, this.onCheckboxChange, this.onNodeToggle, () => this.setState({}))
     } else if (showDropdown && ['Escape', 'Tab'].indexOf(e.key) > -1) {
       // Triggers close
       this.keepDropdownActive = false
@@ -214,8 +204,7 @@ class DropdownTreeSelect extends Component {
     } else if (e.key === 'Backspace' && tags && tags.length
       && this.searchInput && this.searchInput.value.length === 0) {
       const lastTag = tags.pop()
-      tm.setNodeCheckedState(lastTag._id, false)
-      this.setState({ tags })
+      this.onCheckboxChange(lastTag._id, false)
     } else {
       return
     }

diff --git a/src/index.keyboardNav.test.js b/src/index.keyboardNav.test.js
@@ -40,7 +40,7 @@ test('other key presses does not open dropdown on keyboardNavigation', t => {
   ['Enter', 'ArrowLeft', 'ArrowRight'].forEach(key => {
     const wrapper = mount(<DropdownTreeSelect data={tree} enableKeyboardNavigation />)
     wrapper.find('.search').simulate('keyDown', { key })
-    t.true(wrapper.state().showDropdown)
+    t.false(wrapper.state().showDropdown)
   })
 })
 

diff --git a/src/tree-manager/index.js b/src/tree-manager/index.js
@@ -246,23 +246,20 @@ class TreeManager {
     })
   }
 
-  handleNavigationKey(tree, key, markSubTreeOnNonExpanded) {
+  handleNavigationKey(tree, key, markSubTreeOnNonExpanded, onToggleChecked, onToggleExpanded, onChangeFocus) {
     const prevFocus = this.currentFocus && this.getNodeById(this.currentFocus)
     const action = keyboardNavigation.getAction(prevFocus, key)
 
     if (FocusActionNames.has(action)) {
       this.handleFocusNavigationkey(tree, action, prevFocus, markSubTreeOnNonExpanded)
-      return true
+      onChangeFocus()
     }
     if (action === NavActions.ToggleChecked && prevFocus) {
-      this.setNodeCheckedState(prevFocus._id, prevFocus.checked !== true)
-      return true
+      onToggleChecked(prevFocus._id, prevFocus.checked !== true)
     }
     if (action === NavActions.ToggleExpanded && prevFocus) {
-      this.toggleNodeExpandState(prevFocus._id)
-      return true
+      onToggleExpanded(prevFocus._id)
     }
-    return false
   }
 
   handleFocusNavigationkey(tree, action, prevFocus, markSubTreeOnNonExpanded) {

diff --git a/src/tree-node/index.js b/src/tree-node/index.js
@@ -97,14 +97,10 @@ class TreeNode extends PureComponent {
     const style = keepTreeOnSearch || !searchModeOn ? { paddingLeft: `${(_depth || 0) * 20}px` } : {}
 
     const liId = `${_id}_li`
-    const leaf = isLeaf(_children)
-    const refSetter = ref => { this.node = ref }
-    const ariaExpanded = !leaf ? expanded === true : undefined
-    const ariaLevel = (_depth || 0) + 1
 
     return (
-      <li className={liCx} style={style} {...getDataset(dataset)} id={liId} ref={refSetter} aria-expanded={ariaExpanded} aria-level={ariaLevel}>
-        <Toggle isLeaf={leaf} expanded={expanded} id={_id} onNodeToggle={onNodeToggle} />
+      <li className={liCx} style={style} {...getDataset(dataset)} id={liId}>
+        <Toggle isLeaf={isLeaf(_children)} expanded={expanded} id={_id} onNodeToggle={onNodeToggle} />
         <NodeLabel
           title={title}
           label={label}