From 68f720682918ff5f535408136233a48d39ab427a Mon Sep 17 00:00:00 2001
From: FilipKopecky <kopeckyfil@gmail.com>
Date: Thu, 4 Nov 2021 13:01:16 +0100
Subject: [PATCH] [#71] Removed the react-window-scroller package

Moved the react-window-scroller into our own file
---
 package.json                                 |  1 -
 src/components/VocabularyTermsListWindow.tsx |  4 +-
 src/utils/ReactWindowScroller.js             | 97 ++++++++++++++++++++
 3 files changed, 99 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/ReactWindowScroller.js

diff --git a/package.json b/package.json
index 6b0b971..5d12d95 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,6 @@
     "react-scripts": "4.0.3",
     "react-spinners": "^0.11.0",
     "react-window": "^1.8.6",
-    "react-window-scroller": "^1.0.10",
     "rxjs": "^7.4.0",
     "typescript": "^4.4.4"
   },
diff --git a/src/components/VocabularyTermsListWindow.tsx b/src/components/VocabularyTermsListWindow.tsx
index 72a358d..a8f6217 100644
--- a/src/components/VocabularyTermsListWindow.tsx
+++ b/src/components/VocabularyTermsListWindow.tsx
@@ -2,8 +2,7 @@ import { FixedSizeList as List } from "react-window";
 import React from "react";
 import { DetailItemWrapper } from "./Hierarchy";
 import { Link as RouterLink } from "react-router-dom";
-// @ts-ignore
-import { ReactWindowScroller } from "react-window-scroller";
+import { ReactWindowScroller } from "../utils/ReactWindowScroller";
 import { makeStyles } from "@material-ui/core/styles";
 
 const useStyles = makeStyles(() => ({
@@ -35,6 +34,7 @@ interface VocabularyTermsListProps {
     route: string;
   }[];
 }
+
 const VocabularyTermsListWindow: React.FC<VocabularyTermsListProps> = (
   props
 ) => {
diff --git a/src/utils/ReactWindowScroller.js b/src/utils/ReactWindowScroller.js
new file mode 100644
index 0000000..31fa6d0
--- /dev/null
+++ b/src/utils/ReactWindowScroller.js
@@ -0,0 +1,97 @@
+import { useRef, useEffect, useCallback } from "react";
+import throttle from "lodash/throttle";
+
+const windowScrollPositionKey = {
+  y: "pageYOffset",
+  x: "pageXOffset",
+};
+const documentScrollPositionKey = {
+  y: "scrollTop",
+  x: "scrollLeft",
+};
+
+const getScrollPosition = function getScrollPosition(axis) {
+  return (
+    window[windowScrollPositionKey[axis]] ||
+    document.documentElement[documentScrollPositionKey[axis]] ||
+    document.body[documentScrollPositionKey[axis]] ||
+    0
+  );
+};
+
+const ReactWindowScroller = function ReactWindowScroller(_ref) {
+  const children = _ref.children,
+    _ref$throttleTime = _ref.throttleTime,
+    throttleTime = _ref$throttleTime === void 0 ? 10 : _ref$throttleTime,
+    _ref$isGrid = _ref.isGrid,
+    isGrid = _ref$isGrid === void 0 ? false : _ref$isGrid;
+  const ref = useRef();
+  const outerRef = useRef();
+  useEffect(
+    function () {
+      const handleWindowScroll = throttle(function () {
+        const _ref2 = outerRef.current || {},
+          _ref2$offsetTop = _ref2.offsetTop,
+          offsetTop = _ref2$offsetTop === void 0 ? 0 : _ref2$offsetTop,
+          _ref2$offsetLeft = _ref2.offsetLeft,
+          offsetLeft = _ref2$offsetLeft === void 0 ? 0 : _ref2$offsetLeft;
+
+        const scrollTop = getScrollPosition("y") - offsetTop;
+        const scrollLeft = getScrollPosition("x") - offsetLeft;
+        if (isGrid)
+          ref.current &&
+            ref.current.scrollTo({
+              scrollLeft: scrollLeft,
+              scrollTop: scrollTop,
+            });
+        if (!isGrid) ref.current && ref.current.scrollTo(scrollTop);
+      }, throttleTime);
+      window.addEventListener("scroll", handleWindowScroll);
+      return function () {
+        handleWindowScroll.cancel();
+        window.removeEventListener("scroll", handleWindowScroll);
+      };
+    },
+    [isGrid, throttleTime]
+  );
+  const onScroll = useCallback(
+    function (_ref3) {
+      let scrollLeft = _ref3.scrollLeft,
+        scrollTop = _ref3.scrollTop,
+        scrollOffset = _ref3.scrollOffset,
+        scrollUpdateWasRequested = _ref3.scrollUpdateWasRequested;
+      if (!scrollUpdateWasRequested) return;
+      if (!scrollUpdateWasRequested) return;
+      const top = getScrollPosition("y");
+      const left = getScrollPosition("x");
+
+      const _ref4 = outerRef.current || {},
+        _ref4$offsetTop = _ref4.offsetTop,
+        offsetTop = _ref4$offsetTop === void 0 ? 0 : _ref4$offsetTop,
+        _ref4$offsetLeft = _ref4.offsetLeft,
+        offsetLeft = _ref4$offsetLeft === void 0 ? 0 : _ref4$offsetLeft;
+
+      scrollOffset += Math.min(top, offsetTop);
+      scrollTop += Math.min(top, offsetTop);
+      scrollLeft += Math.min(left, offsetLeft);
+      if (!isGrid && scrollOffset !== top) window.scrollTo(0, scrollOffset);
+
+      if (isGrid && (scrollTop !== top || scrollLeft !== left)) {
+        window.scrollTo(scrollLeft, scrollTop);
+      }
+    },
+    [isGrid]
+  );
+  return children({
+    ref: ref,
+    outerRef: outerRef,
+    style: {
+      width: isGrid ? "auto" : "100%",
+      height: "100%",
+      display: "inline-block",
+    },
+    onScroll: onScroll,
+  });
+};
+
+export { ReactWindowScroller };