fix:优化tree节点onFocus事件;解决点击子节点触发外层Ul上的onFocus问题
This commit is contained in:
parent
2917c98844
commit
0fa835e246
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
66
src/Tree.js
66
src/Tree.js
|
@ -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;
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in New Issue