This commit is contained in:
yangchch6 2019-07-05 10:16:55 +08:00
commit b2b817f2ff
6 changed files with 71 additions and 17 deletions

View File

@ -1,3 +1,13 @@
<a name="2.0.15"></a>
## [2.0.15](https://github.com/tinper-bee/bee-tree/compare/v2.0.14...v2.0.15) (2019-07-04)
### Bug Fixes
* ul获取焦点兼容处理,防止已选中的节点再次选中 ([a369c85](https://github.com/tinper-bee/bee-tree/commit/a369c85))
<a name="2.0.14"></a>
## [2.0.14](https://github.com/tinper-bee/bee-tree/compare/v2.0.13...v2.0.14) (2019-06-26)

View File

@ -581,14 +581,24 @@ var Tree = function (_React$Component) {
var queryInfo = 'a[pos="' + selectKeyDomPos + '"]';
var parentEle = (0, _util.closest)(targetDom, ".u-tree");
var focusEle = parentEle ? parentEle.querySelector(queryInfo) : null;
focusEle && focusEle.focus();
if (document.activeElement !== focusEle) {
focusEle && focusEle.focus();
}
};
/**
* 此方法为了解决树快捷键当有的元素隐藏按tab键也要显示的问题
* @param {*} e
*/
Tree.prototype.onUlFocus = function onUlFocus(e) {
var _this4 = this;
var targetDom = e.target;
if (this.tree == targetDom && !this.isIn) {
// 如果当前tree节点不包括上一个焦点节点会触发此方法
if (this.tree == targetDom && !this.isIn && !this.tree.contains(e.relatedTarget)) {
var onFocus = this.props.onFocus;
var _state$selectedKeys = this.state.selectedKeys,
selectedKeys = _state$selectedKeys === undefined ? [] : _state$selectedKeys;
@ -615,10 +625,12 @@ var Tree = function (_React$Component) {
Tree.prototype.onUlMouseEnter = function onUlMouseEnter(e) {
this.isIn = true;
console.log('onUlMouseEnter----isIn-----', this.isIn);
};
Tree.prototype.onUlMouseLeave = function onUlMouseLeave(e) {
this.isIn = false;
console.log('onUlMouseLeave----isIn-----', this.isIn);
};
Tree.prototype.getFilterExpandedKeys = function getFilterExpandedKeys(props, expandKeyProp, expandAll) {
@ -836,9 +848,12 @@ var Tree = function (_React$Component) {
role: 'tree-node'
};
domProps.onFocus = this.onUlFocus;
domProps.onMouseEnter = this.onUlMouseEnter;
domProps.onMouseLeave = this.onUlMouseLeave;
if (props.focusable) {
domProps.onFocus = this.onUlFocus;
domProps.onMouseEnter = this.onUlMouseEnter;
domProps.onMouseLeave = this.onUlMouseLeave;
}
// if (props.focusable) {
// // domProps.tabIndex = '0';//需求改成了默认选择第一个节点或者选中的节点
// // domProps.onKeyDown = this.onKeyDown;//添加到具体的treeNode上了

25
dist/demo.js vendored
View File

@ -34821,14 +34821,24 @@
var queryInfo = 'a[pos="' + selectKeyDomPos + '"]';
var parentEle = (0, _util.closest)(targetDom, ".u-tree");
var focusEle = parentEle ? parentEle.querySelector(queryInfo) : null;
focusEle && focusEle.focus();
if (document.activeElement !== focusEle) {
focusEle && focusEle.focus();
}
};
/**
* 此方法为了解决树快捷键当有的元素隐藏按tab键也要显示的问题
* @param {*} e
*/
Tree.prototype.onUlFocus = function onUlFocus(e) {
var _this4 = this;
var targetDom = e.target;
if (this.tree == targetDom && !this.isIn) {
// 如果当前tree节点不包括上一个焦点节点会触发此方法
if (this.tree == targetDom && !this.isIn && !this.tree.contains(e.relatedTarget)) {
var onFocus = this.props.onFocus;
var _state$selectedKeys = this.state.selectedKeys,
selectedKeys = _state$selectedKeys === undefined ? [] : _state$selectedKeys;
@ -34855,10 +34865,12 @@
Tree.prototype.onUlMouseEnter = function onUlMouseEnter(e) {
this.isIn = true;
console.log('onUlMouseEnter----isIn-----', this.isIn);
};
Tree.prototype.onUlMouseLeave = function onUlMouseLeave(e) {
this.isIn = false;
console.log('onUlMouseLeave----isIn-----', this.isIn);
};
Tree.prototype.getFilterExpandedKeys = function getFilterExpandedKeys(props, expandKeyProp, expandAll) {
@ -35076,9 +35088,12 @@
role: 'tree-node'
};
domProps.onFocus = this.onUlFocus;
domProps.onMouseEnter = this.onUlMouseEnter;
domProps.onMouseLeave = this.onUlMouseLeave;
if (props.focusable) {
domProps.onFocus = this.onUlFocus;
domProps.onMouseEnter = this.onUlMouseEnter;
domProps.onMouseLeave = this.onUlMouseLeave;
}
// if (props.focusable) {
// // domProps.tabIndex = '0';//需求改成了默认选择第一个节点或者选中的节点
// // domProps.onKeyDown = this.onKeyDown;//添加到具体的treeNode上了

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
{
"name": "bee-tree",
"version": "2.0.14",
"version": "2.0.15",
"description": "Tree ui component for react",
"keywords": [
"react",

View File

@ -556,12 +556,20 @@ onExpand(treeNode,keyType) {
const queryInfo = `a[pos="${selectKeyDomPos}"]`;
const parentEle = closest(targetDom,".u-tree")
const focusEle = parentEle?parentEle.querySelector(queryInfo):null;
focusEle && focusEle.focus();
if(document.activeElement !== focusEle){
focusEle && focusEle.focus();
}
}
/**
* 此方法为了解决树快捷键当有的元素隐藏按tab键也要显示的问题
* @param {*} e
*/
onUlFocus(e){
const targetDom = e.target;
if(this.tree == targetDom && !this.isIn){
// 如果当前tree节点不包括上一个焦点节点会触发此方法
if(this.tree == targetDom && !this.isIn && !this.tree.contains(e.relatedTarget)){
const {onFocus} = this.props;
const {selectedKeys=[]} = this.state;
let tabIndexKey = selectedKeys[0]
@ -591,9 +599,12 @@ onExpand(treeNode,keyType) {
onUlMouseEnter(e){
this.isIn = true;
console.log('onUlMouseEnter----isIn-----',this.isIn);
}
onUlMouseLeave(e){
this.isIn = false;
console.log('onUlMouseLeave----isIn-----',this.isIn);
}
getFilterExpandedKeys(props, expandKeyProp, expandAll) {
@ -809,9 +820,12 @@ onExpand(treeNode,keyType) {
role: 'tree-node',
};
domProps.onFocus = this.onUlFocus;
domProps.onMouseEnter = this.onUlMouseEnter;
domProps.onMouseLeave = this.onUlMouseLeave;
if (props.focusable) {
domProps.onFocus = this.onUlFocus;
domProps.onMouseEnter = this.onUlMouseEnter;
domProps.onMouseLeave = this.onUlMouseLeave;
}
// if (props.focusable) {
// // domProps.tabIndex = '0';//需求改成了默认选择第一个节点或者选中的节点
// // domProps.onKeyDown = this.onKeyDown;//添加到具体的treeNode上了