feat(form): Refactor settings-bar to match structure of date-time-preview

Author: David Emory

lib/actions/ui.js

@@ -4,34 +4,51 @@ import { Button } from 'react-bootstrap'
 
 class DateTimePreview extends Component {
   static propTypes = {
+    caret: PropTypes.string,
+    compressed: PropTypes.bool,
     date: PropTypes.string,
     departArrive: PropTypes.string,
     time: PropTypes.string,
     onClick: PropTypes.func
   }
 
   render () {
-    const { date, time, departArrive } = this.props
+    const { caret, date, time, departArrive } = this.props
 
     let timeStr
     if (departArrive === 'NOW') timeStr = 'Leave now'
     else if (departArrive === 'ARRIVE') timeStr = 'Arrive ' + time
     else if (departArrive === 'DEPART') timeStr = 'Depart ' + time
 
-    return (
-      <div className='date-time-preview'>
-        <div className='details'>
-          <i className='fa fa-calendar' /> {date}
-          <br />
-          <i className='fa fa-clock-o' /> {timeStr}
-        </div>
-        <div>
-          <Button className='change-button' onClick={this.props.onClick}>
-            Change
-          </Button>
-        </div>
+    const summary = (
+      <div className='details'>
+        <i className='fa fa-calendar' /> {date}
+        <br />
+        <i className='fa fa-clock-o' /> {timeStr}
+      </div>
+    )
+
+    const button = (
+      <div className='button-container'>
+        <Button className='change-button' onClick={this.props.onClick}>
+          Change {caret && <span> <i className={`fa fa-caret-${caret}`} /></span>}
+        </Button>
       </div>
     )
+
+    return this.props.compressed
+      ? /* 'compressed' layout -- button is below selected mode preview */ (
+        <div className='date-time-preview compressed'>
+          {summary}
+          {button}
+        </div>
+      ) : /* 'wide' layout -- button and selected mode preview are side-by-side  */ (
+        <div className='date-time-preview wide'>
+          {button}
+          {summary}
+          <div style={{ clear: 'both' }} />
+        </div>
+      )
   }
 }
 

lib/components/form/date-time-preview.js

@@ -27,29 +27,45 @@
   margin-right: 5px;
 }
 
-/* Settings Bar */
 
-.otp .settings-bar {
+
+/* Date/Time Preview */
+
+.otp .date-time-preview {
+  position: relative;
+}
+
+.otp .date-time-preview.compressed .summary {
+  text-align: center;
+}
+
+.otp .date-time-preview.wide .button-container {
+  float: right;
+}
+
+/* Settings Preview */
+
+.otp .settings-preview {
   position: relative;
 }
 
-.otp .settings-bar .selected-modes {
+.otp .settings-preview .selected-modes {
   font-size: 14px;
 }
 
-.otp .settings-bar.compressed .selected-modes {
+.otp .settings-preview.compressed .selected-modes {
   text-align: center;
 }
 
-.otp .settings-bar .selected-modes .some-selected .mode-icon {
+.otp .settings-preview .selected-modes .some-selected .mode-icon {
   display: inline-block;
   margin-right: 5px;
   width: 16px;
   height: 16px;
   fill: black;
 }
 
-.otp .settings-bar.wide .button-container {
+.otp .settings-preview.wide .button-container {
   float: right;
 }
 

lib/components/form/form.css

@@ -4,28 +4,22 @@ import { connect } from 'react-redux'
 
 import { getModeIcon } from '../../util/itinerary'
 
-import { setShowExtendedSettings } from '../../actions/ui'
-
-class SettingsBar extends Component {
+class SettingsPreview extends Component {
   static propTypes = {
     // component props
+    caret: PropTypes.string,
     compressed: PropTypes.bool,
     icons: PropTypes.object,
     showCaret: PropTypes.bool,
+    onClick: PropTypes.func,
 
     // application state
     modeGroups: PropTypes.array,
-    queryModes: PropTypes.array,
-    showExtendedSettings: PropTypes.bool,
-
-    // dispatch
-    setShowExtendedSettings: PropTypes.func
+    queryModes: PropTypes.array
   }
 
-  _onClick = () => this.props.setShowExtendedSettings({showExtendedSettings: !this.props.showExtendedSettings})
-
   render () {
-    const { icons, modeGroups, queryModes, showCaret, showExtendedSettings } = this.props
+    const { caret, icons, modeGroups, queryModes } = this.props
 
     let totalModeCount = 0
     modeGroups.forEach(g => { totalModeCount += g.modes.length })
@@ -52,23 +46,20 @@ class SettingsBar extends Component {
 
     const button = (
       <div className='button-container'>
-        <Button
-          className='settings-button'
-          onClick={this._onClick}
-        >Settings
-          {showCaret && <span> <i className={`fa fa-caret-${showExtendedSettings ? 'up' : 'down'}`} /></span>}
+        <Button className='settings-button' onClick={this.props.onClick}>
+          Settings {caret && <span> <i className={`fa fa-caret-${caret}`} /></span>}
         </Button>
       </div>
     )
 
     return this.props.compressed
       ? /* 'compressed' layout -- button is below selected mode preview */ (
-        <div className='settings-bar compressed'>
+        <div className='settings-preview compressed'>
           {selectedModes}
           {button}
         </div>
       ) : /* 'wide' layout -- button and selected mode preview are side-by-side  */ (
-        <div className='settings-bar wide'>
+        <div className='settings-preview wide'>
           {button}
           {selectedModes}
           <div style={{ clear: 'both' }} />
@@ -79,12 +70,11 @@ class SettingsBar extends Component {
 
 const mapStateToProps = (state, ownProps) => {
   return {
-    showExtendedSettings: state.otp.ui.showExtendedSettings,
     modeGroups: state.otp.config.modeGroups,
     queryModes: state.otp.currentQuery.mode.split(',')
   }
 }
 
-const mapDispatchToProps = {setShowExtendedSettings}
+const mapDispatchToProps = { }
 
-export default connect(mapStateToProps, mapDispatchToProps)(SettingsBar)
+export default connect(mapStateToProps, mapDispatchToProps)(SettingsPreview)

lib/components/form/settings-bar.js renamed to lib/components/form/settings-preview.js

@@ -7,7 +7,7 @@ import LocationField from './components/form/location-field'
 import ModeSelector from './components/form/mode-selector'
 import ModesPanel from './components/form/modes-panel'
 import PlanTripButton from './components/form/plan-trip-button'
-import SettingsBar from './components/form/settings-bar'
+import SettingsPreview from './components/form/settings-preview'
 import SettingsSelectorPanel from './components/form/settings-selector-panel'
 import SwitchButton from './components/form/switch-button'
 
@@ -53,7 +53,7 @@ export {
   ModeSelector,
   ModesPanel,
   PlanTripButton,
-  SettingsBar,
+  SettingsPreview,
   SettingsSelectorPanel,
   SwitchButton,
 

lib/index.js

@@ -44,9 +44,6 @@ function createOtpReducer (config, initialQuery) {
       bikeRental: {
         stations: []
       }
-    },
-    ui: {
-      showExtendedSettings: false
     }
   }
 
@@ -171,9 +168,6 @@ function createOtpReducer (config, initialQuery) {
       case 'ROUTES_AT_STOP_RESPONSE':
         return update(state, { transitIndex: { stops: { [action.payload.stopId]: { routes: { $set: action.payload.routes } } } } })
 
-      case 'SET_SHOW_EXTENDED_SETTINGS':
-        return update(state, { ui: { showExtendedSettings: { $set: action.payload.showExtendedSettings } } })
-
       default:
         return state
     }