remove react-dnd dependencies + use react-dropzone instead (#648)

components/Editor.js

@@ -1,12 +1,10 @@
 // Theirs
 import url from 'url'
 import React from 'react'
-import HTML5Backend from 'react-dnd-html5-backend'
-import { DragDropContext } from 'react-dnd'
 import domtoimage from 'dom-to-image'
-import ReadFileDropContainer, { DATA_URL, TEXT } from 'dropperx'
 import Spinner from 'react-spinner'
 import dynamic from 'next/dynamic'
+import Dropzone from 'react-dropzone'
 
 // Ours
 import Button from './Button'
@@ -245,15 +243,30 @@ class Editor extends React.Component {
   }
 
   onDrop([file]) {
+    if (!file) return
+
+    const reader = new FileReader()
+
+    // TODO abstract this into Dropperx
+    reader.onload = event => {
+      file.content = event.target.result
+
+      if (isImage(file)) {
+        this.updateState({
+          backgroundImage: file.content,
+          backgroundImageSelection: null,
+          backgroundMode: 'image',
+          preset: null
+        })
+      } else {
+        this.updateState({ code: file.content, language: 'auto' })
+      }
+    }
+
     if (isImage(file)) {
-      this.updateState({
-        backgroundImage: file.content,
-        backgroundImageSelection: null,
-        backgroundMode: 'image',
-        preset: null
-      })
+      reader.readAsDataURL(file)
     } else {
-      this.updateState({ code: file.content, language: 'auto' })
+      reader.readAsText(file, 'UTF-8')
     }
   }
 
@@ -325,82 +338,86 @@ class Editor extends React.Component {
 
     return (
       <React.Fragment>
-        <div className="editor">
-          <Toolbar>
-            <Themes key={theme} updateTheme={this.updateTheme} theme={theme} />
-            <Dropdown
-              icon={languageIcon}
-              selected={
-                LANGUAGE_NAME_HASH[language] ||
-                LANGUAGE_MIME_HASH[language] ||
-                LANGUAGE_MODE_HASH[language] ||
-                LANGUAGE_MODE_HASH[DEFAULT_LANGUAGE]
-              }
-              list={LANGUAGES}
-              onChange={this.updateLanguage}
-            />
-            <BackgroundSelect
-              onChange={this.updateBackground}
-              mode={backgroundMode}
-              color={backgroundColor}
-              image={backgroundImage}
-              aspectRatio={aspectRatio}
-            />
-            <Settings
-              {...config}
-              onChange={this.updateSetting}
-              resetDefaultSettings={this.resetDefaultSettings}
-              format={this.format}
-              applyPreset={this.applyPreset}
-              getCarbonImage={this.getCarbonImage}
-            />
-            <div className="buttons">
-              {this.props.api.tweet && online && (
-                <Button
-                  border
-                  large
-                  padding="0 16px"
-                  margin="0 8px 0 0"
-                  onClick={this.upload}
-                  color="#57b5f9"
+        <Dropzone accept="image/*, text/*, application/*" onDrop={this.onDrop}>
+          {({ getRootProps, isDragAccept }) => {
+            const root = getRootProps()
+            return (
+              <div className="editor" {...root}>
+                <Toolbar>
+                  <Themes key={theme} updateTheme={this.updateTheme} theme={theme} />
+                  <Dropdown
+                    icon={languageIcon}
+                    selected={
+                      LANGUAGE_NAME_HASH[language] ||
+                      LANGUAGE_MIME_HASH[language] ||
+                      LANGUAGE_MODE_HASH[language] ||
+                      LANGUAGE_MODE_HASH[DEFAULT_LANGUAGE]
+                    }
+                    list={LANGUAGES}
+                    onChange={this.updateLanguage}
+                  />
+                  <BackgroundSelect
+                    onChange={this.updateBackground}
+                    mode={backgroundMode}
+                    color={backgroundColor}
+                    image={backgroundImage}
+                    aspectRatio={aspectRatio}
+                  />
+                  <Settings
+                    {...config}
+                    onChange={this.updateSetting}
+                    resetDefaultSettings={this.resetDefaultSettings}
+                    format={this.format}
+                    applyPreset={this.applyPreset}
+                    getCarbonImage={this.getCarbonImage}
+                  />
+                  <div className="buttons">
+                    {this.props.api.tweet && online && (
+                      <Button
+                        border
+                        large
+                        padding="0 16px"
+                        margin="0 8px 0 0"
+                        onClick={this.upload}
+                        color="#57b5f9"
+                      >
+                        {uploading ? 'Loading...' : 'Tweet'}
+                      </Button>
+                    )}
+                    <ExportMenu
+                      onChange={this.updateSetting}
+                      export={this.export}
+                      exportSize={exportSize}
+                      disablePNG={this.disablePNG}
+                    />
+                  </div>
+                </Toolbar>
+
+                <Overlay
+                  isOver={isDragAccept}
+                  title={`Drop your file here to import ${isDragAccept ? '✋' : '✊'}`}
                 >
-                  {uploading ? 'Loading...' : 'Tweet'}
-                </Button>
-              )}
-              <ExportMenu
-                onChange={this.updateSetting}
-                export={this.export}
-                exportSize={exportSize}
-                disablePNG={this.disablePNG}
-              />
-            </div>
-          </Toolbar>
-
-          <ReadFileDropContainer readAs={readAs} onDrop={this.onDrop}>
-            {({ isOver, canDrop }) => (
-              <Overlay
-                isOver={isOver || canDrop}
-                title={`Drop your file here to import ${isOver ? '✋' : '✊'}`}
-              >
-                {/*key ensures Carbon's internal language state is updated when it's changed by Dropdown*/}
-                <Carbon
-                  key={language}
-                  config={this.state}
-                  updateCode={this.updateCode}
-                  onAspectRatioChange={this.updateAspectRatio}
-                  titleBar={titleBar}
-                  updateTitleBar={this.updateTitleBar}
-                  innerRef={this.innerRef}
-                >
-                  {code != null ? code : DEFAULT_CODE}
-                </Carbon>
-              </Overlay>
-            )}
-          </ReadFileDropContainer>
-        </div>
+                  {/*key ensures Carbon's internal language state is updated when it's changed by Dropdown*/}
+                  <Carbon
+                    key={language}
+                    config={this.state}
+                    updateCode={this.updateCode}
+                    onAspectRatioChange={this.updateAspectRatio}
+                    titleBar={titleBar}
+                    updateTitleBar={this.updateTitleBar}
+                    innerRef={this.innerRef}
+                  >
+                    {code != null ? code : DEFAULT_CODE}
+                  </Carbon>
+                </Overlay>
+              </div>
+            )
+          }}
+        </Dropzone>
         <style jsx>
           {`
             .editor {
+              outline: none;
               background: ${COLORS.BLACK};
               border: 3px solid ${COLORS.SECONDARY};
               border-radius: 8px;
@@ -429,17 +446,10 @@ function isImage(file) {
   return file.type.split('/')[0] === 'image'
 }
 
-function readAs(file) {
-  if (isImage(file)) {
-    return DATA_URL
-  }
-  return TEXT
-}
-
 Editor.defaultProps = {
   api: {},
   onUpdate: () => {},
   onReset: () => {}
 }
 
-export default DragDropContext(HTML5Backend)(Editor)
+export default Editor

package.json

@@ -26,7 +26,6 @@
     "cross-env": "^5.2.0",
     "dom-to-image": "^2.5.2",
     "downshift": "^3.1.12",
-    "dropperx": "0.2.1",
     "escape-goat": "^1.3.0",
     "graphql": "^14.1.1",
     "highlight.js": "^9.13.1",
@@ -43,9 +42,8 @@
     "react-codemirror2": "^5.1.0",
     "react-color": "^2.17.0",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dnd": "^5.0.0",
-    "react-dnd-html5-backend": "^5.0.0",
     "react-dom": "^16.7.0",
+    "react-dropzone": "^8.0.3",
     "react-image-crop": "6.0.0",
     "react-spinner": "^0.2.7",
     "react-syntax-highlight": "^15.3.1",
@@ -81,7 +79,6 @@
         ],
         "ignore": [
           "graphql",
-          "react-dnd-html5-backend",
           "react-dom",
           "webpack"
         ]