OTP-UI Icons

custom-icons.js

@@ -0,0 +1,47 @@
+import {
+  ClassicBus,
+  ClassicGondola,
+  ClassicModeIcon,
+  Ferry,
+  LegIcon,
+  StandardGondola
+} from '@opentripplanner/icons'
+
+/**
+ * For more advanced users, you can replicate and customize components and
+ * observe the change in icons.
+ * - For LegIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-leg-icon.js
+ * - For ModeIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-mode-icon.js
+ * The example below shuffles some icons around from what you might normally
+ * expect for demonstration purposes.
+ */
+
+const CustomTransitIcon = Ferry
+const CustomRailIcon = ClassicGondola
+const CustomStreetcarIcon = StandardGondola
+const CustomBikeRentalIcon = ClassicBus
+
+export const CustomModeIcon = ({ mode, ...props }) => {
+  if (!mode) return null
+  switch (mode.toLowerCase()) {
+    // Place custom icons for each mode here.
+    case 'transit':
+      return <CustomTransitIcon {...props} />
+    case 'rail':
+      return <CustomRailIcon {...props} />
+    default:
+      return <ClassicModeIcon mode={mode} {...props} />
+  }
+}
+
+export const CustomLegIcon = ({ leg, ...props }) => {
+  if (
+    leg.routeLongName &&
+    leg.routeLongName.startsWith('MAX')
+  ) {
+    return <CustomStreetcarIcon />
+  } else if (leg.rentedBike) {
+    return <CustomBikeRentalIcon />
+  }
+  return <LegIcon leg={leg} ModeIcon={CustomModeIcon} {...props} />
+}

example.js

@@ -1,6 +1,7 @@
 // import this polyfill in order to make webapp compatible with IE 11
 import 'es6-math'
 
+import {ClassicLegIcon, ClassicModeIcon} from '@opentripplanner/icons'
 import { createHashHistory } from 'history'
 import { connectRouter, routerMiddleware } from 'connected-react-router'
 import React, { Component } from 'react'
@@ -9,7 +10,6 @@ import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
 import { Provider } from 'react-redux'
 import thunk from 'redux-thunk'
 import createLogger from 'redux-logger'
-
 // import Bootstrap Grid components for layout
 import { Navbar, Grid, Row, Col } from 'react-bootstrap'
 
@@ -22,10 +22,23 @@ import {
   AppMenu,
   createOtpReducer
 } from './lib'
-
 // load the OTP configuration
 import otpConfig from './config.yml'
 
+// Set useCustomIcons to true to override classic icons with the exports from
+// custom-icons.js
+const useCustomIcons = false
+
+// Define icon sets for modes.
+let MyLegIcon = ClassicLegIcon
+let MyModeIcon = ClassicModeIcon
+
+if (useCustomIcons) {
+  const CustomIcons = require('./custom-icons')
+  MyLegIcon = CustomIcons.CustomLegIcon
+  MyModeIcon = CustomIcons.CustomModeIcon
+}
+
 // create an initial query for demo/testing purposes
 const initialQuery = {
   from: {
@@ -78,7 +91,7 @@ class OtpRRExample extends Component {
         <Grid>
           <Row className='main-row'>
             <Col sm={6} md={4} className='sidebar'>
-              <DefaultMainPanel />
+              <DefaultMainPanel LegIcon={MyLegIcon} ModeIcon={MyModeIcon} />
             </Col>
             <Col sm={6} md={8} className='map-container'>
               <Map />
@@ -90,14 +103,20 @@ class OtpRRExample extends Component {
 
     /** mobile view **/
     const mobileView = (
-      <MobileMain map={(<Map />)} title={(<div className='navbar-title'>OpenTripPlanner</div>)} />
+      <MobileMain
+        LegIcon={MyLegIcon}
+        ModeIcon={MyModeIcon}
+        map={<Map />}
+        title={<div className='navbar-title'>OpenTripPlanner</div>}
+      />
     )
 
     /** the main webapp **/
     return (
       <ResponsiveWebapp
         desktopView={desktopView}
         mobileView={mobileView}
+        LegIcon={MyLegIcon}
       />
     )
   }

lib/components/app/default-main-panel.js

@@ -14,10 +14,11 @@ class DefaultMainPanel extends Component {
     const {
       activeSearch,
       currentQuery,
-      customIcons,
       itineraryClass,
       itineraryFooter,
+      LegIcon,
       mainPanelContent,
+      ModeIcon,
       showUserSettings
     } = this.props
     const showPlanTripButton = mainPanelContent === 'EDIT_DATETIME' ||
@@ -35,15 +36,16 @@ class DefaultMainPanel extends Component {
           paddingBottom: 15,
           overflow: 'auto'
         }}>
-          <DefaultSearchForm icons={customIcons} />
+          <DefaultSearchForm ModeIcon={ModeIcon} />
           {!activeSearch && !showPlanTripButton && showUserSettings &&
             <UserSettings />
           }
           <div className='desktop-narrative-container'>
             <NarrativeRoutingResults
               itineraryClass={itineraryClass}
               itineraryFooter={itineraryFooter}
-              customIcons={customIcons} />
+              LegIcon={LegIcon}
+            />
           </div>
         </div>
         {showPlanTripButton &&

lib/components/app/print-layout.js

@@ -1,4 +1,3 @@
-import { TriMetLegIcon } from '@opentripplanner/icons'
 import PrintableItinerary from '@opentripplanner/printable-itinerary'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
@@ -14,6 +13,7 @@ import { getActiveItinerary } from '../../util/state'
 class PrintLayout extends Component {
   static propTypes = {
     itinerary: PropTypes.object,
+    LegIcon: PropTypes.elementType.isRequired,
     parseQueryString: PropTypes.func
   }
 
@@ -52,24 +52,8 @@ class PrintLayout extends Component {
     root.removeAttribute('class')
   }
 
-  /**
-   * Use one of the customIcons if provided,
-   * (similar to @opentriplanner/trip-form/ModeIcon)
-   * otherwise, fall back on TriMetLegIcon.
-   * TODO: Combine all custom icon rendering in one place.
-   */
-  customLegIcon = icons => {
-    return function ({leg, props}) {
-      // Check if there is a custom icon (exact match required).
-      if (icons && leg.mode in icons) {
-        return icons[leg.mode]
-      }
-      return TriMetLegIcon({leg, props})
-    }
-  }
-
   render () {
-    const { config, customIcons, itinerary } = this.props
+    const { config, itinerary, LegIcon } = this.props
     return (
       <div className='otp print-layout'>
         {/* The header bar, including the Toggle Map and Print buttons */}
@@ -99,7 +83,7 @@ class PrintLayout extends Component {
             <PrintableItinerary
               config={config}
               itinerary={itinerary}
-              LegIcon={this.customLegIcon(customIcons)}
+              LegIcon={LegIcon}
             />
             <TripDetails itinerary={itinerary} />
           </>

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

@@ -12,13 +12,13 @@ import UserTripSettings from './user-trip-settings'
 
 class ConnectedSettingsSelectorPanel extends Component {
   static propTypes = {
-    icons: PropTypes.object
+    ModeIcon: PropTypes.elementType.isRequired
   }
 
   render () {
     const {
       config,
-      icons,
+      ModeIcon,
       query,
       setQueryParam,
       showUserSettings
@@ -30,8 +30,7 @@ class ConnectedSettingsSelectorPanel extends Component {
           {showUserSettings && <UserTripSettings />}
 
           <StyledSettingsSelectorPanel
-            className='settings-selector-panel'
-            icons={icons}
+            ModeIcon={ModeIcon}
             queryParams={query}
             supportedModes={config.modes}
             supportedCompanies={config.companies}

lib/components/form/default-search-form.js

@@ -4,16 +4,14 @@ import React, { Component } from 'react'
 import LocationField from './connected-location-field'
 import TabbedFormPanel from './tabbed-form-panel'
 import SwitchButton from './switch-button'
-import defaultIcons from '../icons'
 
 export default class DefaultSearchForm extends Component {
   static propTypes = {
-    icons: PropTypes.object,
-    mobile: PropTypes.bool
+    mobile: PropTypes.bool,
+    ModeIcon: PropTypes.elementType.isRequired
   }
 
   static defaultProps = {
-    icons: defaultIcons,
     showFrom: true,
     showTo: true
   }
@@ -27,7 +25,7 @@ export default class DefaultSearchForm extends Component {
   }
 
   render () {
-    const { icons, mobile } = this.props
+    const { mobile, ModeIcon } = this.props
     const actionText = mobile ? 'tap' : 'click'
 
     return (
@@ -50,7 +48,7 @@ export default class DefaultSearchForm extends Component {
           </div>
         </div>
 
-        <TabbedFormPanel icons={icons} />
+        <TabbedFormPanel ModeIcon={ModeIcon} />
       </div>
     )
   }

lib/components/form/settings-preview.js

@@ -10,7 +10,6 @@ class SettingsPreview extends Component {
     caret: PropTypes.string,
     compressed: PropTypes.bool,
     editButtonText: PropTypes.element,
-    icons: PropTypes.object,
     showCaret: PropTypes.bool,
     onClick: PropTypes.func,