put a border around the textarea while the file can be dropped on it

InsidersByte · Apr 7, 2016 · f89a7ef · f89a7ef
1 parent 952c7db
commit f89a7ef
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/src/index.js b/src/index.js
@@ -10,9 +10,23 @@ class MarkdownEditor extends React.Component {
     constructor(props) {
         super(props);
 
+        this.state = {
+            draggingOver: false,
+        };
+
+        this.onDragEnter = this.onDragEnter.bind(this);
+        this.onDragLeave = this.onDragLeave.bind(this);
         this.onImageDrop = this.onImageDrop.bind(this);
     }
 
+    onDragEnter() {
+        this.setState({ draggingOver: true });
+    }
+
+    onDragLeave() {
+        this.setState({ draggingOver: false });
+    }
+
     onImageDrop(event) {
         event.preventDefault();
 
@@ -50,15 +64,20 @@ class MarkdownEditor extends React.Component {
     }
 
     render() {
+        const textAreaClassName = this.state.draggingOver ? 'dragover' : null;
+
         return (
             <div className="markdown-editor">
                 <div>
                     <h2>Markdown</h2>
 
                     <TextArea
+                        className={textAreaClassName}
                         value={this.props.value}
                         onChange={this.props.onChange}
                         onDrop={this.onImageDrop}
+                        onDragEnter={this.onDragEnter}
+                        onDragLeave={this.onDragLeave}
                     />
                 </div>
 

diff --git a/src/react-markdown-editor.styl b/src/react-markdown-editor.styl
@@ -22,3 +22,7 @@
 
         :last-child
             margin-bottom: 0;
+
+    .dragover
+        border 1px solid #c9ff00
+        box-shadow 0 0 10px #719ECE