Merge pull request #138 from danielcaldas/chore/configure-eslint-and-prettier

Configure eslint and prettier

Author: ankeetmaini

.eslintignore

@@ -0,0 +1,3 @@
+/docs/**
+/lib/**
+/node_modules/**

.eslintrc.js

@@ -0,0 +1,29 @@
+module.exports = {
+    extends: ["eslint:recommended", "plugin:jest/recommended"],
+    globals: {
+        document: true,
+        window: true,
+        __dirname: true,
+    },
+    parser: "babel-eslint",
+    parserOptions: {
+        ecmaVersion: 6,
+        ecmaFeatures: {
+            jsx: true,
+        },
+    },
+    plugins: ["standard", "react", "jest", "babel"],
+    env: {
+        browser: true,
+    },
+    rules: {
+        "react/jsx-uses-react": "error",
+        "react/jsx-uses-vars": "error",
+        camelcase: "error",
+        "keyword-spacing": "error",
+        "max-len": ["error", 120, 4, { ignoreComments: true }],
+        "max-lines": ["error", { max: 450, skipComments: true }],
+        "no-useless-constructor": "error",
+        quotes: ["error", "double"],
+    },
+};

app/index.js

@@ -87,7 +87,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 +102,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) {
@@ -119,7 +124,8 @@ export default class InfiniteScroll extends Component {
     this.currentY = this.startY;
 
     this._infScroll.style.willChange = "transform";
-    this._infScroll.style.transition = `transform 0.2s cubic-bezier(0,0,0.31,1)`;
+    this._infScroll.style.transition =
+      "transform 0.2s cubic-bezier(0,0,0.31,1)";
   }
 
   onMove(evt) {
@@ -143,7 +149,7 @@ export default class InfiniteScroll extends Component {
       this.startY}px, 0px)`;
   }
 
-  onEnd(evt) {
+  onEnd() {
     this.startY = 0;
     this.currentY = 0;
 
@@ -156,9 +162,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 +184,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 +200,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 +239,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

@@ -1,42 +1,44 @@
 export const ThresholdUnits = {
-  Pixel: 'Pixel',
-  Percent: 'Percent',
+  Pixel: "Pixel",
+  Percent: "Percent"
 };
 
 const defaultThreshold = {
   unit: ThresholdUnits.Percent,
-  value: 0.8,
+  value: 0.8
 };
 
 export function parseThreshold(scrollThreshold) {
   if (typeof scrollThreshold === "number") {
     return {
       unit: ThresholdUnits.Percent,
-      value: scrollThreshold * 100,
+      value: scrollThreshold * 100
     };
   }
 
   if (typeof scrollThreshold === "string") {
     if (scrollThreshold.match(/^(\d*(\.\d+)?)px$/)) {
       return {
         unit: ThresholdUnits.Pixel,
-        value: parseFloat(scrollThreshold),
+        value: parseFloat(scrollThreshold)
       };
     }
 
     if (scrollThreshold.match(/^(\d*(\.\d+)?)%$/)) {
       return {
         unit: ThresholdUnits.Percent,
-        value: parseFloat(scrollThreshold),
+        value: parseFloat(scrollThreshold)
       };
     }
 
-    console.warn('scrollThreshold format is invalid. Valid formats: "120px", "50%"...');
+    console.warn(
+      "scrollThreshold format is invalid. Valid formats: '120px', '50%'..."
+    );
 
     return defaultThreshold;
   }
 
-  console.warn('scrollThreshold should be string or number');
+  console.warn("scrollThreshold should be string or number");
 
   return defaultThreshold;
 }