Add lint staged

Author: ankeetmaini

.eslintrc.js

@@ -16,4 +16,7 @@ module.exports = {
     'prettier/@typescript-eslint',
     'prettier/react',
   ],
+  rules: {
+    '@typescript-eslint/prefer-regexp-exec': 1,
+  },
 };

lint-staged.config.js

@@ -0,0 +1,3 @@
+export default {
+  '**/*.ts?(x)': () => 'tsc -p tsconfig.json --noEmit',
+};

package.json

@@ -54,6 +54,8 @@
     "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",
@@ -63,5 +65,24 @@
   },
   "dependencies": {
     "throttle-debounce": "^2.1.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "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

@@ -40,14 +40,12 @@ export default class InfiniteScroll extends Component<Props, State> {
       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;
@@ -134,7 +132,7 @@ export default class InfiniteScroll extends Component<Props, State> {
     }
   }
 
-  componentWillReceiveProps(props: Props) {
+  UNSAFE_componentWillReceiveProps(props: Props) {
     // do nothing when dataLength and key are unchanged
     if (
       this.props.key === props.key &&
@@ -150,7 +148,7 @@ export default class InfiniteScroll extends Component<Props, State> {
     });
   }
 
-  getScrollableTarget() {
+  getScrollableTarget = () => {
     if (this.props.scrollableTarget instanceof HTMLElement)
       return this.props.scrollableTarget;
     if (typeof this.props.scrollableTarget === 'string') {
@@ -163,7 +161,7 @@ export default class InfiniteScroll extends Component<Props, State> {
       `);
     }
     return null;
-  }
+  };
 
   onStart: EventListener = (evt: Event) => {
     if (this.lastScrollTop) return;
@@ -257,7 +255,7 @@ export default class InfiniteScroll extends Component<Props, State> {
     );
   }
 
-  onScrollListener(event: MouseEvent) {
+  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.
@@ -285,7 +283,7 @@ export default class InfiniteScroll extends Component<Props, State> {
     }
 
     this.lastScrollTop = target.scrollTop;
-  }
+  };
 
   render() {
     const style = {

src/stories/WindowInfiniteScrollComponent.tsx

@@ -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>
           ))}

tsconfig.json

@@ -57,5 +57,5 @@
     // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
   },
-  "include": ["src/**/*"]
+  "include": ["src/**/*", "lint-staged.config.js"]
 }