add drag and drop support for files

btzr-io · Dec 5, 2019 · c184f3a · c184f3a
1 parent bd815a0
commit c184f3a
Show file tree

Hide file tree

Showing 9 changed files with 108 additions and 36 deletions.
diff --git a/packages/villain-web/dist/bundle.js b/packages/villain-web/dist/bundle.js
diff --git a/packages/villain-web/dist/index.html b/packages/villain-web/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Villain</title><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1"><meta name="keywords" content="villlain, reader, comic, comic book, web"><meta content="website" property="og:type"><meta name="title" content="Villain" property="og:title"><meta name="description" content="The open source web-based comic book reader that you need, but don't deserve." property="og:description"><link href="styles.css?00f998df89b0f43fe5c1" rel="stylesheet"></head><body><script type="text/javascript" src="styles.fff4b689c34a6a6fda07.js?00f998df89b0f43fe5c1"></script><script type="text/javascript" src="bundle.js?00f998df89b0f43fe5c1"></script></body></html>
+<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Villain</title><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1"><meta name="keywords" content="villlain, reader, comic, comic book, web"><meta content="website" property="og:type"><meta name="title" content="Villain" property="og:title"><meta name="description" content="The open source web-based comic book reader that you need, but don't deserve." property="og:description"><link href="styles.css?e0e73391d4234d95151b" rel="stylesheet"></head><body><script type="text/javascript" src="styles.8b727cd2d3e2f825bd71.js?e0e73391d4234d95151b"></script><script type="text/javascript" src="bundle.js?e0e73391d4234d95151b"></script></body></html>
diff --git a/packages/villain-web/dist/styles.8b727cd2d3e2f825bd71.js b/packages/villain-web/dist/styles.8b727cd2d3e2f825bd71.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{19:function(n,o,w){},22:function(n,o,w){}}]);
diff --git a/packages/villain-web/dist/styles.css b/packages/villain-web/dist/styles.css
diff --git a/packages/villain-web/package.json b/packages/villain-web/package.json
@@ -32,6 +32,7 @@
     "clsx": "^1.0.4",
     "prop-types": "^15.7.2",
     "query-string": "^6.9.0",
+    "react-dropzone": "^10.2.1",
     "react-localization": "^1.0.15",
     "react-spring": "^8.0.27",
     "villain-react": "^1.0.8"

diff --git a/packages/villain-web/src/components/app.js b/packages/villain-web/src/components/app.js
@@ -5,10 +5,10 @@ import Landing from '@/components/landing'
 function App({ context, children }) {
   const [file, setFile] = React.useState(null)
   const [source, setSource] = React.useState(context.query.src)
-  console.info(context)
-  const handleFileChange = e => {
-    setFile(e.target.files[0])
-  }
+
+  const handleFileChange = React.useCallback(files => {
+    setFile(files[0])
+  })
 
   // Update source
   React.useEffect(() => {

diff --git a/packages/villain-web/src/components/landing.js b/packages/villain-web/src/components/landing.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import Icon from '@mdi/react'
-import { mdiHeart } from '@mdi/js'
+import { mdiHeart, mdiArrowDownBoldBoxOutline } from '@mdi/js'
+import { useDropzone } from 'react-dropzone'
 
 function GithubCorner() {
   return (
@@ -26,50 +27,91 @@ function GithubCorner() {
   )
 }
 
+function Footer() {
+  return (
+    <footer>
+      Made with{' '}
+      <Icon
+        className="footer__icon"
+        aria-label="love"
+        path={mdiHeart}
+        size={0.72}
+        color="#ff6b6b"
+      />{' '}
+      for the web, no trackers, no ads!
+    </footer>
+  )
+}
+
 function FileButton({ onChange }) {
+  const handleChange = React.useCallback(
+    e => {
+      const { files } = e.target
+      onChange(files)
+    },
+    [onChange]
+  )
+
   return (
     <label className={'button file-input'}>
       <input
         type="file"
         name="input-name"
         style={{ display: 'none' }}
-        onChange={onChange}
+        onChange={handleChange}
       />
       <span id="input-file-replacer">Select file</span>
     </label>
   )
 }
 
+function DropZone() {
+  return (
+    <div className={'landing__content'}>
+      <Icon
+        className="footer__icon"
+        aria-label="love"
+        path={mdiArrowDownBoldBoxOutline}
+        size={4}
+        color="currentColor"
+      />{' '}
+      <div className={'landing__message'}>Drop it here!</div>
+    </div>
+  )
+}
+
 function Landing({ handleFileChange }) {
-  // NOTE: If you need to add or modify header, footer etc. of the app,
-  // please do that inside the Layout component.
+  const onDrop = React.useCallback(
+    acceptedFiles => {
+      handleFileChange(acceptedFiles)
+    },
+    [handleFileChange]
+  )
+
+  const { getRootProps, isDragActive } = useDropzone({ onDrop })
+
   return (
     <React.Fragment>
-      <div className={'landing'}>
-        <GithubCorner />
-        <img
-          className={'logo'}
-          src="https://raw.githubusercontent.com/btzr-io/Villain/master/artworks/logo.svg?sanitize=true"
-        />
-        <div className="landing__message">
-          <b>Open</b> a comic book or <b>drop</b> it here.
-        </div>
-        <div className="landing__message">
-          <FileButton onChange={handleFileChange} />
-        </div>
+      <GithubCorner />
+      <div {...getRootProps({ className: 'landing' })}>
+        {!isDragActive ? (
+          <div className={'landing__content'}>
+            <img
+              className={'logo'}
+              src="https://raw.githubusercontent.com/btzr-io/Villain/master/artworks/logo.svg?sanitize=true"
+            />
+            <div className="landing__message">
+              <b>Open</b> a comic book or <b>drop</b> it here.
+            </div>
+            <div className="landing__message">
+              <FileButton onChange={handleFileChange} />
+            </div>
+          </div>
+        ) : (
+          <DropZone />
+        )}
       </div>
-      <footer>
-        {' '}
-        Made with{' '}
-        <Icon
-          className="footer__icon"
-          aria-label="love"
-          path={mdiHeart}
-          size={0.72}
-          color="#ff6b6b"
-        />{' '}
-        for the web, no trackers, no ads!{' '}
-      </footer>
+      <Footer />
     </React.Fragment>
   )
 }

diff --git a/packages/villain-web/src/css/index.css b/packages/villain-web/src/css/index.css
@@ -41,12 +41,17 @@ footer {
   bottom: 40px;
   text-align: center;
   position: absolute;
+}
+
+.landing,
+.landing__content {
   display: flex;
   flex-direction: column;
+  align-self: center;
   align-items: center;
   align-content: center;
   justify-content: center;
-  min-height: 320px;
+  width: 100%;
 }
 
 .landing__message {
@@ -84,6 +89,7 @@ footer {
   width: 80px;
   height: 80px;
   display: block;
+  z-index: 1;
 }
 
 .github-corner svg {
@@ -141,6 +147,7 @@ footer {
 
   .landing__message {
     font-size: 1rem;
+    margin: 0.72rem;
   }
 
   .button {

diff --git a/yarn.lock b/yarn.lock
@@ -1558,6 +1558,11 @@ atob@^2.1.1:
   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.0.0"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.0.0.tgz#8422fef5ee4a511c207796c888227ab5de03306f"
+  integrity sha512-I9SDP4Wvh2ItYYoafEg8hFpsBe96pfQ+eabceShXt3sw2fbIP96+Aoj9zZE0vkZNAkXXzHJATVRuWz+h9FxJxQ==
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -3633,6 +3638,13 @@ file-entry-cache@^5.0.1:
   dependencies:
     flat-cache "^2.0.1"
 
+file-selector@^0.1.12:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.1.12.tgz#fe726547be219a787a9dcc640575a04a032b1fd0"
+  integrity sha512-Kx7RTzxyQipHuiqyZGf+Nz4vY9R1XGxuQl/hLoJwq+J4avk/9wxxgZyHKtbyIPJmbD4A66DWGYfyykWNpcYutQ==
+  dependencies:
+    tslib "^1.9.0"
+
 fill-range@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
@@ -7590,6 +7602,15 @@ react-dom@^16.8.6:
     prop-types "^15.6.2"
     scheduler "^0.18.0"
 
+react-dropzone@^10.2.1:
+  version "10.2.1"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-10.2.1.tgz#b7520124c4a3b66f96d49f7879027c7a475eaa20"
+  integrity sha512-Me5nOu8hK9/Xyg5easpdfJ6SajwUquqYR/2YTdMotsCUgJ1pHIIwNsv0n+qcIno0tWR2V2rVQtj2r/hXYs2TnQ==
+  dependencies:
+    attr-accept "^2.0.0"
+    file-selector "^0.1.12"
+    prop-types "^15.7.2"
+
 react-is@^16.10.2, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"