Add ESlint and prettier (#137)

Add ESlint and prettier

Author: ankeetmaini

.eslintrc.js

@@ -0,0 +1,22 @@
+const path = require('path');
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: path.resolve(__dirname, './tsconfig.json'),
+    tsconfigRootDir: __dirname,
+  },
+  plugins: ['@typescript-eslint'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'prettier',
+    'prettier/@typescript-eslint',
+    'prettier/react',
+  ],
+  rules: {
+    '@typescript-eslint/prefer-regexp-exec': 1,
+  },
+};

.prettierrc.toml

@@ -0,0 +1,4 @@
+trailingComma = "es5"
+tabWidth = 2
+semi = true
+singleQuote = true

package.json

@@ -9,7 +9,12 @@
   "scripts": {
     "build": "microbundle",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "lint": "eslint 'src/**/*.{ts,tsx,js,jsx}'",
+    "lint:fix": "yarn lint --fix",
+    "prettier:check": "prettier --check 'src/**/*'",
+    "prettify": "prettier --write 'src/**/*'",
+    "ts-check": "tsc -p tsconfig.json --noEmit"
   },
   "repository": {
     "type": "git",
@@ -43,15 +48,42 @@
     "@types/react-dom": "^16.9.1",
     "@types/storybook__react": "^4.0.2",
     "@types/throttle-debounce": "^2.1.0",
+    "@typescript-eslint/eslint-plugin": "^2.3.2",
+    "@typescript-eslint/parser": "^2.3.2",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.6",
+    "eslint": "^6.5.1",
+    "eslint-config-prettier": "^6.3.0",
+    "eslint-plugin-react": "^7.15.0",
+    "husky": ">=1",
+    "lint-staged": ">=8",
     "microbundle": "^0.11.0",
+    "prettier": "1.18.2",
     "react": "^16.10.1",
     "react-docgen-typescript-loader": "^3.2.1",
     "react-dom": "^16.10.1",
     "typescript": "^3.6.3"
   },
   "dependencies": {
     "throttle-debounce": "^2.1.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn run ts-check && lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,css,json,md}": [
+      "prettier --write",
+      "git add"
+    ],
+    "*.js": [
+      "eslint --fix",
+      "git add"
+    ],
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "git add"
+    ]
   }
 }

src/index.tsx

@@ -1,6 +1,6 @@
-import React, { Component, ReactNode, CSSProperties } from "react";
-import { throttle } from "throttle-debounce";
-import { ThresholdUnits, parseThreshold } from "./utils/threshold";
+import React, { Component, ReactNode, CSSProperties } from 'react';
+import { throttle } from 'throttle-debounce';
+import { ThresholdUnits, parseThreshold } from './utils/threshold';
 
 type Fn = () => any;
 interface Props {
@@ -37,17 +37,15 @@ export default class InfiniteScroll extends Component<Props, State> {
 
     this.state = {
       showLoader: false,
-      pullToRefreshThresholdBreached: false
+      pullToRefreshThresholdBreached: false,
     };
 
-    this.onScrollListener = this.onScrollListener.bind(this);
     this.throttledOnScrollListener = throttle(150, this.onScrollListener).bind(
       this
     );
     this.onStart = this.onStart.bind(this);
     this.onMove = this.onMove.bind(this);
     this.onEnd = this.onEnd.bind(this);
-    this.getScrollableTarget = this.getScrollableTarget.bind(this);
   }
 
   private throttledOnScrollListener: (e: MouseEvent) => void;
@@ -59,13 +57,13 @@ export default class InfiniteScroll extends Component<Props, State> {
   private _pullDown: HTMLDivElement | undefined;
 
   // variables to keep track of pull down behaviour
-  private startY: number = 0;
-  private currentY: number = 0;
-  private dragging: boolean = false;
+  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: number = 0;
+  private maxPullDownDistance = 0;
 
   componentDidMount() {
     this._scrollableNode = this.getScrollableTarget();
@@ -74,13 +72,13 @@ export default class InfiniteScroll extends Component<Props, State> {
       : this._scrollableNode || window;
 
     if (this.el) {
-      this.el.addEventListener("scroll", e =>
+      this.el.addEventListener('scroll', e =>
         this.throttledOnScrollListener(e as MouseEvent)
       );
     }
 
     if (
-      typeof this.props.initialScrollY === "number" &&
+      typeof this.props.initialScrollY === 'number' &&
       this.el &&
       this.el instanceof HTMLElement &&
       this.el.scrollHeight > this.props.initialScrollY
@@ -89,13 +87,13 @@ export default class InfiniteScroll extends Component<Props, State> {
     }
 
     if (this.props.pullDownToRefresh && this.el) {
-      this.el.addEventListener("touchstart", this.onStart);
-      this.el.addEventListener("touchmove", this.onMove);
-      this.el.addEventListener("touchend", this.onEnd);
+      this.el.addEventListener('touchstart', this.onStart);
+      this.el.addEventListener('touchmove', this.onMove);
+      this.el.addEventListener('touchend', this.onEnd);
 
-      this.el.addEventListener("mousedown", this.onStart);
-      this.el.addEventListener("mousemove", this.onMove);
-      this.el.addEventListener("mouseup", this.onEnd);
+      this.el.addEventListener('mousedown', this.onStart);
+      this.el.addEventListener('mousemove', this.onMove);
+      this.el.addEventListener('mouseup', this.onEnd);
 
       // get BCR of pullDown element to position it above
       this.maxPullDownDistance =
@@ -106,7 +104,7 @@ export default class InfiniteScroll extends Component<Props, State> {
         0;
       this.forceUpdate();
 
-      if (typeof this.props.refreshFunction !== "function") {
+      if (typeof this.props.refreshFunction !== 'function') {
         throw new Error(
           `Mandatory prop "refreshFunction" missing.
           Pull Down To Refresh functionality will not work
@@ -118,23 +116,23 @@ export default class InfiniteScroll extends Component<Props, State> {
 
   componentWillUnmount() {
     if (this.el) {
-      this.el.removeEventListener("scroll", e =>
+      this.el.removeEventListener('scroll', e =>
         this.throttledOnScrollListener(e as MouseEvent)
       );
 
       if (this.props.pullDownToRefresh) {
-        this.el.removeEventListener("touchstart", this.onStart);
-        this.el.removeEventListener("touchmove", this.onMove);
-        this.el.removeEventListener("touchend", this.onEnd);
+        this.el.removeEventListener('touchstart', this.onStart);
+        this.el.removeEventListener('touchmove', this.onMove);
+        this.el.removeEventListener('touchend', this.onEnd);
 
-        this.el.removeEventListener("mousedown", this.onStart);
-        this.el.removeEventListener("mousemove", this.onMove);
-        this.el.removeEventListener("mouseup", this.onEnd);
+        this.el.removeEventListener('mousedown', this.onStart);
+        this.el.removeEventListener('mousemove', this.onMove);
+        this.el.removeEventListener('mouseup', this.onEnd);
       }
     }
   }
 
-  componentWillReceiveProps(props: Props) {
+  UNSAFE_componentWillReceiveProps(props: Props) {
     // do nothing when dataLength and key are unchanged
     if (
       this.props.key === props.key &&
@@ -146,14 +144,14 @@ export default class InfiniteScroll extends Component<Props, State> {
     // update state when new data was sent in
     this.setState({
       showLoader: false,
-      pullToRefreshThresholdBreached: false
+      pullToRefreshThresholdBreached: false,
     });
   }
 
-  getScrollableTarget() {
+  getScrollableTarget = () => {
     if (this.props.scrollableTarget instanceof HTMLElement)
       return this.props.scrollableTarget;
-    if (typeof this.props.scrollableTarget === "string") {
+    if (typeof this.props.scrollableTarget === 'string') {
       return document.getElementById(this.props.scrollableTarget);
     }
     if (this.props.scrollableTarget === null) {
@@ -163,7 +161,7 @@ export default class InfiniteScroll extends Component<Props, State> {
       `);
     }
     return null;
-  }
+  };
 
   onStart: EventListener = (evt: Event) => {
     if (this.lastScrollTop) return;
@@ -178,7 +176,7 @@ export default class InfiniteScroll extends Component<Props, State> {
     this.currentY = this.startY;
 
     if (this._infScroll) {
-      this._infScroll.style.willChange = "transform";
+      this._infScroll.style.willChange = 'transform';
       this._infScroll.style.transition = `transform 0.2s cubic-bezier(0,0,0.31,1)`;
     }
   };
@@ -200,15 +198,15 @@ export default class InfiniteScroll extends Component<Props, State> {
       Number(this.props.pullDownToRefreshThreshold)
     ) {
       this.setState({
-        pullToRefreshThresholdBreached: true
+        pullToRefreshThresholdBreached: true,
       });
     }
 
     // so you can drag upto 1.5 times of the maxPullDownDistance
     if (this.currentY - this.startY > this.maxPullDownDistance * 1.5) return;
 
     if (this._infScroll) {
-      this._infScroll.style.overflow = "visible";
+      this._infScroll.style.overflow = 'visible';
       this._infScroll.style.transform = `translate3d(0px, ${this.currentY -
         this.startY}px, 0px)`;
     }
@@ -227,9 +225,9 @@ export default class InfiniteScroll extends Component<Props, State> {
     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';
       }
     });
   };
@@ -257,14 +255,14 @@ export default class InfiniteScroll extends Component<Props, State> {
     );
   }
 
-  onScrollListener(event: MouseEvent) {
-    if (typeof this.props.onScroll === "function") {
+  onScrollListener = (event: MouseEvent) => {
+    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 && this.props.onScroll(event), 0);
     }
 
-    let target =
+    const target =
       this.props.height || this._scrollableNode
         ? (event.target as HTMLElement)
         : document.documentElement.scrollTop
@@ -275,7 +273,7 @@ export default class InfiniteScroll extends Component<Props, State> {
     // prevents multiple triggers.
     if (this.actionTriggered) return;
 
-    let atBottom = this.isElementAtBottom(target, this.props.scrollThreshold);
+    const atBottom = this.isElementAtBottom(target, this.props.scrollThreshold);
 
     // call the `next` function in the props to trigger the next data fetch
     if (atBottom && this.props.hasMore) {
@@ -285,14 +283,14 @@ export default class InfiniteScroll extends Component<Props, State> {
     }
 
     this.lastScrollTop = target.scrollTop;
-  }
+  };
 
   render() {
     const style = {
-      height: this.props.height || "auto",
-      overflow: "auto",
-      WebkitOverflowScrolling: "touch",
-      ...this.props.style
+      height: this.props.height || 'auto',
+      overflow: 'auto',
+      WebkitOverflowScrolling: 'touch',
+      ...this.props.style,
     } as CSSProperties;
     const hasChildren =
       this.props.hasChildren ||
@@ -306,26 +304,26 @@ export default class InfiniteScroll extends Component<Props, State> {
     // on drag down as overflow becomes visible
     const outerDivStyle =
       this.props.pullDownToRefresh && this.props.height
-        ? { overflow: "auto" }
+        ? { overflow: 'auto' }
         : {};
     return (
       <div style={outerDivStyle}>
         <div
-          className={`infinite-scroll-component ${this.props.className || ""}`}
+          className={`infinite-scroll-component ${this.props.className || ''}`}
           ref={(infScroll: HTMLDivElement) => (this._infScroll = infScroll)}
           style={style}
         >
           {this.props.pullDownToRefresh && (
             <div
-              style={{ position: "relative" }}
+              style={{ position: 'relative' }}
               ref={(pullDown: HTMLDivElement) => (this._pullDown = pullDown)}
             >
               <div
                 style={{
-                  position: "absolute",
+                  position: 'absolute',
                   left: 0,
                   right: 0,
-                  top: -1 * this.maxPullDownDistance
+                  top: -1 * this.maxPullDownDistance,
                 }}
               >
                 {this.state.pullToRefreshThresholdBreached

src/stories/WindowInfiniteScrollComponent.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import InfiniteScroll from "../index";
+import React from 'react';
+import InfiniteScroll from '../index';
 type State = {
   data: number[];
 };
@@ -8,7 +8,7 @@ export default class WindowInfiniteScrollComponent extends React.Component<
   State
 > {
   state = {
-    data: new Array(100).fill(1)
+    data: new Array(100).fill(1),
   };
 
   next = () => {
@@ -27,7 +27,10 @@ export default class WindowInfiniteScrollComponent extends React.Component<
           dataLength={this.state.data.length}
         >
           {this.state.data.map((_, i) => (
-            <div style={{ height: 30, margin: 4, border: "1px solid hotpink" }}>
+            <div
+              key={i}
+              style={{ height: 30, margin: 4, border: '1px solid hotpink' }}
+            >
               #{i + 1} row
             </div>
           ))}