Merge branch 'toolbar' of https://github.com/dawnlabs/code-image into toolbar

components/ReadFileDropContainer.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { DropTarget } from 'react-dnd'
+import { NativeTypes } from 'react-dnd-html5-backend'
+
+const spec = {
+  drop (props, monitor) {
+    const bundle = monitor.getItem()
+    const file = bundle.files[0]
+    const reader = new FileReader()
+    reader.onload = event => props.onDrop(event.target.result)
+    reader.readAsText(file, 'UTF-8');
+  }
+}
+
+const collect = connect => ({ connectDropTarget: connect.dropTarget() })
+
+const ReadFileDropContainer = props => props.connectDropTarget(props.children)
+
+export default DropTarget(NativeTypes.FILE, spec, collect)(ReadFileDropContainer)

components/dropdown.js

@@ -1,7 +1,8 @@
 import React from 'react'
+import enhanceWithClickOutside from 'react-click-outside'
 import ArrowDown from './svg/arrowdown'
 
-export default class extends React.Component {
+class Dropdown extends React.Component {
   constructor(props) {
     super()
     this.state = {
@@ -20,6 +21,10 @@ export default class extends React.Component {
     this.setState({ listVisible: !this.state.listVisible })
   }
 
+  handleClickOutside() {
+    this.setState({ listVisible: false });
+  }
+
   renderListItems() {
     return this.props.list.map((item, i) => (
       <div className={`dropdown-list-item ${this.state.selected === item ? "selected" : ""}`} key={i} onClick={this.select.bind(null, item)}>
@@ -51,8 +56,12 @@ export default class extends React.Component {
   }
 
   render() {
+    // find longest list value in number of characters
+    const MIN_WIDTH = this.props.list.reduce((max, { name }) =>
+      (name.length > max ? name.length : max), 0)
+
     return (
-      <div className="dropdown-container" onClick={this.toggle}>
+      <div className="dropdown-container" style={{ minWidth: MIN_WIDTH * 14 }} onClick={this.toggle}>
         <div className={`dropdown-display ${this.state.listVisible ? 'list-visible' : ''}`}>
           <span>{ this.state.selected.name }</span>
           <div className="arrow-down"><ArrowDown /></div>
@@ -62,7 +71,8 @@ export default class extends React.Component {
         </div>
         <style jsx>{`
           .arrow-down {
-            margin-left: 16px;
+            position: absolute;
+            right: 16px;
           }
 
           .list-visible > .arrow-down {
@@ -85,7 +95,7 @@ export default class extends React.Component {
             user-select: none;
             padding: 8px 16px;
             display: flex;
-            justify-content: center;
+            justify-content: flex-start;
             align-items: center;
             position: relative;
             z-index: 1;
@@ -105,9 +115,13 @@ export default class extends React.Component {
             margin-top: -2px;
             border: 0.5px solid #333;
             border-radius: 0px 0px 3px 3px;
+            max-height: 350px;
+            overflow-y: scroll;
           }
         `}</style>
       </div>
     )
   }
 }
+
+export default enhanceWithClickOutside(Dropdown)

components/toolbar.js

@@ -13,19 +13,68 @@ const themes = [
 ]
 
 const langauges = [
-  {
+  'Auto Detect',
-    name: 'javascript'
+  'Plain Text',
-  },
+  'AppleScript',
-  {
+  'BoxNote',
-    name: 'python'
+  'C',
-  },
+  'C#',
-  {
+  'CSS',
-    name: 'c'
+  'CSV',
-  },
+  'Closure',
-  {
+  'CoffeeScript',
-    name: 'shitty ass java'
+  'Cold Fusion',
-  }
+  'Crystal',
-]
+  'Cypher',
+  'D',
+  'Dart',
+  'Diff',
+  'Docker',
+  'Erlang',
+  'F#',
+  'Fortran',
+  'Gherkin',
+  'Go',
+  'Groovy',
+  'HTML',
+  'Haskell',
+  'Haxe',
+  'Java',
+  'JavaScript',
+  'JSON',
+  'Julia',
+  'Kotlin',
+  'LaTex',
+  'Lisp',
+  'Lua',
+  'MATLAB',
+  'MUMPS',
+  'Markdown (raw)',
+  'OCaml',
+  'Objective-C',
+  'PHP',
+  'Pascal',
+  'Perl',
+  'Pig',
+  'Post',
+  'Puppet',
+  'Python',
+  'R',
+  'Ruby',
+  'Rust',
+  'SQL',
+  'Sass',
+  'Scheme',
+  'Smalltalk',
+  'Swift',
+  'TSV',
+  'VB.NET',
+  'VBScript',
+  'Velocity',
+  'Verilog',
+  'XML',
+  'YAML'
+].map(name => ({ name }))
 
 export default class extends React.Component {
   constructor() {

package.json

@@ -17,6 +17,7 @@
     "morgan": "^1.8.2",
     "next": "^2.4.3",
     "react": "^15.5.4",
+    "react-click-outside": "^2.3.1",
     "react-color": "^2.12.1",
     "react-dnd": "^2.4.0",
     "react-dnd-html5-backend": "^2.4.1",

yarn.lock

@@ -2739,6 +2739,12 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-click-outside@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/react-click-outside/-/react-click-outside-2.3.1.tgz#318737ebdf081a4a3bcd46825663674cbe9836eb"
+  dependencies:
+    hoist-non-react-statics "^1.2.0"
+
 react-color@^2.12.1:
   version "2.12.1"
   resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.12.1.tgz#ef5a4dc4260ed7d1642047d5b6693d68939b19f7"