Prototype FontInput field

src/components/fields/SpecField.jsx

@@ -9,6 +9,7 @@ import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
 import MultiButtonInput from '../inputs/MultiButtonInput'
 import ArrayInput from '../inputs/ArrayInput'
+import FontInput from '../inputs/FontInput'
 import capitalize from 'lodash.capitalize'
 
 
@@ -38,7 +39,6 @@ export default class SpecField extends React.Component {
     onChange: React.PropTypes.func.isRequired,
     fieldName: React.PropTypes.string.isRequired,
     fieldSpec: React.PropTypes.object.isRequired,
-
     value: React.PropTypes.oneOfType([
       React.PropTypes.string,
       React.PropTypes.number,
@@ -93,13 +93,18 @@ export default class SpecField extends React.Component {
           {...commonProps}
         />
       )
-      case 'array': return (
-        <ArrayInput
-          {...commonProps}
-          type={this.props.fieldSpec.value}
-          length={this.props.fieldSpec.length}
-        />
-      )
+      case 'array':
+        if(this.props.fieldName === 'text-font') {
+          return <FontInput
+            {...commonProps}
+          />
+        } else {
+          return <ArrayInput
+            {...commonProps}
+            type={this.props.fieldSpec.value}
+            length={this.props.fieldSpec.length}
+          />
+        }
       default: return null
     }
   }

src/components/inputs/FontInput.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import SelectInput from './SelectInput'
+import input from '../../config/input.js'
+
+//TODO: Query available font stack dynamically
+import fontFamilies from '../../config/fontstacks.json'
+let fontStacks = []
+
+Object.keys(fontFamilies).forEach(family => {
+  fontStacks = fontStacks.concat(fontFamilies[family])
+})
+
+class FontInput extends React.Component {
+  static propTypes = {
+    value: React.PropTypes.array.isRequired,
+    style: React.PropTypes.object,
+    onChange: React.PropTypes.func.isRequired,
+  }
+
+  get values() {
+   return this.props.value || this.props.default || []
+  }
+
+  changeFont(idx, newValue) {
+    const changedValues = this.values.slice(0)
+    changedValues[idx] = newValue
+    this.props.onChange(changedValues)
+  }
+
+  render() {
+    const inputs = this.values.map((value, i) => {
+      return <SelectInput
+        key={i}
+        style={{
+          width: '100%',
+          ...this.props.style,
+        }}
+        value={value}
+        options={fontStacks.map(f => [f, f])}
+        onChange={this.changeFont.bind(this, i)}
+      />
+    })
+
+    return <div style={{display: 'inline-block', width: '51%'}}>
+      {inputs}
+    </div>
+  }
+}
+
+export default FontInput

src/config/fontstacks.json

@@ -0,0 +1,41 @@
+{
+  "Metropolis": [
+    "Metropolis Black Italic",
+    "Metropolis Black",
+    "Metropolis Bold Italic",
+    "Metropolis Bold",
+    "Metropolis Extra Bold Italic",
+    "Metropolis Extra Bold",
+    "Metropolis Extra Light Italic",
+    "Metropolis Extra Light",
+    "Metropolis Light Italic",
+    "Metropolis Light",
+    "Metropolis Medium Italic",
+    "Metropolis Medium",
+    "Metropolis Regular Italic",
+    "Metropolis Regular",
+    "Metropolis Semi Bold Italic",
+    "Metropolis Semi Bold",
+    "Metropolis Thin Italic",
+    "Metropolis Thin"
+  ],
+  "Open Sans": [
+    "Open Sans Bold Italic",
+    "Open Sans Bold",
+    "Open Sans Extra Bold Italic",
+    "Open Sans Extra Bold",
+    "Open Sans Italic",
+    "Open Sans Light Italic",
+    "Open Sans Light",
+    "Open Sans Regular",
+    "Open Sans Semibold Italic",
+    "Open Sans Semibold"
+  ],
+  "Klokantech Noto Sans": [
+    "Klokantech Noto Sans Bold",
+    "Klokantech Noto Sans CJK Bold",
+    "Klokantech Noto Sans CJK Regular",
+    "Klokantech Noto Sans Italic",
+    "Klokantech Noto Sans Regular"
+  ]
+}