From 1a66d99ecb7fa6dc5c29502a71e5fd9e828cf642 Mon Sep 17 00:00:00 2001 From: Kazuki Imamura Date: Thu, 29 Jul 2021 21:23:19 +0900 Subject: [PATCH 1/6] install react-avatar-editor & react-dropzone, uninstall react-avatar-edit --- package-lock.json | 137 ++++++++++++++++++++++++++++++---------------- package.json | 3 +- yarn.lock | 59 ++++++++++++-------- 3 files changed, 126 insertions(+), 73 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9ec33ed..1bb376d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "aray", "version": "0.1.0", "dependencies": { "@aws-amplify/ui-components": "^1.3.0", @@ -32,11 +33,12 @@ "prop-types": "^15.7.2", "query-string": "^4.3.4", "react": "^17.0.2", - "react-avatar-edit": "^1.0.0", + "react-avatar-editor": "^12.0.0", "react-big-calendar": "^0.33.5", "react-calendar-heatmap": "^1.8.1", "react-document-title": "^2.0.3", "react-dom": "^17.0.2", + "react-dropzone": "^11.3.4", "react-i18next": "^11.8.15", "react-image-file-resizer": "^0.4.4", "react-number-format": "^4.5.5", @@ -3608,7 +3610,6 @@ "version": "7.14.2", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.14.2.tgz", "integrity": "sha512-LyA2AiPkaYzI7G5e2YI4NCasTfFe7mZvlupNprDOB7CdNUHb2DQC4uV6oeZ0396gOcicUzUCh0MShL6wiUgk+Q==", - "peer": true, "dependencies": { "@babel/helper-module-imports": "^7.13.12", "@babel/helper-plugin-utils": "^7.13.0", @@ -7748,6 +7749,14 @@ "node": ">= 4.5.0" } }, + "node_modules/attr-accept": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz", + "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==", + "engines": { + "node": ">=4" + } + }, "node_modules/autoprefixer": { "version": "9.7.4", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.4.tgz", @@ -9504,11 +9513,6 @@ "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==", "license": "MIT" }, - "node_modules/blueimp-load-image": { - "version": "5.14.0", - "resolved": "https://registry.npmjs.org/blueimp-load-image/-/blueimp-load-image-5.14.0.tgz", - "integrity": "sha512-g5l+4dCOESBG8HkPLdGnBx8dhEwpQHaOZ0en623sl54o3bGhGMLYGc54L5cWfGmPvfKUjbsY7LOAmcW/xlkBSA==" - }, "node_modules/bn.js": { "version": "4.11.8", "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz", @@ -14579,11 +14583,6 @@ "node": ">=0.10.0" } }, - "node_modules/exif-js": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/exif-js/-/exif-js-2.3.0.tgz", - "integrity": "sha1-nRCBm/Vx+HOBPnZAJBJVq5zhqBQ=" - }, "node_modules/exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -15008,6 +15007,22 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/file-selector": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.2.4.tgz", + "integrity": "sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==", + "dependencies": { + "tslib": "^2.0.3" + }, + "engines": { + "node": ">= 10" + } + }, + "node_modules/file-selector/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + }, "node_modules/file-uri-to-path": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", @@ -19762,11 +19777,6 @@ "node": ">= 8" } }, - "node_modules/konva": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/konva/-/konva-2.6.0.tgz", - "integrity": "sha512-LCOoavICTD9PYoAqtWo8sbxYtCiXdgEeY7vj/Sq8b2bwFmrQr9Ak0RkD4/jxAf5fcUQRL5e1zPLyfRpVndp20A==" - }, "node_modules/language-subtag-registry": { "version": "0.3.21", "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz", @@ -24488,17 +24498,18 @@ "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==", "license": "MIT" }, - "node_modules/react-avatar-edit": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/react-avatar-edit/-/react-avatar-edit-1.0.0.tgz", - "integrity": "sha512-4ouAnDQe7WEeRD/mAxgdZR8dqpazWKOQXdIRwojnNvWGkqdrNRf/5oQN2LXZWHVUQjuI0C8GeES0bp760Zkgsw==", + "node_modules/react-avatar-editor": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/react-avatar-editor/-/react-avatar-editor-12.0.0.tgz", + "integrity": "sha512-l7NrN8CXlUXbMhnbkuduAtR3+AlDz+DzYWlYBNr7q+rNeJMZlv26ap3Dk/D1WK/MPlnoS33iITlhLkuDsYQpug==", "dependencies": { - "blueimp-load-image": "^5.14.0", - "exif-js": "^2.3.0", - "konva": "^2.5.1" + "@babel/plugin-transform-runtime": "^7.12.1", + "@babel/runtime": "^7.12.5", + "prop-types": "^15.7.2" }, "peerDependencies": { - "react": "16.x" + "react": "^0.14.0 || ^17.0.0", + "react-dom": ">=0.14.0" } }, "node_modules/react-big-calendar": { @@ -24762,6 +24773,22 @@ "react": "17.0.2" } }, + "node_modules/react-dropzone": { + "version": "11.3.4", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.3.4.tgz", + "integrity": "sha512-B1nzNRZ4F1cnrfEC0T6KXeBN1mCPinu4JCoTrp7NjB+442KSPxqfDrw41QIA2kAwlYs1+wj/0BTedeM5hc2+xw==", + "dependencies": { + "attr-accept": "^2.2.1", + "file-selector": "^0.2.2", + "prop-types": "^15.7.2" + }, + "engines": { + "node": ">= 10" + }, + "peerDependencies": { + "react": ">= 16.8" + } + }, "node_modules/react-error-overlay": { "version": "6.0.9", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", @@ -33824,7 +33851,6 @@ "version": "7.14.2", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.14.2.tgz", "integrity": "sha512-LyA2AiPkaYzI7G5e2YI4NCasTfFe7mZvlupNprDOB7CdNUHb2DQC4uV6oeZ0396gOcicUzUCh0MShL6wiUgk+Q==", - "peer": true, "requires": { "@babel/helper-module-imports": "^7.13.12", "@babel/helper-plugin-utils": "^7.13.0", @@ -36915,6 +36941,11 @@ "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==" }, + "attr-accept": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz", + "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==" + }, "autoprefixer": { "version": "9.7.4", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.4.tgz", @@ -38252,11 +38283,6 @@ "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==" }, - "blueimp-load-image": { - "version": "5.14.0", - "resolved": "https://registry.npmjs.org/blueimp-load-image/-/blueimp-load-image-5.14.0.tgz", - "integrity": "sha512-g5l+4dCOESBG8HkPLdGnBx8dhEwpQHaOZ0en623sl54o3bGhGMLYGc54L5cWfGmPvfKUjbsY7LOAmcW/xlkBSA==" - }, "bn.js": { "version": "4.11.8", "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz", @@ -41924,11 +41950,6 @@ } } }, - "exif-js": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/exif-js/-/exif-js-2.3.0.tgz", - "integrity": "sha1-nRCBm/Vx+HOBPnZAJBJVq5zhqBQ=" - }, "exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -42266,6 +42287,21 @@ } } }, + "file-selector": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.2.4.tgz", + "integrity": "sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==", + "requires": { + "tslib": "^2.0.3" + }, + "dependencies": { + "tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + } + } + }, "file-uri-to-path": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", @@ -45837,11 +45873,6 @@ "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz", "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==" }, - "konva": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/konva/-/konva-2.6.0.tgz", - "integrity": "sha512-LCOoavICTD9PYoAqtWo8sbxYtCiXdgEeY7vj/Sq8b2bwFmrQr9Ak0RkD4/jxAf5fcUQRL5e1zPLyfRpVndp20A==" - }, "language-subtag-registry": { "version": "0.3.21", "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz", @@ -49377,14 +49408,14 @@ } } }, - "react-avatar-edit": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/react-avatar-edit/-/react-avatar-edit-1.0.0.tgz", - "integrity": "sha512-4ouAnDQe7WEeRD/mAxgdZR8dqpazWKOQXdIRwojnNvWGkqdrNRf/5oQN2LXZWHVUQjuI0C8GeES0bp760Zkgsw==", + "react-avatar-editor": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/react-avatar-editor/-/react-avatar-editor-12.0.0.tgz", + "integrity": "sha512-l7NrN8CXlUXbMhnbkuduAtR3+AlDz+DzYWlYBNr7q+rNeJMZlv26ap3Dk/D1WK/MPlnoS33iITlhLkuDsYQpug==", "requires": { - "blueimp-load-image": "^5.14.0", - "exif-js": "^2.3.0", - "konva": "^2.5.1" + "@babel/plugin-transform-runtime": "^7.12.1", + "@babel/runtime": "^7.12.5", + "prop-types": "^15.7.2" } }, "react-big-calendar": { @@ -49581,6 +49612,16 @@ "scheduler": "^0.20.2" } }, + "react-dropzone": { + "version": "11.3.4", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.3.4.tgz", + "integrity": "sha512-B1nzNRZ4F1cnrfEC0T6KXeBN1mCPinu4JCoTrp7NjB+442KSPxqfDrw41QIA2kAwlYs1+wj/0BTedeM5hc2+xw==", + "requires": { + "attr-accept": "^2.2.1", + "file-selector": "^0.2.2", + "prop-types": "^15.7.2" + } + }, "react-error-overlay": { "version": "6.0.9", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", diff --git a/package.json b/package.json index c3d561a..89812ca 100644 --- a/package.json +++ b/package.json @@ -37,11 +37,12 @@ "prop-types": "^15.7.2", "query-string": "^4.3.4", "react": "^17.0.2", - "react-avatar-edit": "^1.0.0", + "react-avatar-editor": "^12.0.0", "react-big-calendar": "^0.33.5", "react-calendar-heatmap": "^1.8.1", "react-document-title": "^2.0.3", "react-dom": "^17.0.2", + "react-dropzone": "^11.3.4", "react-i18next": "^11.8.15", "react-image-file-resizer": "^0.4.4", "react-number-format": "^4.5.5", diff --git a/yarn.lock b/yarn.lock index 0efd8e9..fb5a1ed 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2485,7 +2485,7 @@ dependencies: "@babel/helper-plugin-utils" "^7.12.13" -"@babel/plugin-transform-runtime@^7.0.0": +"@babel/plugin-transform-runtime@^7.0.0", "@babel/plugin-transform-runtime@^7.12.1": "integrity" "sha512-LyA2AiPkaYzI7G5e2YI4NCasTfFe7mZvlupNprDOB7CdNUHb2DQC4uV6oeZ0396gOcicUzUCh0MShL6wiUgk+Q==" "resolved" "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.14.2.tgz" "version" "7.14.2" @@ -4853,6 +4853,11 @@ "resolved" "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz" "version" "2.1.2" +"attr-accept@^2.2.1": + "integrity" "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==" + "resolved" "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz" + "version" "2.2.2" + "autoprefixer@^9.6.1": "integrity" "sha512-g0Ya30YrMBAEZk60lp+qfX5YQllG+S5W3GYCFvyHTvhOki0AEQJLPEcIuGRsqVwLi8FvXPVtwTGhfr38hVpm0g==" "resolved" "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.4.tgz" @@ -5238,11 +5243,6 @@ "resolved" "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz" "version" "3.7.2" -"blueimp-load-image@^5.14.0": - "integrity" "sha512-g5l+4dCOESBG8HkPLdGnBx8dhEwpQHaOZ0en623sl54o3bGhGMLYGc54L5cWfGmPvfKUjbsY7LOAmcW/xlkBSA==" - "resolved" "https://registry.npmjs.org/blueimp-load-image/-/blueimp-load-image-5.14.0.tgz" - "version" "5.14.0" - "bn.js@^4.0.0", "bn.js@^4.1.0", "bn.js@^4.1.1", "bn.js@^4.4.0": "integrity" "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==" "resolved" "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz" @@ -7697,11 +7697,6 @@ "signal-exit" "^3.0.2" "strip-final-newline" "^2.0.0" -"exif-js@^2.3.0": - "integrity" "sha1-nRCBm/Vx+HOBPnZAJBJVq5zhqBQ=" - "resolved" "https://registry.npmjs.org/exif-js/-/exif-js-2.3.0.tgz" - "version" "2.3.0" - "exit@^0.1.2": "integrity" "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=" "resolved" "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz" @@ -7929,6 +7924,13 @@ "loader-utils" "^2.0.0" "schema-utils" "^3.0.0" +"file-selector@^0.2.2": + "integrity" "sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==" + "resolved" "https://registry.npmjs.org/file-selector/-/file-selector-0.2.4.tgz" + "version" "0.2.4" + dependencies: + "tslib" "^2.0.3" + "file-uri-to-path@1.0.0": "integrity" "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==" "resolved" "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz" @@ -10254,11 +10256,6 @@ "resolved" "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz" "version" "2.0.4" -"konva@^2.5.1": - "integrity" "sha512-LCOoavICTD9PYoAqtWo8sbxYtCiXdgEeY7vj/Sq8b2bwFmrQr9Ak0RkD4/jxAf5fcUQRL5e1zPLyfRpVndp20A==" - "resolved" "https://registry.npmjs.org/konva/-/konva-2.6.0.tgz" - "version" "2.6.0" - "language-subtag-registry@~0.3.2": "integrity" "sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg==" "resolved" "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz" @@ -13128,14 +13125,14 @@ "regenerator-runtime" "^0.13.7" "whatwg-fetch" "^3.4.1" -"react-avatar-edit@^1.0.0": - "integrity" "sha512-4ouAnDQe7WEeRD/mAxgdZR8dqpazWKOQXdIRwojnNvWGkqdrNRf/5oQN2LXZWHVUQjuI0C8GeES0bp760Zkgsw==" - "resolved" "https://registry.npmjs.org/react-avatar-edit/-/react-avatar-edit-1.0.0.tgz" - "version" "1.0.0" +"react-avatar-editor@^12.0.0": + "integrity" "sha512-l7NrN8CXlUXbMhnbkuduAtR3+AlDz+DzYWlYBNr7q+rNeJMZlv26ap3Dk/D1WK/MPlnoS33iITlhLkuDsYQpug==" + "resolved" "https://registry.npmjs.org/react-avatar-editor/-/react-avatar-editor-12.0.0.tgz" + "version" "12.0.0" dependencies: - "blueimp-load-image" "^5.14.0" - "exif-js" "^2.3.0" - "konva" "^2.5.1" + "@babel/plugin-transform-runtime" "^7.12.1" + "@babel/runtime" "^7.12.5" + "prop-types" "^15.7.2" "react-big-calendar@^0.33.5": "integrity" "sha512-Srr1WvzbthX4suM/fordG3WOLgAl8Qc1cjACIJLSki6dUwxrRjTdGVnfH6VHoE4zMw3y1vydYMdjv9+wH22oLw==" @@ -13217,6 +13214,15 @@ "object-assign" "^4.1.1" "scheduler" "^0.20.2" +"react-dropzone@^11.3.4": + "integrity" "sha512-B1nzNRZ4F1cnrfEC0T6KXeBN1mCPinu4JCoTrp7NjB+442KSPxqfDrw41QIA2kAwlYs1+wj/0BTedeM5hc2+xw==" + "resolved" "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.3.4.tgz" + "version" "11.3.4" + dependencies: + "attr-accept" "^2.2.1" + "file-selector" "^0.2.2" + "prop-types" "^15.7.2" + "react-error-overlay@^6.0.9": "integrity" "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" "resolved" "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz" @@ -13467,7 +13473,7 @@ "loose-envify" "^1.4.0" "prop-types" "^15.6.2" -"react@*", "react@^0.14 || ^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0", "react@^0.14 || ^15.0.1 || ^16.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.6.1 || ^17", "react@^16.8.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@^16.8.6 || 17.0.x", "react@^17.0.2", "react@>= 16", "react@>= 16.7.0", "react@>= 16.8.0", "react@>=0.14.0", "react@>=15", "react@>=15.0.0", "react@>=16", "react@>=16.3.0", "react@>=16.6.0", "react@>=16.8.0", "react@16.x", "react@17.0.2": +"react@*", "react@^0.14 || ^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0", "react@^0.14 || ^15.0.1 || ^16.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^0.14.0 || ^17.0.0", "react@^16.6.1 || ^17", "react@^16.8.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@^16.8.6 || 17.0.x", "react@^17.0.2", "react@>= 16", "react@>= 16.7.0", "react@>= 16.8", "react@>= 16.8.0", "react@>=0.14.0", "react@>=15", "react@>=15.0.0", "react@>=16", "react@>=16.3.0", "react@>=16.6.0", "react@>=16.8.0", "react@17.0.2": "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==" "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz" "version" "17.0.2" @@ -15412,6 +15418,11 @@ "resolved" "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz" "version" "2.2.0" +"tslib@^2.0.3": + "integrity" "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + "resolved" "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz" + "version" "2.3.0" + "tsutils@^3.17.1": "integrity" "sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==" "resolved" "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz" From abd2b43b6063d56e9a0721a1141049474569a4ff Mon Sep 17 00:00:00 2001 From: Kazuki Imamura Date: Thu, 29 Jul 2021 21:25:21 +0900 Subject: [PATCH 2/6] replace ReactAvatarEdit to ReactAvatarEditor --- src/components/AvatarEditor.js | 171 +++++++++++++++++++++++++++------ 1 file changed, 144 insertions(+), 27 deletions(-) diff --git a/src/components/AvatarEditor.js b/src/components/AvatarEditor.js index d1a489f..0428964 100644 --- a/src/components/AvatarEditor.js +++ b/src/components/AvatarEditor.js @@ -1,48 +1,91 @@ -import React, { useState } from 'react'; +import React, { useState, useRef } from 'react'; import PropTypes from 'prop-types'; +import { makeStyles } from '@material-ui/core/styles'; import IconButton from '@material-ui/core/IconButton'; import EditIcon from '@material-ui/icons/Edit'; import Tooltip from '@material-ui/core/Tooltip'; import Box from '@material-ui/core/Box'; import Grid from '@material-ui/core/Grid'; import Button from '@material-ui/core/Button'; +import Slider from '@material-ui/core/Slider'; +import Typography from '@material-ui/core/Typography'; -import ReactAvatarEdit from 'react-avatar-edit'; +import ReactAvatarEditor from 'react-avatar-editor'; +import Dropzone from 'react-dropzone'; import Resizer from 'react-image-file-resizer'; import { useTranslation } from 'react-i18next'; import { Storage } from 'aws-amplify'; import FormDialog from 'forms/components/FormDialog'; +const useStyles = makeStyles((theme) => ({ + button: { + margin: theme.spacing(1), + }, +})); + export default function AvatarEditor({ - // src, + src, exportAsSquare = false, title = 'AvatarEditor Title', type = 'icon', - size = 24, + size = 'medium', cropSize = 300, s3Key, onUpdate, }) { const { t } = useTranslation(); + const classes = useStyles(); const [open, setOpen] = useState(false); - const [preview, setPreview] = useState(); + const [preview, setPreview] = useState(src); const [isLoading, setIsLoading] = useState(false); + const [scale, setScale] = useState(1); + const [rotate, setRotate] = useState(0); + const [position, setPosition] = useState({ x: 0.5, y: 0.5 }); + + const editorRef = useRef(null); + + const onDrop = (dropped) => { + setPreview(dropped[0]); + }; + + const onCancel = () => { + setPreview(src); + setScale(1); + setRotate(0); + setPosition({ x: 0.5, y: 0.5 }); + setOpen(false); + }; + + const handleScale = (event, newValue) => { + const scale = parseFloat(newValue); + setScale(scale); + }; - // const onBeforeFileLoad = (elem) => { - // console.log(elem.target.files[0]); - // }; + const rotateScale = (event, newValue) => { + const scale = parseFloat(newValue); + setRotate(scale); + }; + + const rotateLeft = (e) => { + setRotate(rotate - 90); + }; + + const rotateRight = (e) => { + setRotate(rotate + 90); + }; - const onCrop = (preview) => { - setPreview(preview); + const handlePositionChange = (position) => { + setPosition(position); }; const handleSubmit = async () => { try { setIsLoading(true); - const res = await fetch(preview); + const canvas = await editorRef.current.getImageScaledToCanvas().toDataURL(); + const res = await fetch(canvas); const blob = await res.blob(); const file = await new Promise((resolve) => { Resizer.imageFileResizer( @@ -58,7 +101,6 @@ export default function AvatarEditor({ 'blob', // base64, blob, file ); }); - await Storage.put(s3Key, file); setOpen(false); @@ -93,25 +135,100 @@ export default function AvatarEditor({ openOnInit={true} fullScreen={false} maxWidth={'sm'} - onClose={() => { - setOpen(false); - }} + onClose={onCancel} > - + onDrop(dropped)} + noClick + multiple={false} + style={{ width: '300px', height: '300px' }} + > + {({ getRootProps, getInputProps }) => { + return ( +
+ + + + + New File: + + + + onDrop(e.target.files)} + {...getInputProps()} + style={{ display: 'initial' }} + /> + + +
+ ); + }} + + + + + Zoom: + + + + + + + + + + Rotate: + + + + + + + + + + + Rotation Scale: + + + + + +