From 28a5ca015a04e5f34bb91acaff006468e989a8d5 Mon Sep 17 00:00:00 2001 From: Clyde Ancheta Date: Fri, 16 Jun 2023 11:32:00 +0800 Subject: [PATCH 1/5] revived --- package-lock.json | 832 ++++++++++++++------------- src/CoverFlow/Container/Container.js | 138 +++-- src/CoverFlow/Container/Item/Item.js | 153 +++-- src/CoverFlow/CoverFlow.js | 73 ++- 4 files changed, 656 insertions(+), 540 deletions(-) diff --git a/package-lock.json b/package-lock.json index d0ea11e..9daaf0f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "coverflow-react", - "version": "1.0.0", + "version": "0.1.28", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -23,8 +23,8 @@ "dev": true, "optional": true, "requires": { - "micromatch": "2.3.11", - "normalize-path": "2.1.1" + "micromatch": "^2.1.5", + "normalize-path": "^2.0.0" } }, "arr-diff": { @@ -34,7 +34,7 @@ "dev": true, "optional": true, "requires": { - "arr-flatten": "1.1.0" + "arr-flatten": "^1.0.1" } }, "arr-flatten": { @@ -74,21 +74,21 @@ "integrity": "sha1-IHzXBbumFImy6kG1MSNBz2rKIoM=", "dev": true, "requires": { - "babel-core": "6.25.0", - "babel-polyfill": "6.23.0", - "babel-register": "6.24.1", - "babel-runtime": "6.25.0", - "chokidar": "1.7.0", - "commander": "2.11.0", - "convert-source-map": "1.5.0", - "fs-readdir-recursive": "1.0.0", - "glob": "7.1.2", - "lodash": "4.17.4", - "output-file-sync": "1.1.2", - "path-is-absolute": "1.0.1", - "slash": "1.0.0", - "source-map": "0.5.6", - "v8flags": "2.1.1" + "babel-core": "^6.24.1", + "babel-polyfill": "^6.23.0", + "babel-register": "^6.24.1", + "babel-runtime": "^6.22.0", + "chokidar": "^1.6.1", + "commander": "^2.8.1", + "convert-source-map": "^1.1.0", + "fs-readdir-recursive": "^1.0.0", + "glob": "^7.0.0", + "lodash": "^4.2.0", + "output-file-sync": "^1.1.0", + "path-is-absolute": "^1.0.0", + "slash": "^1.0.0", + "source-map": "^0.5.0", + "v8flags": "^2.0.10" } }, "babel-code-frame": { @@ -97,9 +97,9 @@ "integrity": "sha1-AnYgvuVnqIwyVhV05/0IAdMxGOQ=", "dev": true, "requires": { - "chalk": "1.1.3", - "esutils": "2.0.2", - "js-tokens": "3.0.2" + "chalk": "^1.1.0", + "esutils": "^2.0.2", + "js-tokens": "^3.0.0" } }, "babel-core": { @@ -108,25 +108,25 @@ "integrity": "sha1-fdQrBGPHQunVKW3rPsZ6kyLa1yk=", "dev": true, "requires": { - "babel-code-frame": "6.22.0", - "babel-generator": "6.25.0", - "babel-helpers": "6.24.1", - "babel-messages": "6.23.0", - "babel-register": "6.24.1", - "babel-runtime": "6.25.0", - "babel-template": "6.25.0", - "babel-traverse": "6.25.0", - "babel-types": "6.25.0", - "babylon": "6.17.4", - "convert-source-map": "1.5.0", - "debug": "2.6.8", - "json5": "0.5.1", - "lodash": "4.17.4", - "minimatch": "3.0.4", - "path-is-absolute": "1.0.1", - "private": "0.1.7", - "slash": "1.0.0", - "source-map": "0.5.6" + "babel-code-frame": "^6.22.0", + "babel-generator": "^6.25.0", + "babel-helpers": "^6.24.1", + "babel-messages": "^6.23.0", + "babel-register": "^6.24.1", + "babel-runtime": "^6.22.0", + "babel-template": "^6.25.0", + "babel-traverse": "^6.25.0", + "babel-types": "^6.25.0", + "babylon": "^6.17.2", + "convert-source-map": "^1.1.0", + "debug": "^2.1.1", + "json5": "^0.5.0", + "lodash": "^4.2.0", + "minimatch": "^3.0.2", + "path-is-absolute": "^1.0.0", + "private": "^0.1.6", + "slash": "^1.0.0", + "source-map": "^0.5.0" } }, "babel-generator": { @@ -135,14 +135,14 @@ "integrity": "sha1-M6GvcNXyiQrrRlpKd5PB32qeqfw=", "dev": true, "requires": { - "babel-messages": "6.23.0", - "babel-runtime": "6.25.0", - "babel-types": "6.25.0", - "detect-indent": "4.0.0", - "jsesc": "1.3.0", - "lodash": "4.17.4", - "source-map": "0.5.6", - "trim-right": "1.0.1" + "babel-messages": "^6.23.0", + "babel-runtime": "^6.22.0", + "babel-types": "^6.25.0", + "detect-indent": "^4.0.0", + "jsesc": "^1.3.0", + "lodash": "^4.2.0", + "source-map": "^0.5.0", + "trim-right": "^1.0.1" } }, "babel-helper-builder-react-jsx": { @@ -151,9 +151,9 @@ "integrity": "sha1-CteRfjPI11HmRtrKTnfMGTd9LLw=", "dev": true, "requires": { - "babel-runtime": "6.25.0", - "babel-types": "6.25.0", - "esutils": "2.0.2" + "babel-runtime": "^6.22.0", + "babel-types": "^6.24.1", + "esutils": "^2.0.0" } }, "babel-helper-call-delegate": { @@ -162,10 +162,10 @@ "integrity": "sha1-7Oaqzdx25Bw0YfiL/Fdb0Nqi340=", "dev": true, "requires": { - "babel-helper-hoist-variables": "6.24.1", - "babel-runtime": "6.25.0", - "babel-traverse": "6.25.0", - "babel-types": "6.25.0" + "babel-helper-hoist-variables": "^6.24.1", + "babel-runtime": "^6.22.0", + "babel-traverse": "^6.24.1", + "babel-types": "^6.24.1" } }, "babel-helper-define-map": { @@ -174,10 +174,10 @@ "integrity": "sha1-epdH8ljYlH0y1RX2qhx70CIEoIA=", "dev": true, "requires": { - "babel-helper-function-name": "6.24.1", - "babel-runtime": "6.25.0", - "babel-types": "6.25.0", - "lodash": "4.17.4" + "babel-helper-function-name": "^6.24.1", + "babel-runtime": "^6.22.0", + "babel-types": "^6.24.1", + "lodash": "^4.2.0" } }, "babel-helper-function-name": { @@ -186,11 +186,11 @@ "integrity": "sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=", "dev": true, "requires": { - "babel-helper-get-function-arity": "6.24.1", - "babel-runtime": "6.25.0", - "babel-template": "6.25.0", - "babel-traverse": "6.25.0", - "babel-types": "6.25.0" + "babel-helper-get-function-arity": "^6.24.1", + "babel-runtime": "^6.22.0", + "babel-template": "^6.24.1", + "babel-traverse": "^6.24.1", + "babel-types": "^6.24.1" } }, "babel-helper-get-function-arity": { @@ -199,8 +199,8 @@ "integrity": "sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=", "dev": true, "requires": { - "babel-runtime": "6.25.0", - "babel-types": "6.25.0" + "babel-runtime": "^6.22.0", + "babel-types": "^6.24.1" } }, "babel-helper-hoist-variables": { @@ -209,8 +209,8 @@ "integrity": "sha1-HssnaJydJVE+rbyZFKc/VAi+enY=", "dev": true, "requires": { - "babel-runtime": "6.25.0", - "babel-types": "6.25.0" + "babel-runtime": "^6.22.0", + "babel-types": "^6.24.1" } }, "babel-helper-optimise-call-expression": { @@ -219,8 +219,8 @@ "integrity": "sha1-96E0J7qfc/j0+pk8VKl4gtEkQlc=", "dev": true, "requires": { - "babel-runtime": "6.25.0", - "babel-types": "6.25.0" + "babel-runtime": "^6.22.0", + "babel-types": "^6.24.1" } }, "babel-helper-regex": { @@ -229,9 +229,9 @@ "integrity": "sha1-024i+rEAjXnYhkjjIRaGgShFbOg=", "dev": true, "requires": { - "babel-runtime": "6.25.0", - "babel-types": "6.25.0", - "lodash": "4.17.4" + "babel-runtime": "^6.22.0", + "babel-types": "^6.24.1", + "lodash": "^4.2.0" } }, "babel-helper-replace-supers": { @@ -240,12 +240,12 @@ "integrity": "sha1-v22/5Dk40XNpohPKiov3S2qQqxo=", "dev": true, "requires": { - "babel-helper-optimise-call-expression": "6.24.1", - "babel-messages": "6.23.0", - "babel-runtime": "6.25.0", - "babel-template": "6.25.0", - "babel-traverse": "6.25.0", - "babel-types": "6.25.0" + "babel-helper-optimise-call-expression": "^6.24.1", + "babel-messages": "^6.23.0", + "babel-runtime": "^6.22.0", + "babel-template": "^6.24.1", + "babel-traverse": "^6.24.1", + "babel-types": "^6.24.1" } }, "babel-helpers": { @@ -254,8 +254,8 @@ "integrity": "sha1-NHHenK7DiOXIUOWX5Yom3fN2ArI=", "dev": true, "requires": { - "babel-runtime": "6.25.0", - "babel-template": "6.25.0" + "babel-runtime": "^6.22.0", + "babel-template": "^6.24.1" } }, "babel-messages": { @@ -264,7 +264,7 @@ "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=", "dev": true, "requires": { - "babel-runtime": "6.25.0" + "babel-runtime": "^6.22.0" } }, "babel-plugin-check-es2015-constants": { @@ -273,7 +273,7 @@ "integrity": "sha1-NRV7EBQm/S/9PaP3XH0ekYNbv4o=", "dev": true, "requires": { - "babel-runtime": "6.25.0" + "babel-runtime": "^6.22.0" } }, "babel-plugin-syntax-flow": { @@ -294,7 +294,7 @@ "integrity": "sha1-RSaSy3EdX3ncf4XkQM5BufJE0iE=", "dev": true, "requires": { - "babel-runtime": "6.25.0" + "babel-runtime": "^6.22.0" } }, "babel-plugin-transform-es2015-block-scoped-functions": { @@ -303,7 +303,7 @@ "integrity": "sha1-u8UbSflk1wy42OC5ToICRs46YUE=", "dev": true, "requires": { - "babel-runtime": "6.25.0" + "babel-runtime": "^6.22.0" } }, "babel-plugin-transform-es2015-block-scoping": { @@ -312,11 +312,11 @@ "integrity": "sha1-dsKV3DpHQbFmWt/TFnIV3P8ypXY=", "dev": true, "requires": { - "babel-runtime": "6.25.0", - "babel-template": "6.25.0", - "babel-traverse": "6.25.0", - "babel-types": "6.25.0", - "lodash": "4.17.4" + "babel-runtime": "^6.22.0", + "babel-template": "^6.24.1", + "babel-traverse": "^6.24.1", + "babel-types": "^6.24.1", + "lodash": "^4.2.0" } }, "babel-plugin-transform-es2015-classes": { @@ -325,15 +325,15 @@ "integrity": "sha1-WkxYpQyclGHlZLSyo7+ryXolhNs=", "dev": true, "requires": { - "babel-helper-define-map": "6.24.1", - "babel-helper-function-name": "6.24.1", - "babel-helper-optimise-call-expression": "6.24.1", - "babel-helper-replace-supers": "6.24.1", - "babel-messages": "6.23.0", - "babel-runtime": "6.25.0", - "babel-template": "6.25.0", - "babel-traverse": "6.25.0", - "babel-types": "6.25.0" + "babel-helper-define-map": "^6.24.1", + "babel-helper-function-name": "^6.24.1", + "babel-helper-optimise-call-expression": "^6.24.1", + "babel-helper-replace-supers": "^6.24.1", + "babel-messages": "^6.23.0", + "babel-runtime": "^6.22.0", + "babel-template": "^6.24.1", + "babel-traverse": "^6.24.1", + "babel-types": "^6.24.1" } }, "babel-plugin-transform-es2015-computed-properties": { @@ -342,8 +342,8 @@ "integrity": "sha1-b+Ko0WiV1WNPTNmZttNICjCBWbM=", "dev": true, "requires": { - "babel-runtime": "6.25.0", - "babel-template": "6.25.0" + "babel-runtime": "^6.22.0", + "babel-template": "^6.24.1" } }, "babel-plugin-transform-es2015-destructuring": { @@ -352,7 +352,7 @@ "integrity": "sha1-mXux8auWf2gtKwh2/jWNYOdlxW0=", "dev": true, "requires": { - "babel-runtime": "6.25.0" + "babel-runtime": "^6.22.0" } }, "babel-plugin-transform-es2015-duplicate-keys": { @@ -361,8 +361,8 @@ "integrity": "sha1-c+s9MQypaePvnskcU3QabxV2Qj4=", "dev": true, "requires": { - "babel-runtime": "6.25.0", - "babel-types": "6.25.0" + "babel-runtime": "^6.22.0", + "babel-types": "^6.24.1" } }, "babel-plugin-transform-es2015-for-of": { @@ -371,7 +371,7 @@ "integrity": "sha1-9HyVsrYT3x0+zC/bdXNiPHUkhpE=", "dev": true, "requires": { - "babel-runtime": "6.25.0" + "babel-runtime": "^6.22.0" } }, "babel-plugin-transform-es2015-function-name": { @@ -380,9 +380,9 @@ "integrity": "sha1-g0yJhTvDaxrw86TF26qU/Y6sqos=", "dev": true, "requires": { - "babel-helper-function-name": "6.24.1", - "babel-runtime": "6.25.0", - "babel-types": "6.25.0" + "babel-helper-function-name": "^6.24.1", + "babel-runtime": "^6.22.0", + "babel-types": "^6.24.1" } }, "babel-plugin-transform-es2015-literals": { @@ -391,7 +391,7 @@ "integrity": "sha1-T1SgLWzWbPkVKAAZox0xklN3yi4=", "dev": true, "requires": { - "babel-runtime": "6.25.0" + "babel-runtime": "^6.22.0" } }, "babel-plugin-transform-es2015-modules-amd": { @@ -400,9 +400,9 @@ "integrity": "sha1-Oz5UAXI5hC1tGcMBHEvS8AoA0VQ=", "dev": true, "requires": { - "babel-plugin-transform-es2015-modules-commonjs": "6.24.1", - "babel-runtime": "6.25.0", - "babel-template": "6.25.0" + "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1", + "babel-runtime": "^6.22.0", + "babel-template": "^6.24.1" } }, "babel-plugin-transform-es2015-modules-commonjs": { @@ -411,10 +411,10 @@ "integrity": "sha1-0+MQtA72ZKNmIiAAl8bUQCmPK/4=", "dev": true, "requires": { - "babel-plugin-transform-strict-mode": "6.24.1", - "babel-runtime": "6.25.0", - "babel-template": "6.25.0", - "babel-types": "6.25.0" + "babel-plugin-transform-strict-mode": "^6.24.1", + "babel-runtime": "^6.22.0", + "babel-template": "^6.24.1", + "babel-types": "^6.24.1" } }, "babel-plugin-transform-es2015-modules-systemjs": { @@ -423,9 +423,9 @@ "integrity": "sha1-/4mhQrkRmpBhlfXxBuzzBdlAfSM=", "dev": true, "requires": { - "babel-helper-hoist-variables": "6.24.1", - "babel-runtime": "6.25.0", - "babel-template": "6.25.0" + "babel-helper-hoist-variables": "^6.24.1", + "babel-runtime": "^6.22.0", + "babel-template": "^6.24.1" } }, "babel-plugin-transform-es2015-modules-umd": { @@ -434,9 +434,9 @@ "integrity": "sha1-rJl+YoXNGO1hdq22B9YCNErThGg=", "dev": true, "requires": { - "babel-plugin-transform-es2015-modules-amd": "6.24.1", - "babel-runtime": "6.25.0", - "babel-template": "6.25.0" + "babel-plugin-transform-es2015-modules-amd": "^6.24.1", + "babel-runtime": "^6.22.0", + "babel-template": "^6.24.1" } }, "babel-plugin-transform-es2015-object-super": { @@ -445,8 +445,8 @@ "integrity": "sha1-JM72muIcuDp/hgPa0CH1cusnj40=", "dev": true, "requires": { - "babel-helper-replace-supers": "6.24.1", - "babel-runtime": "6.25.0" + "babel-helper-replace-supers": "^6.24.1", + "babel-runtime": "^6.22.0" } }, "babel-plugin-transform-es2015-parameters": { @@ -455,12 +455,12 @@ "integrity": "sha1-V6w1GrScrxSpfNE7CfZv3wpiXys=", "dev": true, "requires": { - "babel-helper-call-delegate": "6.24.1", - "babel-helper-get-function-arity": "6.24.1", - "babel-runtime": "6.25.0", - "babel-template": "6.25.0", - "babel-traverse": "6.25.0", - "babel-types": "6.25.0" + "babel-helper-call-delegate": "^6.24.1", + "babel-helper-get-function-arity": "^6.24.1", + "babel-runtime": "^6.22.0", + "babel-template": "^6.24.1", + "babel-traverse": "^6.24.1", + "babel-types": "^6.24.1" } }, "babel-plugin-transform-es2015-shorthand-properties": { @@ -469,8 +469,8 @@ "integrity": "sha1-JPh11nIch2YbvZmkYi5R8U3jiqA=", "dev": true, "requires": { - "babel-runtime": "6.25.0", - "babel-types": "6.25.0" + "babel-runtime": "^6.22.0", + "babel-types": "^6.24.1" } }, "babel-plugin-transform-es2015-spread": { @@ -479,7 +479,7 @@ "integrity": "sha1-1taKmfia7cRTbIGlQujdnxdG+NE=", "dev": true, "requires": { - "babel-runtime": "6.25.0" + "babel-runtime": "^6.22.0" } }, "babel-plugin-transform-es2015-sticky-regex": { @@ -488,9 +488,9 @@ "integrity": "sha1-AMHNsaynERLN8M9hJsLta0V8zbw=", "dev": true, "requires": { - "babel-helper-regex": "6.24.1", - "babel-runtime": "6.25.0", - "babel-types": "6.25.0" + "babel-helper-regex": "^6.24.1", + "babel-runtime": "^6.22.0", + "babel-types": "^6.24.1" } }, "babel-plugin-transform-es2015-template-literals": { @@ -499,7 +499,7 @@ "integrity": "sha1-qEs0UPfp+PH2g51taH2oS7EjbY0=", "dev": true, "requires": { - "babel-runtime": "6.25.0" + "babel-runtime": "^6.22.0" } }, "babel-plugin-transform-es2015-typeof-symbol": { @@ -508,7 +508,7 @@ "integrity": "sha1-3sCfHN3/lLUqxz1QXITfWdzOs3I=", "dev": true, "requires": { - "babel-runtime": "6.25.0" + "babel-runtime": "^6.22.0" } }, "babel-plugin-transform-es2015-unicode-regex": { @@ -517,9 +517,9 @@ "integrity": "sha1-04sS9C6nMj9yk4fxinxa4frrNek=", "dev": true, "requires": { - "babel-helper-regex": "6.24.1", - "babel-runtime": "6.25.0", - "regexpu-core": "2.0.0" + "babel-helper-regex": "^6.24.1", + "babel-runtime": "^6.22.0", + "regexpu-core": "^2.0.0" } }, "babel-plugin-transform-flow-strip-types": { @@ -528,8 +528,8 @@ "integrity": "sha1-hMtnKTXUNxT9wyvOhFaNh0Qc988=", "dev": true, "requires": { - "babel-plugin-syntax-flow": "6.18.0", - "babel-runtime": "6.25.0" + "babel-plugin-syntax-flow": "^6.18.0", + "babel-runtime": "^6.22.0" } }, "babel-plugin-transform-react-display-name": { @@ -538,7 +538,7 @@ "integrity": "sha1-Z+K/Hx6ck6sI25Z5LgU5K/LMKNE=", "dev": true, "requires": { - "babel-runtime": "6.25.0" + "babel-runtime": "^6.22.0" } }, "babel-plugin-transform-react-jsx": { @@ -547,9 +547,9 @@ "integrity": "sha1-hAoCjn30YN/DotKfDA2R9jduZqM=", "dev": true, "requires": { - "babel-helper-builder-react-jsx": "6.24.1", - "babel-plugin-syntax-jsx": "6.18.0", - "babel-runtime": "6.25.0" + "babel-helper-builder-react-jsx": "^6.24.1", + "babel-plugin-syntax-jsx": "^6.8.0", + "babel-runtime": "^6.22.0" } }, "babel-plugin-transform-react-jsx-self": { @@ -558,8 +558,8 @@ "integrity": "sha1-322AqdomEqEh5t3XVYvL7PBuY24=", "dev": true, "requires": { - "babel-plugin-syntax-jsx": "6.18.0", - "babel-runtime": "6.25.0" + "babel-plugin-syntax-jsx": "^6.8.0", + "babel-runtime": "^6.22.0" } }, "babel-plugin-transform-react-jsx-source": { @@ -568,8 +568,8 @@ "integrity": "sha1-ZqwSFT9c0tF7PBkmj0vwGX9E7NY=", "dev": true, "requires": { - "babel-plugin-syntax-jsx": "6.18.0", - "babel-runtime": "6.25.0" + "babel-plugin-syntax-jsx": "^6.8.0", + "babel-runtime": "^6.22.0" } }, "babel-plugin-transform-regenerator": { @@ -587,8 +587,8 @@ "integrity": "sha1-1fr3qleKZbvlkc9e2uBKDGcCB1g=", "dev": true, "requires": { - "babel-runtime": "6.25.0", - "babel-types": "6.25.0" + "babel-runtime": "^6.22.0", + "babel-types": "^6.24.1" } }, "babel-polyfill": { @@ -597,9 +597,9 @@ "integrity": "sha1-g2TKYt+Or7gwSZ9pkXdGbDsDSZ0=", "dev": true, "requires": { - "babel-runtime": "6.25.0", - "core-js": "2.5.0", - "regenerator-runtime": "0.10.5" + "babel-runtime": "^6.22.0", + "core-js": "^2.4.0", + "regenerator-runtime": "^0.10.0" }, "dependencies": { "core-js": { @@ -616,30 +616,30 @@ "integrity": "sha1-1EBQ1rwsn+6nAqrzjXJ6AhBTiTk=", "dev": true, "requires": { - "babel-plugin-check-es2015-constants": "6.22.0", - "babel-plugin-transform-es2015-arrow-functions": "6.22.0", - "babel-plugin-transform-es2015-block-scoped-functions": "6.22.0", - "babel-plugin-transform-es2015-block-scoping": "6.24.1", - "babel-plugin-transform-es2015-classes": "6.24.1", - "babel-plugin-transform-es2015-computed-properties": "6.24.1", - "babel-plugin-transform-es2015-destructuring": "6.23.0", - "babel-plugin-transform-es2015-duplicate-keys": "6.24.1", - "babel-plugin-transform-es2015-for-of": "6.23.0", - "babel-plugin-transform-es2015-function-name": "6.24.1", - "babel-plugin-transform-es2015-literals": "6.22.0", - "babel-plugin-transform-es2015-modules-amd": "6.24.1", - "babel-plugin-transform-es2015-modules-commonjs": "6.24.1", - "babel-plugin-transform-es2015-modules-systemjs": "6.24.1", - "babel-plugin-transform-es2015-modules-umd": "6.24.1", - "babel-plugin-transform-es2015-object-super": "6.24.1", - "babel-plugin-transform-es2015-parameters": "6.24.1", - "babel-plugin-transform-es2015-shorthand-properties": "6.24.1", - "babel-plugin-transform-es2015-spread": "6.22.0", - "babel-plugin-transform-es2015-sticky-regex": "6.24.1", - "babel-plugin-transform-es2015-template-literals": "6.22.0", - "babel-plugin-transform-es2015-typeof-symbol": "6.23.0", - "babel-plugin-transform-es2015-unicode-regex": "6.24.1", - "babel-plugin-transform-regenerator": "6.24.1" + "babel-plugin-check-es2015-constants": "^6.22.0", + "babel-plugin-transform-es2015-arrow-functions": "^6.22.0", + "babel-plugin-transform-es2015-block-scoped-functions": "^6.22.0", + "babel-plugin-transform-es2015-block-scoping": "^6.24.1", + "babel-plugin-transform-es2015-classes": "^6.24.1", + "babel-plugin-transform-es2015-computed-properties": "^6.24.1", + "babel-plugin-transform-es2015-destructuring": "^6.22.0", + "babel-plugin-transform-es2015-duplicate-keys": "^6.24.1", + "babel-plugin-transform-es2015-for-of": "^6.22.0", + "babel-plugin-transform-es2015-function-name": "^6.24.1", + "babel-plugin-transform-es2015-literals": "^6.22.0", + "babel-plugin-transform-es2015-modules-amd": "^6.24.1", + "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1", + "babel-plugin-transform-es2015-modules-systemjs": "^6.24.1", + "babel-plugin-transform-es2015-modules-umd": "^6.24.1", + "babel-plugin-transform-es2015-object-super": "^6.24.1", + "babel-plugin-transform-es2015-parameters": "^6.24.1", + "babel-plugin-transform-es2015-shorthand-properties": "^6.24.1", + "babel-plugin-transform-es2015-spread": "^6.22.0", + "babel-plugin-transform-es2015-sticky-regex": "^6.24.1", + "babel-plugin-transform-es2015-template-literals": "^6.22.0", + "babel-plugin-transform-es2015-typeof-symbol": "^6.22.0", + "babel-plugin-transform-es2015-unicode-regex": "^6.24.1", + "babel-plugin-transform-regenerator": "^6.24.1" } }, "babel-preset-flow": { @@ -648,7 +648,7 @@ "integrity": "sha1-5xIYiHCFrpoktb5Baa/7WZgWxJ0=", "dev": true, "requires": { - "babel-plugin-transform-flow-strip-types": "6.22.0" + "babel-plugin-transform-flow-strip-types": "^6.22.0" } }, "babel-preset-react": { @@ -657,12 +657,12 @@ "integrity": "sha1-umnfrqRfw+xjm2pOzqbhdwLJE4A=", "dev": true, "requires": { - "babel-plugin-syntax-jsx": "6.18.0", - "babel-plugin-transform-react-display-name": "6.25.0", - "babel-plugin-transform-react-jsx": "6.24.1", - "babel-plugin-transform-react-jsx-self": "6.22.0", - "babel-plugin-transform-react-jsx-source": "6.22.0", - "babel-preset-flow": "6.23.0" + "babel-plugin-syntax-jsx": "^6.3.13", + "babel-plugin-transform-react-display-name": "^6.23.0", + "babel-plugin-transform-react-jsx": "^6.24.1", + "babel-plugin-transform-react-jsx-self": "^6.22.0", + "babel-plugin-transform-react-jsx-source": "^6.22.0", + "babel-preset-flow": "^6.23.0" } }, "babel-register": { @@ -671,13 +671,13 @@ "integrity": "sha1-fhDhOi9xBlvfrVoXh7pFvKbe118=", "dev": true, "requires": { - "babel-core": "6.25.0", - "babel-runtime": "6.25.0", - "core-js": "2.5.0", - "home-or-tmp": "2.0.0", - "lodash": "4.17.4", - "mkdirp": "0.5.1", - "source-map-support": "0.4.15" + "babel-core": "^6.24.1", + "babel-runtime": "^6.22.0", + "core-js": "^2.4.0", + "home-or-tmp": "^2.0.0", + "lodash": "^4.2.0", + "mkdirp": "^0.5.1", + "source-map-support": "^0.4.2" }, "dependencies": { "core-js": { @@ -694,8 +694,8 @@ "integrity": "sha1-M7mOql1IK7AajRqmtDetKwGuxBw=", "dev": true, "requires": { - "core-js": "2.5.0", - "regenerator-runtime": "0.10.5" + "core-js": "^2.4.0", + "regenerator-runtime": "^0.10.0" }, "dependencies": { "core-js": { @@ -712,11 +712,11 @@ "integrity": "sha1-ZlJBFmt8KqTGGdceGSlpVSsQwHE=", "dev": true, "requires": { - "babel-runtime": "6.25.0", - "babel-traverse": "6.25.0", - "babel-types": "6.25.0", - "babylon": "6.17.4", - "lodash": "4.17.4" + "babel-runtime": "^6.22.0", + "babel-traverse": "^6.25.0", + "babel-types": "^6.25.0", + "babylon": "^6.17.2", + "lodash": "^4.2.0" } }, "babel-traverse": { @@ -725,15 +725,15 @@ "integrity": "sha1-IldJfi/NGbie3BPEyROB+VEklvE=", "dev": true, "requires": { - "babel-code-frame": "6.22.0", - "babel-messages": "6.23.0", - "babel-runtime": "6.25.0", - "babel-types": "6.25.0", - "babylon": "6.17.4", - "debug": "2.6.8", - "globals": "9.18.0", - "invariant": "2.2.2", - "lodash": "4.17.4" + "babel-code-frame": "^6.22.0", + "babel-messages": "^6.23.0", + "babel-runtime": "^6.22.0", + "babel-types": "^6.25.0", + "babylon": "^6.17.2", + "debug": "^2.2.0", + "globals": "^9.0.0", + "invariant": "^2.2.0", + "lodash": "^4.2.0" } }, "babel-types": { @@ -742,10 +742,10 @@ "integrity": "sha1-cK+ySNVmDl0Y+BHZHIMDtUE0oY4=", "dev": true, "requires": { - "babel-runtime": "6.25.0", - "esutils": "2.0.2", - "lodash": "4.17.4", - "to-fast-properties": "1.0.3" + "babel-runtime": "^6.22.0", + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^1.0.1" } }, "babylon": { @@ -773,7 +773,7 @@ "integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=", "dev": true, "requires": { - "balanced-match": "1.0.0", + "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, @@ -784,9 +784,9 @@ "dev": true, "optional": true, "requires": { - "expand-range": "1.8.2", - "preserve": "0.2.0", - "repeat-element": "1.1.2" + "expand-range": "^1.8.1", + "preserve": "^0.2.0", + "repeat-element": "^1.1.2" } }, "chalk": { @@ -795,11 +795,11 @@ "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { - "ansi-styles": "2.2.1", - "escape-string-regexp": "1.0.5", - "has-ansi": "2.0.0", - "strip-ansi": "3.0.1", - "supports-color": "2.0.0" + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" } }, "chokidar": { @@ -809,15 +809,15 @@ "dev": true, "optional": true, "requires": { - "anymatch": "1.3.2", - "async-each": "1.0.1", - "fsevents": "1.1.2", - "glob-parent": "2.0.0", - "inherits": "2.0.3", - "is-binary-path": "1.0.1", - "is-glob": "2.0.1", - "path-is-absolute": "1.0.1", - "readdirp": "2.1.0" + "anymatch": "^1.3.0", + "async-each": "^1.0.0", + "fsevents": "^1.0.0", + "glob-parent": "^2.0.0", + "inherits": "^2.0.1", + "is-binary-path": "^1.0.0", + "is-glob": "^2.0.0", + "path-is-absolute": "^1.0.0", + "readdirp": "^2.0.0" } }, "commander": { @@ -855,9 +855,9 @@ "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.0.tgz", "integrity": "sha1-q0SEl8JlZuHilBPogyB9V8/nvtQ=", "requires": { - "fbjs": "0.8.14", - "loose-envify": "1.3.1", - "object-assign": "4.1.1" + "fbjs": "^0.8.9", + "loose-envify": "^1.3.1", + "object-assign": "^4.1.1" } }, "debug": { @@ -875,7 +875,7 @@ "integrity": "sha1-920GQ1LN9Docts5hnE7jqUdd4gg=", "dev": true, "requires": { - "repeating": "2.0.1" + "repeating": "^2.0.0" } }, "encoding": { @@ -883,7 +883,7 @@ "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", "requires": { - "iconv-lite": "0.4.18" + "iconv-lite": "~0.4.13" } }, "escape-string-regexp": { @@ -905,7 +905,7 @@ "dev": true, "optional": true, "requires": { - "is-posix-bracket": "0.1.1" + "is-posix-bracket": "^0.1.0" } }, "expand-range": { @@ -915,7 +915,7 @@ "dev": true, "optional": true, "requires": { - "fill-range": "2.2.3" + "fill-range": "^2.1.0" } }, "extglob": { @@ -925,7 +925,7 @@ "dev": true, "optional": true, "requires": { - "is-extglob": "1.0.0" + "is-extglob": "^1.0.0" } }, "fbjs": { @@ -933,13 +933,13 @@ "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.14.tgz", "integrity": "sha1-0dviviVMNakeCfMfnNUKQLKg7Rw=", "requires": { - "core-js": "1.2.7", - "isomorphic-fetch": "2.2.1", - "loose-envify": "1.3.1", - "object-assign": "4.1.1", - "promise": "7.3.1", - "setimmediate": "1.0.5", - "ua-parser-js": "0.7.14" + "core-js": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.9" } }, "filename-regex": { @@ -956,11 +956,11 @@ "dev": true, "optional": true, "requires": { - "is-number": "2.1.0", - "isobject": "2.1.0", - "randomatic": "1.1.7", - "repeat-element": "1.1.2", - "repeat-string": "1.6.1" + "is-number": "^2.1.0", + "isobject": "^2.0.0", + "randomatic": "^1.1.3", + "repeat-element": "^1.1.2", + "repeat-string": "^1.5.2" } }, "for-in": { @@ -977,7 +977,7 @@ "dev": true, "optional": true, "requires": { - "for-in": "1.0.2" + "for-in": "^1.0.1" } }, "fs-readdir-recursive": { @@ -999,8 +999,8 @@ "dev": true, "optional": true, "requires": { - "nan": "2.6.2", - "node-pre-gyp": "0.6.36" + "nan": "^2.3.0", + "node-pre-gyp": "^0.6.36" }, "dependencies": { "abbrev": { @@ -1022,7 +1022,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.1.1", @@ -1073,7 +1074,8 @@ "balanced-match": { "version": "0.4.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "bcrypt-pbkdf": { "version": "1.0.1", @@ -1088,6 +1090,7 @@ "version": "0.0.9", "bundled": true, "dev": true, + "optional": true, "requires": { "inherits": "2.0.3" } @@ -1096,6 +1099,7 @@ "version": "2.10.1", "bundled": true, "dev": true, + "optional": true, "requires": { "hoek": "2.16.3" } @@ -1104,15 +1108,17 @@ "version": "1.1.7", "bundled": true, "dev": true, + "optional": true, "requires": { - "balanced-match": "0.4.2", + "balanced-match": "^0.4.1", "concat-map": "0.0.1" } }, "buffer-shims": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "caseless": { "version": "0.12.0", @@ -1129,30 +1135,35 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "combined-stream": { "version": "1.0.5", "bundled": true, "dev": true, + "optional": true, "requires": { - "delayed-stream": "1.0.0" + "delayed-stream": "~1.0.0" } }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "cryptiles": { "version": "2.0.5", @@ -1169,7 +1180,7 @@ "dev": true, "optional": true, "requires": { - "assert-plus": "1.0.0" + "assert-plus": "^1.0.0" }, "dependencies": { "assert-plus": { @@ -1198,7 +1209,8 @@ "delayed-stream": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "delegates": { "version": "1.0.0", @@ -1224,7 +1236,8 @@ "extsprintf": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "forever-agent": { "version": "0.6.1", @@ -1246,12 +1259,14 @@ "fs.realpath": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "fstream": { "version": "1.0.11", "bundled": true, "dev": true, + "optional": true, "requires": { "graceful-fs": "4.1.11", "inherits": "2.0.3", @@ -1307,6 +1322,7 @@ "version": "7.1.2", "bundled": true, "dev": true, + "optional": true, "requires": { "fs.realpath": "1.0.0", "inflight": "1.0.6", @@ -1319,7 +1335,8 @@ "graceful-fs": { "version": "4.1.11", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "har-schema": { "version": "1.0.5", @@ -1358,7 +1375,8 @@ "hoek": { "version": "2.16.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "http-signature": { "version": "1.1.1", @@ -1375,6 +1393,7 @@ "version": "1.0.6", "bundled": true, "dev": true, + "optional": true, "requires": { "once": "1.4.0", "wrappy": "1.0.2" @@ -1383,7 +1402,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.4", @@ -1395,6 +1415,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "1.0.1" } @@ -1408,7 +1429,8 @@ "isarray": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "isstream": { "version": "0.1.2", @@ -1481,12 +1503,14 @@ "mime-db": { "version": "1.27.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "mime-types": { "version": "2.1.15", "bundled": true, "dev": true, + "optional": true, "requires": { "mime-db": "1.27.0" } @@ -1495,6 +1519,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "1.1.7" } @@ -1502,12 +1527,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "mkdirp": { "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -1560,7 +1587,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "oauth-sign": { "version": "0.8.2", @@ -1578,6 +1606,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1.0.2" } @@ -1607,7 +1636,8 @@ "path-is-absolute": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "performance-now": { "version": "0.2.0", @@ -1618,7 +1648,8 @@ "process-nextick-args": { "version": "1.0.7", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "punycode": { "version": "1.4.1", @@ -1656,6 +1687,7 @@ "version": "2.2.9", "bundled": true, "dev": true, + "optional": true, "requires": { "buffer-shims": "1.0.0", "core-util-is": "1.0.2", @@ -1700,6 +1732,7 @@ "version": "2.6.1", "bundled": true, "dev": true, + "optional": true, "requires": { "glob": "7.1.2" } @@ -1707,7 +1740,8 @@ "safe-buffer": { "version": "5.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "semver": { "version": "5.3.0", @@ -1761,24 +1795,26 @@ } } }, - "string_decoder": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "requires": { - "safe-buffer": "5.0.1" - } - }, "string-width": { "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "1.1.0", "is-fullwidth-code-point": "1.0.0", "strip-ansi": "3.0.1" } }, + "string_decoder": { + "version": "1.0.1", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "safe-buffer": "5.0.1" + } + }, "stringstream": { "version": "0.0.5", "bundled": true, @@ -1789,6 +1825,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "2.1.1" } @@ -1803,6 +1840,7 @@ "version": "2.2.1", "bundled": true, "dev": true, + "optional": true, "requires": { "block-stream": "0.0.9", "fstream": "1.0.11", @@ -1858,7 +1896,8 @@ "util-deprecate": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "uuid": { "version": "3.0.1", @@ -1887,7 +1926,8 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -1897,12 +1937,12 @@ "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", "dev": true, "requires": { - "fs.realpath": "1.0.0", - "inflight": "1.0.6", - "inherits": "2.0.3", - "minimatch": "3.0.4", - "once": "1.4.0", - "path-is-absolute": "1.0.1" + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" } }, "glob-base": { @@ -1912,8 +1952,8 @@ "dev": true, "optional": true, "requires": { - "glob-parent": "2.0.0", - "is-glob": "2.0.1" + "glob-parent": "^2.0.0", + "is-glob": "^2.0.0" } }, "glob-parent": { @@ -1921,8 +1961,9 @@ "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz", "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=", "dev": true, + "optional": true, "requires": { - "is-glob": "2.0.1" + "is-glob": "^2.0.0" } }, "globals": { @@ -1943,7 +1984,7 @@ "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", "dev": true, "requires": { - "ansi-regex": "2.1.1" + "ansi-regex": "^2.0.0" } }, "home-or-tmp": { @@ -1952,8 +1993,8 @@ "integrity": "sha1-42w/LSyufXRqhX440Y1fMqeILbg=", "dev": true, "requires": { - "os-homedir": "1.0.2", - "os-tmpdir": "1.0.2" + "os-homedir": "^1.0.0", + "os-tmpdir": "^1.0.1" } }, "iconv-lite": { @@ -1967,8 +2008,8 @@ "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "requires": { - "once": "1.4.0", - "wrappy": "1.0.2" + "once": "^1.3.0", + "wrappy": "1" } }, "inherits": { @@ -1983,7 +2024,7 @@ "integrity": "sha1-nh9WrArNtr8wMwbzOL47IErmA2A=", "dev": true, "requires": { - "loose-envify": "1.3.1" + "loose-envify": "^1.0.0" } }, "is-binary-path": { @@ -1993,14 +2034,15 @@ "dev": true, "optional": true, "requires": { - "binary-extensions": "1.9.0" + "binary-extensions": "^1.0.0" } }, "is-buffer": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.5.tgz", "integrity": "sha1-Hzsm72E7IUuIy8ojzGwB2Hlh7sw=", - "dev": true + "dev": true, + "optional": true }, "is-dotfile": { "version": "1.0.3", @@ -2016,7 +2058,7 @@ "dev": true, "optional": true, "requires": { - "is-primitive": "2.0.0" + "is-primitive": "^2.0.0" } }, "is-extendable": { @@ -2030,7 +2072,8 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz", "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=", - "dev": true + "dev": true, + "optional": true }, "is-finite": { "version": "1.0.2", @@ -2038,7 +2081,7 @@ "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=", "dev": true, "requires": { - "number-is-nan": "1.0.1" + "number-is-nan": "^1.0.0" } }, "is-glob": { @@ -2046,8 +2089,9 @@ "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz", "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=", "dev": true, + "optional": true, "requires": { - "is-extglob": "1.0.0" + "is-extglob": "^1.0.0" } }, "is-number": { @@ -2057,7 +2101,7 @@ "dev": true, "optional": true, "requires": { - "kind-of": "3.2.2" + "kind-of": "^3.0.2" } }, "is-posix-bracket": { @@ -2071,7 +2115,8 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz", "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU=", - "dev": true + "dev": true, + "optional": true }, "is-stream": { "version": "1.1.0", @@ -2082,7 +2127,8 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", - "dev": true + "dev": true, + "optional": true }, "isobject": { "version": "2.1.0", @@ -2099,8 +2145,8 @@ "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", "requires": { - "node-fetch": "1.7.1", - "whatwg-fetch": "2.0.3" + "node-fetch": "^1.0.1", + "whatwg-fetch": ">=0.10.0" } }, "js-tokens": { @@ -2125,21 +2171,23 @@ "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, + "optional": true, "requires": { - "is-buffer": "1.1.5" + "is-buffer": "^1.1.5" } }, "lodash": { "version": "4.17.4", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", - "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=" + "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=", + "dev": true }, "loose-envify": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz", "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=", "requires": { - "js-tokens": "3.0.2" + "js-tokens": "^3.0.0" } }, "micromatch": { @@ -2149,19 +2197,19 @@ "dev": true, "optional": true, "requires": { - "arr-diff": "2.0.0", - "array-unique": "0.2.1", - "braces": "1.8.5", - "expand-brackets": "0.1.5", - "extglob": "0.3.2", - "filename-regex": "2.0.1", - "is-extglob": "1.0.0", - "is-glob": "2.0.1", - "kind-of": "3.2.2", - "normalize-path": "2.1.1", - "object.omit": "2.0.1", - "parse-glob": "3.0.4", - "regex-cache": "0.4.3" + "arr-diff": "^2.0.0", + "array-unique": "^0.2.1", + "braces": "^1.8.2", + "expand-brackets": "^0.1.4", + "extglob": "^0.3.1", + "filename-regex": "^2.0.0", + "is-extglob": "^1.0.0", + "is-glob": "^2.0.1", + "kind-of": "^3.0.2", + "normalize-path": "^2.0.1", + "object.omit": "^2.0.0", + "parse-glob": "^3.0.4", + "regex-cache": "^0.4.2" } }, "minimatch": { @@ -2170,7 +2218,7 @@ "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "requires": { - "brace-expansion": "1.1.8" + "brace-expansion": "^1.1.7" } }, "minimist": { @@ -2206,8 +2254,8 @@ "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.1.tgz", "integrity": "sha512-j8XsFGCLw79vWXkZtMSmmLaOk9z5SQ9bV/tkbZVCqvgwzrjAGq66igobLofHtF63NvMTp2WjytpsNTGKa+XRIQ==", "requires": { - "encoding": "0.1.12", - "is-stream": "1.1.0" + "encoding": "^0.1.11", + "is-stream": "^1.0.1" } }, "normalize-path": { @@ -2215,8 +2263,9 @@ "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", "dev": true, + "optional": true, "requires": { - "remove-trailing-separator": "1.0.2" + "remove-trailing-separator": "^1.0.1" } }, "number-is-nan": { @@ -2237,8 +2286,8 @@ "dev": true, "optional": true, "requires": { - "for-own": "0.1.5", - "is-extendable": "0.1.1" + "for-own": "^0.1.4", + "is-extendable": "^0.1.1" } }, "once": { @@ -2247,7 +2296,7 @@ "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "requires": { - "wrappy": "1.0.2" + "wrappy": "1" } }, "os-homedir": { @@ -2268,9 +2317,9 @@ "integrity": "sha1-0KM+7+YaIF+suQCS6CZZjVJFznY=", "dev": true, "requires": { - "graceful-fs": "4.1.11", - "mkdirp": "0.5.1", - "object-assign": "4.1.1" + "graceful-fs": "^4.1.4", + "mkdirp": "^0.5.1", + "object-assign": "^4.1.0" } }, "parse-glob": { @@ -2280,10 +2329,10 @@ "dev": true, "optional": true, "requires": { - "glob-base": "0.3.0", - "is-dotfile": "1.0.3", - "is-extglob": "1.0.0", - "is-glob": "2.0.1" + "glob-base": "^0.3.0", + "is-dotfile": "^1.0.0", + "is-extglob": "^1.0.0", + "is-glob": "^2.0.0" } }, "path-is-absolute": { @@ -2317,7 +2366,7 @@ "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", "requires": { - "asap": "2.0.6" + "asap": "~2.0.3" } }, "prop-types": { @@ -2325,8 +2374,8 @@ "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.5.10.tgz", "integrity": "sha1-J5ffwxJhguOpXj37suiT3ddFYVQ=", "requires": { - "fbjs": "0.8.14", - "loose-envify": "1.3.1" + "fbjs": "^0.8.9", + "loose-envify": "^1.3.1" } }, "randomatic": { @@ -2336,8 +2385,8 @@ "dev": true, "optional": true, "requires": { - "is-number": "3.0.0", - "kind-of": "4.0.0" + "is-number": "^3.0.0", + "kind-of": "^4.0.0" }, "dependencies": { "is-number": { @@ -2347,7 +2396,7 @@ "dev": true, "optional": true, "requires": { - "kind-of": "3.2.2" + "kind-of": "^3.0.2" }, "dependencies": { "kind-of": { @@ -2357,7 +2406,7 @@ "dev": true, "optional": true, "requires": { - "is-buffer": "1.1.5" + "is-buffer": "^1.1.5" } } } @@ -2369,7 +2418,7 @@ "dev": true, "optional": true, "requires": { - "is-buffer": "1.1.5" + "is-buffer": "^1.1.5" } } } @@ -2379,11 +2428,11 @@ "resolved": "https://registry.npmjs.org/react/-/react-15.6.1.tgz", "integrity": "sha1-uqhDTsZ4C96ZfNw4C3nNM7ljk98=", "requires": { - "create-react-class": "15.6.0", - "fbjs": "0.8.14", - "loose-envify": "1.3.1", - "object-assign": "4.1.1", - "prop-types": "15.5.10" + "create-react-class": "^15.6.0", + "fbjs": "^0.8.9", + "loose-envify": "^1.1.0", + "object-assign": "^4.1.0", + "prop-types": "^15.5.10" } }, "react-dom": { @@ -2391,10 +2440,10 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.1.tgz", "integrity": "sha1-LLDtQZEDjlPCCes6eaI+Kkz5lHA=", "requires": { - "fbjs": "0.8.14", - "loose-envify": "1.3.1", - "object-assign": "4.1.1", - "prop-types": "15.5.10" + "fbjs": "^0.8.9", + "loose-envify": "^1.1.0", + "object-assign": "^4.1.0", + "prop-types": "^15.5.10" } }, "readable-stream": { @@ -2404,13 +2453,13 @@ "dev": true, "optional": true, "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.3", - "isarray": "1.0.0", - "process-nextick-args": "1.0.7", - "safe-buffer": "5.1.1", - "string_decoder": "1.0.3", - "util-deprecate": "1.0.2" + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~1.0.6", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.0.3", + "util-deprecate": "~1.0.1" } }, "readdirp": { @@ -2420,10 +2469,10 @@ "dev": true, "optional": true, "requires": { - "graceful-fs": "4.1.11", - "minimatch": "3.0.4", - "readable-stream": "2.3.3", - "set-immediate-shim": "1.0.1" + "graceful-fs": "^4.1.2", + "minimatch": "^3.0.2", + "readable-stream": "^2.0.2", + "set-immediate-shim": "^1.0.1" } }, "regenerate": { @@ -2444,9 +2493,9 @@ "integrity": "sha1-On0GdSDLe3F2dp61/4aGkb7+EoM=", "dev": true, "requires": { - "babel-runtime": "6.25.0", - "babel-types": "6.25.0", - "private": "0.1.7" + "babel-runtime": "^6.18.0", + "babel-types": "^6.19.0", + "private": "^0.1.6" } }, "regex-cache": { @@ -2456,8 +2505,8 @@ "dev": true, "optional": true, "requires": { - "is-equal-shallow": "0.1.3", - "is-primitive": "2.0.0" + "is-equal-shallow": "^0.1.3", + "is-primitive": "^2.0.0" } }, "regexpu-core": { @@ -2466,9 +2515,9 @@ "integrity": "sha1-SdA4g3uNz4v6W5pCE5k45uoq4kA=", "dev": true, "requires": { - "regenerate": "1.3.2", - "regjsgen": "0.2.0", - "regjsparser": "0.1.5" + "regenerate": "^1.2.1", + "regjsgen": "^0.2.0", + "regjsparser": "^0.1.4" } }, "regjsgen": { @@ -2483,7 +2532,7 @@ "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=", "dev": true, "requires": { - "jsesc": "0.5.0" + "jsesc": "~0.5.0" }, "dependencies": { "jsesc": { @@ -2498,13 +2547,15 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.0.2.tgz", "integrity": "sha1-abBi2XhyetFNxrVrpKt3L9jXBRE=", - "dev": true + "dev": true, + "optional": true }, "repeat-element": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz", "integrity": "sha1-7wiaF40Ug7quTZPrmLT55OEdmQo=", - "dev": true + "dev": true, + "optional": true }, "repeat-string": { "version": "1.6.1", @@ -2519,14 +2570,15 @@ "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=", "dev": true, "requires": { - "is-finite": "1.0.2" + "is-finite": "^1.0.0" } }, "safe-buffer": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", - "dev": true + "dev": true, + "optional": true }, "set-immediate-shim": { "version": "1.0.1", @@ -2558,7 +2610,7 @@ "integrity": "sha1-AyAt9lwG0r2MfsI2KhkwVv7407E=", "dev": true, "requires": { - "source-map": "0.5.6" + "source-map": "^0.5.6" } }, "string_decoder": { @@ -2568,7 +2620,7 @@ "dev": true, "optional": true, "requires": { - "safe-buffer": "5.1.1" + "safe-buffer": "~5.1.0" } }, "strip-ansi": { @@ -2577,7 +2629,7 @@ "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "requires": { - "ansi-regex": "2.1.1" + "ansi-regex": "^2.0.0" } }, "supports-color": { @@ -2627,7 +2679,7 @@ "integrity": "sha1-qrGh+jDUX4jdMhFIh1rALAtV5bQ=", "dev": true, "requires": { - "user-home": "1.1.1" + "user-home": "^1.1.1" } }, "whatwg-fetch": { diff --git a/src/CoverFlow/Container/Container.js b/src/CoverFlow/Container/Container.js index 52a6acc..10acd5d 100644 --- a/src/CoverFlow/Container/Container.js +++ b/src/CoverFlow/Container/Container.js @@ -1,34 +1,40 @@ import React from 'react'; + +import ArrowKeysReact from 'arrow-keys-react'; import PropTypes from 'prop-types'; -import SIDES from './SIDES' -import Item from './Item/Item'; import SwipeReact from 'swipe-react'; import WheelReact from 'wheel-react'; -import ArrowKeysReact from 'arrow-keys-react'; + +import Item from './Item/Item'; +import SIDES from './SIDES'; class Container extends React.Component { - constructor(props){ + constructor(props) { super(props); this.selectItem = this.selectItem.bind(this); this.prepareItems = this.prepareItems.bind(this); this.calcIndex = this.calcIndex.bind(this); this.calcItemDimensions = this.calcItemDimensions.bind(this); this.calcItemsAmountToRender = this.calcItemsAmountToRender.bind(this); - let index = this.calcIndex(); + // let index = this.calcIndex(); + let index = + this.props.defaultSelectedItem || this.props.defaultSelectedItem == 0 + ? this.props.defaultSelectedItem + : this.calcIndex(); this.state = { selectedIndex: index, prevIndex: index, - pauseWheelEvent: false + pauseWheelEvent: false, }; let next = () => { let index = this.state.selectedIndex; - if(index + 1 < this.props.imagesArr.length){ + if (index + 1 < this.props.imagesArr.length) { this.selectItem(index + 1); } }; let previous = () => { let index = this.state.selectedIndex; - if(index > 0){ + if (index > 0) { this.selectItem(index - 1); } }; @@ -36,66 +42,71 @@ class Container extends React.Component { left: previous, right: next, up: next, - down: previous + down: previous, }; let touchConfig = { left: next, right: previous, up: next, - down: previous + down: previous, }; SwipeReact.config(touchConfig); WheelReact.config(touchConfig); ArrowKeysReact.config(keysConfig); } - render(){ + render() { let itemWidth, itemHeight; [itemWidth, itemHeight] = this.calcItemDimensions(); let items = this.prepareItems(); - return( -
{ - this.coverflow = coverflow; - }}> - {items.map((item)=>{ - return ; + return ( +
{ + this.coverflow = coverflow; + }} + > + {items.map((item) => { + return ( + + ); })}
); } - componentDidMount(){ + componentDidMount() { this.coverflow.focus(); } - componentWillUnmount(){ + componentWillUnmount() { WheelReact.clearTimeout(); } - selectItem(index){ - this.setState((prevState)=>({ + selectItem(index) { + this.setState((prevState) => ({ selectedIndex: index, - prevIndex: prevState.selectedIndex + prevIndex: prevState.selectedIndex, })); if (this.props.handleSelect) { this.props.handleSelect(index); } } - prepareItems(){ - if (this.props.imagesArr.length === 0){ + prepareItems() { + if (this.props.imagesArr.length === 0) { return []; } const AMOUNT_TO_RENDER = this.calcItemsAmountToRender(); @@ -103,7 +114,11 @@ class Container extends React.Component { const index = this.state.selectedIndex; const imagesArr = JSON.parse(JSON.stringify(this.props.imagesArr)); - const items = imagesArr.map((imgUrl, index)=>({imgUrl, index, label: null})); + const items = imagesArr.map((imgUrl, index) => ({ + imgUrl, + index, + label: null, + })); for (let i = 0; i < this.props.labelsArr.length; i++) { items[i].label = this.props.labelsArr[i]; @@ -112,35 +127,35 @@ class Container extends React.Component { items[index].distance = 0; let fromIndex = Math.max(0, index - SIDE_AMOUNT); - let untilIndex = Math.min(imagesArr.length, index + SIDE_AMOUNT+1); + let untilIndex = Math.min(imagesArr.length, index + SIDE_AMOUNT + 1); - for(let i = fromIndex; i < index; i++){ + for (let i = fromIndex; i < index; i++) { items[i].side = SIDES.LEFT; items[i].distance = index - i; } - for(let i = index + 1; i < untilIndex; i++){ + for (let i = index + 1; i < untilIndex; i++) { items[i].side = SIDES.RIGHT; items[i].distance = i - index; } - if (items.length < AMOUNT_TO_RENDER){ + if (items.length < AMOUNT_TO_RENDER) { return items; } // calc removed items, in order to animate them. let amount = index - this.state.prevIndex; if (amount > 0 && fromIndex > SIDE_AMOUNT) { - for(let i = fromIndex - amount; i < fromIndex; i++){ + for (let i = fromIndex - amount; i < fromIndex; i++) { items[i].side = SIDES.REMOVED_LEFT; items[i].distance = index - i; } fromIndex -= amount; } else if (amount < 0) { amount *= -1; - if(untilIndex + amount < items.length){ - for(let i = untilIndex; i < untilIndex + amount; i++){ - if(!items[i]){ + if (untilIndex + amount < items.length) { + for (let i = untilIndex; i < untilIndex + amount; i++) { + if (!items[i]) { debugger; } items[i].side = SIDES.REMOVED_RIGHT; @@ -152,7 +167,7 @@ class Container extends React.Component { return items.slice(fromIndex, untilIndex); } - calcIndex(){ + calcIndex() { const length = this.props.imagesArr.length; if (length === 0) { return -1; @@ -162,30 +177,32 @@ class Container extends React.Component { } return parseInt(this.props.imagesArr.length / 2, 10); } - calcItemDimensions(){ + calcItemDimensions() { let ratio = {}; - [ratio.x, ratio.y] = this.props.itemRatio.split(':').map(x=>parseFloat(x)); + [ratio.x, ratio.y] = this.props.itemRatio + .split(':') + .map((x) => parseFloat(x)); let itemWidth, itemHeight; if (this.props.direction === 'vertical') { itemWidth = this.props.width - 70; - itemHeight = itemWidth * ratio.y / ratio.x; + itemHeight = (itemWidth * ratio.y) / ratio.x; } else { itemHeight = this.props.height - 60; - itemWidth = itemHeight * ratio.x / ratio.y; + itemWidth = (itemHeight * ratio.x) / ratio.y; } return [itemWidth, itemHeight]; } - calcItemsAmountToRender(){ + calcItemsAmountToRender() { let amount; if (this.props.direction === 'vertical') { const containerHeight = this.props.height; let itemHeight; - [,itemHeight] = this.calcItemDimensions(); + [, itemHeight] = this.calcItemDimensions(); amount = Math.floor(containerHeight / itemHeight) * 2 - 4; } else { const containerWidth = this.props.width; let itemWidth; - [itemWidth,] = this.calcItemDimensions(); + [itemWidth] = this.calcItemDimensions(); amount = Math.floor(containerWidth / itemWidth) * 2 - 3; } if (amount < 3) { @@ -205,7 +222,8 @@ Container.propTypes = { border: PropTypes.string, boxShadow: PropTypes.string, itemRatio: PropTypes.string, - handleSelect: PropTypes.func + handleSelect: PropTypes.func, + defaultSelectedItem: PropTypes.number, }; -export default Container; \ No newline at end of file +export default Container; diff --git a/src/CoverFlow/Container/Item/Item.js b/src/CoverFlow/Container/Item/Item.js index 56b9ba6..19d8701 100644 --- a/src/CoverFlow/Container/Item/Item.js +++ b/src/CoverFlow/Container/Item/Item.js @@ -1,17 +1,18 @@ import React from 'react'; + import PropTypes from 'prop-types'; + import SIDES from '../SIDES'; class Item extends React.Component { - constructor(props){ + constructor(props) { super(props); this.cssTransform = this.cssTransform.bind(this); this.cssTransformVertical = this.cssTransformVertical.bind(this); - this.state = {tempTransform: ''}; + this.state = { tempTransform: '' }; } - render(){ + render() { let styles = { - backgroundImage: `url('${this.props.imgUrl}')`, left: `calc(50% - ${this.props.width}px / 2)`, top: `calc(50% - ${this.props.height}px / 2)`, width: `${this.props.width}px`, @@ -19,127 +20,153 @@ class Item extends React.Component { backgroundSize: `${this.props.width}px ${this.props.height}px`, display: 'inline-block', position: 'absolute', - backgroundColor: 'greenyellow', + backgroundColor: 'rgba(0,0,0,0)', transitionTimingFunction: 'ease-in-out', transition: 'transform 750ms', - boxShadow: '30px 5px 15px -10px rgba(0,0,0,.15), -30px 5px 15px -10px rgba(0,0,0,.15)', }; if (this.props.side !== SIDES.CENTER) { - if (this.state.tempTransform !== ''){ + if (this.state.tempTransform !== '') { styles.transform = this.state.tempTransform; } else { if (this.props.direction === 'vertical') { - styles.transform = this.cssTransformVertical(this.props.side, this.props.distance); + styles.transform = this.cssTransformVertical( + this.props.side, + this.props.distance + ); } else { - styles.transform = this.cssTransform(this.props.side, this.props.distance); + styles.transform = this.cssTransform( + this.props.side, + this.props.distance + ); } } } - if (this.props.side === SIDES.CENTER){ + if (this.props.side === SIDES.CENTER) { styles.zIndex = this.props.zIndex; - } else if (this.props.side === SIDES.RIGHT){ + } else if (this.props.side === SIDES.RIGHT) { styles.zIndex = this.props.zIndex - this.props.distance; - } else if (this.props.side === SIDES.REMOVED_RIGHT){ + } else if (this.props.side === SIDES.REMOVED_RIGHT) { styles.zIndex = this.props.zIndex - this.props.distance - 1; } let labelJsx = ''; if (this.props.label !== null) { labelJsx = ( -
{this.props.label}
+
+ {this.props.label} +
); } - return( -
{ - this.props.selectItem(this.props.index); + return ( +
{ + this.props.selectItem(this.props.index); + }} + > + {labelJsx}
+ /> + {labelJsx} +
); } - componentWillMount(){ + componentWillMount() { let tempTransform; - if(this.props.direction === 'vertical') { - if (this.props.side === SIDES.LEFT || this.props.side === SIDES.RIGHT){ - tempTransform = this.cssTransformVertical(this.props.side, this.props.max); + if (this.props.direction === 'vertical') { + if (this.props.side === SIDES.LEFT || this.props.side === SIDES.RIGHT) { + tempTransform = this.cssTransformVertical( + this.props.side, + this.props.max + ); } else { tempTransform = ''; } } else { - if (this.props.side === SIDES.LEFT || this.props.side === SIDES.RIGHT){ + if (this.props.side === SIDES.LEFT || this.props.side === SIDES.RIGHT) { tempTransform = this.cssTransform(this.props.side, this.props.max); } else { tempTransform = ''; } } - this.setState({tempTransform}); + this.setState({ tempTransform }); } - componentDidMount(){ - this.timeout = setTimeout(()=>{ - this.setState({tempTransform: ''}); + componentDidMount() { + this.timeout = setTimeout(() => { + this.setState({ tempTransform: '' }); }, 100); } - componentWillUnmount(){ - if (this.timeout){ + componentWillUnmount() { + if (this.timeout) { clearTimeout(this.timeout); } let tempTransform; - if(this.props.direction === 'vertical') { - if (this.props.side === SIDES.LEFT || this.props.side === SIDES.RIGHT){ - tempTransform = this.cssTransformVertical(this.props.side, this.props.max); + if (this.props.direction === 'vertical') { + if (this.props.side === SIDES.LEFT || this.props.side === SIDES.RIGHT) { + tempTransform = this.cssTransformVertical( + this.props.side, + this.props.max + ); } else { tempTransform = ''; } } else { - if (this.props.side === SIDES.LEFT || this.props.side === SIDES.RIGHT){ + if (this.props.side === SIDES.LEFT || this.props.side === SIDES.RIGHT) { tempTransform = this.cssTransform(this.props.side, this.props.max); } else { tempTransform = ''; } } - this.setState({tempTransform}); + this.setState({ tempTransform }); } - cssTransform(side, distance){ + cssTransform(side, distance) { const template = (deg, x, z) => `rotateY(${deg}deg) translate3d(${x}px, 0px, ${z}px)`; const a = Math.floor(this.props.width / 3); - const z = (-1*a * distance - a) * 1.08; + const z = (-1 * a * distance - a) * 1.08; const left = { deg: 45, - x: -1*a * distance, - z + x: -1 * a * distance, + z, }; const right = { deg: -45, x: a * distance, - z + z, }; if (side === SIDES.LEFT) { return template(left.deg, left.x, left.z); } else if (side === SIDES.RIGHT) { return template(right.deg, right.x, right.z); - } else if (side === SIDES.REMOVED_LEFT){ + } else if (side === SIDES.REMOVED_LEFT) { return this.cssTransform(SIDES.LEFT, this.props.max); - } else if (side === SIDES.REMOVED_RIGHT){ + } else if (side === SIDES.REMOVED_RIGHT) { return this.cssTransform(SIDES.RIGHT, this.props.max); } else { throw 'Error: side is undefined or invalid.'; } } - cssTransformVertical(side, distance){ + cssTransformVertical(side, distance) { const template = (deg, y, z) => `rotateX(${deg}deg) translate3d(0px, ${y}px, ${z}px)`; @@ -149,22 +176,22 @@ class Item extends React.Component { const up = { deg: -45, y: -1 * a * distance, - z + z, }; const down = { deg: 45, y: a * distance, - z + z, }; if (side === SIDES.LEFT) { return template(up.deg, up.y, up.z); } else if (side === SIDES.RIGHT) { return template(down.deg, down.y, down.z); - } else if (side === SIDES.REMOVED_LEFT){ + } else if (side === SIDES.REMOVED_LEFT) { return this.cssTransformVertical(SIDES.LEFT, this.props.max); - } else if (side === SIDES.REMOVED_RIGHT){ + } else if (side === SIDES.REMOVED_RIGHT) { return this.cssTransformVertical(SIDES.RIGHT, this.props.max); } else { throw 'Error: side is undefined or invalid.'; @@ -173,14 +200,20 @@ class Item extends React.Component { } Item.propTypes = { - side: PropTypes.oneOf([SIDES.LEFT, SIDES.CENTER, SIDES.RIGHT, SIDES.REMOVED_RIGHT, SIDES.REMOVED_LEFT]).isRequired, + side: PropTypes.oneOf([ + SIDES.LEFT, + SIDES.CENTER, + SIDES.RIGHT, + SIDES.REMOVED_RIGHT, + SIDES.REMOVED_LEFT, + ]).isRequired, zIndex: PropTypes.number, height: PropTypes.number.isRequired, - width: PropTypes.number.isRequired + width: PropTypes.number.isRequired, }; Item.defaultProps = { - zIndex: 100 + zIndex: 100, }; -export default Item; \ No newline at end of file +export default Item; diff --git a/src/CoverFlow/CoverFlow.js b/src/CoverFlow/CoverFlow.js index bc837ea..55d6c2a 100644 --- a/src/CoverFlow/CoverFlow.js +++ b/src/CoverFlow/CoverFlow.js @@ -1,18 +1,23 @@ import React from 'react'; + import PropTypes from 'prop-types'; -import EmptyContainer from './Container/EmptyContainer'; + import Container from './Container/Container'; +import EmptyContainer from './Container/EmptyContainer'; class CoverFlow extends React.Component { - render(){ - + render() { let width, height; if (this.props.direction === 'vertical') { width = isNaN(this.props.width) ? 250 : this.props.width; - height = isNaN(this.props.height) ? document.body.offsetHeight : this.props.height; + height = isNaN(this.props.height) + ? document.body.offsetHeight + : this.props.height; } else { height = isNaN(this.props.height) ? 250 : this.props.height; - width = isNaN(this.props.width) ? document.body.offsetWidth : this.props.width; + width = isNaN(this.props.width) + ? document.body.offsetWidth + : this.props.width; } let styles = { @@ -28,32 +33,39 @@ class CoverFlow extends React.Component { outline: 'transparent', background: this.props.background, border: this.props.border, - boxShadow: this.props.boxShadow + boxShadow: this.props.boxShadow, }; if (this.props.imagesArr.length === 0) { - return ; + return ( + + ); } - return ; + return ( + + ); } } @@ -68,7 +80,8 @@ CoverFlow.propTypes = { emptyMessage: PropTypes.string, itemRatio: PropTypes.string, handleSelect: PropTypes.func, - labelsArr: PropTypes.array + labelsArr: PropTypes.array, + defaultSelectedItem: PropTypes.number, }; CoverFlow.defaultProps = { @@ -79,7 +92,7 @@ CoverFlow.defaultProps = { boxShadow: 'none', emptyMessage: 'No items to show.', itemRatio: '8:5', - labelsArr: [] + labelsArr: [], }; -export default CoverFlow; \ No newline at end of file +export default CoverFlow; From ab4b212854b82ae41cdd31590f982dd77810ef5e Mon Sep 17 00:00:00 2001 From: Clyde Ancheta Date: Fri, 16 Jun 2023 11:32:13 +0800 Subject: [PATCH 2/5] recompiled --- lib/CoverFlow/Container/Container.js | 41 +++++++++++++++++----------- lib/CoverFlow/Container/Item/Item.js | 20 ++++++++++---- lib/CoverFlow/CoverFlow.js | 19 +++++++------ 3 files changed, 50 insertions(+), 30 deletions(-) diff --git a/lib/CoverFlow/Container/Container.js b/lib/CoverFlow/Container/Container.js index f595c10..3ab7ae9 100644 --- a/lib/CoverFlow/Container/Container.js +++ b/lib/CoverFlow/Container/Container.js @@ -14,17 +14,13 @@ var _react = require('react'); var _react2 = _interopRequireDefault(_react); -var _propTypes = require('prop-types'); - -var _propTypes2 = _interopRequireDefault(_propTypes); - -var _SIDES = require('./SIDES'); +var _arrowKeysReact = require('arrow-keys-react'); -var _SIDES2 = _interopRequireDefault(_SIDES); +var _arrowKeysReact2 = _interopRequireDefault(_arrowKeysReact); -var _Item = require('./Item/Item'); +var _propTypes = require('prop-types'); -var _Item2 = _interopRequireDefault(_Item); +var _propTypes2 = _interopRequireDefault(_propTypes); var _swipeReact = require('swipe-react'); @@ -34,9 +30,13 @@ var _wheelReact = require('wheel-react'); var _wheelReact2 = _interopRequireDefault(_wheelReact); -var _arrowKeysReact = require('arrow-keys-react'); +var _Item = require('./Item/Item'); -var _arrowKeysReact2 = _interopRequireDefault(_arrowKeysReact); +var _Item2 = _interopRequireDefault(_Item); + +var _SIDES = require('./SIDES'); + +var _SIDES2 = _interopRequireDefault(_SIDES); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } @@ -59,7 +59,8 @@ var Container = function (_React$Component) { _this.calcIndex = _this.calcIndex.bind(_this); _this.calcItemDimensions = _this.calcItemDimensions.bind(_this); _this.calcItemsAmountToRender = _this.calcItemsAmountToRender.bind(_this); - var index = _this.calcIndex(); + // let index = this.calcIndex(); + var index = _this.props.defaultSelectedItem || _this.props.defaultSelectedItem == 0 ? _this.props.defaultSelectedItem : _this.calcIndex(); _this.state = { selectedIndex: index, prevIndex: index, @@ -113,12 +114,14 @@ var Container = function (_React$Component) { var items = this.prepareItems(); return _react2.default.createElement( 'div', - _extends({ tabIndex: '0', + _extends({ + tabIndex: '0', style: this.props.containerStyles }, _swipeReact2.default.events, _wheelReact2.default.events, _arrowKeysReact2.default.events, { ref: function ref(coverflow) { _this2.coverflow = coverflow; - } }), + } + }), items.map(function (item) { return _react2.default.createElement(_Item2.default, { side: item.side, @@ -132,7 +135,8 @@ var Container = function (_React$Component) { width: itemWidth, label: item.label, direction: _this2.props.direction, - key: item.index }); + key: item.index + }); }) ); } @@ -171,7 +175,11 @@ var Container = function (_React$Component) { var index = this.state.selectedIndex; var imagesArr = JSON.parse(JSON.stringify(this.props.imagesArr)); var items = imagesArr.map(function (imgUrl, index) { - return { imgUrl: imgUrl, index: index, label: null }; + return { + imgUrl: imgUrl, + index: index, + label: null + }; }); for (var i = 0; i < this.props.labelsArr.length; i++) { @@ -305,7 +313,8 @@ Container.propTypes = { border: _propTypes2.default.string, boxShadow: _propTypes2.default.string, itemRatio: _propTypes2.default.string, - handleSelect: _propTypes2.default.func + handleSelect: _propTypes2.default.func, + defaultSelectedItem: _propTypes2.default.number }; exports.default = Container; \ No newline at end of file diff --git a/lib/CoverFlow/Container/Item/Item.js b/lib/CoverFlow/Container/Item/Item.js index a7cdfd6..9726301 100644 --- a/lib/CoverFlow/Container/Item/Item.js +++ b/lib/CoverFlow/Container/Item/Item.js @@ -46,7 +46,6 @@ var Item = function (_React$Component) { var _this2 = this; var styles = { - backgroundImage: 'url(\'' + this.props.imgUrl + '\')', left: 'calc(50% - ' + this.props.width + 'px / 2)', top: 'calc(50% - ' + this.props.height + 'px / 2)', width: this.props.width + 'px', @@ -54,10 +53,9 @@ var Item = function (_React$Component) { backgroundSize: this.props.width + 'px ' + this.props.height + 'px', display: 'inline-block', position: 'absolute', - backgroundColor: 'greenyellow', + backgroundColor: 'rgba(0,0,0,0)', transitionTimingFunction: 'ease-in-out', - transition: 'transform 750ms', - boxShadow: '30px 5px 15px -10px rgba(0,0,0,.15), -30px 5px 15px -10px rgba(0,0,0,.15)' + transition: 'transform 750ms' }; if (this.props.side !== _SIDES2.default.CENTER) { if (this.state.tempTransform !== '') { @@ -81,7 +79,8 @@ var Item = function (_React$Component) { if (this.props.label !== null) { labelJsx = _react2.default.createElement( 'div', - { style: { + { + style: { background: 'rgba(0,0,0,0.5)', color: 'white', padding: '5px', @@ -90,7 +89,8 @@ var Item = function (_React$Component) { width: '100%', boxSizing: 'border-box', userSelect: 'none' - } }, + } + }, this.props.label ); } @@ -102,6 +102,14 @@ var Item = function (_React$Component) { _this2.props.selectItem(_this2.props.index); } }, + _react2.default.createElement('img', { + src: this.props.imgUrl, + style: { + boxShadow: '30px 5px 15px -10px rgba(0,0,0,.15), -30px 5px 15px -10px rgba(0,0,0,.15)', + height: this.props.height + 'px', + objectFit: 'scale-down' + } + }), labelJsx ); } diff --git a/lib/CoverFlow/CoverFlow.js b/lib/CoverFlow/CoverFlow.js index d3b8b54..e46f32d 100644 --- a/lib/CoverFlow/CoverFlow.js +++ b/lib/CoverFlow/CoverFlow.js @@ -14,14 +14,14 @@ var _propTypes = require('prop-types'); var _propTypes2 = _interopRequireDefault(_propTypes); -var _EmptyContainer = require('./Container/EmptyContainer'); - -var _EmptyContainer2 = _interopRequireDefault(_EmptyContainer); - var _Container = require('./Container/Container'); var _Container2 = _interopRequireDefault(_Container); +var _EmptyContainer = require('./Container/EmptyContainer'); + +var _EmptyContainer2 = _interopRequireDefault(_EmptyContainer); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -42,7 +42,6 @@ var CoverFlow = function (_React$Component) { _createClass(CoverFlow, [{ key: 'render', value: function render() { - var width = void 0, height = void 0; if (this.props.direction === 'vertical') { @@ -77,7 +76,8 @@ var CoverFlow = function (_React$Component) { width: this.props.width, background: this.props.background, border: this.props.border, - boxShadow: this.props.boxShadow }); + boxShadow: this.props.boxShadow + }); } return _react2.default.createElement(_Container2.default, { containerStyles: styles, @@ -91,7 +91,9 @@ var CoverFlow = function (_React$Component) { background: this.props.background, border: this.props.border, boxShadow: this.props.boxShadow, - direction: this.props.direction }); + direction: this.props.direction, + defaultSelectedItem: this.props.defaultSelectedItem + }); } }]); @@ -109,7 +111,8 @@ CoverFlow.propTypes = { emptyMessage: _propTypes2.default.string, itemRatio: _propTypes2.default.string, handleSelect: _propTypes2.default.func, - labelsArr: _propTypes2.default.array + labelsArr: _propTypes2.default.array, + defaultSelectedItem: _propTypes2.default.number }; CoverFlow.defaultProps = { From f1dd694e29d204ccf989b878c47027679404dd51 Mon Sep 17 00:00:00 2001 From: Clyde Ancheta Date: Fri, 16 Jun 2023 11:56:03 +0800 Subject: [PATCH 3/5] bump version, readme --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b35144d..2a57736 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coverflow-react", - "version": "0.1.28", + "version": "0.1.29b", "license": "MIT", "author": "leon.good.life", "main": "main.js", From 4c3d0f9d1201180f9ee260b7bf193d140868fa99 Mon Sep 17 00:00:00 2001 From: Clyde Ancheta Date: Fri, 16 Jun 2023 11:56:32 +0800 Subject: [PATCH 4/5] bump version, readme --- README.md | 69 ++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 46 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index a9cf3fa..c3cb757 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ # Coverflow React +fork of https://github.com/leon-good-life/coverflow-react. [![npm version](https://badge.fury.io/js/coverflow-react.svg)](http://badge.fury.io/js/coverflow-react) @@ -10,72 +11,94 @@ npm install --save coverflow-react ``` ## Live Demo + https://storage.googleapis.com/coverflow-react/index.html ### Demo project + There is a [coverflow-react-demo](https://github.com/leon-good-life/coverflow-react-demo) repository on GitHub, that demonstrates features of this widget. ### Screenshots + ![screenshot horizontal](https://storage.googleapis.com/coverflow-react/screenshot_horizontal.gif) ![screenshot vertical](https://storage.googleapis.com/coverflow-react/screenshot_vertical.gif) ## Usage + ### Using CoverFlow in your project + 1. Add coverflow-react package to your project using npm. + ```bash npm install --save coverflow-react ``` 2. import CoverFlow + ```javascript import CoverFlow from 'coverflow-react'; ``` 3. Create an array of path/URLs to the images. + ```javascript const imagesArr = [ - 'img/1.jpg', - 'img/2.jpg', - 'img/3.jpg', - 'img/4.jpg', - 'img/5.jpg' - ]; + 'img/1.jpg', + 'img/2.jpg', + 'img/3.jpg', + 'img/4.jpg', + 'img/5.jpg', +]; ``` + (If you are using create-react-app, you can put the images in 'public' directory). 4. Add CoverFlow Component to your project and pass images array. + ```jsx ``` +### Optional props +- **zIndex** - by default it is 100. If there are conflicts with z-index in your project. You can pass zIndex you want. +- **height** - the height of coverflow container in pixels. The default is 300. The height of coverflow item is calculated automatically. It is 60px less than the height of the container. +- **emptyMessage** - a message the user see when there are no items. The default message is 'No items to show.'. This property allows to customize this message. It is particularly useful for internationalization and localization, by allowing coverflow to adapt to different languages. +- **itemRatio** - aspect ratio of coverflow items. The default is '8:5'. +- **background** - a css background property. The default is 'lightgray'. You can assign any valid css background. +- **border** - a css border property. The default is 'none'. You can assign any valid css border. +- **boxShadow** - a css box-shadow property. The default is 'none'. You can assign any valid css box-shadow. +- **handleSelect** - you can pass a callback function. The function has an index parameter. -### Optional props -* **zIndex** - by default it is 100. If there are conflicts with z-index in your project. You can pass zIndex you want. -* **height** - the height of coverflow container in pixels. The default is 300. The height of coverflow item is calculated automatically. It is 60px less than the height of the container. -* **emptyMessage** - a message the user see when there are no items. The default message is 'No items to show.'. This property allows to customize this message. It is particularly useful for internationalization and localization, by allowing coverflow to adapt to different languages. -* **itemRatio** - aspect ratio of coverflow items. The default is '8:5'. -* **background** - a css background property. The default is 'lightgray'. You can assign any valid css background. -* **border** - a css border property. The default is 'none'. You can assign any valid css border. -* **boxShadow** - a css box-shadow property. The default is 'none'. You can assign any valid css box-shadow. -* **handleSelect** - you can pass a callback function. The function has an index parameter. ```jsx -{alert(index);}} imagesArr={imagesArr} /> + { + alert(index); + }} + imagesArr={imagesArr} +/> ``` -* **labelsArr** - allows to add text labels at the bottom of the images, the array must be the same size of imagesArr. -* **direction** - the default is "horizontal", if passing "vertical", the CoverFlow will transform to vertical. + +- **labelsArr** - allows to add text labels at the bottom of the images, the array must be the same size of imagesArr. +- **direction** - the default is "horizontal", if passing "vertical", the CoverFlow will transform to vertical. +- **defaultSelectedItem** - select an image by index, default is middle image. ## Features -* Support for large amount of images, by rendering only some of them at a time, and with easy navigation and smooth animation, the user can see all the images. -* Vertical CoverFlow (In addition to Horizontal CoverFlow). + +- Support for large amount of images, by rendering only some of them at a time, and with easy navigation and smooth animation, the user can see all the images. +- Vertical CoverFlow (In addition to Horizontal CoverFlow). + ### Multiple input devices support -* Swipe support on touch devices (smartphones, tablets). -* Keyboard 'left' and 'right' keys support. -* Scroll support (mouse and trackpad). + +- Swipe support on touch devices (smartphones, tablets). +- Keyboard 'left' and 'right' keys support. +- Scroll support (mouse and trackpad). ## Contributing + Opening issues and code contributions are welcomed. See [contributing guide](https://github.com/leon-good-life/coverflow-react/blob/master/CONTRIBUTING.md). ## Credits for images in the demo + Uncopyrited images from Pixabay and Pexels. From f1836e7f88b458bafe22f0ecf9cd132a1ebfa821 Mon Sep 17 00:00:00 2001 From: Clyde Ancheta Date: Tue, 20 Jun 2023 11:18:55 +0800 Subject: [PATCH 5/5] converted to functional component --- src/CoverFlow/Container/Container.js | 326 +++++++++++----------- src/CoverFlow/Container/EmptyContainer.js | 27 -- src/CoverFlow/Container/Item/Item.js | 305 ++++++++++---------- src/CoverFlow/CoverFlow.js | 158 +++++------ 4 files changed, 374 insertions(+), 442 deletions(-) delete mode 100644 src/CoverFlow/Container/EmptyContainer.js diff --git a/src/CoverFlow/Container/Container.js b/src/CoverFlow/Container/Container.js index 10acd5d..24414cb 100644 --- a/src/CoverFlow/Container/Container.js +++ b/src/CoverFlow/Container/Container.js @@ -1,133 +1,118 @@ -import React from 'react'; +import React, { + useEffect, + useRef, +} from 'react'; import ArrowKeysReact from 'arrow-keys-react'; -import PropTypes from 'prop-types'; import SwipeReact from 'swipe-react'; import WheelReact from 'wheel-react'; import Item from './Item/Item'; import SIDES from './SIDES'; -class Container extends React.Component { - constructor(props) { - super(props); - this.selectItem = this.selectItem.bind(this); - this.prepareItems = this.prepareItems.bind(this); - this.calcIndex = this.calcIndex.bind(this); - this.calcItemDimensions = this.calcItemDimensions.bind(this); - this.calcItemsAmountToRender = this.calcItemsAmountToRender.bind(this); - // let index = this.calcIndex(); - let index = - this.props.defaultSelectedItem || this.props.defaultSelectedItem == 0 - ? this.props.defaultSelectedItem - : this.calcIndex(); - this.state = { +export const Container = (props) => { + const { + handleSelect, + imagesArr, + labelsArr, + itemRatio, + width, + height, + direction, + defaultSelectedItem, + containerStyles, + zIndex, + } = props; + + const calcIndex = () => { + const length = imagesArr.length; + if (length === 0) { + return -1; + } + if (length > 10) { + return 5; + } + return parseInt(imagesArr.length / 2, 10); + }; + + let index = + defaultSelectedItem || defaultSelectedItem == 0 + ? defaultSelectedItem + : calcIndex(); + + const [cState, setCState] = useState({ + selectedIndex: index, + prevIndex: index, + pauseWheelEvent: false, + }); + + const selectItem = (index) => { + setCState({ selectedIndex: index, - prevIndex: index, - pauseWheelEvent: false, - }; - let next = () => { - let index = this.state.selectedIndex; - if (index + 1 < this.props.imagesArr.length) { - this.selectItem(index + 1); - } - }; - let previous = () => { - let index = this.state.selectedIndex; - if (index > 0) { - this.selectItem(index - 1); - } - }; - let keysConfig = { - left: previous, - right: next, - up: next, - down: previous, - }; - let touchConfig = { - left: next, - right: previous, - up: next, - down: previous, - }; - SwipeReact.config(touchConfig); - WheelReact.config(touchConfig); - ArrowKeysReact.config(keysConfig); - } - render() { + prevIndex: cState.selectedIndex, + }); + + handleSelect?.(index); + }; + + const calcItemDimensions = () => { + let ratio = {}; + [ratio.x, ratio.y] = itemRatio.split(':').map((x) => parseFloat(x)); let itemWidth, itemHeight; - [itemWidth, itemHeight] = this.calcItemDimensions(); - let items = this.prepareItems(); - return ( -
{ - this.coverflow = coverflow; - }} - > - {items.map((item) => { - return ( - - ); - })} -
- ); - } - componentDidMount() { - this.coverflow.focus(); - } - componentWillUnmount() { - WheelReact.clearTimeout(); - } - selectItem(index) { - this.setState((prevState) => ({ - selectedIndex: index, - prevIndex: prevState.selectedIndex, - })); - if (this.props.handleSelect) { - this.props.handleSelect(index); + if (direction === 'vertical') { + itemWidth = width - 70; + itemHeight = (itemWidth * ratio.y) / ratio.x; + } else { + itemHeight = height - 60; + itemWidth = (itemHeight * ratio.x) / ratio.y; + } + return [itemWidth, itemHeight]; + }; + + const calcItemsAmountToRender = () => { + let amount; + if (direction === 'vertical') { + const containerHeight = height; + let itemHeight; + [, itemHeight] = calcItemDimensions(); + amount = Math.floor(containerHeight / itemHeight) * 2 - 4; + } else { + const containerWidth = width; + let itemWidth; + [itemWidth] = calcItemDimensions(); + amount = Math.floor(containerWidth / itemWidth) * 2 - 3; } - } - prepareItems() { - if (this.props.imagesArr.length === 0) { + if (amount < 3) { + amount = 3; + } else if (amount > 11) { + amount = 11; + } + return Math.min(amount, imagesArr.length); + }; + + const prepareItems = () => { + if (imagesArr.length === 0) { return []; } - const AMOUNT_TO_RENDER = this.calcItemsAmountToRender(); + const AMOUNT_TO_RENDER = calcItemsAmountToRender(); const SIDE_AMOUNT = Math.floor(AMOUNT_TO_RENDER / 2); - const index = this.state.selectedIndex; - const imagesArr = JSON.parse(JSON.stringify(this.props.imagesArr)); - const items = imagesArr.map((imgUrl, index) => ({ + const index = cState.selectedIndex; + const images = JSON.parse(JSON.stringify(imagesArr)); + const items = images.map((imgUrl, index) => ({ imgUrl, index, label: null, })); - for (let i = 0; i < this.props.labelsArr.length; i++) { - items[i].label = this.props.labelsArr[i]; + for (let i = 0; i < labelsArr.length; i++) { + items[i].label = labelsArr[i]; } items[index].side = SIDES.CENTER; items[index].distance = 0; let fromIndex = Math.max(0, index - SIDE_AMOUNT); - let untilIndex = Math.min(imagesArr.length, index + SIDE_AMOUNT + 1); + let untilIndex = Math.min(images.length, index + SIDE_AMOUNT + 1); for (let i = fromIndex; i < index; i++) { items[i].side = SIDES.LEFT; @@ -144,7 +129,7 @@ class Container extends React.Component { } // calc removed items, in order to animate them. - let amount = index - this.state.prevIndex; + let amount = index - cState.prevIndex; if (amount > 0 && fromIndex > SIDE_AMOUNT) { for (let i = fromIndex - amount; i < fromIndex; i++) { items[i].side = SIDES.REMOVED_LEFT; @@ -166,64 +151,77 @@ class Container extends React.Component { } return items.slice(fromIndex, untilIndex); - } - calcIndex() { - const length = this.props.imagesArr.length; - if (length === 0) { - return -1; - } - if (length > 10) { - return 5; - } - return parseInt(this.props.imagesArr.length / 2, 10); - } - calcItemDimensions() { - let ratio = {}; - [ratio.x, ratio.y] = this.props.itemRatio - .split(':') - .map((x) => parseFloat(x)); - let itemWidth, itemHeight; - if (this.props.direction === 'vertical') { - itemWidth = this.props.width - 70; - itemHeight = (itemWidth * ratio.y) / ratio.x; - } else { - itemHeight = this.props.height - 60; - itemWidth = (itemHeight * ratio.x) / ratio.y; - } - return [itemWidth, itemHeight]; - } - calcItemsAmountToRender() { - let amount; - if (this.props.direction === 'vertical') { - const containerHeight = this.props.height; - let itemHeight; - [, itemHeight] = this.calcItemDimensions(); - amount = Math.floor(containerHeight / itemHeight) * 2 - 4; - } else { - const containerWidth = this.props.width; - let itemWidth; - [itemWidth] = this.calcItemDimensions(); - amount = Math.floor(containerWidth / itemWidth) * 2 - 3; + }; + + const next = () => { + let index = cState.selectedIndex; + if (index + 1 < imagesArr.length) { + selectItem(index + 1); } - if (amount < 3) { - amount = 3; - } else if (amount > 11) { - amount = 11; + }; + + const previous = () => { + let index = cState.selectedIndex; + if (index > 0) { + selectItem(index - 1); } - return Math.min(amount, this.props.imagesArr.length); - } -} - -Container.propTypes = { - imagesArr: PropTypes.array.isRequired, - zIndex: PropTypes.number, - height: PropTypes.number, - background: PropTypes.string, - border: PropTypes.string, - boxShadow: PropTypes.string, - itemRatio: PropTypes.string, - handleSelect: PropTypes.func, - defaultSelectedItem: PropTypes.number, -}; + }; + + const keysConfig = { + left: previous, + right: next, + up: next, + down: previous, + }; + const touchConfig = { + left: next, + right: previous, + up: next, + down: previous, + }; + SwipeReact.config(touchConfig); + WheelReact.config(touchConfig); + ArrowKeysReact.config(keysConfig); -export default Container; + const coverflow = useRef < HTMLDivElement > null; + + useEffect(() => { + coverflow?.current?.focus(); + return () => { + WheelReact.clearTimeout(); + }; + }, []); + + let itemWidth, itemHeight; + [itemWidth, itemHeight] = calcItemDimensions(); + let items = prepareItems(); + return ( +
+ {items.map((item) => { + return ( + + ); + })} +
+ ); +}; diff --git a/src/CoverFlow/Container/EmptyContainer.js b/src/CoverFlow/Container/EmptyContainer.js deleted file mode 100644 index b4ffe3b..0000000 --- a/src/CoverFlow/Container/EmptyContainer.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -class EmptyContainer extends React.Component { - render(){ - return ( -
-
{this.props.emptyMessage}
-
- ) - } -} - -EmptyContainer.propTypes = { - emptyMessage: PropTypes.string, - height: PropTypes.number, - background: PropTypes.string, - border: PropTypes.string, - boxShadow: PropTypes.string -}; - -export default EmptyContainer; \ No newline at end of file diff --git a/src/CoverFlow/Container/Item/Item.js b/src/CoverFlow/Container/Item/Item.js index 19d8701..04831da 100644 --- a/src/CoverFlow/Container/Item/Item.js +++ b/src/CoverFlow/Container/Item/Item.js @@ -1,145 +1,31 @@ -import React from 'react'; - -import PropTypes from 'prop-types'; +import React, { useEffect } from 'react'; import SIDES from '../SIDES'; -class Item extends React.Component { - constructor(props) { - super(props); - this.cssTransform = this.cssTransform.bind(this); - this.cssTransformVertical = this.cssTransformVertical.bind(this); - this.state = { tempTransform: '' }; - } - render() { - let styles = { - left: `calc(50% - ${this.props.width}px / 2)`, - top: `calc(50% - ${this.props.height}px / 2)`, - width: `${this.props.width}px`, - height: `${this.props.height}px`, - backgroundSize: `${this.props.width}px ${this.props.height}px`, - display: 'inline-block', - position: 'absolute', - backgroundColor: 'rgba(0,0,0,0)', - transitionTimingFunction: 'ease-in-out', - transition: 'transform 750ms', - }; - if (this.props.side !== SIDES.CENTER) { - if (this.state.tempTransform !== '') { - styles.transform = this.state.tempTransform; - } else { - if (this.props.direction === 'vertical') { - styles.transform = this.cssTransformVertical( - this.props.side, - this.props.distance - ); - } else { - styles.transform = this.cssTransform( - this.props.side, - this.props.distance - ); - } - } - } - if (this.props.side === SIDES.CENTER) { - styles.zIndex = this.props.zIndex; - } else if (this.props.side === SIDES.RIGHT) { - styles.zIndex = this.props.zIndex - this.props.distance; - } else if (this.props.side === SIDES.REMOVED_RIGHT) { - styles.zIndex = this.props.zIndex - this.props.distance - 1; - } - let labelJsx = ''; - if (this.props.label !== null) { - labelJsx = ( -
- {this.props.label} -
- ); - } - return ( -
{ - this.props.selectItem(this.props.index); - }} - > - - {labelJsx} -
- ); - } - componentWillMount() { - let tempTransform; - if (this.props.direction === 'vertical') { - if (this.props.side === SIDES.LEFT || this.props.side === SIDES.RIGHT) { - tempTransform = this.cssTransformVertical( - this.props.side, - this.props.max - ); - } else { - tempTransform = ''; - } - } else { - if (this.props.side === SIDES.LEFT || this.props.side === SIDES.RIGHT) { - tempTransform = this.cssTransform(this.props.side, this.props.max); - } else { - tempTransform = ''; - } - } - this.setState({ tempTransform }); - } - componentDidMount() { - this.timeout = setTimeout(() => { - this.setState({ tempTransform: '' }); - }, 100); - } - componentWillUnmount() { - if (this.timeout) { - clearTimeout(this.timeout); - } - let tempTransform; - if (this.props.direction === 'vertical') { - if (this.props.side === SIDES.LEFT || this.props.side === SIDES.RIGHT) { - tempTransform = this.cssTransformVertical( - this.props.side, - this.props.max - ); - } else { - tempTransform = ''; - } - } else { - if (this.props.side === SIDES.LEFT || this.props.side === SIDES.RIGHT) { - tempTransform = this.cssTransform(this.props.side, this.props.max); - } else { - tempTransform = ''; - } - } - this.setState({ tempTransform }); - } - cssTransform(side, distance) { +export const Item = (props) => { + const { + width, + height, + side, + direction, + distance, + zIndex = 100, + label, + index, + imgUrl, + max, + selectItem, + } = props; + + const [cState, setCState] = useState({ + tempTransform: null, + }); + + const cssTransform = (side, distance) => { const template = (deg, x, z) => `rotateY(${deg}deg) translate3d(${x}px, 0px, ${z}px)`; - const a = Math.floor(this.props.width / 3); + const a = Math.floor(width / 3); const z = (-1 * a * distance - a) * 1.08; const left = { @@ -159,18 +45,19 @@ class Item extends React.Component { } else if (side === SIDES.RIGHT) { return template(right.deg, right.x, right.z); } else if (side === SIDES.REMOVED_LEFT) { - return this.cssTransform(SIDES.LEFT, this.props.max); + return cssTransform(SIDES.LEFT, max); } else if (side === SIDES.REMOVED_RIGHT) { - return this.cssTransform(SIDES.RIGHT, this.props.max); + return cssTransform(SIDES.RIGHT, max); } else { throw 'Error: side is undefined or invalid.'; } - } - cssTransformVertical(side, distance) { + }; + + const cssTransformVertical = (side, distance) => { const template = (deg, y, z) => `rotateX(${deg}deg) translate3d(0px, ${y}px, ${z}px)`; - const a = Math.floor(this.props.height / 3); + const a = Math.floor(height / 3); const z = (-1 * a * distance - a) * 1.08; const up = { @@ -190,30 +77,124 @@ class Item extends React.Component { } else if (side === SIDES.RIGHT) { return template(down.deg, down.y, down.z); } else if (side === SIDES.REMOVED_LEFT) { - return this.cssTransformVertical(SIDES.LEFT, this.props.max); + return cssTransformVertical(SIDES.LEFT, max); } else if (side === SIDES.REMOVED_RIGHT) { - return this.cssTransformVertical(SIDES.RIGHT, this.props.max); + return cssTransformVertical(SIDES.RIGHT, max); } else { throw 'Error: side is undefined or invalid.'; } - } -} - -Item.propTypes = { - side: PropTypes.oneOf([ - SIDES.LEFT, - SIDES.CENTER, - SIDES.RIGHT, - SIDES.REMOVED_RIGHT, - SIDES.REMOVED_LEFT, - ]).isRequired, - zIndex: PropTypes.number, - height: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, -}; + }; -Item.defaultProps = { - zIndex: 100, -}; + const timeout = setTimeout(() => { + setCState({ tempTransform: '' }); + }, 100); + + useEffect(() => { + let tempTransform; + if (direction === 'vertical') { + if (side === SIDES.LEFT || side === SIDES.RIGHT) { + tempTransform = cssTransformVertical(side, max); + } else { + tempTransform = ''; + } + } else { + if (side === SIDES.LEFT || side === SIDES.RIGHT) { + tempTransform = cssTransform(side, max); + } else { + tempTransform = ''; + } + } + setCState({ tempTransform }); + + return () => { + clearTimeout(timeout); -export default Item; + let tempTransform; + if (direction === 'vertical') { + if (side === SIDES.LEFT || side === SIDES.RIGHT) { + tempTransform = cssTransformVertical(side, max); + } else { + tempTransform = ''; + } + } else { + if (side === SIDES.LEFT || side === SIDES.RIGHT) { + tempTransform = cssTransform(side, max); + } else { + tempTransform = ''; + } + } + setCState({ tempTransform }); + }; + }, []); + + let styles = { + left: `calc(50% - ${width}px / 2)`, + top: `calc(50% - ${height}px / 2)`, + width: `${width}px`, + height: `${height}px`, + backgroundSize: `${width}px ${height}px`, + display: 'inline-block', + position: 'absolute', + backgroundColor: 'rgba(0,0,0,0)', + transitionTimingFunction: 'ease-in-out', + transition: 'transform 750ms', + transform: null, + zIndex: 100, + }; + if (side !== SIDES.CENTER) { + if (cState.tempTransform !== '') { + styles.transform = cState.tempTransform; + } else { + if (direction === 'vertical') { + styles.transform = cssTransformVertical(side, distance); + } else { + styles.transform = cssTransform(side, distance); + } + } + } + if (side === SIDES.CENTER) { + styles.zIndex = zIndex; + } else if (side === SIDES.RIGHT) { + styles.zIndex = zIndex - distance; + } else if (side === SIDES.REMOVED_RIGHT) { + styles.zIndex = zIndex - distance - 1; + } + let labelJsx = ''; + if (label !== null) { + labelJsx = ( +
+ {label} +
+ ); + } + return ( +
{ + selectItem(index); + }} + > + + {labelJsx} +
+ ); +}; diff --git a/src/CoverFlow/CoverFlow.js b/src/CoverFlow/CoverFlow.js index 55d6c2a..c32ab75 100644 --- a/src/CoverFlow/CoverFlow.js +++ b/src/CoverFlow/CoverFlow.js @@ -1,98 +1,78 @@ import React from 'react'; -import PropTypes from 'prop-types'; - import Container from './Container/Container'; -import EmptyContainer from './Container/EmptyContainer'; - -class CoverFlow extends React.Component { - render() { - let width, height; - if (this.props.direction === 'vertical') { - width = isNaN(this.props.width) ? 250 : this.props.width; - height = isNaN(this.props.height) - ? document.body.offsetHeight - : this.props.height; - } else { - height = isNaN(this.props.height) ? 250 : this.props.height; - width = isNaN(this.props.width) - ? document.body.offsetWidth - : this.props.width; - } - let styles = { - textAlign: 'center', - perspective: '400px', - margin: '0px', - position: 'relative', - height: `${height}px`, - width: `${width}px`, - display: 'inline-block', - boxSizing: 'border-box', - padding: '25px', - outline: 'transparent', - background: this.props.background, - border: this.props.border, - boxShadow: this.props.boxShadow, - }; +export const CoverFlow = (props) => { + const { + zIndex = 100, + direction = 'horizontal', + background = '#333333', + border = 'none', + boxShadow = 'none', + emptyMessage = 'No items to show.', + itemRatio = '8:5', + labelsArr = [], + containerStyles, + imagesArr, + handleSelect, + width, + height, + defaultSelectedItem, + } = props; - if (this.props.imagesArr.length === 0) { - return ( - - ); - } - return ( - - ); + let cWidth, cHeight; + if (direction === 'vertical') { + cWidth = isNaN(width) ? 250 : width; + cHeight = isNaN(height) ? document.body.offsetHeight : height; + } else { + cHeight = isNaN(height) ? 250 : height; + cWidth = isNaN(width) ? document.body.offsetWidth : width; } -} -CoverFlow.propTypes = { - imagesArr: PropTypes.array.isRequired, - zIndex: PropTypes.number, - height: PropTypes.number, - width: PropTypes.number, - background: PropTypes.string, - border: PropTypes.string, - boxShadow: PropTypes.string, - emptyMessage: PropTypes.string, - itemRatio: PropTypes.string, - handleSelect: PropTypes.func, - labelsArr: PropTypes.array, - defaultSelectedItem: PropTypes.number, -}; + let styles = { + textAlign: 'center', + perspective: '400px', + margin: '0px', + position: 'relative', + height: `${cHeight}px`, + width: `${cWidth}px`, + display: 'inline-block', + boxSizing: 'border-box', + padding: '25px', + outline: 'transparent', + background: background, + border: border, + boxShadow: boxShadow, + }; -CoverFlow.defaultProps = { - zIndex: 100, - direction: 'horizontal', - background: '#333333', - border: 'none', - boxShadow: 'none', - emptyMessage: 'No items to show.', - itemRatio: '8:5', - labelsArr: [], + return imagesArr.length === 0 ? ( +
+
+ {emptyMessage} +
+
+ ) : ( + + ); }; - -export default CoverFlow;