mirror of
https://github.com/captbaritone/webamp.git
synced 2026-07-23 18:17:38 +00:00
Use dropzone
This commit is contained in:
Jordan Eldredge
parent
aaffcb13bd
commit
ceb0675bbc
5 changed files with 76 additions and 75 deletions
|
|
@ -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",
|
||||
|
|
|
|||
40
src/App.js
40
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 (
|
||||
<div>
|
||||
<div {...getRootProps()}>
|
||||
<Head />
|
||||
<Header />
|
||||
{areDragging ? (
|
||||
<DropTarget />
|
||||
{areDragging && SHOW_UPLOAD ? (
|
||||
<DropTarget getInputProps={getInputProps} />
|
||||
) : props.uploadViewOpen ? (
|
||||
<UploadGrid />
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -1,10 +1,37 @@
|
|||
import React from "react";
|
||||
import { HEADING_HEIGHT } from "./constants";
|
||||
|
||||
function DropTarget() {
|
||||
function DropTarget({ getInputProps }) {
|
||||
return (
|
||||
<div style={{ color: "white", marginTop: HEADING_HEIGHT }}>
|
||||
<h1>Drop</h1>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
top: HEADING_HEIGHT,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
margin: 20,
|
||||
flexGrow: 1,
|
||||
border: "8px dashed #FFF",
|
||||
borderRadius: 20,
|
||||
color: "grey",
|
||||
textAlign: "center",
|
||||
vericalAlign: "middle",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
flexDirection: "column",
|
||||
fontSize: 30,
|
||||
}}
|
||||
>
|
||||
Drop Skins Here
|
||||
<input {...getInputProps} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
51
src/hooks.js
51
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,
|
||||
]);
|
||||
}
|
||||
|
|
|
|||
26
yarn.lock
26
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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue