增加双击快捷键

2019-01-03 16:39:51 +08:00 · 2019-01-03 16:39:51 +08:00 · e2db4b5440
parent e2a15a241d
commit e2db4b5440
12 changed files with 5412 additions and 2760 deletions
--- a/build/Tree.css
+++ b/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;
-    cursor: pointer; }
+    position: absolute;
+    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;
--- a/build/Tree.js
+++ b/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;
--- a/build/TreeNode.js
+++ b/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;
--- a/dist/demo.css
+++ b/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;
-    cursor: pointer; }
+    position: absolute;
+    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;
--- a/dist/demo.css.map
+++ b/dist/demo.css.map
--- a/dist/demo.js
+++ b/dist/demo.js
--- a/dist/demo.js.map
+++ b/dist/demo.js.map
--- a/docs/api.md
+++ b/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
 |参数|说明|类型|默认值|
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -63,4 +63,4 @@
  "react-addons-test-utils": "15.3.2",
  "react-dom": "15.3.2"
 }
-}
+}
--- a/src/Tree.js
+++ b/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;
--- a/src/TreeNode.js
+++ b/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;