convert utils to ts

Author: Rajat Sancheti

package.json

@@ -52,6 +52,8 @@
   },
   "dependencies": {
     "@types/prop-types": "^15.7.2",
-    "@types/react": "^16.9.2"
+    "@types/react": "^16.9.2",
+    "@types/throttle-debounce": "^2.1.0",
+    "throttle-debounce": "^2.1.0"
   }
 }

src/index.tsx

@@ -1,5 +1,5 @@
 import React, { Component, ReactNode, CSSProperties } from "react";
-import throttle from "./utils/throttle";
+import { throttle } from 'throttle-debounce';
 import { ThresholdUnits, parseThreshold } from "./utils/threshold";
 
 type Fn = () => any;
@@ -41,7 +41,7 @@ export default class InfiniteScroll extends Component<Props, State> {
     };
 
     this.onScrollListener = this.onScrollListener.bind(this);
-    this.throttledOnScrollListener = throttle(this.onScrollListener, 150).bind(
+    this.throttledOnScrollListener = throttle(150, this.onScrollListener).bind(
       this
     );
     this.onStart = this.onStart.bind(this);
@@ -50,7 +50,7 @@ export default class InfiniteScroll extends Component<Props, State> {
     this.getScrollableTarget = this.getScrollableTarget.bind(this);
   }
 
-  private throttledOnScrollListener: () => void;
+  private throttledOnScrollListener: (e: MouseEvent) => void;
   private _scrollableNode: HTMLElement | undefined | null;
   private el: HTMLElement | undefined | Window & typeof globalThis;
   private _infScroll: HTMLDivElement | undefined;
@@ -74,7 +74,7 @@ export default class InfiniteScroll extends Component<Props, State> {
       : this._scrollableNode || window;
 
     if (this.el) {
-      this.el.addEventListener("scroll", this.throttledOnScrollListener);
+      this.el.addEventListener("scroll", (e) => this.throttledOnScrollListener(e as MouseEvent));
     }
 
     if (
@@ -116,7 +116,7 @@ export default class InfiniteScroll extends Component<Props, State> {
 
   componentWillUnmount() {
     if (this.el) {
-      this.el.removeEventListener("scroll", this.throttledOnScrollListener);
+      this.el.removeEventListener("scroll", (e) => this.throttledOnScrollListener(e as MouseEvent));
 
       if (this.props.pullDownToRefresh) {
         this.el.removeEventListener("touchstart", this.onStart);

src/utils/threshold.ts

@@ -8,7 +8,7 @@ const defaultThreshold = {
   value: 0.8,
 };
 
-export function parseThreshold(scrollThreshold) {
+export function parseThreshold(scrollThreshold: string | number) {
   if (typeof scrollThreshold === "number") {
     return {
       unit: ThresholdUnits.Percent,

src/utils/throttle.ts

@@ -15,6 +15,11 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/throttle-debounce@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz#1c3df624bfc4b62f992d3012b84c56d41eab3776"
+  integrity sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -3329,6 +3334,11 @@ tar@^4:
     safe-buffer "^5.1.2"
     yallist "^3.0.3"
 
+throttle-debounce@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.1.0.tgz#257e648f0a56bd9e54fe0f132c4ab8611df4e1d5"
+  integrity sha512-AOvyNahXQuU7NN+VVvOOX+uW6FPaWdAOdRP5HfwYxAfCzXTFKRMoIMk+n+po318+ktcChx+F1Dd91G3YHeMKyg==
+
 through@~2.3.6, through@~2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"