Scroll 'Add Event' list items into view when necessary

Fixes #246. Introduces a small dependency, react-scroll-into-view-if-needed.
chrismaltby · Oct 14, 2019 · 2b089df · 2b089df
1 parent e23c809
commit 2b089df
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -116,6 +116,7 @@
     "react-highlight-words": "^0.16.0",
     "react-hot-loader": "^3.0.0-beta.6",
     "react-redux": "^5.0.7",
+    "react-scroll-into-view-if-needed": "^2.1.7",
     "react-select": "^3.0.4",
     "redux": "^4.0.0",
     "redux-thunk": "^2.2.0",

diff --git a/src/components/script/AddCommandButton.js b/src/components/script/AddCommandButton.js
@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
 import Highlighter from "react-highlight-words";
+import ScrollIntoViewIfNeeded from 'react-scroll-into-view-if-needed';
 import Button from "../library/Button";
 import {
   EventsOnlyForActors,
@@ -189,7 +190,12 @@ class AddCommandButton extends Component {
             </div>
             <div className="AddCommandButton__List">
               {actionsList.map((action, actionIndex) => (
-                <div
+                <ScrollIntoViewIfNeeded
+                  active={selectedIndex === actionIndex}
+                  options={{
+                    behavior: 'instant',
+                    block: 'nearest'
+                  }}
                   key={action.id}
                   className={cx("AddCommandButton__ListItem", {
                     "AddCommandButton__ListItem--Selected":
@@ -204,7 +210,7 @@ class AddCommandButton extends Component {
                     autoEscape
                     textToHighlight={action.name}
                   />
-                </div>
+                </ScrollIntoViewIfNeeded>
               ))}
               {actionsList.length === 0 && (
                 <div

diff --git a/yarn.lock b/yarn.lock
@@ -8274,6 +8274,11 @@ react-redux@^5.0.7:
     react-is "^16.6.0"
     react-lifecycles-compat "^3.0.0"
 
+react-scroll-into-view-if-needed@^2.1.7:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/react-scroll-into-view-if-needed/-/react-scroll-into-view-if-needed-2.1.7.tgz#cb349882ec1462025ed63d47bf37f3504f7c1b32"
+  integrity sha512-ix9AB0GMFkilR05PQN9YvdgyEUkeZQB0JhQeafxyLdl+hzQc60+Ji/NZUiQEkxSxDZ3G5A3UJoxb+HnmNXiQsA==
+
 react-select@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.0.4.tgz#16bde37c24fd4f6444914d4681e78f15ffbc86d3"