Merge pull request #54 from clauderic/linting-tweaks

Linting tweaks

Author: Claudéric Demers

.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "extends": [
+    "plugin:shopify/react",
+    "plugin:shopify/typescript",
+    "plugin:shopify/typescript-prettier",
+    "plugin:shopify/jest"
+  ],
+  "rules": {
+    "no-undefined": "off",
+    "no-param-reassign": "off",
+    "react/no-unused-prop-types": "off",
+    "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
+    "jest/consistent-test-it": [
+      "error",
+      {
+        "fn": "it"
+      }
+    ]
+  }
+}

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 
 node_js:
-  - "7"
+  - "8"
 
 script:
   - yarn run test:ci

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "editor.formatOnSave": true,
+  "prettier.eslintIntegration": true,
+  "files.insertFinalNewline": true,
+  "files.trimTrailingWhitespace": true,
+  "eslint.validate": [
+    "typescript",
+    "typescriptreact"
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

demo/src/index.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import VirtualList from '../../src/';
+import VirtualList, {ItemStyle} from '../../src';
 import './demo.css';
 
 class Demo extends React.Component {
-  renderItem = ({style, index}: {style: React.CSSProperties, index: number}) => {
+  renderItem = ({style, index}: {style: ItemStyle; index: number}) => {
     return (
       <div className="Row" style={style} key={index}>
         Row #{index}
       </div>
     );
-  }
+  };
 
   render() {
     return (

package.json

@@ -12,7 +12,7 @@
   ],
   "scripts": {
     "build": "babel-node --presets es2015 ./config/build.js",
-    "lint": "tslint './src/**/*.{ts,tsx}' --project tsconfig.json",
+    "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0 --format codeframe",
     "start": "nwb serve-react-app demo/src/index.tsx --config ./config/nwb/config.js",
     "test": "jest --config ./config/jest/config.json --no-cache",
     "test:coverage": "npm run test -- --coverage",
@@ -38,12 +38,8 @@
     "babel-preset-react": "^6.23.0",
     "babel-preset-typescript": "^7.0.0-alpha.19",
     "codecov": "^1.0.1",
-    "eslint": "3.8.1",
-    "eslint-config-react-app": "^0.5.2",
-    "eslint-plugin-flowtype": "2.21.0",
-    "eslint-plugin-import": "2.0.1",
-    "eslint-plugin-jsx-a11y": "2.2.3",
-    "eslint-plugin-react": "6.4.1",
+    "eslint": "^4.10.0",
+    "eslint-plugin-shopify": "^22.1.0",
     "fs-extra": "^4.0.1",
     "jest": "^19.0.2",
     "nwb": "0.15.x",
@@ -57,9 +53,9 @@
     "rollup-plugin-commonjs": "^8.2.0",
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-uglify": "^2.0.1",
-    "tslint": "^5.7.0",
-    "tslint-config-shopify": "^3.0.0",
-    "typescript": "^2.4.2"
+    "tslint": "^5.10.0",
+    "tslint-config-shopify": "^3.0.2",
+    "typescript": "2.8.3"
   },
   "author": {
     "name": "Clauderic Demers",

src/SizeAndPositionManager.ts

@@ -1,22 +1,22 @@
 /* Forked from react-virtualized 💖 */
-import {ALIGNMENT, ALIGN_START, ALIGN_END, ALIGN_CENTER} from './constants';
+import {ALIGNMENT} from './constants';
 
 export type ItemSizeGetter = (index: number) => number;
 export type ItemSize = number | number[] | ItemSizeGetter;
 
 export interface SizeAndPosition {
-  size: number,
-  offset: number,
+  size: number;
+  offset: number;
 }
 
 interface SizeAndPositionData {
-  [id: number]: SizeAndPosition,
+  [id: number]: SizeAndPosition;
 }
 
 export interface Options {
-  itemCount: number,
-  itemSizeGetter: ItemSizeGetter,
-  estimatedItemSize: number,
+  itemCount: number;
+  itemSizeGetter: ItemSizeGetter;
+  estimatedItemSize: number;
 }
 
 export default class SizeAndPositionManager {
@@ -26,11 +26,7 @@ export default class SizeAndPositionManager {
   private lastMeasuredIndex: number;
   private itemSizeAndPositionData: SizeAndPositionData;
 
-  constructor({
-    itemCount,
-    itemSizeGetter,
-    estimatedItemSize,
-  }: Options) {
+  constructor({itemCount, itemSizeGetter, estimatedItemSize}: Options) {
     this.itemSizeGetter = itemSizeGetter;
     this.itemCount = itemCount;
     this.estimatedItemSize = estimatedItemSize;
@@ -45,7 +41,10 @@ export default class SizeAndPositionManager {
   updateConfig({
     itemCount,
     estimatedItemSize,
-  }: {itemCount: number, estimatedItemSize: number}) {
+  }: {
+    itemCount: number;
+    estimatedItemSize: number;
+  }) {
     this.itemCount = itemCount;
     this.estimatedItemSize = estimatedItemSize;
   }
@@ -60,13 +59,15 @@ export default class SizeAndPositionManager {
    */
   getSizeAndPositionForIndex(index: number) {
     if (index < 0 || index >= this.itemCount) {
-      throw Error(`Requested index ${index} is outside of range 0..${this.itemCount}`);
+      throw Error(
+        `Requested index ${index} is outside of range 0..${this.itemCount}`,
+      );
     }
 
     if (index > this.lastMeasuredIndex) {
       const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
-      let offset = lastMeasuredSizeAndPosition.offset +
-        lastMeasuredSizeAndPosition.size;
+      let offset =
+        lastMeasuredSizeAndPosition.offset + lastMeasuredSizeAndPosition.size;
 
       for (let i = this.lastMeasuredIndex + 1; i <= index; i++) {
         const size = this.itemSizeGetter(i);
@@ -103,7 +104,11 @@ export default class SizeAndPositionManager {
   getTotalSize(): number {
     const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
 
-    return lastMeasuredSizeAndPosition.offset + lastMeasuredSizeAndPosition.size + (this.itemCount - this.lastMeasuredIndex - 1) * this.estimatedItemSize;
+    return (
+      lastMeasuredSizeAndPosition.offset +
+      lastMeasuredSizeAndPosition.size +
+      (this.itemCount - this.lastMeasuredIndex - 1) * this.estimatedItemSize
+    );
   }
 
   /**
@@ -114,11 +119,16 @@ export default class SizeAndPositionManager {
    * @return Offset to use to ensure the specified item is visible
    */
   getUpdatedOffsetForIndex({
-    align = ALIGN_START,
+    align = ALIGNMENT.START,
     containerSize,
     currentOffset,
     targetIndex,
-  }: {align: ALIGNMENT | undefined, containerSize: number, currentOffset: number, targetIndex: number}): number {
+  }: {
+    align: ALIGNMENT | undefined;
+    containerSize: number;
+    currentOffset: number;
+    targetIndex: number;
+  }): number {
     if (containerSize <= 0) {
       return 0;
     }
@@ -130,13 +140,13 @@ export default class SizeAndPositionManager {
     let idealOffset;
 
     switch (align) {
-      case ALIGN_END:
+      case ALIGNMENT.END:
         idealOffset = minOffset;
         break;
-      case ALIGN_CENTER:
+      case ALIGNMENT.CENTER:
         idealOffset = maxOffset - (containerSize - datum.size) / 2;
         break;
-      case ALIGN_START:
+      case ALIGNMENT.START:
         idealOffset = maxOffset;
         break;
       default:
@@ -152,7 +162,11 @@ export default class SizeAndPositionManager {
     containerSize,
     offset,
     overscanCount,
-  }: {containerSize: number, offset: number, overscanCount: number}): {start?: number, stop?: number} {
+  }: {
+    containerSize: number;
+    offset: number;
+    overscanCount: number;
+  }): {start?: number; stop?: number} {
     const totalSize = this.getTotalSize();
 
     if (totalSize === 0) {
@@ -232,7 +246,15 @@ export default class SizeAndPositionManager {
     }
   }
 
-  private binarySearch({low, high, offset}: {low: number, high: number, offset: number}) {
+  private binarySearch({
+    low,
+    high,
+    offset,
+  }: {
+    low: number;
+    high: number;
+    offset: number;
+  }) {
     let middle = 0;
     let currentOffset = 0;
 
@@ -256,7 +278,7 @@ export default class SizeAndPositionManager {
     return 0;
   }
 
-  private exponentialSearch({index, offset}: {index: number, offset: number}) {
+  private exponentialSearch({index, offset}: {index: number; offset: number}) {
     let interval = 1;
 
     while (

src/constants.ts

@@ -1,28 +1,31 @@
-export type ALIGNMENT = 'auto' | 'center' | 'end' | 'start';
-export const ALIGN_AUTO: ALIGNMENT = 'auto';
-export const ALIGN_START: ALIGNMENT = 'start';
-export const ALIGN_CENTER: ALIGNMENT = 'center';
-export const ALIGN_END: ALIGNMENT = 'end';
+export enum ALIGNMENT {
+  AUTO = 'auto',
+  START = 'start',
+  CENTER = 'center',
+  END = 'end',
+}
 
-export type DIRECTION = 'horizontal' | 'vertical';
-export const DIRECTION_VERTICAL: DIRECTION = 'vertical';
-export const DIRECTION_HORIZONTAL: DIRECTION = 'horizontal';
+export enum DIRECTION {
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical',
+}
 
-export type SCROLL_CHANGE_REASON = 'observed' | 'requested';
-export const SCROLL_CHANGE_OBSERVED: SCROLL_CHANGE_REASON = 'observed';
-export const SCROLL_CHANGE_REQUESTED: SCROLL_CHANGE_REASON = 'requested';
+export enum SCROLL_CHANGE_REASON {
+  OBSERVED = 'observed',
+  REQUESTED = 'requested',
+}
 
 export const scrollProp = {
-  [DIRECTION_VERTICAL]: 'scrollTop',
-  [DIRECTION_HORIZONTAL]: 'scrollLeft',
+  [DIRECTION.VERTICAL]: 'scrollTop',
+  [DIRECTION.HORIZONTAL]: 'scrollLeft',
 };
 
 export const sizeProp = {
-  [DIRECTION_VERTICAL]: 'height',
-  [DIRECTION_HORIZONTAL]: 'width',
+  [DIRECTION.VERTICAL]: 'height',
+  [DIRECTION.HORIZONTAL]: 'width',
 };
 
 export const positionProp = {
-  [DIRECTION_VERTICAL]: 'top',
-  [DIRECTION_HORIZONTAL]: 'left',
+  [DIRECTION.VERTICAL]: 'top',
+  [DIRECTION.HORIZONTAL]: 'left',
 };