Clean up component

Help from @121watts

ui/src/shared/components/FillQuery.js

@@ -1,7 +1,11 @@
 import React, {Component, PropTypes} from 'react'
 import Dropdown from 'src/shared/components/Dropdown'
 
-import {QUERY_FILL_OPTIONS} from 'src/shared/constants/queryFillOptions'
+import {
+  QUERY_FILL_OPTIONS,
+  NUMBER,
+  NULL,
+} from 'src/shared/constants/queryFillOptions'
 
 /*
   NOTE
@@ -10,14 +14,11 @@ import {QUERY_FILL_OPTIONS} from 'src/shared/constants/queryFillOptions'
    - Either the selected item from the dropdown or the value of the input
    - A boolean to type the result, true = number, false = string
 */
-
 class FillQuery extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      selected: QUERY_FILL_OPTIONS[0],
-      useCustomNumber: false,
-      customNumber: null,
+      selected: this.props.fillType,
       inputValue: '0',
     }
   }
@@ -25,32 +26,26 @@ class FillQuery extends Component {
   static defaultProps = {
     size: 'xs',
     theme: 'blue',
+    fillType: NULL,
   }
 
   handleDropdown = item => {
     if (item.text === 'number') {
-      this.setState({selected: item.text, useCustomNumber: true}, () => {
+      this.setState({selected: item.text}, () => {
         this.props.onSelection(this.state.inputValue, true)
       })
     } else {
-      this.setState({selected: item.text, useCustomNumber: false}, () => {
+      this.setState({selected: item.text}, () => {
         this.props.onSelection(item.text, false)
       })
     }
   }
 
   handleInputBlur = e => {
-    const {useCustomNumber, inputValue} = this.state
-    // Prevent user from submitting an empty string as their value
-    // Use 0 by default
-    if (e.target.value === '') {
-      const zeroVal = '0'
-      this.setState({inputValue: zeroVal}, () => {
-        this.props.onSelection(zeroVal, true)
-      })
-    } else if (useCustomNumber) {
-      this.props.onSelection(inputValue, true)
-    }
+    const inputValue = e.target.value || '0'
+
+    this.setState({inputValue})
+    this.props.onSelection(inputValue, true)
   }
 
   handleInputChange = e => {
@@ -63,26 +58,24 @@ class FillQuery extends Component {
     }
   }
 
+  getColor = theme => {
+    switch (theme) {
+      case 'BLUE':
+        return 'plutonium'
+      case 'GREEN':
+        return 'malachite'
+      case 'PURPLE':
+        return 'astronaut'
+      default:
+        return 'plutonium'
+    }
+  }
+
   render() {
     const {size, theme} = this.props
-    const {selected, useCustomNumber, inputValue} = this.state
+    const {selected, inputValue} = this.state
     const items = QUERY_FILL_OPTIONS.map(text => ({text}))
 
-    let inputTheme = ''
-    let dropdownTheme = ''
-
-    if (theme === 'blue') {
-      inputTheme = 'form-plutonium'
-    }
-    if (theme === 'green') {
-      inputTheme = 'form-malachite'
-      dropdownTheme = 'dropdown-malachite'
-    }
-    if (theme === 'purple') {
-      inputTheme = 'form-astronaut'
-      dropdownTheme = 'dropdown-astronaut'
-    }
-
     return (
       <div className={`fill-query fill-query--${size}`}>
         <label>Fill missing with</label>
@@ -92,21 +85,22 @@ class FillQuery extends Component {
           className="fill-query--dropdown"
           buttonSize={`btn-${size}`}
           buttonColor="btn-default"
-          menuClass={dropdownTheme}
+          menuClass={`dropdown-${this.getColor(theme)}`}
           onChoose={this.handleDropdown}
         />
-        {useCustomNumber
-          ? <input
-              type="number"
-              className={`form-control monotype ${inputTheme} input-${size} fill-query--input`}
-              placeholder="Custom Value"
-              autoFocus={true}
-              value={inputValue}
-              onKeyUp={this.handleKeyUp}
-              onChange={this.handleInputChange}
-              onBlur={this.handleInputBlur}
-            />
-          : null}
+        {selected === NUMBER &&
+          <input
+            type="number"
+            className={`form-control monotype form-${this.getColor(
+              theme
+            )} input-${size} fill-query--input`}
+            placeholder="Custom Value"
+            autoFocus={true}
+            value={inputValue}
+            onKeyUp={this.handleKeyUp}
+            onChange={this.handleInputChange}
+            onBlur={this.handleInputBlur}
+          />}
       </div>
     )
   }
@@ -116,6 +110,7 @@ const {func, string} = PropTypes
 
 FillQuery.propTypes = {
   onSelection: func.isRequired,
+  fillType: string,
   size: string,
   theme: string,
 }

ui/src/shared/constants/queryFillOptions.js

@@ -1,7 +1,3 @@
-export const QUERY_FILL_OPTIONS = [
-  'null',
-  'linear',
-  'none',
-  'previous',
-  'number',
-]
+export const NULL = 'null'
+export const NUMBER = 'number'
+export const QUERY_FILL_OPTIONS = [NULL, 'linear', 'none', 'previous', NUMBER]