增加快捷键

demo/demolist/Demo2.js

@@ -8,8 +8,8 @@
 import React, { Component } from 'react';
 import Tree from '../../src';
 
-const x = 3;
+const x = 6;
-const y = 2;
+const y = 5;
 const z = 1;
 const gData = [];
 
@@ -85,10 +85,11 @@ class Demo2 extends Component{
     return (
       <Tree
         checkable
+        focusable
         onExpand={this.onExpand} expandedKeys={this.state.expandedKeys}
         autoExpandParent={this.state.autoExpandParent}
-        onCheck={this.onCheck} checkedKeys={this.state.checkedKeys}
+        onCheck={this.onCheck} 
-        onSelect={this.onSelect} selectedKeys={this.state.selectedKeys}
+        onSelect={this.onSelect} 
       >
         {loop(gData)}
       </Tree>

src/Tree.js

@@ -1,5 +1,6 @@
 /* eslint no-console:0 */
 import React from 'react';
+
 import classNames from 'classnames';
 import {
   loopAllChildren,
@@ -12,7 +13,7 @@ import {
   arraysEqual,
 } from './util';
 import PropTypes from 'prop-types';
-
+import { KeyCode } from 'tinper-bee-core';
 
 function noop() {}
 
@@ -172,12 +173,26 @@ class Tree extends React.Component {
       node: treeNode
     });
   }
-
+/**
-  onExpand(treeNode) {
+ *
-    const expanded = !treeNode.props.expanded;
+ *
+ * @param {*} treeNode 当前操作的节点
+ * @param {*} keyType 键盘事件通用的key类型 left 为收起，right为展开
+ * @returns
+ * @memberof Tree
+ */
+onExpand(treeNode,keyType) {
+    let expanded = !treeNode.props.expanded;
     const controlled = 'expandedKeys' in this.props;
     const expandedKeys = [...this.state.expandedKeys];
     const index = expandedKeys.indexOf(treeNode.props.eventKey);
+
+    if(keyType == 'left'){
+      expanded = false;
+    }else if(keyType == 'right'){
+      expanded = true;
+    }
+  
     if (expanded && index === -1) {
       expandedKeys.push(treeNode.props.eventKey);
     } else if (!expanded && index > -1) {
@@ -276,7 +291,7 @@ class Tree extends React.Component {
   onSelect(treeNode) {
     const props = this.props;
     const selectedKeys = [...this.state.selectedKeys];
-    const eventKey = treeNode.props.eventKey;
+    const eventKey = treeNode.props.eventKey || treeNode.key;
     const index = selectedKeys.indexOf(eventKey);
     let selected;
     //cancelUnSelect为true时第二次点击时不取消选中
@@ -372,10 +387,65 @@ class Tree extends React.Component {
     });
   }
 
-  // all keyboard events callbacks run from here at first
+  getTreeNode(){
-  onKeyDown(e) {
+    const props = this.props;
-    e.preventDefault();
+ 
   }
+  // all keyboard events callbacks run from here at first
+  onKeyDown(e,treeNode) {
+    event.preventDefault()
+    // console.log('-----'+e.keyCode);
+    const props = this.props;
+    const currentPos = treeNode.props.pos;
+    const currentIndex = currentPos.substr(currentPos.lastIndexOf('-')+1);
+    //向下键down
+    if(e.keyCode == KeyCode.DOWN){
+      const nextIndex =  parseInt(currentIndex) + 1;
+        const nextPos = currentPos.substr(0,currentPos.lastIndexOf('-')+1)+nextIndex;
+        let nextTreeNode;
+      //选中下一个相邻的节点
+      loopAllChildren(props.children,function(item,index,pos,newKey){
+        if(pos == nextPos){
+          nextTreeNode = item;
+        }
+      })
+      //查询的下一个节点不为空的话，则选中
+      if(nextTreeNode){
+        
+        e.target.parentElement.nextElementSibling.querySelector('a').focus()
+        this.onSelect(nextTreeNode);
+      }
+    }else if(e.keyCode == KeyCode.UP && currentIndex>0){
+      // 向上键Up
+      const preIndex =  parseInt(currentIndex) - 1;
+      const prePos = currentPos.substr(0,currentPos.lastIndexOf('-')+1)+preIndex;
+      let prevTreeNode;
+      //选中上一个相邻的节点
+      loopAllChildren(props.children,function(item,index,pos,newKey){
+        if(pos == prePos){
+          prevTreeNode = item;
+        }
+      })
+      //查询的上一个节点不为空的话，则选中
+      if(prevTreeNode){
+      
+        e.target.parentElement.previousElementSibling.querySelector('a').focus()
+        this.onSelect(prevTreeNode);
+      }
+   
+    }else if(e.keyCode == KeyCode.LEFT){
+      // 收起树节点
+      this.onExpand(treeNode,'left');
+    }else if (e.keyCode == KeyCode.RIGHT){
+      // 展开树节点
+      this.onExpand(treeNode,'right');
+    }else if (e.keyCode == KeyCode.SPACE && props.checkable){
+      // 如果是多选tree则进行选中或者反选该节点
+      this.onCheck(treeNode);
+    }
+    // e.preventDefault();
+  }
+
   
   getFilterExpandedKeys(props, expandKeyProp, expandAll) {
     const keys = props[expandKeyProp];
@@ -527,6 +597,7 @@ class Tree extends React.Component {
       onMouseLeave: props.onMouseLeave,
       onRightClick: props.onRightClick,
       onDoubleClick:props.onDoubleClick,
+      onKeyDown:props.onKeyDown,
       prefixCls: props.prefixCls,
       showLine: props.showLine,
       showIcon: props.showIcon,
@@ -541,7 +612,9 @@ class Tree extends React.Component {
       openAnimation: props.openAnimation,
       filterTreeNode: this.filterTreeNode.bind(this),
       openIcon: props.openIcon,
-      closeIcon: props.closeIcon
+      closeIcon: props.closeIcon,
+      focusable:props.focusable,
+      tabIndexKey: state.selectedKeys[0]
     };
     if (props.checkable) {
       cloneProps.checkable = props.checkable;
@@ -579,8 +652,8 @@ class Tree extends React.Component {
     };
 
     if (props.focusable) {
-      domProps.tabIndex = '0';
+      // domProps.tabIndex = '0';//需求改成了默认选择第一个节点或者选中的节点
-      domProps.onKeyDown = this.onKeyDown;
+      // domProps.onKeyDown = this.onKeyDown;//添加到具体的treeNode上了
     }
     const getTreeNodesStates = () => {
       this.treeNodesStates = {};
@@ -680,6 +753,7 @@ Tree.propTypes = {
   onDragEnd: PropTypes.func,
   filterTreeNode: PropTypes.func,
   openTransitionName: PropTypes.string,
+  focusable: PropTypes.bool,
   openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 };
 

src/TreeNode.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom'
 import classNames from 'classnames';
 import Animate from 'bee-animate';
 import {
@@ -28,7 +29,8 @@ class TreeNode extends React.Component {
       'onDragLeave',
       'onDrop',
       'onDragEnd',
-      'onDoubleClick'
+      'onDoubleClick',
+      'onKeyDown'
     ].forEach((m) => {
       this[m] = this[m].bind(this);
     });
@@ -165,6 +167,7 @@ class TreeNode extends React.Component {
 
   // keyboard event support
   onKeyDown(e) {
+    this.props.root.onKeyDown(e,this);
     e.preventDefault();
   }
 
@@ -374,6 +377,7 @@ class TreeNode extends React.Component {
           domProps.onMouseLeave = this.onMouseLeave;
         }
         
+
         if (props.draggable) {
           domProps.className += ' draggable';
           if (ieOrEdge) {
@@ -385,6 +389,21 @@ class TreeNode extends React.Component {
           domProps.onDragStart = this.onDragStart;
         }
       }
+      //设置tabIndex
+      if(props.focusable){
+        domProps.onKeyDown = this.onKeyDown;
+        domProps.tabIndex = -1;
+        if(props.tabIndexKey){
+          if(props.eventKey == props.tabIndexKey){
+            domProps.tabIndex = 0;
+          }
+        }else if(props.pos == '0-0'){
+          domProps.tabIndex = 0;
+        }
+      }
+     
+
+    
       return (
         <a ref="selectHandle" title={typeof content === 'string' ? content : ''} {...domProps}>
           {icon}{title}