#27 ensure visible selected row (during key navigation)

Author: janodvarko

data/components/frame-list.js

@@ -34,6 +34,25 @@ var FrameList = React.createClass({
     return { data: [] };
   },
 
+  componentDidUpdate: function() {
+    var bubble = document.querySelector(".frameBubble.selected");
+    if (bubble) {
+      this.ensureVisible(bubble);
+    }
+  },
+
+  ensureVisible: function(bubble) {
+    var content = document.querySelector(".mainPanelContent");
+
+    if (bubble.offsetTop < content.scrollTop) {
+      content.scrollTop = bubble.offsetTop - 45; // minus padding
+    }
+
+    if (bubble.offsetTop + bubble.offsetHeight > content.scrollTop + content.clientHeight) {
+      content.scrollTop = bubble.offsetTop + bubble.offsetHeight - content.clientHeight;
+    }
+  },
+
   render: function() {
     var { frames, summary, filter } = this.props.frames;
     frames = filter.frames || frames;

data/components/frame-table.js

@@ -28,6 +28,25 @@ var FrameTable = React.createClass({
 
   displayName: "FrameTable",
 
+  componentDidUpdate: function() {
+    var row = document.querySelector(".frameRow.selected");
+    if (row) {
+      this.ensureVisible(row);
+    }
+  },
+
+  ensureVisible: function(row) {
+    var content = document.querySelector(".mainPanelContent");
+
+    if (row.offsetTop < content.scrollTop) {
+      content.scrollTop = row.offsetTop;
+    }
+
+    if (row.offsetTop + row.offsetHeight > content.scrollTop + content.clientHeight) {
+      content.scrollTop = row.offsetTop + row.offsetHeight - content.clientHeight;
+    }
+  },
+
   render: function() {
     var {frames, summary, filter} = this.props.frames;
     frames = filter.frames || frames;