feat(form): Enhancements to ModeSelector for TriMet mobile UI

Allow custom label for ModeSelector. Translate OTP mode strings to user-friendly text.

Author: David Emory

lib/components/form/mode-selector.js

@@ -9,25 +9,44 @@ class ModeSelector extends Component {
     location: PropTypes.object,
     label: PropTypes.string,
     setLocation: PropTypes.func,
+    showLabel: PropTypes.boolean,
     type: PropTypes.string // replace with locationType?
   }
+
   _onChange = (evt) => {
     console.log(evt.target.value)
     this.props.setMode(evt.target.value)
   }
+
+  _getDisplayText (mode) {
+    switch (mode) {
+      case 'TRANSIT,WALK': return 'Walk to Transit'
+      case 'TRANSIT,BICYCLE': return 'Bike to Transit'
+      case 'WALK': return 'Walk Only'
+      case 'BICYCLE': return 'Bike Only'
+    }
+    return mode
+  }
+
   render () {
     const { config, mode } = this.props
+    const label = this.props.label || 'Mode:'
+    const showLabel = this.props.showLabel === undefined ? true : this.props.showLabel
+
     return (
       <form>
-        <FormGroup>
-          <ControlLabel>Mode:</ControlLabel>
+        <FormGroup className='mode-selector'>
+          {showLabel
+            ? <ControlLabel>{label}</ControlLabel>
+            : null
+          }
           <FormControl
             componentClass='select'
             value={mode}
             onChange={this._onChange}
           >
             {config.modes.map((m, i) => (
-              <option key={i} value={m}>{m}</option>
+              <option key={i} value={m}>{this._getDisplayText(m)}</option>
             ))}
           </FormControl>
         </FormGroup>