diff --git a/package.json b/package.json index 584a73a6..f11272c5 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "md5-file": "^4.0.0", "react": "^16.8.6", "react-dom": "^16.8.6", + "react-dropzone": "^11.1.0", "react-helmet": "^5.2.1", "react-redux": "^7.2.1", "react-scripts": "^3.4.1", diff --git a/src/App.js b/src/App.js index 39978892..685dc9b0 100644 --- a/src/App.js +++ b/src/App.js @@ -16,11 +16,12 @@ import { useDropFiles, useActionCreator, } from "./hooks"; -import { SCREENSHOT_WIDTH, SKIN_RATIO } from "./constants"; +import { SCREENSHOT_WIDTH, SKIN_RATIO, SHOW_UPLOAD } from "./constants"; import UploadGrid from "./UploadGrid"; import DropTarget from "./DropTarget"; import Metadata from "./components/Metadata"; import SkinReadme from "./SkinReadme"; +import { useDropzone } from "react-dropzone"; const getTableDimensions = (windowWidth, scale) => { const columnCount = Math.floor(windowWidth / (SCREENSHOT_WIDTH * scale)); @@ -29,21 +30,6 @@ const getTableDimensions = (windowWidth, scale) => { return { columnWidth, rowHeight, columnCount }; }; -function useDropTarget() { - const gotFiles = useActionCreator(Actions.gotFiles); - const areDragging = useSelector(Selectors.getAreDragging); - - const onDrop = useCallback( - (e) => { - gotFiles(Array.from(e.dataTransfer.files)); - }, - [gotFiles] - ); - const setDragging = useActionCreator(Actions.setDragging); - useDropFiles({ onDrop, setDragging }); - return areDragging; -} - function App(props) { const scrollbarWidth = useScrollbarWidth(); const { @@ -55,17 +41,29 @@ function App(props) { windowWidthWithScrollabar - scrollbarWidth, props.scale ); + const gotFiles = useActionCreator(Actions.gotFiles); + + const onDrop = useCallback( + (acceptedFiles) => { + gotFiles(acceptedFiles); + // Do something with the files + }, + [gotFiles] + ); + const { + getRootProps, + getInputProps, + isDragActive: areDragging, + } = useDropzone({ onDrop }); const fileExplorerOpen = useSelector(Selectors.getFileExplorerOpen); - const areDragging = useDropTarget(); - return ( -
+
- {areDragging ? ( - + {areDragging && SHOW_UPLOAD ? ( + ) : props.uploadViewOpen ? ( ) : ( diff --git a/src/DropTarget.js b/src/DropTarget.js index c4f0982a..34c783ec 100644 --- a/src/DropTarget.js +++ b/src/DropTarget.js @@ -1,10 +1,37 @@ import React from "react"; import { HEADING_HEIGHT } from "./constants"; -function DropTarget() { +function DropTarget({ getInputProps }) { return ( -
-

Drop

+
+
+ Drop Skins Here + +
); } diff --git a/src/hooks.js b/src/hooks.js index cf098a4b..b3eef1fa 100644 --- a/src/hooks.js +++ b/src/hooks.js @@ -100,54 +100,3 @@ export function useWebampAnimation({ initialPosition }) { handleWebampLoaded: () => webampLoadedEvents.next(null), }; } - -export function useDropFiles({ onDrop, setDragging }) { - const onDragEnterCallback = useCallback( - (e) => { - e.preventDefault(); - setDragging(true); - }, - [setDragging] - ); - - const onDragLeaveCallback = useCallback( - (e) => { - e.preventDefault(); - if (e.target === window.document.documentElement) { - setDragging(false); - } - }, - [setDragging] - ); - - const onDropCallback = useCallback( - (e) => { - e.preventDefault(); - setDragging(false); - onDrop(e); - }, - [onDrop, setDragging] - ); - - const onDragoverCallback = useCallback((e) => { - e.preventDefault(); - }, []); - - useEffect(() => { - window.addEventListener("drop", onDropCallback); - window.addEventListener("dragover", onDragoverCallback); - window.addEventListener("dragenter", onDragEnterCallback); - window.addEventListener("dragleave", onDragLeaveCallback); - return () => { - window.removeEventListener("drop", onDropCallback); - window.removeEventListener("dragover", onDragoverCallback); - window.removeEventListener("dragenter", onDragEnterCallback); - window.removeEventListener("dragleave", onDragLeaveCallback); - }; - }, [ - onDropCallback, - onDragoverCallback, - onDragEnterCallback, - onDragLeaveCallback, - ]); -} diff --git a/yarn.lock b/yarn.lock index 78fc2191..8fca766c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2618,6 +2618,11 @@ atob@^2.1.2: resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9" integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg== +attr-accept@^2.0.0: + version "2.2.2" + resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b" + integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg== + autoprefixer@^9.6.1: version "9.7.5" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.5.tgz#8df10b9ff9b5814a8d411a5cfbab9c793c392376" @@ -6015,6 +6020,13 @@ file-loader@4.3.0: loader-utils "^1.2.3" schema-utils "^2.5.0" +file-selector@^0.1.12: + version "0.1.13" + resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.1.13.tgz#5efd977ca2bca1700992df1b10e254f4e73d2df4" + integrity sha512-T2efCBY6Ps+jLIWdNQsmzt/UnAjKOEAlsZVdnQztg/BtAZGNL4uX1Jet9cMM8gify/x4CSudreji2HssGBNVIQ== + dependencies: + tslib "^2.0.1" + file-size@0.0.5: version "0.0.5" resolved "https://registry.yarnpkg.com/file-size/-/file-size-0.0.5.tgz#057d43c3a3ed735da3f90d6052ab380f1e6d5e3b" @@ -11962,6 +11974,15 @@ react-dom@^16.8.6: prop-types "^15.6.2" scheduler "^0.19.1" +react-dropzone@^11.1.0: + version "11.1.0" + resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.1.0.tgz#c225f3c53450c80fbd80954361dc039090bfc14c" + integrity sha512-gJT6iJadyTbevrigm6KZFaei/yNWfokzs1idumO7fXtRNPiGFDUpsQ+trHWwUO3yWOtJibpbo5tLZggjm+KV5w== + dependencies: + attr-accept "^2.0.0" + file-selector "^0.1.12" + prop-types "^15.7.2" + react-error-overlay@^6.0.3, react-error-overlay@^6.0.7: version "6.0.7" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108" @@ -14119,6 +14140,11 @@ tslib@^1, tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35" integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA== +tslib@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.1.tgz#410eb0d113e5b6356490eec749603725b021b43e" + integrity sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ== + tsutils@^3.17.1: version "3.17.1" resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"