Add Prop, State interfaces (#127)

Author: ankeetmaini

package.json

@@ -7,7 +7,7 @@
     "dev": "NODE_ENV=development node server.js",
     "build-demos": "NODE_ENV=development node_modules/.bin/webpack",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "prepublish": "NODE_ENV=production node_modules/.bin/webpack --config webpack.config.js"
+    "sprepublish": "NODE_ENV=production node_modules/.bin/webpack --config webpack.config.js"
   },
   "directories": {
     "demos": "demos"
@@ -49,5 +49,9 @@
     "webpack": "^1.10.1",
     "webpack-dev-server": "^1.10.1",
     "webpack-hot-middleware": "^2.10.0"
+  },
+  "dependencies": {
+    "@types/prop-types": "^15.7.2",
+    "@types/react": "^16.9.2"
   }
 }

app/index.js src/index.tsxapp/index.js renamed to src/index.tsx

@@ -1,29 +1,43 @@
-import React, { Component } from "react";
+import React, { Component, ReactNode, CSSProperties } from "react";
 import PropTypes from "prop-types";
 import throttle from "./utils/throttle";
 import { ThresholdUnits, parseThreshold } from "./utils/threshold";
+type Fn = () => any;
+interface Props {
+  next: Fn;
+  hasMore: ReactNode;
+  children: ReactNode;
+  loader: ReactNode;
+  scrollThreshold: number | string;
+  endMessage: ReactNode;
+  style: CSSProperties;
+  height: number;
+  scrollableTarget: ReactNode;
+  hasChildren: ReactNode;
+  pullDownToRefresh: ReactNode;
+  pullDownToRefreshContent: ReactNode;
+  releaseToRefreshContent: ReactNode;
+  pullDownToRefreshThreshold: number;
+  refreshFunction: Fn;
+  onScroll: Fn;
+  dataLength: number;
+}
 
-export default class InfiniteScroll extends Component {
-  constructor(props) {
-    super(props);
+interface State {
+  showLoader: boolean;
+  pullToRefreshThresholdBreached: boolean;
+}
 
-    this.lastScrollTop = 0;
-    this.actionTriggered = false;
+export default class InfiniteScroll extends Component<Props, State> {
+  private throttledOnScrollListener: () => void;
+  constructor(props: Props) {
+    super(props);
 
     this.state = {
       showLoader: false,
       pullToRefreshThresholdBreached: false
     };
 
-    // variables to keep track of pull down behaviour
-    this.startY = 0;
-    this.currentY = 0;
-    this.dragging = false;
-
-    // will be populated in componentDidMount
-    // based on the height of the pull down element
-    this.maxPullDownDistance = 0;
-
     this.onScrollListener = this.onScrollListener.bind(this);
     this.throttledOnScrollListener = throttle(this.onScrollListener, 150).bind(
       this
@@ -34,6 +48,17 @@ export default class InfiniteScroll extends Component {
     this.getScrollableTarget = this.getScrollableTarget.bind(this);
   }
 
+  private lastScrollTop = 0;
+  private actionTriggered = false;
+
+  // variables to keep track of pull down behaviour
+  private startY = 0;
+  private currentY = 0;
+  private dragging = false;
+
+  // will be populated in componentDidMount
+  // based on the height of the pull down element
+  private maxPullDownDistance = 0;
   componentDidMount() {
     this._scrollableNode = this.getScrollableTarget();
     this.el = this.props.height
@@ -87,7 +112,11 @@ export default class InfiniteScroll extends Component {
 
   componentWillReceiveProps(props) {
     // do nothing when dataLength and key are unchanged
-    if (this.props.key === props.key && this.props.dataLength === props.dataLength) return;
+    if (
+      this.props.key === props.key &&
+      this.props.dataLength === props.dataLength
+    )
+      return;
 
     this.actionTriggered = false;
     // update state when new data was sent in
@@ -98,8 +127,9 @@ export default class InfiniteScroll extends Component {
   }
 
   getScrollableTarget() {
-    if (this.props.scrollableTarget instanceof HTMLElement) return this.props.scrollableTarget;
-    if (typeof this.props.scrollableTarget === 'string') {
+    if (this.props.scrollableTarget instanceof HTMLElement)
+      return this.props.scrollableTarget;
+    if (typeof this.props.scrollableTarget === "string") {
       return document.getElementById(this.props.scrollableTarget);
     }
     if (this.props.scrollableTarget === null) {
@@ -156,9 +186,9 @@ export default class InfiniteScroll extends Component {
     requestAnimationFrame(() => {
       // this._infScroll
       if (this._infScroll) {
-          this._infScroll.style.overflow = "auto";
-          this._infScroll.style.transform = "none";
-          this._infScroll.style.willChange = "none";
+        this._infScroll.style.overflow = "auto";
+        this._infScroll.style.transform = "none";
+        this._infScroll.style.willChange = "none";
       }
     });
   }
@@ -178,7 +208,8 @@ export default class InfiniteScroll extends Component {
     }
 
     return (
-      target.scrollTop + clientHeight >= threshold.value / 100 * target.scrollHeight
+      target.scrollTop + clientHeight >=
+      (threshold.value / 100) * target.scrollHeight
     );
   }
 
@@ -193,8 +224,8 @@ export default class InfiniteScroll extends Component {
       this.props.height || this._scrollableNode
         ? event.target
         : document.documentElement.scrollTop
-          ? document.documentElement
-          : document.body;
+        ? document.documentElement
+        : document.body;
 
     // return immediately if the action has already been triggered,
     // prevents multiple triggers.
@@ -232,7 +263,7 @@ export default class InfiniteScroll extends Component {
     return (
       <div style={outerDivStyle}>
         <div
-          className={`infinite-scroll-component ${this.props.className || ''}`}
+          className={`infinite-scroll-component ${this.props.className || ""}`}
           ref={infScroll => (this._infScroll = infScroll)}
           style={style}
         >

app/utils/threshold.js src/utils/threshold.tsapp/utils/threshold.js renamed to src/utils/threshold.ts

@@ -2,6 +2,19 @@
 # yarn lockfile v1
 
 
+"@types/prop-types@*", "@types/prop-types@^15.7.2":
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.2.tgz#0e58ae66773d7fd7c372a493aff740878ec9ceaa"
+  integrity sha512-f8JzJNWVhKtc9dg/dyDNfliTKNOJSLa7Oht/ElZdF/UbMUmAH3rLmAk3ODNjw0mZajDEgatA03tRjB4+Dp/tzA==
+
+"@types/react@^16.9.2":
+  version "16.9.2"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.2.tgz#6d1765431a1ad1877979013906731aae373de268"
+  integrity sha512-jYP2LWwlh+FTqGd9v7ynUKZzjj98T8x7Yclz479QdRhHfuW9yQ+0jjnD31eXSXutmBpppj5PYNLYLRfnZJvcfg==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -778,6 +791,11 @@ css-what@2.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
   integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
 
+csstype@^2.2.0:
+  version "2.6.6"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.6.tgz#c34f8226a94bbb10c32cc0d714afdf942291fc41"
+  integrity sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"