docs(website): drag & drop (#198)

website/components/DropArea.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const FullWidth = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+const ChildWrapper = styled(FullWidth)`
+  opacity: ${({ dragging }) => (dragging ? 0.1 : 1)};
+`;
+const Area = styled(FullWidth)`
+  position: relative;
+`;
+
+const DragHelp = styled(FullWidth)`
+  position: absolute;
+  text-align: center;
+  color: white;
+  font-size: 18px;
+  border: 4px dashed white;
+`;
+
+const prevent = e => {
+  e.preventDefault();
+  e.stopPropagation();
+};
+
+export default class DropArea extends React.Component {
+  state = { dragging: false };
+
+  onDrop = e => {
+    this.onEnd();
+    prevent(e);
+    const { files } = e.dataTransfer;
+    const file = files[0];
+    if (!file || file.type !== "image/svg+xml") {
+      return;
+    }
+    const fileReader = new FileReader();
+    fileReader.onload = () => {
+      const text = fileReader.result;
+      this.props.onChange(text);
+    };
+    fileReader.readAsText(file);
+  };
+  onStart = () => {
+    console.log('start');
+    this.setState({ dragging: true });
+  };
+  onEnd = () => {
+    console.log('end');
+    this.setState({ dragging: false });
+  };
+  render() {
+    const { dragging } = this.state;
+    return (
+      <Area
+        onDragEnterCapture={this.onStart}
+        onDragLeaveCapture={this.onEnd}
+        onDragOverCapture={prevent}
+        onDrop={prevent}
+        onDropCapture={this.onDrop}
+      >
+        {dragging && (
+          <DragHelp>
+            <p>📄 Drop .svg file here.</p>
+          </DragHelp>
+        )}
+        <ChildWrapper dragging={dragging}>{this.props.children}</ChildWrapper>
+      </Area>
+    );
+  }
+}

website/pages/index.js

@@ -7,6 +7,7 @@ import svgr from 'modules/svgr'
 import defaultSvg from 'config/fixtures/defaultSvg'
 import Header from 'components/Header'
 import Loading from 'components/Loading'
+import DropArea from 'components/DropArea'
 import { settings, getInitialState, transformSettings } from 'config/settings'
 import * as gtag from '../lib/gtag'
 
@@ -96,21 +97,23 @@ class Index extends React.Component {
           <Box display="flex" flex={1}>
             {this.state.Editor ? (
               <React.Fragment>
-                <Box flex={1}>
-                  <this.state.Editor
-                    width="100%"
-                    height="100%"
-                    showPrintMargin={false}
-                    mode="xml"
-                    theme="tomorrow_night"
-                    onChange={this.handleInputChange}
-                    value={this.state.input}
-                    name="input"
-                    editorProps={editorProps}
-                    scrollMargin={[10, 0, 0, 0]}
-                    fontSize={13}
-                  />
-                </Box>
+                  <Box flex={1}>
+                    <DropArea onChange={this.handleInputChange}>
+                      <this.state.Editor
+                        width="100%"
+                        height="100%"
+                        showPrintMargin={false}
+                        mode="xml"
+                        theme="tomorrow_night"
+                        onChange={this.handleInputChange}
+                        value={this.state.input}
+                        name="input"
+                        editorProps={editorProps}
+                        scrollMargin={[10, 0, 0, 0]}
+                        fontSize={13}
+                        />
+                    </DropArea>
+                  </Box>
                 <Box flex={1} className={this.state.loading ? 'loading' : ''}>
                   <this.state.Editor
                     width="100%"