From cb47af8a840a106d95a113353d8db460ee564aaa Mon Sep 17 00:00:00 2001
From: raffe90 <raffe90@gmail.com>
Date: Tue, 5 Apr 2016 18:05:07 +0200
Subject: [PATCH] Added react-dropzone

---
 package.json             |  3 ++-
 src/Designer.js          |  2 ++
 src/index.js             |  2 +-
 src/objects/Image.js     |  9 +++-----
 src/objects/Vector.js    |  3 ++-
 src/panels/ImagePanel.js | 45 ++++++++++++++++++++++++++++++++++++++++
 src/panels/PanelList.js  |  1 +
 src/panels/index.js      |  3 ++-
 8 files changed, 58 insertions(+), 10 deletions(-)
 create mode 100644 src/panels/ImagePanel.js

diff --git a/package.json b/package.json
index 0b9ba6c..40e4947 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,8 @@
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
     "webfontloader": "^1.6.24",
-    "react-autocomplete": "1.0.0-rc1"
+    "react-autocomplete": "1.0.0-rc1",
+    "react-dropzone": "^3.3.1"
   },
   "peerDependencies": {
   },
diff --git a/src/Designer.js b/src/Designer.js
index d24bb6c..487f5e7 100644
--- a/src/Designer.js
+++ b/src/Designer.js
@@ -369,6 +369,7 @@ class Designer extends Component {
 
   getObjectComponent(type) {
     let {objectTypes} = this.props;
+    console.log("OBJECT COMPONENT => ",objectTypes[type], "TYPE => ", type)
     return objectTypes[type];
   }
 
@@ -530,6 +531,7 @@ class Designer extends Component {
         ...objectComponent.meta.initial,
         ...currentObject
       };
+      console.log("OBJECT COMPONENT =>", objectComponent)
       ObjectEditor = objectComponent.meta.editor;
     }
 
diff --git a/src/index.js b/src/index.js
index 1ecc3f8..0d50968 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,4 @@
 export Preview from './Preview';
 export {Vector, Path, Rect, Circle, Text, Image} from './objects';
-export {TextPanel, SizePanel, StylePanel, ArrangePanel} from './panels';
+export {TextPanel, SizePanel, StylePanel, ArrangePanel, ImagePanel} from './panels';
 export default from './Designer';
diff --git a/src/objects/Image.js b/src/objects/Image.js
index 2e71408..677870a 100644
--- a/src/objects/Image.js
+++ b/src/objects/Image.js
@@ -10,19 +10,16 @@ export default class Image extends Vector {
     icon: <Icon icon={'image'} size={30} />,
     initial: {
       width: 100,
-      height: 100
+      height: 100,
+      href: "https://placeholdit.imgix.net/~text?txtsize=10&txt=100x100&w=100&h=100"
     }
   };
 
-  // imageSrc(){
-  //   return {__html: "xlink:href='https://placeholdit.imgix.net/~text?txtsize=10&txt=100x100&w=100&h=100'"}
-  // }
-
   render() {
     let {object, index} = this.props;
     return (
       <image style={this.getStyle()}
-         xlinkHref={'https://placeholdit.imgix.net/~text?txtsize=10&txt=100x100&w=100&h=100'}
+         xlinkHref={object.href}
          {...this.getObjectAttributes()}
          width={object.width}
          height={object.height} />
diff --git a/src/objects/Vector.js b/src/objects/Vector.js
index 8d16385..9d7dcff 100644
--- a/src/objects/Vector.js
+++ b/src/objects/Vector.js
@@ -4,7 +4,7 @@ import Icon from '../Icon';
 import _ from 'lodash';
 
 import {SizePanel, TextPanel,
-        StylePanel, ArrangePanel} from '../panels';
+        StylePanel, ArrangePanel, ImagePanel} from '../panels';
 
 
 export default class Vector extends Component {
@@ -12,6 +12,7 @@ export default class Vector extends Component {
     SizePanel,
     TextPanel,
     StylePanel,
+    ImagePanel,
     ArrangePanel
   ];
 
diff --git a/src/panels/ImagePanel.js b/src/panels/ImagePanel.js
new file mode 100644
index 0000000..ab0788a
--- /dev/null
+++ b/src/panels/ImagePanel.js
@@ -0,0 +1,45 @@
+import React, {Component} from 'react';
+import Radium from 'radium';
+import _ from 'lodash';
+
+import Icon from '../Icon';
+import Panel from './Panel';
+
+import styles from './styles';
+import PropertyGroup from './PropertyGroup';
+import Button from './Button';
+import SwitchState from './SwitchState';
+import Columns from './Columns';
+import Column from './Column';
+import Dropzone from 'react-dropzone';
+
+export default class ImagePanel extends Panel {
+  state = {
+    files: []
+  }
+
+  onDrop (files) {
+    this.props.onChange("href", "/img/"+files[0].name);
+    console.log('Received files: ', files);
+    this.setState({
+      files: files
+    });
+  }
+
+  render() {
+    let {object} = this.props;
+    return (
+      <PropertyGroup object={object}  showIf={_.has(object, 'href')}>
+          <div style={styles.columns}>
+            <Column>
+              <div className="dropzone--wrapper">
+                <Dropzone onDrop={this.onDrop.bind(this)} multiple={false}>
+                  <div>Try dropping some files here, or click to select files to upload.</div>
+                </Dropzone>
+              </div>
+            </Column>
+          </div>
+      </PropertyGroup>
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/panels/PanelList.js b/src/panels/PanelList.js
index 8009821..db932e0 100644
--- a/src/panels/PanelList.js
+++ b/src/panels/PanelList.js
@@ -20,6 +20,7 @@ class PanelList extends Component {
       left: offset.width + offset.x,
       top: offset.y + window.scrollY,
     };
+    console.log("OBJECT => ", object, "OBJECT COMPONENT => ", objectComponent)
     return (
       <Portal className="propertyPanel" closeOnEsc closeOnOutsideClick isOpened={true}>
         <div style={[styles.propertyPanel, style]}>
diff --git a/src/panels/index.js b/src/panels/index.js
index 9a6a20e..162e985 100644
--- a/src/panels/index.js
+++ b/src/panels/index.js
@@ -2,4 +2,5 @@ export TextPanel from './TextPanel';
 export ArrangePanel from './ArrangePanel';
 export StylePanel from './StylePanel';
 export SizePanel from './SizePanel';
-export InsertMenu from './InsertMenu';
\ No newline at end of file
+export InsertMenu from './InsertMenu';
+export ImagePanel from './ImagePanel';
\ No newline at end of file