Add dnd container (doesn't render?). Make top level settings single source of truth

components/CodeImage.js

@@ -5,11 +5,6 @@ import CodeMirror from 'react-codemirror'
 import WindowControls from '../components/svg/Controls'
 import Spinner from 'react-spinner'
 
-// hack to only call modes on browser
-if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
-  require('../lib/constants')
-}
-
 const DEFAULT_SETTINGS = {
   paddingVertical: '50px',
   paddingHorizontal: '50px',

components/Settings.js

@@ -31,8 +31,14 @@ class Settings extends React.Component {
         </div>
         <div className="settings-settings">
           <ThemeSelect onChange={this.props.onChange} />
-          <Toggle label="Drop shadow" onChange={this.props.onChange.bind(null, 'dropShadow')}/>
+          <Toggle label="Drop shadow"
-          <Toggle label="Window controls" enabled onChange={this.props.onChange.bind(null, 'windowControls')}/>
+            enabled={this.props.enabled.dropShadow}
+            onChange={this.props.onChange.bind(null, 'dropShadow')}
+          />
+          <Toggle label="Window controls"
+            enabled={this.props.enabled.windowControls}
+            onChange={this.props.onChange.bind(null, 'windowControls')}
+          />
           <Slider label="Padding (vertical)" initialValue={16} onChange={this.props.onChange.bind(null, 'paddingVertical')}/>
           <Slider label="Padding (horizontal)" initialValue={32} onChange={this.props.onChange.bind(null, 'paddingHorizontal')}/>
         </div>

components/Toolbar.js

@@ -14,7 +14,7 @@ const Toolbar = (props) => (
       onChange={props.onBGChange}
       bg={props.bg}
     />
-    <Settings onChange={props.onSettingsChange} />
+    <Settings onChange={props.onSettingsChange} enabled={props.enabled} />
     <div className="buttons">
       <CopyButton />
       <Button onClick={props.save} title="Save Image" bg="#C3E98D" />

pages/index.js

@@ -4,6 +4,7 @@ import { DragDropContext } from 'react-dnd'
 import Axios from 'axios'
 import domtoimage from 'dom-to-image'
 
+import ReadFileDropContainer from '../components/ReadFileDropContainer'
 import Logo from '../components/svg/Logo'
 import Meta from '../components/Meta'
 import Toolbar from '../components/Toolbar'
@@ -67,20 +68,28 @@ class Index extends React.Component {
               <h1>The easiest way to create images from source code. Start typing, or drag a file into the text area to get started.</h1>
             </div>
           </div>
-          <div id="editor">
+          <ReadFileDropContainer
-            <Toolbar
+            onDrop={(droppedContent) => {
-              save={this.save}
+              console.log(droppedContent)
-              upload={this.upload}
+              this.setState({ droppedContent })
-              onBGChange={color => this.setState({ background: color })}
+            }}
-              onThemeChange={theme => this.setState({ theme: theme.id })}
+          >
-              onLanguageChange={language => this.setState({ language })}
+            <div id="editor">
-              onSettingsChange={(key, value) => this.setState({ [key]: value })}
+              <Toolbar
-              bg={this.state.background}
+                save={this.save}
-            />
+                upload={this.upload}
-            <CodeImage config={this.state}>
+                onBGChange={color => this.setState({ background: color })}
-              {this.droppedContent || this.props.content || DEFAULT_CODE}
+                onThemeChange={theme => this.setState({ theme: theme.id })}
-            </CodeImage>
+                onLanguageChange={language => this.setState({ language })}
-          </div>
+                onSettingsChange={(key, value) => this.setState({ [key]: value })}
+                bg={this.state.background}
+                enabled={this.state}
+              />
+              <CodeImage config={this.state}>
+                {this.state.droppedContent || this.props.content || DEFAULT_CODE}
+              </CodeImage>
+            </div>
+          </ReadFileDropContainer>
           <div className="footer">
             <span>a project by <a href="https://twitter.com/dawn_labs">@dawn_labs ¬</a></span>
           </div>