feat(scroll): upgrade scroll in to view if needed (#1200)

BREAKING CHANGE: Major version upgrade for scroll-into-view-if-needed.

Author: Sunyang730

package.json

@@ -242,7 +242,7 @@
         "sass-lint": "^1.12.1",
         "sass-loader": "^7.1.0",
         "sass-variable-parser": "^1.2.2",
-        "scroll-into-view-if-needed": "^1.5.0",
+        "scroll-into-view-if-needed": "^2.2.20",
         "semantic-release": "^16.0.0-beta.19",
         "sinon": "^2.3.7",
         "string-replace-loader": "^2.1.1",
@@ -289,7 +289,7 @@
         "react-textarea-autosize": "^7.1.0",
         "react-virtualized": "^9.21.0",
         "regenerator-runtime": "^0.13.2",
-        "scroll-into-view-if-needed": "^1.5.0",
+        "scroll-into-view-if-needed": "^2.2.20",
         "tabbable": "^1.1.2",
         "uuid": "^3.3.2"
     }

src/features/metadata-instance-editor/Instance.js

@@ -4,7 +4,6 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import isEqual from 'lodash/isEqual';
 import cloneDeep from 'lodash/cloneDeep';
-import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed';
 
 import Collapsible from '../../components/collapsible/Collapsible';
 import LoadingIndicatorWrapper from '../../components/loading-indicator/LoadingIndicatorWrapper';
@@ -14,6 +13,7 @@ import IconMetadataColored from '../../icons/general/IconMetadataColored';
 import IconAlertCircle from '../../icons/general/IconAlertCircle';
 import IconEdit from '../../icons/general/IconEdit';
 import { kingCrimson } from '../../styles/variables';
+import { scrollIntoView } from '../../utils/dom';
 
 import CascadePolicy from './CascadePolicy';
 import TemplatedInstance from './TemplatedInstance';
@@ -134,10 +134,9 @@ class Instance extends React.PureComponent<Props, State> {
     componentDidUpdate() {
         const element = this.collapsibleRef.current;
         if (element && this.state.shouldConfirmRemove) {
-            scrollIntoViewIfNeeded(element, false, {
-                centerIfNeeded: false,
-                duration: 320,
-                easing: 'easeInOut',
+            scrollIntoView(element, {
+                block: 'start',
+                behavior: 'smooth',
             });
         }
     }

src/utils/__tests__/dom-test.js

@@ -47,7 +47,10 @@ describe('util/dom', () => {
             const itemEl = document.querySelector('.button');
             const parentEl = document.querySelector('.modal');
             scrollIntoView(itemEl);
-            expect(scrollIntoViewIfNeeded).toHaveBeenCalledWith(itemEl, false, undefined, parentEl);
+            expect(scrollIntoViewIfNeeded).toHaveBeenCalledWith(itemEl, {
+                boundary: parentEl,
+                scrollMode: 'if-needed',
+            });
         });
 
         test('should not call scrollIntoViewIfNeeded when parent element is evaluated as null', () => {

src/utils/dom.js

@@ -106,12 +106,22 @@ export function focus(root: ?HTMLElement, selector?: string, focusRoot: boolean
  * Scrolls the container / modal / wrapper instead of the body
  *
  * @param {HTMLElement} itemEl - the base dom element to search
+ * @param {Object} options - scroll into view options to override
  * @return {void}
  */
-export function scrollIntoView(itemEl: ?HTMLElement): void {
+export function scrollIntoView(itemEl: ?HTMLElement, options?: Object = {}): void {
     // @NOTE: breaks encapsulation but alternative is unknown child ref
     if (itemEl) {
         const parentEl = itemEl.closest(`.body, .modal, .${OVERLAY_WRAPPER_CLASS}`);
-        scrollIntoViewIfNeeded(itemEl, false, undefined, parentEl);
+        scrollIntoViewIfNeeded(
+            itemEl,
+            Object.assign(
+                {
+                    scrollMode: 'if-needed',
+                    boundary: parentEl,
+                },
+                options,
+            ),
+        );
     }
 }

yarn.lock

@@ -2242,13 +2242,6 @@ alphanum-sort@^1.0.0:
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
   integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
 
-amator@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/amator/-/amator-1.0.1.tgz#0fd3663fef5f3334d088cf68a70ba74398aa0e26"
-  integrity sha1-D9NmP+9fMzTQiM9opwunQ5iqDiY=
-  dependencies:
-    bezier-easing "^2.0.3"
-
 amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
@@ -3073,11 +3066,6 @@ before-after-hook@^1.2.0:
   resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-1.3.2.tgz#7bfbf844ad670aa7a96b5a4e4e15bd74b08ed66b"
   integrity sha512-zyPgY5dgbf99c0uGUjhY4w+mxqEGxPKg9RQDl34VvrVh2bM31lFN+mwR1ZHepq/KA3VCPk1gwJZL6IIJqjLy2w==
 
-bezier-easing@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/bezier-easing/-/bezier-easing-2.0.3.tgz#cb493fddb7f8920ecca00973344ce0518885f17e"
-  integrity sha1-y0k/3bf4kg7MoAlzNEzgUYiF8X4=
-
 bfj@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/bfj/-/bfj-6.1.1.tgz#05a3b7784fbd72cfa3c22e56002ef99336516c48"
@@ -4318,6 +4306,11 @@ compression@^1.5.2:
     safe-buffer "5.1.2"
     vary "~1.1.2"
 
+compute-scroll-into-view@1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.11.tgz#7ff0a57f9aeda6314132d8994cce7aeca794fecf"
+  integrity sha512-uUnglJowSe0IPmWOdDtrlHXof5CTIJitfJEyITHBW6zDVOGu9Pjk5puaLM73SLcwak0L4hEjO7Td88/a6P5i7A==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -15186,12 +15179,12 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-scroll-into-view-if-needed@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-1.5.0.tgz#39e8ce15cb74348a897ee96110e848fed50aaf95"
-  integrity sha512-6vTXm++xyIDkQ+O+gcmu9rp3NW61SWUdtIRhKh4uYuhcGZgClc1NJSz2C6HRNVIcL4VXIKAaOYq06cwK7Nx9Ag==
+scroll-into-view-if-needed@^2.2.20:
+  version "2.2.20"
+  resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.20.tgz#3a46847a72233a3af9770e55df450f2a7f2e2a0e"
+  integrity sha512-P9kYMrhi9f6dvWwTGpO5I3HgjSU/8Mts7xL3lkoH5xlewK7O9Obdc5WmMCzppln7bCVGNmf3qfoZXrpCeyNJXw==
   dependencies:
-    amator "1.0.1"
+    compute-scroll-into-view "1.0.11"
 
 scss-tokenizer@^0.2.3:
   version "0.2.3"