Merging React 17 compatibility with other improvements.

.eslintrc.js

@@ -0,0 +1,60 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  plugins: [
+    '@typescript-eslint',
+  ],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'plugin:react/recommended',
+  ],
+  rules: {
+    'prefer-const': ['error', {destructuring: 'all'}],
+    'comma-dangle': ['error', 'always-multiline'],
+    'space-infix-ops': 'error',
+    'no-multi-spaces': 'error',
+    '@typescript-eslint/semi': ['error', 'never'],
+    '@typescript-eslint/member-delimiter-style': ['error', {"multiline": {
+        "delimiter": "none",
+          "requireLast": true
+      },
+      "singleline": {
+        "delimiter": "comma",
+          "requireLast": false
+      }
+    }
+    ],
+    '@typescript-eslint/quotes': ['error', 'single', {avoidEscape: true}],
+    'jsx-quotes': ['error', 'prefer-double'],
+    'react/jsx-curly-brace-presence': ['error', {props: 'never'}],
+    'react/no-find-dom-node': 'off',
+    'react/no-children-prop': 'off',
+    'react/display-name': 'off',
+    'react/prop-types': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+    '@typescript-eslint/no-unsafe-member-access': 'off',
+    '@typescript-eslint/no-misused-promises': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unsafe-return': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-unsafe-call': 'off',
+    '@typescript-eslint/restrict-template-expressions': 'off',
+  }
+}

.gitignore

@@ -113,3 +113,5 @@ $RECYCLE.BIN/
 *.lnk
 
 # End of https://www.gitignore.io/api/osx,windows,node
+
+.idea

package.json

@@ -1,22 +1,21 @@
 {
   "name": "react-stack-grid",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Pinterest like layout components for React.js",
   "main": "lib/index.js",
   "scripts": {
     "start": "npm run docs",
     "clean": "rimraf lib",
-    "build": "babel src/ -d lib/ --ignore \"**/__tests__/*\"",
+    "build": "tsc",
     "test": "npm run test:lint && npm run test:typecheck && npm run test:unit",
     "test:lint": "eslint \"src/**/*.js\" \"docs/js/**/*.js\"",
-    "test:typecheck": "flow",
+    "test:typecheck": "tsc --no-emit",
     "test:unit": "jest",
     "test:watch": "npm run test:unit -- --watch",
     "docs": "webpack-dev-server --config docs/webpack.config.js",
     "docs:build": "webpack -p --config docs/webpack.config.production.js",
     "docs:deploy": "npm run docs:build && gh-pages -d docs",
-    "prebuild": "npm run clean",
-    "prepublish": "npm run build"
+    "prepare": "tsc"
   },
   "repository": {
     "type": "git",
@@ -40,72 +39,33 @@
     "lib",
     "test"
   ],
-  "browserify": {
-    "transform": [
-      "babelify"
-    ]
-  },
   "devDependencies": {
-    "babel-cli": "^6.18.0",
-    "babel-eslint": "^8.0.3",
-    "babel-jest": "^21.2.0",
-    "babel-loader": "^7.1.1",
-    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-flow": "^6.23.0",
-    "babel-preset-power-assert": "^1.0.0",
-    "babel-preset-react": "^6.16.0",
-    "babel-preset-stage-1": "^6.16.0",
-    "babel-register": "^6.18.0",
-    "enzyme": "^2.9.1",
-    "eslint": "^4.2.0",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-babel": "^4.0.0",
-    "eslint-plugin-flowtype": "^2.34.0",
-    "eslint-plugin-flowtype-errors": "^3.3.0",
-    "eslint-plugin-import": "^2.3.0",
-    "eslint-plugin-jest": "^21.4.2",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.0.1",
-    "flow-bin": "^0.50.0",
-    "gh-pages": "^1.0.0",
-    "jest": "^21.2.1",
-    "rc-slider": "^8.2.0",
-    "react": "^15.5.4",
-    "react-addons-test-utils": "^15.6.0",
-    "react-dom": "^15.5.4",
-    "react-hot-loader": "^3.1.3",
-    "react-router": "^3.0.0",
-    "react-test-renderer": "^15.6.1",
+    "@types/exenv": "^1.2.0",
+    "@types/inline-style-prefixer": "^5.0.0",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
+    "@types/react-transition-group": "^4.4.1",
+    "@types/shallowequal": "^1.1.1",
+    "@typescript-eslint/eslint-plugin": "^4.20.0",
+    "@typescript-eslint/parser": "^4.20.0",
+    "eslint": "^7.23.0",
+    "eslint-plugin-react": "^7.23.1",
     "rimraf": "^2.6.1",
-    "sinon": "^2.3.2",
-    "webpack": "^3.3.0",
-    "webpack-dev-server": "^2.5.1"
+    "typescript": "4.1.2"
   },
   "peerDependencies": {
-    "react": ">=15.3.0",
+    "react": ">=15.3.0 <= 17",
     "react-dom": ">=15.3.0"
   },
   "dependencies": {
-    "easy-css-transform-builder": "^0.0.2",
+    "easy-css-transform-builder": "0.1.0",
     "exenv": "^1.2.1",
     "imagesloaded": "^4.1.1",
-    "inline-style-prefixer": "^3.0.6",
+    "inline-style-prefixer": "5.1.2",
     "invariant": "^2.2.2",
     "prop-types": "^15.5.10",
-    "react-sizeme": "^2.2.0",
-    "react-transition-group": "^1.2.0",
-    "shallowequal": "^1.0.1"
-  },
-  "jest": {
-    "testMatch": [
-      "**/?(*.)spec.js"
-    ],
-    "testPathIgnorePatterns": [
-      "/node_modules/",
-      "<rootDir>/lib/"
-    ],
-    "setupFiles": [
-      "./jest/setup.js"
-    ]
+    "react-sizeme": "^3.0.1",
+    "react-transition-group": "^4.4.1",
+    "shallowequal": "^1.1.0"
   }
 }

src/animations/easings.ts

@@ -0,0 +1,29 @@
+// http://easings.net/
+export const linear = 'linear'
+export const easeIn = 'ease-in'
+export const easeOut = 'ease-out'
+export const easeInOut = 'ease-in-out'
+export const sineIn = 'cubic-bezier(0.47, 0, 0.745, 0.715)'
+export const sineOut = 'cubic-bezier(0.39, 0.575, 0.565, 1)'
+export const sineInOut = 'cubic-bezier(0.445, 0.05, 0.55, 0.95)'
+export const quadIn = 'cubic-bezier(0.55, 0.085, 0.68, 0.53)'
+export const quadOut = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+export const quadInOut = 'cubic-bezier(0.455, 0.03, 0.515, 0.955)'
+export const cubicIn = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)'
+export const cubicOut = 'cubic-bezier(0.215, 0.61, 0.355, 1)'
+export const cubicInOut = 'cubic-bezier(0.645, 0.045, 0.355, 1)'
+export const quartIn = 'cubic-bezier(0.895, 0.03, 0.685, 0.22)'
+export const quartOut = 'cubic-bezier(0.165, 0.84, 0.44, 1)'
+export const quartInOut = 'cubic-bezier(0.77, 0, 0.175, 1)'
+export const quintIn = 'cubic-bezier(0.755, 0.05, 0.855, 0.06)'
+export const quintOut = 'cubic-bezier(0.23, 1, 0.32, 1)'
+export const quintInOut = 'cubic-bezier(0.86, 0, 0.07, 1)'
+export const expoIn = 'cubic-bezier(0.95, 0.05, 0.795, 0.035)'
+export const expoOut = 'cubic-bezier(0.19, 1, 0.22, 1)'
+export const expoInOut = 'cubic-bezier(1, 0, 0, 1)'
+export const circIn = 'cubic-bezier(0.6, 0.04, 0.98, 0.335)'
+export const circOut = 'cubic-bezier(0.075, 0.82, 0.165, 1)'
+export const circInOut = 'cubic-bezier(0.785, 0.135, 0.15, 0.86)'
+export const backIn = 'cubic-bezier(0.6, -0.28, 0.735, 0.045)'
+export const backOut = 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+export const backInOut = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'

src/animations/request-animation-frame.ts

@@ -0,0 +1,27 @@
+import ExecutionEnvironment from 'exenv'
+
+const vendors = ['ms', 'moz', 'webkit']
+
+let tmpRaf: (callback: () => void) => number
+let tmpCaf: (id: number) => void
+
+if (ExecutionEnvironment.canUseDOM) {
+  tmpRaf = window.requestAnimationFrame
+  tmpCaf = window.cancelAnimationFrame // eslint-disable-next-line no-plusplus
+
+  for (let x = 0; x < vendors.length && !tmpRaf; ++x) {
+    tmpRaf = window[`${vendors[x]}RequestAnimationFrame` as any] as any
+    tmpCaf = window[`${vendors[x]}CancelAnimationFrame` as any] as any
+      || window[`${vendors[x]}CancelRequestAnimationFrame` as any] as any
+  }
+} else {
+  tmpRaf = (callback: () => void): number => {
+    callback()
+    return 1
+  }
+
+  tmpCaf = () => {/*ok*/}
+}
+
+export const raf = tmpRaf
+export const caf = tmpCaf