Add onActivate prop called on Enter key press.

Author: nchevobbe

packages/devtools-components/src/tests/tree.js

@@ -399,6 +399,42 @@ describe("Tree", () => {
     expect(onFocus.mock.calls[4][0]).toBe("E");
   });
 
+  it("calls onActivate when expected", () => {
+    const onActivate = jest.fn();
+
+    const wrapper = mountTree({
+      expanded: new Set("ABCDEFGHIJKLMNO".split("")),
+      focused: "A",
+      onActivate,
+    });
+
+    simulateKeyDown(wrapper, "Enter");
+    expect(onActivate.mock.calls.length).toBe(1);
+    expect(onActivate.mock.calls[0][0]).toBe("A");
+
+    simulateKeyDown(wrapper, "Enter");
+    expect(onActivate.mock.calls.length).toBe(2);
+    expect(onActivate.mock.calls[1][0]).toBe("A");
+
+    simulateKeyDown(wrapper, "ArrowDown");
+    simulateKeyDown(wrapper, "Enter");
+    expect(onActivate.mock.calls.length).toBe(3);
+    expect(onActivate.mock.calls[2][0]).toBe("B");
+
+    wrapper.simulate("blur");
+    simulateKeyDown(wrapper, "Enter");
+    expect(onActivate.mock.calls.length).toBe(3);
+  });
+
+  it("does not throw when onActivate is undefined and Enter is pressed", () => {
+    const wrapper = mountTree({
+      expanded: new Set("ABCDEFGHIJKLMNO".split("")),
+      focused: "A",
+    });
+
+    simulateKeyDown(wrapper, "Enter");
+  });
+
   it("ignores key strokes when pressing modifiers", () => {
     const wrapper = mountTree({
       expanded: new Set("ABCDEFGHIJKLMNO".split("")),

packages/devtools-components/src/tree.js

@@ -330,6 +330,9 @@ class Tree extends Component {
       //     onExpand: item => dispatchExpandActionToRedux(item)
       onExpand: PropTypes.func,
       onCollapse: PropTypes.func,
+      // Optional event handler called with the current focused node when the Enter key
+      // is pressed. Can be useful to allow further keyboard actions within the tree node.
+      onActivate: PropTypes.func,
       isExpandable: PropTypes.func,
       // Additional classes to add to the root element.
       className: PropTypes.string,
@@ -369,6 +372,7 @@ class Tree extends Component {
     this._onBlur = this._onBlur.bind(this);
     this._onKeyDown = this._onKeyDown.bind(this);
     this._nodeIsExpandable = this._nodeIsExpandable.bind(this);
+    this._activateNode = oncePerAnimationFrame(this._activateNode).bind(this);
   }
 
   componentDidMount() {
@@ -639,6 +643,10 @@ class Tree extends Component {
 
       case "End":
         this._focusLastNode();
+        return;
+
+      case "Enter":
+        this._activateNode();
     }
   }
 
@@ -726,6 +734,12 @@ class Tree extends Component {
     this._focus(traversal[lastIndex].item, {alignTo: "bottom"});
   }
 
+  _activateNode() {
+    if (this.props.onActivate) {
+      this.props.onActivate(this.props.focused);
+    }
+  }
+
   _nodeIsExpandable(item) {
     return this.props.isExpandable
       ? this.props.isExpandable(item)