innov
/
bee-tree
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Wiki Activity

增加双击快捷键

This commit is contained in:
wanghaoo 2019-01-03 16:39:51 +08:00
parent e2a15a241d
commit e2db4b5440
12 changed files with 5412 additions and 2760 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
build/Tree.css
View File

@ -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;

8
build/Tree.js
View File

@ -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;

7
build/TreeNode.js
View File

@ -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;

84
dist/demo.css vendored
View File

@ -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;

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

6495
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

1
docs/api.md
View File

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

1427
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

6
src/Tree.js
View File

@ -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;

5
src/TreeNode.js
View File

@ -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;