增加双击快捷键

build/Tree.css

@@ -5,15 +5,33 @@
 /*  Navlayout  */
 .u-checkbox {
   display: inline-block;
-  position: relative; }
+  position: relative;
+  margin: 0 5px;
+  height: 18px;
+  line-height: 18px;
+  font-size: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  position: relative;
+  line-height: 1;
+  vertical-align: middle; }
   .u-checkbox.disabled .u-checkbox-label {
     cursor: not-allowed;
     opacity: 0.5; }
   .u-checkbox input[type='checkbox'] {
-    display: none;
+    position: absolute;
-    cursor: pointer; }
+    z-index: 3;
+    cursor: pointer;
+    opacity: 0;
+    box-sizing: border-box;
+    padding: 0;
+    width: 100%;
+    height: 100%; }
   .u-checkbox input[disabled] {
     cursor: not-allowed; }
+  .u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
+    border-color: #1e88e5; }
   .u-checkbox.is-checked .u-checkbox-label:before {
     -moz-box-shadow: inset 0 0 0 10px rgb(30,136,229);
     -webkit-box-shadow: inset 0 0 0 10px rgb(30,136,229);
@@ -44,7 +62,7 @@
       width: 18px;
       height: 18px;
       left: 0;
-      top: 4px;
+      top: 0;
       text-align: center;
       position: absolute; }
     .u-checkbox .u-checkbox-label:after {
@@ -54,7 +72,7 @@
       width: 18px;
       height: 18px;
       left: 0;
-      top: 4px;
+      top: 0;
       text-align: center;
       position: absolute; }
 
@@ -74,30 +92,45 @@
   box-shadow: inset 0 0 0 10px rgb(76,175,80);
   border-color: rgb(76,175,80); }
 
+.u-checkbox.u-checkbox-success input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(76,175,80); }
+
 .u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {
   -moz-box-shadow: inset 0 0 0 10px rgb(255,152,0);
   -webkit-box-shadow: inset 0 0 0 10px rgb(255,152,0);
   box-shadow: inset 0 0 0 10px rgb(255,152,0);
   border-color: rgb(255,152,0); }
 
+.u-checkbox.u-checkbox-warning input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(255,152,0); }
+
 .u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {
   -moz-box-shadow: inset 0 0 0 10px rgb(244,67,54);
   -webkit-box-shadow: inset 0 0 0 10px rgb(244,67,54);
   box-shadow: inset 0 0 0 10px rgb(244,67,54);
   border-color: rgb(244,67,54); }
 
+.u-checkbox.u-checkbox-danger input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(244,67,54); }
+
 .u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {
   -moz-box-shadow: inset 0 0 0 10px rgb(97,97,97);
   -webkit-box-shadow: inset 0 0 0 10px rgb(97,97,97);
   box-shadow: inset 0 0 0 10px rgb(97,97,97);
   border-color: rgb(97,97,97); }
 
+.u-checkbox.u-checkbox-dark input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(97,97,97); }
+
 .u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {
   -moz-box-shadow: inset 0 0 0 10px rgb(0,188,212);
   -webkit-box-shadow: inset 0 0 0 10px rgb(0,188,212);
   box-shadow: inset 0 0 0 10px rgb(0,188,212);
   border-color: rgb(0,188,212); }
 
+.u-checkbox.u-checkbox-info input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(0,188,212); }
+
 .u-tree {
   margin: 0;
   padding: 5px;

build/Tree.js

@@ -552,6 +552,8 @@ var Tree = function (_React$Component) {
     } else if (e.keyCode == _tinperBeeCore.KeyCode.SPACE && props.checkable) {
       // 如果是多选tree则进行选中或者反选该节点
       this.onCheck(treeNode);
+    } else if (e.keyCode == _tinperBeeCore.KeyCode.ENTER) {
+      this.onDoubleClick(treeNode);
     }
     // e.preventDefault();
   };
@@ -721,7 +723,8 @@ var Tree = function (_React$Component) {
       openIcon: props.openIcon,
       closeIcon: props.closeIcon,
       focusable: props.focusable,
-      tabIndexKey: state.selectedKeys[0]
+      tabIndexKey: state.selectedKeys[0],
+      tabIndexValue: props.tabIndexValue
     };
     if (props.checkable) {
       cloneProps.checkable = props.checkable;
@@ -883,7 +886,8 @@ Tree.defaultProps = {
   onDragOver: noop,
   onDragLeave: noop,
   onDrop: noop,
-  onDragEnd: noop
+  onDragEnd: noop,
+  onDoubleClick: noop
 };
 
 exports["default"] = Tree;

build/TreeNode.js

@@ -437,10 +437,10 @@ var TreeNode = function (_React$Component) {
         domProps.tabIndex = -1;
         if (props.tabIndexKey) {
           if (props.eventKey == props.tabIndexKey) {
-            domProps.tabIndex = 0;
+            domProps.tabIndex = props.tabIndexValue;
           }
         } else if (props.pos == '0-0') {
-          domProps.tabIndex = 0;
+          domProps.tabIndex = props.tabIndexValue;
         }
       }
 
@@ -525,7 +525,8 @@ TreeNode.propTypes = {
 };
 
 TreeNode.defaultProps = {
-  title: defaultTitle
+  title: defaultTitle,
+  tabIndexValue: 0
 };
 
 exports["default"] = TreeNode;

dist/demo.css

@@ -3478,6 +3478,33 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
 .uf-treeline-copy:before {
   content: "\e994"; }
 
+.uf-listwithdots:before {
+  content: "\e9cd"; }
+
+.uf-gridlogo:before {
+  content: "\e900"; }
+
+.uf-magnifyingglass:before {
+  content: "\e9ce"; }
+
+.uf-anglearrowdown:before {
+  content: "\e9cf"; }
+
+.uf-yongyouyunchnen:before {
+  content: "\e98d"; }
+
+.uf-yycloud:before {
+  content: "\e68f"; }
+
+.uf-funnel-o:before {
+  content: "\e63c"; }
+
+.uf-filter:before {
+  content: "\e9d0"; }
+
+.uf-filterno:before {
+  content: "\e9d1"; }
+
 /* FormGroup */
 /*  Navlayout  */
 .vertical-align {
@@ -5208,15 +5235,33 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
 /*  Navlayout  */
 .u-checkbox {
   display: inline-block;
-  position: relative; }
+  position: relative;
+  margin: 0 5px;
+  height: 18px;
+  line-height: 18px;
+  font-size: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  position: relative;
+  line-height: 1;
+  vertical-align: middle; }
   .u-checkbox.disabled .u-checkbox-label {
     cursor: not-allowed;
     opacity: 0.5; }
   .u-checkbox input[type='checkbox'] {
-    display: none;
+    position: absolute;
-    cursor: pointer; }
+    z-index: 3;
+    cursor: pointer;
+    opacity: 0;
+    box-sizing: border-box;
+    padding: 0;
+    width: 100%;
+    height: 100%; }
   .u-checkbox input[disabled] {
     cursor: not-allowed; }
+  .u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
+    border-color: #1e88e5; }
   .u-checkbox.is-checked .u-checkbox-label:before {
     box-shadow: inset 0 0 0 10px rgb(30,136,229);
     border-color: rgb(30,136,229); }
@@ -5240,7 +5285,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
       width: 18px;
       height: 18px;
       left: 0;
-      top: 4px;
+      top: 0;
       text-align: center;
       position: absolute; }
     .u-checkbox .u-checkbox-label:after {
@@ -5250,7 +5295,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
       width: 18px;
       height: 18px;
       left: 0;
-      top: 4px;
+      top: 0;
       text-align: center;
       position: absolute; }
 
@@ -5268,22 +5313,37 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
   box-shadow: inset 0 0 0 10px rgb(76,175,80);
   border-color: rgb(76,175,80); }
 
+.u-checkbox.u-checkbox-success input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(76,175,80); }
+
 .u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {
   box-shadow: inset 0 0 0 10px rgb(255,152,0);
   border-color: rgb(255,152,0); }
 
+.u-checkbox.u-checkbox-warning input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(255,152,0); }
+
 .u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {
   box-shadow: inset 0 0 0 10px rgb(244,67,54);
   border-color: rgb(244,67,54); }
 
+.u-checkbox.u-checkbox-danger input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(244,67,54); }
+
 .u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {
   box-shadow: inset 0 0 0 10px rgb(97,97,97);
   border-color: rgb(97,97,97); }
 
+.u-checkbox.u-checkbox-dark input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(97,97,97); }
+
 .u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {
   box-shadow: inset 0 0 0 10px rgb(0,188,212);
   border-color: rgb(0,188,212); }
 
+.u-checkbox.u-checkbox-info input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(0,188,212); }
+
 .u-tree {
   margin: 0;
   padding: 5px;
@@ -5615,6 +5675,18 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
   .u-panel .u-panel-body {
     padding: 15px 15px;
     position: relative; }
+    .u-panel .u-panel-body .u-panel-copy {
+      position: absolute;
+      right: 25px;
+      top: 30px;
+      color: #fff;
+      font-size: 20px;
+      padding: 2px 8px;
+      margin: 8px;
+      border-radius: 4px;
+      cursor: pointer; }
+      .u-panel .u-panel-body .u-panel-copy:hover {
+        color: #a8a7a7; }
 
 .u-panel-default {
   border-color: #ddd; }
@@ -6545,6 +6617,8 @@ input.u-button[type="submit"] {
   .u-form-control:focus {
     border-color: #66afe9;
     outline: 0; }
+  .u-form-control::-ms-clear, .u-form-control ::-ms-reveal {
+    display: none; }
 
 .u-form-control[disabled] {
   background: #eee;

docs/api.md

@@ -37,6 +37,7 @@
 |onDrop|当节点放下触发方法|function({event, node, dragNode, dragNodesKeys})|-
 |onDoubleClick|当双击发生触发的方法|function(checkedKeys, e:{node, event})|-
 |focusable|是否开启快捷键功能，使用Tab 键导航获取焦点↓↑选中下、上一个节点，→←展开或者收起一个节点|bool|-
+|tabIndexValue|节点获取焦点时，自定义tabIndex的值|Number|0
 
 ## TreeNode
 |参数|说明|类型|默认值|

package.json

@@ -63,4 +63,4 @@
   "react-addons-test-utils": "15.3.2",
   "react-dom": "15.3.2"
  }
-}
+}

src/Tree.js

@@ -523,6 +523,8 @@ onExpand(treeNode,keyType) {
     }else if (e.keyCode == KeyCode.SPACE && props.checkable){
       // 如果是多选tree则进行选中或者反选该节点
       this.onCheck(treeNode);
+    }else if(e.keyCode == KeyCode.ENTER){
+      this.onDoubleClick(treeNode);
     }
     // e.preventDefault();
   }
@@ -695,7 +697,8 @@ onExpand(treeNode,keyType) {
       openIcon: props.openIcon,
       closeIcon: props.closeIcon,
       focusable:props.focusable,
-      tabIndexKey: state.selectedKeys[0]
+      tabIndexKey: state.selectedKeys[0],
+      tabIndexValue:props.tabIndexValue
     };
     if (props.checkable) {
       cloneProps.checkable = props.checkable;
@@ -861,6 +864,7 @@ Tree.defaultProps = {
   onDragLeave: noop,
   onDrop: noop,
   onDragEnd: noop,
+  onDoubleClick:noop
 };
 
 export default Tree;

src/TreeNode.js

@@ -398,10 +398,10 @@ class TreeNode extends React.Component {
         domProps.tabIndex = -1;
         if(props.tabIndexKey){
           if(props.eventKey == props.tabIndexKey){
-            domProps.tabIndex = 0;
+            domProps.tabIndex = props.tabIndexValue;
           }
         }else if(props.pos == '0-0'){
-          domProps.tabIndex = 0;
+          domProps.tabIndex = props.tabIndexValue;
         }
       }
      
@@ -487,6 +487,7 @@ TreeNode.propTypes = {
 
 TreeNode.defaultProps = {
   title: defaultTitle,
+  tabIndexValue:0
 };
 
 export default TreeNode;