Add ESlint and prettier

Author: ankeetmaini

.eslintrc.js

@@ -0,0 +1,19 @@
+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',
+  ],
+};

.prettierrc.toml

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

package.json

@@ -9,7 +9,11 @@
   "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/**/*'"
   },
   "repository": {
     "type": "git",
@@ -43,9 +47,15 @@
     "@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",
     "microbundle": "^0.11.0",
+    "prettier": "1.18.2",
     "react": "^16.10.1",
     "react-docgen-typescript-loader": "^3.2.1",
     "react-dom": "^16.10.1",

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,7 +37,7 @@ export default class InfiniteScroll extends Component<Props, State> {
 
     this.state = {
       showLoader: false,
-      pullToRefreshThresholdBreached: false
+      pullToRefreshThresholdBreached: false,
     };
 
     this.onScrollListener = this.onScrollListener.bind(this);
@@ -59,13 +59,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 +74,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 +89,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 +106,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,18 +118,18 @@ 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);
       }
     }
   }
@@ -146,14 +146,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() {
     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) {
@@ -178,7 +178,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 +200,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 +227,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';
       }
     });
   };
@@ -258,13 +258,13 @@ export default class InfiniteScroll extends Component<Props, State> {
   }
 
   onScrollListener(event: MouseEvent) {
-    if (typeof this.props.onScroll === "function") {
+    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 +275,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) {
@@ -289,10 +289,10 @@ export default class InfiniteScroll extends Component<Props, State> {
 
   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 +306,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,7 @@ 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 style={{ height: 30, margin: 4, border: '1px solid hotpink' }}>
               #{i + 1} row
             </div>
           ))}

src/stories/stories.tsx

@@ -1,9 +1,9 @@
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
 
-import WindowInf from "./WindowInfiniteScrollComponent";
-const stories = storiesOf("Components", module);
+import WindowInf from './WindowInfiniteScrollComponent';
+const stories = storiesOf('Components', module);
 
-stories.add("InfiniteScroll", () => <WindowInf />, {
-  info: { inline: true }
+stories.add('InfiniteScroll', () => <WindowInf />, {
+  info: { inline: true },
 });

src/utils/threshold.ts

@@ -9,14 +9,14 @@ const defaultThreshold = {
 };
 
 export function parseThreshold(scrollThreshold: string | number) {
-  if (typeof scrollThreshold === "number") {
+  if (typeof scrollThreshold === 'number') {
     return {
       unit: ThresholdUnits.Percent,
       value: scrollThreshold * 100,
     };
   }
 
-  if (typeof scrollThreshold === "string") {
+  if (typeof scrollThreshold === 'string') {
     if (scrollThreshold.match(/^(\d*(\.\d+)?)px$/)) {
       return {
         unit: ThresholdUnits.Pixel,
@@ -31,7 +31,9 @@ export function parseThreshold(scrollThreshold: string | number) {
       };
     }
 
-    console.warn('scrollThreshold format is invalid. Valid formats: "120px", "50%"...');
+    console.warn(
+      'scrollThreshold format is invalid. Valid formats: "120px", "50%"...'
+    );
 
     return defaultThreshold;
   }

tsconfig.json

@@ -56,5 +56,6 @@
     /* Experimental Options */
     // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
-  }
+  },
+  "include": ["src/**/*"]
 }