OTP-UI trip settings

lib/components/form/connected-settings-selector-panel.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+
+import { setQueryParam } from '../../actions/form'
+import { getShowUserSettings } from '../../util/state'
+
+import { StyledSettingsSelectorPanel } from './styled'
+import UserTripSettings from './user-trip-settings'
+
+// TODO: Button title should be bold when button is selected.
+
+class ConnectedSettingsSelectorPanel extends Component {
+  static propTypes = {
+    icons: PropTypes.object
+  }
+
+  render () {
+    const {
+      config,
+      icons,
+      query,
+      setQueryParam,
+      showUserSettings
+    } = this.props
+
+    return (
+      <div className='settings-selector-panel'>
+        <div className='modes-panel'>
+          {showUserSettings && <UserTripSettings />}
+
+          <StyledSettingsSelectorPanel
+            className='settings-selector-panel'
+            icons={icons}
+            queryParams={query}
+            supportedModes={config.modes}
+            supportedCompanies={config.companies}
+            onQueryParamChange={setQueryParam}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+// connect to redux store
+
+const mapStateToProps = (state, ownProps) => {
+  const { config, currentQuery } = state.otp
+  return {
+    query: currentQuery,
+    config,
+    showUserSettings: getShowUserSettings(state.otp)
+  }
+}
+
+const mapDispatchToProps = {
+  setQueryParam
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ConnectedSettingsSelectorPanel)

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

@@ -2,90 +2,11 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import styled from 'styled-components'
 import { getTimeFormat, getDateFormat } from '@opentripplanner/core-utils/lib/time'
-import { DateTimeSelector } from '@opentripplanner/trip-form'
-import * as TripFormClasses from '@opentripplanner/trip-form/lib/styled'
 
 import { setQueryParam } from '../../actions/form'
 
-// Styles for the DateTimeSelector.
-// TODO: Find a way to bring OTP CSS classes in here.
-// See for instance:
-// https://github.com/theKashey/styled-components-mixins
-// https://github.com/kingpowerclick/styled-bootstrap-mixins
-
-const StyledDateTimeSelector = styled(DateTimeSelector)`
-  margin: 0 -15px 20px;
-  ${TripFormClasses.DateTimeSelector.DateTimeRow} {
-    margin-top: 20px;
-  }
-
-  input {
-    -webkit-appearance: textfield;
-    -moz-appearance: textfield;
-    appearance: textfield;
-    background-color: #fff;
-    background-image: none;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    box-shadow: none;
-    color: #555;
-    font-family: inherit;
-    font-size: 16px;
-    height: 34px;
-    padding: 6px 12px;
-    text-align: center;
-    &.focused {
-      outline: 0;
-      border-color: #66afe9;
-      font-weight: 400;
-      box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-    }
-  }
-
-  button {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    background-color: #fff;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    color: #333;
-    cursor: pointer;
-    font-family: inherit;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 1.42857143;
-    outline-offset:-2px;
-    padding: 6px 12px;
-    text-align: center;
-    touch-action: manipulation;
-    user-select: none;
-    white-space: nowrap;
-
-    &.active {
-      background-color: #e6e6e6;
-      border-color: #adadad;
-      box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-      font-weight: 400;
-    }
-    &:hover {
-      background-color: #e6e6e6;
-      border-color: #adadad;
-    }
-    &.active {
-      background-color: #e6e6e6;
-      border-color: #adadad;
-      box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-      font-weight: 400;
-      &:hover {
-        background-color: #d4d4d4;
-        border-color: #8c8c8c;
-      }
-    }
-  }
-`
+import { StyledDateTimeSelector } from './styled'
 
 class DateTimeModal extends Component {
   static propTypes = {