From 7bc232340158ff59277dca4a953788f715c89e7d Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Fri, 30 Dec 2016 20:38:50 +0100
Subject: [PATCH] Introduce AutocompelteInput for source editing

---
 package.json                                  |  1 +
 src/components/inputs/AutocompleteInput.jsx   | 54 +++++++++++++++++++
 src/components/layers/LayerSourceBlock.jsx    |  5 +-
 .../layers/LayerSourceLayerBlock.jsx          |  3 +-
 4 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 src/components/inputs/AutocompleteInput.jsx

diff --git a/package.json b/package.json
index 991d4fce..95de154d 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "randomcolor": "^0.4.4",
     "react": "^15.4.0",
     "react-addons-pure-render-mixin": "^15.4.0",
+    "react-autocomplete": "^1.4.0",
     "react-codemirror": "^0.3.0",
     "react-collapse": "^2.3.3",
     "react-color": "^2.10.0",
diff --git a/src/components/inputs/AutocompleteInput.jsx b/src/components/inputs/AutocompleteInput.jsx
new file mode 100644
index 00000000..6f725ba0
--- /dev/null
+++ b/src/components/inputs/AutocompleteInput.jsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import Autocomplete from 'react-autocomplete'
+import input from '../../config/input'
+import colors from '../../config/colors'
+import { margins, fontSizes } from '../../config/scales'
+
+class AutocompleteInput extends React.Component {
+  static propTypes = {
+    value: React.PropTypes.string.isRequired,
+    options: React.PropTypes.array.isRequired,
+    style: React.PropTypes.object,
+    onChange: React.PropTypes.func.isRequired,
+  }
+
+  render() {
+		return <Autocomplete
+			menuStyle={{
+				border: 'none',
+        padding: '2px 0',
+        position: 'fixed',
+        overflow: 'auto',
+        maxHeight: '50%',
+			}}
+			inputProps={{
+        style: {
+					...input.input,
+					width: null,
+          ...this.props.style,
+				}
+			}}
+      value={this.props.value}
+			items={this.props.options}
+			getItemValue={(item) => item[0]}
+			onSelect={v => this.props.onChange(v)}
+      onChange={(e, v) => this.props.onChange(v)}
+			renderItem={(item, isHighlighted) => (
+				<div
+					key={item[0]}
+					style={{
+						userSelect: 'none',
+						color: colors.lowgray,
+						background: isHighlighted ? colors.midgray : colors.gray,
+						padding: margins[0],
+						fontSize: fontSizes[5],
+					}}
+				>
+			   {item[1]}
+				</div>
+			)}
+		/>
+  }
+}
+
+export default AutocompleteInput
diff --git a/src/components/layers/LayerSourceBlock.jsx b/src/components/layers/LayerSourceBlock.jsx
index 226b57cc..4a69e6b8 100644
--- a/src/components/layers/LayerSourceBlock.jsx
+++ b/src/components/layers/LayerSourceBlock.jsx
@@ -3,6 +3,7 @@ import React from 'react'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
+import AutocompleteInput from '../inputs/AutocompleteInput'
 
 class LayerSourceBlock extends React.Component {
   static propTypes = {
@@ -13,10 +14,10 @@ class LayerSourceBlock extends React.Component {
 
   render() {
     return <InputBlock label={"Source"}>
-      <SelectInput
+      <AutocompleteInput
         value={this.props.value}
         onChange={this.props.onChange}
-        options={this.props.sourceIds.map(s => [s, s])}
+        options={this.props.sourceIds.map(src => [src, src])}
       />
     </InputBlock>
   }
diff --git a/src/components/layers/LayerSourceLayerBlock.jsx b/src/components/layers/LayerSourceLayerBlock.jsx
index 5e4775f4..a9281ac5 100644
--- a/src/components/layers/LayerSourceLayerBlock.jsx
+++ b/src/components/layers/LayerSourceLayerBlock.jsx
@@ -3,6 +3,7 @@ import React from 'react'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
+import AutocompleteInput from '../inputs/AutocompleteInput'
 
 class LayerSourceLayer extends React.Component {
   static propTypes = {
@@ -13,7 +14,7 @@ class LayerSourceLayer extends React.Component {
 
   render() {
     return <InputBlock label={"Source Layer"}>
-      <SelectInput
+      <AutocompleteInput
         value={this.props.value}
         onChange={this.props.onChange}
         options={this.props.sourceLayerIds.map(l => [l, l])}