From 160bd9563bc8194a5dc2e9344c064b4c3bcc2509 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Wed, 28 Dec 2016 16:48:49 +0100
Subject: [PATCH] Introduce MultiInputButton

---
 package.json                               |  1 +
 src/components/Button.jsx                  |  2 +-
 src/components/fields/SpecField.jsx        | 22 +++++++++----
 src/components/fields/ZoomSpecField.jsx    |  6 ++--
 src/components/inputs/MultiButtonInput.jsx | 38 ++++++++++++++++++++++
 src/components/layers/LayerEditor.jsx      |  9 +++++
 6 files changed, 67 insertions(+), 11 deletions(-)
 create mode 100644 src/components/inputs/MultiButtonInput.jsx

diff --git a/package.json b/package.json
index b1e60cc..ebeca85 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "codemirror": "^5.18.2",
     "color": "^1.0.3",
     "file-saver": "^1.3.2",
+    "lodash.capitalize": "^4.2.1",
     "lodash.clonedeep": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "lodash.topairs": "^4.3.0",
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 33cd330..564d1ba 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -15,7 +15,7 @@ class Button extends React.Component {
         cursor: 'pointer',
         backgroundColor: colors.midgray,
         color: colors.lowgray,
-        fontSize: fontSizes[4],
+        fontSize: fontSizes[5],
         padding: margins[1],
         userSelect: 'none',
         borderRadius: 2,
diff --git a/src/components/fields/SpecField.jsx b/src/components/fields/SpecField.jsx
index a28ee25..734c5a2 100644
--- a/src/components/fields/SpecField.jsx
+++ b/src/components/fields/SpecField.jsx
@@ -7,6 +7,9 @@ import NumberInput from '../inputs/NumberInput'
 import CheckboxInput from '../inputs/CheckboxInput'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
+import MultiButtonInput from '../inputs/MultiButtonInput'
+import capitalize from 'lodash.capitalize'
+
 
 import input from '../../config/input.js'
 
@@ -52,12 +55,19 @@ export default class SpecField extends React.Component {
           max={this.props.fieldSpec.maximum}
         />
       )
-      case 'enum': return (
-        <SelectInput
-          {...commonProps}
-          options={Object.keys(this.props.fieldSpec.values).map(v => [v, v])}
-        />
-      )
+      case 'enum':
+        const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)])
+        if(options.length < 3) {
+          return <MultiButtonInput
+            {...commonProps}
+            options={options}
+          />
+        } else {
+          return <SelectInput
+            {...commonProps}
+            options={options}
+          />
+        }
       case 'string': return (
         <StringInput
           {...commonProps}
diff --git a/src/components/fields/ZoomSpecField.jsx b/src/components/fields/ZoomSpecField.jsx
index 5d396c8..1691403 100644
--- a/src/components/fields/ZoomSpecField.jsx
+++ b/src/components/fields/ZoomSpecField.jsx
@@ -8,6 +8,7 @@ import DocLabel from './DocLabel'
 import AddIcon from 'react-icons/lib/md/add-circle-outline'
 import DeleteIcon from 'react-icons/lib/md/delete'
 
+import capitalize from 'lodash.capitalize'
 import input from '../../config/input.js'
 import colors from '../../config/colors.js'
 import { margins, fontSizes } from '../../config/scales.js'
@@ -104,8 +105,5 @@ export default class ZoomSpecField extends React.Component {
 
 function labelFromFieldName(fieldName) {
   let label = fieldName.split('-').slice(1).join(' ')
-  if(label.length > 0) {
-    label = label.charAt(0).toUpperCase() + label.slice(1);
-  }
-  return label
+  return capitalize(label)
 }
diff --git a/src/components/inputs/MultiButtonInput.jsx b/src/components/inputs/MultiButtonInput.jsx
new file mode 100644
index 0000000..ef78015
--- /dev/null
+++ b/src/components/inputs/MultiButtonInput.jsx
@@ -0,0 +1,38 @@
+
+import React from 'react'
+import Button from '../Button'
+
+import colors from '../../config/colors'
+import { margins } from '../../config/scales'
+import input from '../../config/input.js'
+
+class MultiButtonInput 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() {
+    const selectedValue = this.props.value || this.props.options[0][0]
+    const buttons = this.props.options.map(([val, label])=> {
+      return <Button
+        key={val}
+        style={{
+          marginRight: margins[0],
+          backgroundColor: val === selectedValue ? colors.midgray : colors.gray,
+        }}
+        onClick={e => this.props.onChange(val)}
+      >
+        {label}
+      </Button>
+    })
+
+    return <div style={{display: 'inline-block'}}>
+      {buttons}
+    </div>
+  }
+}
+
+export default MultiButtonInput
diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx
index 0b78ae2..563020c 100644
--- a/src/components/layers/LayerEditor.jsx
+++ b/src/components/layers/LayerEditor.jsx
@@ -7,6 +7,9 @@ import PropertyGroup from '../fields/PropertyGroup'
 import LayerEditorGroup from './LayerEditorGroup'
 import LayerSettings from './LayerSettings'
 
+import InputBlock from '../inputs/InputBlock'
+import MultiButtonInput from '../inputs/MultiButtonInput'
+
 import layout from '../../config/layout.json'
 import { margins, fontSizes } from '../../config/scales'
 import colors from '../../config/colors'
@@ -133,6 +136,12 @@ export default class LayerEditor extends React.Component {
           onSourceChange={console.log}
           onSourceLayerChange={console.log}
         />
+        <InputBlock label={"Inspection Mode"}>
+          <MultiButtonInput
+            value={"highlight"}
+            options={[["highlight", "Highlight"], ["normal", "Normal"]]}
+          />
+        </InputBlock>
       </div>
       case 'properties': return <PropertyGroup
         layer={this.props.layer}