Port to ts (#130)

Port to ts

Author: ankeetmaini

package.json

@@ -35,23 +35,29 @@
     "react": ">=0.14.0"
   },
   "devDependencies": {
-    "babel": "^5.8.23",
-    "babel-eslint": "^4.1.3",
-    "babel-loader": "^5.3.1",
+    "@types/react-dom": "^16.9.1",
+    "babel": "^6.23.0",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^10.0.3",
+    "babel-loader": "7",
     "eslint-plugin-react": "^3.5.1",
     "html-loader": "^0.4.3",
-    "html-webpack-plugin": "^2.10.0",
+    "html-webpack-plugin": "^3.2.0",
     "prop-types": "~15.5.8",
     "react": "~15.5.4",
     "react-dom": "~15.5.4",
     "react-hot-loader": "^1.3.0",
+    "ts-loader": "^6.1.2",
     "typescript": "^3.6.3",
-    "webpack": "^1.10.1",
+    "webpack": "^4.41.0",
+    "webpack-cli": "^3.3.9",
     "webpack-dev-server": "^1.10.1",
     "webpack-hot-middleware": "^2.10.0"
   },
   "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,29 +1,29 @@
 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;
 interface Props {
-  next: Fn;
-  hasMore: boolean;
-  children: ReactNode;
+  next?: Fn;
+  hasMore?: boolean;
+  children?: ReactNode;
   loader: ReactNode;
-  scrollThreshold: number | string;
-  endMessage: ReactNode;
-  style: CSSProperties;
-  height: number;
-  scrollableTarget: ReactNode;
-  hasChildren: boolean;
-  pullDownToRefresh: boolean;
-  pullDownToRefreshContent: ReactNode;
-  releaseToRefreshContent: ReactNode;
-  pullDownToRefreshThreshold: number;
-  refreshFunction: Fn;
-  onScroll: (e: MouseEvent) => any;
+  scrollThreshold?: number | string;
+  endMessage?: ReactNode;
+  style?: CSSProperties;
+  height?: number;
+  scrollableTarget?: ReactNode;
+  hasChildren?: boolean;
+  pullDownToRefresh?: boolean;
+  pullDownToRefreshContent?: ReactNode;
+  releaseToRefreshContent?: ReactNode;
+  pullDownToRefreshThreshold?: number;
+  refreshFunction?: Fn;
+  onScroll?: (e: MouseEvent) => any;
   dataLength: number;
-  initialScrollY: number;
-  key: string;
-  className: string;
+  initialScrollY?: number;
+  key?: string;
+  className?: string;
 }
 
 interface State {
@@ -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);
@@ -191,7 +191,7 @@ export default class InfiniteScroll extends Component<Props, State> {
     // user is scrolling down to up
     if (this.currentY < this.startY) return;
 
-    if (this.currentY - this.startY >= this.props.pullDownToRefreshThreshold) {
+    if (this.currentY - this.startY >= Number(this.props.pullDownToRefreshThreshold)) {
       this.setState({
         pullToRefreshThresholdBreached: true
       });
@@ -207,7 +207,7 @@ export default class InfiniteScroll extends Component<Props, State> {
     }
   };
 
-  onEnd: EventListener = evt => {
+  onEnd: EventListener = () => {
     this.startY = 0;
     this.currentY = 0;
 
@@ -254,7 +254,7 @@ export default class InfiniteScroll extends Component<Props, State> {
     if (typeof this.props.onScroll === "function") {
       // Execute this callback in next tick so that it does not affect the
       // functionality of the library.
-      setTimeout(() => this.props.onScroll(event), 0);
+      setTimeout(() => this.props.onScroll && this.props.onScroll(event), 0);
     }
 
     let target =
@@ -274,7 +274,7 @@ export default class InfiniteScroll extends Component<Props, State> {
     if (atBottom && this.props.hasMore) {
       this.actionTriggered = true;
       this.setState({ showLoader: true });
-      this.props.next();
+      this.props.next && this.props.next();
     }
 
     this.lastScrollTop = target.scrollTop;

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

@@ -9,20 +9,29 @@ var common = {
   entry: {},
   output: {},
   module: {
-    loaders: [
-      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
-      { test: /\.css$/, exclude: /node_modules/, loader: 'style!css' }
+    rules: [
+      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
+      { test: /\.css$/, exclude: /node_modules/, use: 'style!css' },
+      { test: /\.tsx?$/, exclude: /node_modules/, use: 'ts-loader' },
     ]
   },
   plugins: [
-    new webpack.NoErrorsPlugin()
-  ]
+    new webpack.NoEmitOnErrorsPlugin()
+  ],
+  resolve: {
+    modules: [
+        path.join(__dirname, "src"),
+        "node_modules"
+      ],
+    extensions: ['.js', '.ts', '.tsx'],
+  },
 };
 
 var finalConf;
 if (isDevelopment) {
   finalConf = Object.assign({}, common);
-  finalConf.entry.app = ['webpack-hot-middleware/client', './demos/index.js']; // HMR
+  finalConf.mode = 'development';
+  finalConf.entry.app = ['./demos/index.tsx']; // HMR
   finalConf.output = {
     path: BUILD_PATH,
     filename: 'demo.js'
@@ -31,13 +40,12 @@ if (isDevelopment) {
   finalConf.plugins = [...finalConf.plugins,
     new HtmlWebpackPlugin({
       template: './index.html'
-    }),
-    new webpack.optimize.OccurenceOrderPlugin(),
-    new webpack.HotModuleReplacementPlugin()];
+    })];
 } else {
   // production config
   finalConf = Object.assign({}, common);
-  finalConf.entry.app = './app/index.js';
+  finalConf.entry.app = './src/index.tsx';
+  finalConf.mode = 'production';
   finalConf.output = {
     path: BUILD_PATH,
     filename: 'index.js',
@@ -54,8 +62,6 @@ if (isDevelopment) {
     }
   };
   finalConf.plugins = [...finalConf.plugins,
-    new webpack.optimize.OccurrenceOrderPlugin(),
-    new webpack.optimize.DedupePlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': '"production"'
     })