From 1305a748ad85cab59a4c3cbebe3e6a5d26c2219d Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Sat, 16 Sep 2017 12:14:45 -0700
Subject: [PATCH] Compound compononents work

---
 components/Overlay.js               | 27 +++++++++++++++++++++++++++
 components/ReadFileDropContainer.js | 29 +++++++----------------------
 pages/editor.js                     |  9 ++++++---
 3 files changed, 40 insertions(+), 25 deletions(-)
 create mode 100644 components/Overlay.js

diff --git a/components/Overlay.js b/components/Overlay.js
new file mode 100644
index 0000000..bda431b
--- /dev/null
+++ b/components/Overlay.js
@@ -0,0 +1,27 @@
+const Overlay = props => (
+  <div className="dnd-container">
+    { props.isOver ? <div className="dnd-overlay">Drop your file here to import</div> : null }
+    { props.children }
+    <style jsx>{`
+      .dnd-container {
+        position: relative;
+      }
+
+      .dnd-overlay {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        width: 100%;
+        height: 100%;
+        z-index: 999;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: rgba(0, 0, 0, 0.85);
+      }
+    `}</style>
+  </div>
+)
+
+export default Overlay
diff --git a/components/ReadFileDropContainer.js b/components/ReadFileDropContainer.js
index 326ca7f..1b72a9e 100644
--- a/components/ReadFileDropContainer.js
+++ b/components/ReadFileDropContainer.js
@@ -15,28 +15,13 @@ const spec = {
 const collect = (connect, monitor) => ({ connectDropTarget: connect.dropTarget(), isOver: monitor.isOver() })
 
 const ReadFileDropContainer = props => props.connectDropTarget(
-  <div className="dnd-container">
-    { props.isOver ? <div className="dnd-overlay">Drop your file here to import</div> : null }
-    {props.children}
-    <style jsx>{`
-      .dnd-container {
-        position: relative;
-      }
-
-      .dnd-overlay {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        width: 100%;
-        height: 100%;
-        z-index: 999;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background: rgba(0, 0, 0, 0.85);
-      }
-    `}</style>
+  <div>
+    {
+      React.Children.only(React.Children.map(
+        props.children,
+        child => React.cloneElement(child, { isOver: props.isOver }),
+      )[0])
+    }
   </div>
 )
 
diff --git a/pages/editor.js b/pages/editor.js
index 20331e7..fb61928 100644
--- a/pages/editor.js
+++ b/pages/editor.js
@@ -6,6 +6,7 @@ import domtoimage from 'dom-to-image'
 import Page from '../components/Page'
 import ReadFileDropContainer from '../components/ReadFileDropContainer'
 import Toolbar from '../components/Toolbar'
+import Overlay from '../components/Overlay'
 import Carbon from '../components/Carbon'
 import api from '../lib/api'
 import { THEMES, LANGUAGES, COLORS, DEFAULT_CODE } from '../lib/constants'
@@ -95,9 +96,11 @@ class Editor extends React.Component {
             <ReadFileDropContainer
               onDrop={droppedContent => this.setState({ droppedContent })}
             >
-              <Carbon config={this.state}>
-                {this.state.droppedContent || this.props.content || DEFAULT_CODE}
-              </Carbon>
+              <Overlay>
+                <Carbon config={this.state}>
+                  {this.state.droppedContent || this.props.content || DEFAULT_CODE}
+                </Carbon>
+              </Overlay>
             </ReadFileDropContainer>
           </div>