Plan a trip:
@@ -47,8 +55,11 @@ function MapPopup ({
)
}
-const mapStateToProps = (state, ownProps) => {
- return {zoom: state.otp.config.map.initZoom}
+const mapStateToProps = (state: {
+ // FIXME: properly type
+ otp: { config: { map: { initZoom: number } } }
+}) => {
+ return { zoom: state.otp.config.map.initZoom }
}
const mapDispatchToProps = {
diff --git a/lib/components/narrative/default/default-itinerary.js b/lib/components/narrative/default/default-itinerary.js
index 674340da7..1f74183ab 100644
--- a/lib/components/narrative/default/default-itinerary.js
+++ b/lib/components/narrative/default/default-itinerary.js
@@ -1,3 +1,6 @@
+// This is a large file being touched by open PRs. It should be typescripted
+// in a separate PR.
+/* eslint-disable */
import coreUtils from '@opentripplanner/core-utils'
import React from 'react'
import {
@@ -26,7 +29,7 @@ import Icon from '../../util/icon'
import { FlexIndicator } from './flex-indicator'
import ItinerarySummary from './itinerary-summary'
-const { isBicycle, isMicromobility, isTransit } = coreUtils.itinerary
+const { isBicycle, isMicromobility, isTransit, isFlex, isOptional, isContinuousDropoff } = coreUtils.itinerary
// Styled components
const LegIconWrapper = styled.div`
@@ -58,7 +61,7 @@ const DetailsHint = styled.div`
/**
* Obtains the description of an itinerary in the given locale.
*/
-function ItineraryDescription ({ itinerary }) {
+function ItineraryDescription({ itinerary }) {
let primaryTransitDuration = 0
let accessModeId = 'walk'
let transitMode
@@ -169,10 +172,7 @@ class DefaultItinerary extends NarrativeItinerary {
_onMouseLeave = () => {
const { index, setVisibleItinerary, visibleItinerary } = this.props
- if (
- typeof setVisibleItinerary === 'function' &&
- visibleItinerary === index
- ) {
+ if (typeof setVisibleItinerary === 'function' && visibleItinerary === index) {
setVisibleItinerary({ index: null })
}
}
@@ -189,7 +189,7 @@ class DefaultItinerary extends NarrativeItinerary {
return false
}
- render () {
+ render() {
const {
accessibilityScoreGradationMap,
active,
diff --git a/lib/components/narrative/default/flex-indicator.js b/lib/components/narrative/default/flex-indicator.tsx
similarity index 70%
rename from lib/components/narrative/default/flex-indicator.js
rename to lib/components/narrative/default/flex-indicator.tsx
index c4cdaa356..678495990 100644
--- a/lib/components/narrative/default/flex-indicator.js
+++ b/lib/components/narrative/default/flex-indicator.tsx
@@ -11,14 +11,24 @@ import Icon from '../../util/icon'
export const FLEX_COLOR = '#FA6400'
const FLEX_COLOR_LIGHT = tinycolor(FLEX_COLOR).lighten(40).toHexString()
-const FlexNotice = ({ faKey, showText, text }) => (
+// FIXME: type once the support-gtfs-flex branch is merged
+// eslint-disable-next-line react/prop-types
+const FlexNotice = ({
+ faKey,
+ showText,
+ text
+}: {
+ faKey: string
+ showText: boolean
+ text: string | React.ReactElement
+}) => (
<>
-
+
{showText &&
{text}
}
)
-const FlexIndicatorWrapper = styled.div`
+const FlexIndicatorWrapper = styled.div<{ shrink: boolean }>`
background: ${FLEX_COLOR_LIGHT};
border-bottom-right-radius: 8px;
border-top-right-radius: 8px;
@@ -73,26 +83,41 @@ const FlexIndicatorWrapper = styled.div`
}
`
-export const FlexIndicator = ({ isCallAhead, isContinuousDropoff, phoneNumber, shrink }) => (
+export const FlexIndicator = ({
+ isCallAhead,
+ isContinuousDropoff,
+ phoneNumber,
+ shrink
+}: {
+ isCallAhead: boolean
+ isContinuousDropoff: boolean
+ phoneNumber: string
+ shrink: boolean
+}): React.ReactElement => (
{!shrink && (
-
+
)}
{isCallAhead && (
}
+ text={
+
+ }
/>
)}
{/* Only show continuous dropoff message if call ahead message isn't shown */}
{isContinuousDropoff && !isCallAhead && (
}
+ text={}
/>
)}
diff --git a/lib/components/narrative/default/tnc-leg.js b/lib/components/narrative/default/tnc-leg.js
index 721d25b9d..642cab70d 100644
--- a/lib/components/narrative/default/tnc-leg.js
+++ b/lib/components/narrative/default/tnc-leg.js
@@ -13,60 +13,85 @@ const { toSentenceCase } = coreUtils.itinerary
const { formatDuration } = coreUtils.time
const { isMobile } = coreUtils.ui
+const defaultTncRideTypes = {
+ LYFT: 'lyft',
+ UBER: 'a6eef2e1-c99a-436f-bde9-fefb9181c0b0'
+}
+
class TransportationNetworkCompanyLeg extends Component {
static propTypes = {
+ LYFT_CLIENT_ID: PropTypes.string,
+ UBER_CLIENT_ID: PropTypes.string,
+ // eslint-disable-next-line sort-keys
leg: PropTypes.object,
legMode: PropTypes.object
}
state = {}
- render () {
+ render() {
const { leg, legMode, LYFT_CLIENT_ID, UBER_CLIENT_ID } = this.props
const universalLinks = {
- 'LYFT': `https://lyft.com/ride?id=${defaultTncRideTypes['LYFT']}&partner=${LYFT_CLIENT_ID}&pickup[latitude]=${leg.from.lat}&pickup[longitude]=${leg.from.lon}&destination[latitude]=${leg.to.lat}&destination[longitude]=${leg.to.lon}`,
- 'UBER': `https://m.uber.com/${isMobile() ? 'ul/' : ''}?client_id=${UBER_CLIENT_ID}&action=setPickup&pickup[latitude]=${leg.from.lat}&pickup[longitude]=${leg.from.lon}&pickup[nickname]=${encodeURI(leg.from.name)}&dropoff[latitude]=${leg.to.lat}&dropoff[longitude]=${leg.to.lon}&dropoff[nickname]=${encodeURI(leg.to.name)}`
+ LYFT: `https://lyft.com/ride?id=${defaultTncRideTypes.LYFT}&partner=${LYFT_CLIENT_ID}&pickup[latitude]=${leg.from.lat}&pickup[longitude]=${leg.from.lon}&destination[latitude]=${leg.to.lat}&destination[longitude]=${leg.to.lon}`,
+ UBER: `https://m.uber.com/${
+ isMobile() ? 'ul/' : ''
+ }?client_id=${UBER_CLIENT_ID}&action=setPickup&pickup[latitude]=${
+ leg.from.lat
+ }&pickup[longitude]=${leg.from.lon}&pickup[nickname]=${encodeURI(
+ leg.from.name
+ )}&dropoff[latitude]=${leg.to.lat}&dropoff[longitude]=${
+ leg.to.lon
+ }&dropoff[nickname]=${encodeURI(leg.to.name)}`
}
const { tncData } = leg
return (
* estimated travel time does not account for traffic.
+ target={isMobile() ? '_self' : '_blank'}
+ >
Book Ride
- {tncData && tncData.estimatedArrival
- ?
ETA for a driver: {formatDuration(tncData.estimatedArrival)}
- :
Could not obtain eta estimate from {toSentenceCase(legMode.label)}!
- }
+ {tncData && tncData.estimatedArrival ? (
+
ETA for a driver: {formatDuration(tncData.estimatedArrival)}
+ ) : (
+
+ Could not obtain eta estimate from {toSentenceCase(legMode.label)}!
+
+ )}
{/* tncData && tncData.travelDuration &&
Estimated drive time: {formatDuration(tncData.travelDuration)}
*/}
- {tncData && tncData.minCost
- ?
Estimated cost: {
- `${currencyFormatter.format(tncData.minCost, { code: tncData.currency })} - ${currencyFormatter.format(tncData.maxCost, { code: tncData.currency })}`
- }
- :
Could not obtain ride estimate from {toSentenceCase(legMode.label)}!
}
- }
+ {tncData && tncData.minCost ? (
+
+ Estimated cost:{' '}
+ {`${currencyFormatter.format(tncData.minCost, {
+ code: tncData.currency
+ })} - ${currencyFormatter.format(tncData.maxCost, {
+ code: tncData.currency
+ })}`}
+
+ ) : (
+
+ Could not obtain ride estimate from {toSentenceCase(legMode.label)}!
+
+ )}
)
}
}
-const defaultTncRideTypes = {
- 'LYFT': 'lyft',
- 'UBER': 'a6eef2e1-c99a-436f-bde9-fefb9181c0b0'
-}
-
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
const { LYFT_CLIENT_ID, UBER_CLIENT_ID } = state.otp.config
return {
- companies: state.otp.currentQuery.companies,
LYFT_CLIENT_ID,
- tncData: state.otp.tnc,
- UBER_CLIENT_ID
+ UBER_CLIENT_ID,
+ // eslint-disable-next-line sort-keys
+ companies: state.otp.currentQuery.companies,
+ tncData: state.otp.tnc
}
}
@@ -75,4 +100,7 @@ const mapDispatchToProps = {
getTransportationNetworkCompanyRideEstimate
}
-export default connect(mapStateToProps, mapDispatchToProps)(TransportationNetworkCompanyLeg)
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(TransportationNetworkCompanyLeg)
diff --git a/lib/components/narrative/narrative-itineraries-errors.js b/lib/components/narrative/narrative-itineraries-errors.tsx
similarity index 56%
rename from lib/components/narrative/narrative-itineraries-errors.js
rename to lib/components/narrative/narrative-itineraries-errors.tsx
index 555399107..786e4f30b 100644
--- a/lib/components/narrative/narrative-itineraries-errors.js
+++ b/lib/components/narrative/narrative-itineraries-errors.tsx
@@ -1,9 +1,10 @@
import { getCompanyIcon } from '@opentripplanner/icons/lib/companies'
import { useIntl } from 'react-intl'
+import React from 'react'
import styled from 'styled-components'
-import Icon from '../util/icon'
import { getErrorMessage } from '../../util/state'
+import Icon from '../util/icon'
const IssueContainer = styled.div`
border-top: 1px solid grey;
@@ -23,10 +24,19 @@ const IssueContents = styled.div`
text-align: left;
`
-export default function NarrativeItinerariesErrors ({ errors }) {
+export default function NarrativeItinerariesErrors({
+ errors
+}: {
+ // FIXME: what are these types
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ errorMessages: any
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ errors: any
+}): JSX.Element {
const intl = useIntl()
- return errors.map((error, idx) => {
- let icon =
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ return errors.map((error: { network: any }, idx: number) => {
+ let icon =
if (error.network) {
const CompanyIcon = getCompanyIcon(error.network)
// check if company icon exists to avoid rendering undefined
@@ -36,12 +46,8 @@ export default function NarrativeItinerariesErrors ({ errors }) {
}
return (
-
- {icon}
-
-
- {getErrorMessage(error, intl)}
-
+ {icon}
+ {getErrorMessage(error, intl)}
)
})
diff --git a/lib/components/narrative/narrative-itineraries-header.js b/lib/components/narrative/narrative-itineraries-header.js
deleted file mode 100644
index 9f0548505..000000000
--- a/lib/components/narrative/narrative-itineraries-header.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import styled from 'styled-components'
-import { FormattedMessage, useIntl } from 'react-intl'
-
-import Icon from '../util/icon'
-
-import PlanFirstLastButtons from './plan-first-last-buttons'
-import SaveTripButton from './save-trip-button'
-
-const IssueButton = styled.button`
- background-color: #ECBE03;
- border: none;
- border-radius: 5px;
- display: inline-block;
- font-size: 12px;
- padding: 2px 4px;
-`
-
-export default function NarrativeItinerariesHeader ({
- errors,
- itineraries,
- itineraryIsExpanded,
- onSortChange,
- onSortDirChange,
- onToggleShowErrors,
- onViewAllOptions,
- pending,
- showingErrors,
- sort
-}) {
- const intl = useIntl()
-
- return (
-
- {(itineraryIsExpanded || showingErrors)
- ? <>
-
- {itineraryIsExpanded && (
- // marginLeft: auto is a way of making something "float right"
- // within a flex container
- // see https://stackoverflow.com/a/36182782/269834
-
-
-
- )}
-
- : <>
-
-
-
-
- {errors.length > 0 && (
-
-
-
-
-
-
- )}
-
-
-
-
-
-
-
- }
-
- )
-}
diff --git a/lib/components/narrative/narrative-itineraries-header.tsx b/lib/components/narrative/narrative-itineraries-header.tsx
new file mode 100644
index 000000000..f98f7cc65
--- /dev/null
+++ b/lib/components/narrative/narrative-itineraries-header.tsx
@@ -0,0 +1,155 @@
+import { FormattedMessage, useIntl } from 'react-intl'
+import React from 'react'
+import styled from 'styled-components'
+
+import Icon from '../util/icon'
+
+import PlanFirstLastButtons from './plan-first-last-buttons'
+import SaveTripButton from './save-trip-button'
+
+const IssueButton = styled.button`
+ background-color: #ecbe03;
+ border: none;
+ border-radius: 5px;
+ display: inline-block;
+ font-size: 12px;
+ padding: 2px 4px;
+`
+
+export default function NarrativeItinerariesHeader({
+ errors,
+ itineraries,
+ itineraryIsExpanded,
+ onSortChange,
+ onSortDirChange,
+ onToggleShowErrors,
+ onViewAllOptions,
+ pending,
+ showingErrors,
+ sort
+}: {
+ errors: unknown[]
+ itineraries: unknown[]
+ itineraryIsExpanded: boolean
+ onSortChange: () => void
+ onSortDirChange: () => void
+ onToggleShowErrors: () => void
+ onViewAllOptions: () => void
+ pending: boolean
+ showingErrors: boolean
+ sort: { direction: string; type: string }
+}): JSX.Element {
+ const intl = useIntl()
+
+ return (
+
+ {itineraryIsExpanded || showingErrors ? (
+ <>
+
+ {itineraryIsExpanded && (
+ // marginLeft: auto is a way of making something "float right"
+ // within a flex container
+ // see https://stackoverflow.com/a/36182782/269834
+
+
+
+ )}
+
+ ) : (
+ <>
+
+
+
+
+ {errors.length > 0 && (
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+ )}
+
+ )
+}
diff --git a/lib/components/narrative/narrative-itinerary.js b/lib/components/narrative/narrative-itinerary.js
index dd51139ba..10d8be9b4 100644
--- a/lib/components/narrative/narrative-itinerary.js
+++ b/lib/components/narrative/narrative-itinerary.js
@@ -1,4 +1,6 @@
-import { Component } from 'react'
+/* eslint-disable react/require-render-return */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class NarrativeItinerary extends Component {
@@ -22,13 +24,13 @@ export default class NarrativeItinerary extends Component {
if (onClick) {
onClick()
} else if (!active) {
- setActiveItinerary && setActiveItinerary({index})
+ setActiveItinerary && setActiveItinerary({ index })
} else {
- setActiveItinerary && setActiveItinerary({index: null})
+ setActiveItinerary && setActiveItinerary({ index: null })
}
}
- render () {
+ render() {
throw new Error('render() called on abstract class NarrativeItinerary')
}
}
diff --git a/lib/components/narrative/tabbed-itineraries.js b/lib/components/narrative/tabbed-itineraries.js
index c523c343c..e6fa0cb16 100644
--- a/lib/components/narrative/tabbed-itineraries.js
+++ b/lib/components/narrative/tabbed-itineraries.js
@@ -1,142 +1,57 @@
+// TODO: typescript
+/* eslint-disable react/prop-types */
+import { Button } from 'react-bootstrap'
+import { connect } from 'react-redux'
+import { FormattedMessage, FormattedNumber } from 'react-intl'
import coreUtils from '@opentripplanner/core-utils'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
-import { Button } from 'react-bootstrap'
-import { FormattedMessage, FormattedNumber } from 'react-intl'
-import { connect } from 'react-redux'
import styled from 'styled-components'
import * as narrativeActions from '../../actions/narrative'
import { ComponentContext } from '../../util/contexts'
-import { getTimeFormat } from '../../util/i18n'
import { getActiveSearch, getRealtimeEffects } from '../../util/state'
+import { getTimeFormat } from '../../util/i18n'
import FormattedDuration from '../util/formatted-duration'
import Icon from '../util/icon'
import { FLEX_COLOR } from './default/flex-indicator'
-const { calculateFares, calculatePhysicalActivity, getTimeZoneOffset } = coreUtils.itinerary
+const { calculateFares, calculatePhysicalActivity, getTimeZoneOffset } =
+ coreUtils.itinerary
const Bullet = styled.span`
::before {
- content: "•";
+ content: '•';
margin: 0 0.25em;
}
`
-class TabbedItineraries extends Component {
- static propTypes = {
- activeItinerary: PropTypes.number,
- itineraries: PropTypes.array,
- pending: PropTypes.bool,
- setActiveItinerary: PropTypes.func,
- setActiveLeg: PropTypes.func,
- setActiveStep: PropTypes.func,
- setUseRealtimeResponse: PropTypes.func,
- useRealtime: PropTypes.bool
- }
-
- static contextType = ComponentContext
-
- _toggleRealtimeItineraryClick = (e) => {
- const { setUseRealtimeResponse, useRealtime } = this.props
- setUseRealtimeResponse({ useRealtime: !useRealtime })
- }
-
- render () {
- const {
- activeItinerary,
- currency,
- defaultFareKey,
- itineraries,
- realtimeEffects,
- setActiveItinerary,
- timeFormat,
- useRealtime,
- ...itineraryBodyProps
- } = this.props
- const { ItineraryBody, LegIcon } = this.context
-
- if (!itineraries) return null
-
- /* TODO: should this be moved? */
- const showRealtimeAnnotation =
- realtimeEffects.isAffectedByRealtimeData && (
- realtimeEffects.exceedsThreshold ||
- realtimeEffects.routesDiffer ||
- !useRealtime
- )
- return (
-
-
- {itineraries.map((itinerary, index) => {
- return (
-
- )
- })}
-
-
- {/*
- */}
-
- {/* Show active itin if itineraries exist and active itin is defined. */}
- {(itineraries.length > 0 && activeItinerary >= 0)
- ? (
-
- )
- : null
- }
-
-
- )
- }
-}
-
class TabButton extends Component {
_onClick = () => {
- const {index, onClick} = this.props
+ const { index, onClick } = this.props
// FIXME: change signature once actions resolved with otp-ui
onClick(index)
}
- render () {
- const {currency, defaultFareKey, index, isActive, itinerary} = this.props
+ render() {
+ const { currency, defaultFareKey, index, isActive, itinerary } = this.props
const timezoneOffset = getTimeZoneOffset(itinerary)
const classNames = ['tab-button', 'clear-button-formatting']
const { caloriesBurned } = calculatePhysicalActivity(itinerary)
- const {
- maxTNCFare,
- minTNCFare,
- transitFares
- } = calculateFares(itinerary, true)
+ const { maxTNCFare, minTNCFare, transitFares } = calculateFares(
+ itinerary,
+ true
+ )
// TODO: support non-USD
- const transitFare = (transitFares?.[defaultFareKey] || transitFares.regular)?.transitFare || 0
+ const transitFare =
+ (transitFares?.[defaultFareKey] || transitFares.regular)?.transitFare || 0
const minTotalFare = minTNCFare * 100 + transitFare
const startTime = itinerary.startTime + timezoneOffset
const endTime = itinerary.endTime + timezoneOffset
- const mustCallAhead = itinerary.legs.some(coreUtils.itinerary.isReservationRequired)
+ const mustCallAhead = itinerary.legs.some(
+ coreUtils.itinerary.isReservationRequired
+ )
if (isActive) classNames.push('selected')
return (
@@ -145,26 +60,29 @@ class TabButton extends Component {
key={`tab-button-${index}`}
onClick={this._onClick}
>
-
- {mustCallAhead && }
+
+ {mustCallAhead && (
+
+ )}
-
- {mustCallAhead &&
-
- }
+
+ {mustCallAhead && (
+
+
+
+ )}
{/* The itinerary duration in hrs/mins */}
-
{/* The duration as a time range */}
0 && (
<>
minTNCFare,
minTotalFare: (
)
@@ -193,14 +113,16 @@ class TabButton extends Component {
)}
-
{/* The 'X tranfers' line, if applicable */}
-
+
@@ -208,9 +130,93 @@ class TabButton extends Component {
}
}
+class TabbedItineraries extends Component {
+ static propTypes = {
+ activeItinerary: PropTypes.number,
+ itineraries: PropTypes.array,
+ pending: PropTypes.bool,
+ setActiveItinerary: PropTypes.func,
+ setActiveLeg: PropTypes.func,
+ setActiveStep: PropTypes.func,
+ setUseRealtimeResponse: PropTypes.func,
+ useRealtime: PropTypes.bool
+ }
+
+ static contextType = ComponentContext
+
+ _toggleRealtimeItineraryClick = (e) => {
+ const { setUseRealtimeResponse, useRealtime } = this.props
+ setUseRealtimeResponse({ useRealtime: !useRealtime })
+ }
+
+ render() {
+ const {
+ activeItinerary,
+ currency,
+ defaultFareKey,
+ itineraries,
+ realtimeEffects,
+ setActiveItinerary,
+ timeFormat,
+ useRealtime,
+ ...itineraryBodyProps
+ } = this.props
+ const { ItineraryBody, LegIcon } = this.context
+
+ if (!itineraries) return null
+
+ /* TODO: should this be moved? */
+ const showRealtimeAnnotation =
+ realtimeEffects.isAffectedByRealtimeData &&
+ (realtimeEffects.exceedsThreshold ||
+ realtimeEffects.routesDiffer ||
+ !useRealtime)
+ return (
+
+
+ {itineraries.map((itinerary, index) => {
+ return (
+
+ )
+ })}
+
+
+ {/*
+ */}
+
+ {/* Show active itin if itineraries exist and active itin is defined. */}
+ {itineraries.length > 0 && activeItinerary >= 0 ? (
+
+ ) : null}
+
-
+
)
} else {
// Show an error indication when
// - monitoredTrip.tripName is not blank and that tripName is not already used.
// - no day is selected (show a combined error indication).
- const errorStates = getErrorStates(this.props)
+ // FIXME: type getErrorStates
+ const errorStates: Record = getErrorStates(
+ this.props
+ )
- let monitoredDaysValidationState = null
- ALL_DAYS.forEach(day => {
+ let monitoredDaysValidationState: errorStates | null = null
+ ALL_DAYS.forEach((day) => {
if (!monitoredDaysValidationState) {
monitoredDaysValidationState = errorStates[day]
}
@@ -126,25 +163,22 @@ class TripBasicsPane extends Component {
{/* TODO: This component does not block navigation on reload or using the back button.
This will have to be done at a higher level. See #376 */}
-
+
{/* Do not show trip status when saving trip for the first time
(it doesn't exist in backend yet). */}
{!isCreating &&
}
-
+
-
+
{/* onBlur, onChange, and value are passed automatically. */}
-
+
{errors.tripName && (
@@ -155,55 +189,70 @@ class TripBasicsPane extends Component {
-
+
- {ALL_DAYS.map(day => {
- const isDayDisabled = itineraryExistence && !itineraryExistence[day].valid
- const boxClass = isDayDisabled ? 'alert-danger' : (monitoredTrip[day] ? 'bg-primary' : '')
+ {ALL_DAYS.map((day) => {
+ const isDayDisabled =
+ itineraryExistence && !itineraryExistence[day].valid
+ const boxClass = isDayDisabled
+ ? 'alert-danger'
+ : monitoredTrip[day]
+ ? 'bg-primary'
+ : ''
const notAvailableText = isDayDisabled
? intl.formatMessage(
- {id: 'components.TripBasicsPane.tripNotAvailableOnDay'},
- {repeatedDay: getFormattedDayOfWeekPlural(day, intl)}
- )
+ { id: 'components.TripBasicsPane.tripNotAvailableOnDay' },
+ { repeatedDay: getFormattedDayOfWeekPlural(day, intl) }
+ )
: null
return (
-
+
- { // Let users save an existing trip, even though it may not be available on some days.
+ {
+ // Let users save an existing trip, even though it may not be available on some days.
// TODO: improve checking trip availability.
- isDayDisabled && isCreating
- ?
- :
+ isDayDisabled && isCreating ? (
+
+ ) : (
+
+ )
}
)
})}
-
+
- {!isFixed && (
- <>
-
- {/* onBlur, onChange, and value are passed automatically. */}
-
-
- {errors.name && (
-
-
-
- )}
-
-
-
-
- {Object.keys(CUSTOM_PLACE_TYPES).map(k => {
- const { icon, type } = CUSTOM_PLACE_TYPES[k]
- const title = capitalizeFirst(getFormattedPlace(k, intl))
- return (
-
-
-
- )
- })}
-
-
-
- )}
-
-
- {/* For fixed places, just show the icon for place type instead of all inputs and selectors */}
- {isFixed && }
-
-
-
-
- {errors.address && (
-
-
-
- )}
-
-
-
+ {!isFixed && (
+ <>
+ {/* TODO: properly type errorStates
+ eslint-disable-next-line @typescript-eslint/ban-ts-comment //
+ @ts-ignore */}
+
+ {/* onBlur, onChange, and value are passed automatically. */}
+
+
+ {errors.name && (
+
+
+
+ )}
+
+
+
+ {Object.keys(CUSTOM_PLACE_TYPES).map((k) => {
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ const { icon, type } = CUSTOM_PLACE_TYPES[k]
+ const title = capitalizeFirst(getFormattedPlaces(k, intl))
+ return (
+
+
+
+ )
+ })}
+
+
+
+ )}
+
+
+ {/* For fixed places, just show the icon for place type instead of all inputs and selectors */}
+ {isFixed && }
+
+ {/* TODO: properly type errorStates
+ eslint-disable-next-line @typescript-eslint/ban-ts-comment //
+ @ts-ignore */}
+
+
+
+ {errors.address && (
+
+
+
+ )}
+
+
+
+
{/* header row */}
-
+
{/* route name */}
-
+
{/* next departure preview */}
{hasStopTimes && (
-
+
+