Filter out combining operator select

src/components/filter/CombiningOperatorSelect.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import SelectInput from '../inputs/SelectInput'
+
+import input from '../../config/input.js'
+import { margins } from '../../config/scales.js'
+
+class CombiningOperatorSelect extends React.Component {
+  static propTypes = {
+    value: React.PropTypes.string.isRequired,
+    onChange: React.PropTypes.func.isRequired,
+    style: React.PropTypes.object,
+  }
+
+  render() {
+    return <div style={{
+      display: 'inline-block',
+      width: '50%',
+    }}>
+      <SelectInput
+        value={this.props.value}
+        options={['all', 'any', 'none']}
+        onChange={this.props.onChange}
+        style={{
+          display: 'block',
+          width: '100%',
+        }}
+      />
+      <label style={{
+        ...input.label,
+        width: 'auto',
+        marginLeft: margins[2],
+        display: 'block',
+        width: '100%',
+      }}>
+        of the filters match
+      </label>
+    </div>
+  }
+}
+
+export default CombiningOperatorSelect

src/components/filter/FilterEditor.jsx

@@ -3,11 +3,13 @@ import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 
 import input from '../../config/input.js'
 import colors from '../../config/colors.js'
-import { margins } from '../../config/scales.js'
+import { margins, fontSizes } from '../../config/scales.js'
 
+import CombiningOperatorSelect from './CombiningOperatorSelect'
 import DocLabel from '../fields/DocLabel'
 import Button from '../Button'
 import SelectInput from '../inputs/SelectInput'
+import MultiButtonInput from '../inputs/MultiButtonInput'
 import StringInput from '../inputs/StringInput'
 import AutocompleteInput from '../inputs/AutocompleteInput'
 
@@ -32,45 +34,6 @@ function hasNestedCombiningFilter(filter) {
   return false
 }
 
-class CombiningOperatorSelect extends React.Component {
-  static propTypes = {
-    value: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-    style: React.PropTypes.object,
-  }
-
-  render() {
-    const options = combiningFilterOps.map(op => {
-      return <option key={op} value={op}>{op}</option>
-    })
-
-    return <div
-      style={{
-          marginTop: margins[1],
-          marginBottom: margins[1],
-          ...this.props.style
-        }}
-      >
-      <select
-        style={{
-          ...input.select,
-          width: '20.5%',
-        }}
-        value={this.props.value}
-        onChange={e => this.props.onChange(e.target.value)}
-      >
-        {options}
-      </select>
-      <label style={{
-        ...input.label,
-        width: '60%',
-        marginLeft: margins[0],
-      }}>
-        of the filters matches
-      </label>
-    </div>
-  }
-}
 
 class OperatorSelect extends React.Component {
   static propTypes = {
@@ -194,16 +157,18 @@ export default class CombiningFilterEditor extends React.Component {
 
     const filterEditors = filters.map((f, idx) => {
       return <div>
+        <div style={{display: 'inline-block', width: '25%'}}>
           <Button
             style={{backgroundColor: null}}
             onClick={this.deleteFilterItem.bind(this, idx)}
           >
             <DeleteIcon />
           </Button>
+        </div>
         <SingleFilterEditor
           style={{
             display: 'inline-block',
-            width: '80%'
+            width: '75%'
           }}
           key={idx}
           properties={this.props.properties}
@@ -219,22 +184,30 @@ export default class CombiningFilterEditor extends React.Component {
     }
 
     return <div>
+      <div style={{
+        width: '50%',
+        verticalAlign: 'top',
+        display: 'inline-block',
+      }}>
         <DocLabel
           label={"Filter"}
           doc={GlSpec.layer.filter.doc}
           style={{
-          width: '42.25%',
+            display: 'block',
           }}
         />
+        <div>
+          <Button onClick={this.addFilterItem.bind(this)}>Add filter</Button>
+        </div>
+      </div>
       <CombiningOperatorSelect
         value={combiningOp}
         onChange={this.onFilterPartChanged.bind(this, 0)}
         style={{
           display: 'inline-block',
-          width: '80%'
+          width: '50%'
         }}
       />
-      <Button onClick={this.addFilterItem.bind(this)}>Add filter</Button>
       {filterEditors}
     </div>
   }

src/components/inputs/MultiButtonInput.jsx

@@ -15,21 +15,29 @@ class MultiButtonInput extends React.Component {
   }
 
   render() {
-    const selectedValue = this.props.value || this.props.options[0][0]
-    const buttons = this.props.options.map(([val, label])=> {
+    let options = this.props.options
+    if(options.length > 0 && !Array.isArray(options[0])) {
+      options = options.map(v => [v, v])
+    }
+
+    const selectedValue = this.props.value || options[0][0]
+    const buttons = options.map(([val, label])=> {
       return <Button
         key={val}
+        onClick={e => this.props.onChange(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'}}>
+    return <div style={{
+      display: 'inline-block',
+      ...this.props.style,
+    }}>
       {buttons}
     </div>
   }

src/components/inputs/SelectInput.jsx

@@ -11,9 +11,10 @@ class SelectInput extends React.Component {
 
 
   render() {
-    const options = this.props.options.map(([val, label])=> {
-      return <option key={val} value={val}>{label}</option>
-    })
+    let options = this.props.options
+    if(options.length > 0 && !Array.isArray(options[0])) {
+      options = options.map(v => [v, v])
+    }
 
     return <select
       style={{
@@ -23,7 +24,7 @@ class SelectInput extends React.Component {
       value={this.props.value}
       onChange={e => this.props.onChange(e.target.value)}
     >
-      {options}
+      { options.map(([val, label]) => <option key={val} value={val}>{label}</option>) }
     </select>
   }
 }