_preventArrowKeyScrolling(e) {
switch (e.key) {
case "ArrowUp":
case "ArrowDown":
case "ArrowLeft":
case "ArrowRight":
preventDefaultAndStopPropagation(e);
break;
}
}
/**
* Handles key down events in the tree's container.
*
* @param {Event} e
*/
_onKeyDown(e) {
if (this.props.focused == null) {
return;
}
// Allow parent nodes to use navigation arrows with modifiers.
if (e.altKey || e.ctrlKey || e.shiftKey || e.metaKey) {
return;
}
this._preventArrowKeyScrolling(e);
switch (e.key) {
case "ArrowUp":
this._focusPrevNode();
break;
case "ArrowDown":
this._focusNextNode();
break;
case "ArrowLeft":
if (this.props.isExpanded(this.props.focused)
&& this.props.getChildren(this.props.focused).length) {
this._onCollapse(this.props.focused);
} else {
this._focusParentNode();
}
break;
case "ArrowRight":
if (this.props.getChildren(this.props.focused).length &&
!this.props.isExpanded(this.props.focused)) {
this._onExpand(this.props.focused);
} else if (!this.props.preventNavigationOnArrowRight) {
this._focusNextNode();
}
break;
case "Home":
this._focusFirstNode();
break;
case "End":
this._focusLastNode();
break;
case "Enter":
case " ":
// On space or enter make focused tree node active. This means keyboard focus
// handling is passed on to the tree node itself.
if (this.refs.tree === this.activeElement) {
preventDefaultAndStopPropagation(e);
if (this.props.active !== this.props.focused) {
this._activate(this.props.focused);
}
}
break;
case "Escape":
preventDefaultAndStopPropagation(e);
if (this.props.active != null) {
this._activate(null);
}
if (this.refs.tree !== this.activeElement) {
this.refs.tree.focus();
}
break;
}
}