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

fix:优化tree节点onFocus事件；解决点击子节点触发外层Ul上的onFocus问题

This commit is contained in:
wanghaoo 2019-03-04 13:49:12 +08:00
parent 2917c98844
commit 0fa835e246
7 changed files with 248 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
build/Tree.css
View File

@ -222,6 +222,10 @@
list-style: none;
white-space: nowrap;
outline: 0; }
.u-tree li:first-child {
padding-top: 8px; }
.u-tree li:last-child {
padding-bottom: 0; }
.u-tree li a[draggable],
.u-tree li a[draggable="true"] {
-webkit-user-select: none;
@ -247,19 +251,21 @@
padding: 0 0 0 18px; }
.u-tree li a {
display: inline-block;
padding: 1px 5px;
padding: 0px 5px;
border-radius: 2px;
margin: 0;
cursor: pointer;
text-decoration: none;
vertical-align: top;
vertical-align: middle;
color: #666;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease; }
.u-tree li a.u-tree-node-content-wrapper {
width: calc(100% - 18px); }
.u-tree li a:hover {
background-color: rgb(227,242,253); }
background-color: rgb(243,243,243); }
.u-tree li a.u-tree-node-selected {
background-color: rgb(227,242,253); }
background-color: rgb(243,243,243); }
.u-tree li a.u-tree-node-selected .u-tree-title {
color: rgb(30,136,229); }
.u-tree li span.u-checkbox {

81
build/Tree.js
View File

@ -45,12 +45,12 @@ var Tree = function (_React$Component) {
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
['onKeyDown', 'onCheck'].forEach(function (m) {
['onKeyDown', 'onCheck', "onUlFocus"].forEach(function (m) {
_this[m] = _this[m].bind(_this);
});
_this.contextmenuKeys = [];
_this.checkedKeysChange = true;
_this.selectKeyDomPos = '0-0';
_this.state = {
expandedKeys: _this.getDefaultExpandedKeys(props),
checkedKeys: _this.getDefaultCheckedKeys(props),
@ -393,6 +393,7 @@ var Tree = function (_React$Component) {
};
Tree.prototype.onMouseLeave = function onMouseLeave(e, treeNode) {
console.log('***leave**');
this.props.onMouseLeave({
event: e,
node: treeNode
@ -539,7 +540,8 @@ var Tree = function (_React$Component) {
Tree.prototype.onKeyDown = function onKeyDown(e, treeNode) {
console.log('keydownNode----', e.keyCode);
e.stopPropagation();
var props = this.props;
var currentPos = treeNode.props.pos;
var currentIndex = currentPos.substr(currentPos.lastIndexOf('-') + 1);
@ -563,6 +565,53 @@ var Tree = function (_React$Component) {
// e.preventDefault();
};
Tree.prototype.onUlFocus = function onUlFocus(e) {
var _this4 = this;
var targetDom = e.target;
console.log('target******************', e.target, e.currentTarget);
if (this.refs.tree == e.target) {
var onFocus = this.props.onFocus;
var _state$selectedKeys = this.state.selectedKeys,
selectedKeys = _state$selectedKeys === undefined ? [] : _state$selectedKeys;
var tabIndexKey = selectedKeys[0];
var isExist = false;
if (this.selectKeyDomExist && tabIndexKey || !tabIndexKey) {
isExist = true;
var queryInfo = 'a[pos="' + this.selectKeyDomPos + '"]';
var parentEle = (0, _util.closest)(e.target, ".u-tree");
var focusEle = parentEle ? parentEle.querySelector(queryInfo) : null;
focusEle && focusEle.focus();
}
var onFocusRes = onFocus && onFocus(isExist);
// onFocus && onFocus(isExist,(isExist)=>{
// if(!isExist){
// const queryInfo = `a[pos="${this.selectKeyDomPos}"]`;
// const parentEle = closest(targetDom,".u-tree")
// const focusEle = parentEle?parentEle.querySelector(queryInfo):null;
// focusEle && focusEle.focus();
// }
// })
if (onFocusRes instanceof Promise) {
onFocusRes.then(function () {
if (!isExist) {
var _queryInfo = 'a[pos="' + _this4.selectKeyDomPos + '"]';
var _parentEle = (0, _util.closest)(targetDom, ".u-tree");
var _focusEle = _parentEle ? _parentEle.querySelector(_queryInfo) : null;
_focusEle && _focusEle.focus();
}
});
} else {
var _queryInfo2 = 'a[pos="' + this.selectKeyDomPos + '"]';
var _parentEle2 = (0, _util.closest)(targetDom, ".u-tree");
var _focusEle2 = _parentEle2 ? _parentEle2.querySelector(_queryInfo2) : null;
_focusEle2 && _focusEle2.focus();
}
}
};
Tree.prototype.getFilterExpandedKeys = function getFilterExpandedKeys(props, expandKeyProp, expandAll) {
var keys = props[expandKeyProp];
if (!expandAll && !props.autoExpandParent) {
@ -687,9 +736,18 @@ var Tree = function (_React$Component) {
var pos = level + '-' + index;
var key = child.key || pos;
var state = this.state;
var props = this.props;
var _state$selectedKeys2 = this.state.selectedKeys,
selectedKeys = _state$selectedKeys2 === undefined ? [] : _state$selectedKeys2;
var tabIndexKey = selectedKeys[0];
if (tabIndexKey && key == tabIndexKey) {
console.log('tabIndexKey', props.tabIndexKey);
this.selectKeyDomExist = true;
this.selectKeyDomPos = pos;
}
// prefer to child's own selectable property if passed
var selectable = props.selectable;
if (child.props.hasOwnProperty('selectable')) {
@ -756,7 +814,7 @@ var Tree = function (_React$Component) {
};
Tree.prototype.render = function render() {
var _this4 = this;
var _this5 = this;
var props = this.props;
var showLineCls = "";
@ -773,9 +831,9 @@ var Tree = function (_React$Component) {
// // domProps.onKeyDown = this.onKeyDown;//添加到具体的treeNode上了
// }
var getTreeNodesStates = function getTreeNodesStates() {
_this4.treeNodesStates = {};
_this5.treeNodesStates = {};
(0, _util.loopAllChildren)(props.children, function (item, index, pos, keyOrPos, siblingPosition) {
_this4.treeNodesStates[pos] = {
_this5.treeNodesStates[pos] = {
siblingPosition: siblingPosition
};
});
@ -800,7 +858,7 @@ var Tree = function (_React$Component) {
var checkedPositions = [];
this.treeNodesStates = {};
(0, _util.loopAllChildren)(props.children, function (item, index, pos, keyOrPos, siblingPosition) {
_this4.treeNodesStates[pos] = {
_this5.treeNodesStates[pos] = {
node: item,
key: keyOrPos,
checked: false,
@ -808,7 +866,7 @@ var Tree = function (_React$Component) {
siblingPosition: siblingPosition
};
if (checkedKeys.indexOf(keyOrPos) !== -1) {
_this4.treeNodesStates[pos].checked = true;
_this5.treeNodesStates[pos].checked = true;
checkedPositions.push(pos);
}
});
@ -820,10 +878,10 @@ var Tree = function (_React$Component) {
this.checkedKeys = checkKeys.checkedKeys;
}
}
this.selectKeyDomExist = false;
return _react2["default"].createElement(
'ul',
_extends({}, domProps, { unselectable: 'true', ref: 'tree' }),
_extends({}, domProps, { unselectable: 'true', ref: 'tree', onFocus: this.onUlFocus, tabIndex: props.focusable && props.tabIndexValue }),
_react2["default"].Children.map(props.children, this.renderTreeNode, this)
);
};
@ -892,7 +950,8 @@ Tree.defaultProps = {
onDragLeave: noop,
onDrop: noop,
onDragEnd: noop,
onDoubleClick: noop
onDoubleClick: noop,
tabIndexValue: 0
};
exports["default"] = Tree;

10
build/TreeNode.js
View File

@ -366,6 +366,10 @@ var TreeNode = function (_React$Component) {
return isLeaf || !loadData && !hasChildren;
};
TreeNode.prototype.onFocus = function onFocus(e) {
e.stopPropagation();
};
TreeNode.prototype.render = function render() {
var _iconEleCls,
_this4 = this;
@ -500,7 +504,7 @@ var TreeNode = function (_React$Component) {
liProps.onDrop = this.onDrop;
liProps.onDragEnd = this.onDragEnd;
}
liProps.onFocus = this.onFocus;
var disabledCls = '';
var dragOverCls = '';
if (props.disabled) {
@ -528,11 +532,11 @@ var TreeNode = function (_React$Component) {
}
return _react2["default"].createElement('span', { className: (0, _classnames2["default"])(cls) });
};
var selectedCls = props.selected ? prefixCls + '-treenode-selected' : '';
return _react2["default"].createElement(
'li',
_extends({}, liProps, { ref: 'li', style: props.style,
className: (0, _classnames2["default"])(props.className, disabledCls, dragOverCls, filterCls)
className: (0, _classnames2["default"])(props.className, disabledCls, dragOverCls, filterCls, selectedCls)
}),
canRenderSwitcher ? this.renderSwitcher(props, expandedState) : noopSwitcher(),
props.checkable ? this.renderCheckbox(props) : null,

115
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

66
src/Tree.js
View File

@ -21,12 +21,12 @@ function noop() {}
class Tree extends React.Component {
constructor(props) {
super(props);
['onKeyDown', 'onCheck'].forEach((m) => {
['onKeyDown', 'onCheck',"onUlFocus","_focusDom"].forEach((m) => {
this[m] = this[m].bind(this);
});
this.contextmenuKeys = [];
this.checkedKeysChange = true;
this.selectKeyDomPos = '0-0';
this.state = {
expandedKeys: this.getDefaultExpandedKeys(props),
checkedKeys: this.getDefaultCheckedKeys(props),
@ -355,7 +355,7 @@ onExpand(treeNode,keyType) {
props.onDoubleClick(eventKey,newSt);
}
onMouseEnter(e, treeNode) {
on1Enter(e, treeNode) {
this.props.onMouseEnter({
event: e,
node: treeNode
@ -369,6 +369,8 @@ onExpand(treeNode,keyType) {
});
}
onContextMenu(e, treeNode) {
const selectedKeys = [...this.state.selectedKeys];
const eventKey = treeNode.props.eventKey;
@ -510,7 +512,7 @@ onExpand(treeNode,keyType) {
}
// all keyboard events callbacks run from here at first
onKeyDown(e,treeNode) {
e.stopPropagation();
const props = this.props;
const currentPos = treeNode.props.pos;
const currentIndex = currentPos.substr(currentPos.lastIndexOf('-')+1);
@ -532,8 +534,49 @@ onExpand(treeNode,keyType) {
this.onDoubleClick(treeNode);
}
// e.preventDefault();
}
_focusDom(selectKeyDomPos,targetDom){
const queryInfo = `a[pos="${selectKeyDomPos}"]`;
const parentEle = closest(targetDom,".u-tree")
const focusEle = parentEle?parentEle.querySelector(queryInfo):null;
focusEle && focusEle.focus();
}
onUlFocus(e){
const targetDom = e.target;
if(this.refs.tree == e.target){
const {onFocus} = this.props;
const {selectedKeys=[]} = this.state;
let tabIndexKey = selectedKeys[0]
let isExist = false;
if((this.selectKeyDomExist && tabIndexKey) || !tabIndexKey){
isExist = true;
const queryInfo = `a[pos="${this.selectKeyDomPos}"]`;
const parentEle = closest(e.target,".u-tree")
const focusEle = parentEle?parentEle.querySelector(queryInfo):null;
focusEle && focusEle.focus();
}
let onFocusRes = onFocus && onFocus(isExist);
if(onFocusRes instanceof Promise){
onFocusRes.then(()=>{
if(!isExist){
this._focusDom(this.selectKeyDomPos,targetDom);
}
});
}else{
this._focusDom(this.selectKeyDomPos,targetDom);
}
}
}
onUlMouseDown(e){
e.preventDefault();
}
getFilterExpandedKeys(props, expandKeyProp, expandAll) {
const keys = props[expandKeyProp];
@ -661,9 +704,15 @@ onExpand(treeNode,keyType) {
renderTreeNode(child, index, level = 0) {
const pos = `${level}-${index}`;
const key = child.key || pos;
const state = this.state;
const props = this.props;
const {selectedKeys=[]} = this.state;
let tabIndexKey = selectedKeys[0]
if(tabIndexKey && key == tabIndexKey){
this.selectKeyDomExist = true;
this.selectKeyDomPos = pos;
}
// prefer to child's own selectable property if passed
let selectable = props.selectable;
if (child.props.hasOwnProperty('selectable')) {
@ -793,9 +842,9 @@ onExpand(treeNode,keyType) {
this.checkedKeys = checkKeys.checkedKeys;
}
}
this.selectKeyDomExist = false;
return (
<ul {...domProps} unselectable="true" ref="tree">
<ul {...domProps} unselectable="true" ref="tree" onFocus = {this.onUlFocus} tabIndex={props.focusable && props.tabIndexValue} onMouseDown={this.onUlMouseDown}>
{React.Children.map(props.children, this.renderTreeNode, this)}
</ul>
);
@ -869,7 +918,8 @@ Tree.defaultProps = {
onDragLeave: noop,
onDrop: noop,
onDragEnd: noop,
onDoubleClick:noop
onDoubleClick:noop,
tabIndexValue:0
};
export default Tree;

5
src/TreeNode.js
View File

@ -323,6 +323,9 @@ class TreeNode extends React.Component {
isLeaf || (!loadData && !hasChildren)
);
}
onFocus(e){
e.stopPropagation();
}
render() {
const props = this.props;
const prefixCls = props.prefixCls;
@ -460,7 +463,7 @@ class TreeNode extends React.Component {
liProps.onDrop = this.onDrop;
liProps.onDragEnd = this.onDragEnd;
}
liProps.onFocus = this.onFocus;
let disabledCls = '';
let dragOverCls = '';
if (props.disabled) {