import * as classNames from 'classnames' ; import * as React from 'react' ; import Action from './action' ; import { DEFAULT_OPTIONS , QueryOptions , State } from './datastore' ; import * as controls from './parameter-selectors' ; interface Props extends State { onChange ( which , newOptions ) : any ; handleAction ( action ) : any ; } export default class RoutingParameters extends React . Component < Props , { } > { constructor ( props ) { super ( props ) ; this . setModePref = this . setModePref . bind ( this ) ; } render ( ) { const props = this . props ; const options = { ... DEFAULT_OPTIONS , ... props . options } ; const options2 = { ... DEFAULT_OPTIONS , ... props . options2 } ; const set = ( field , transform = x => x ) => ( which , value ) => this . props . onChange ( which , { [ field ] : transform ( value ) } ) ; const obj = { mode : props . mode , options , options2 } ; const showBikeSpeed = props . options . travel_mode . indexOf ( 'BICYCLE' ) >= 0 || ( props . mode === 'compare-settings' && props . options2 . travel_mode . indexOf ( 'BICYCLE' ) >= 0 ) ; return ( < div className = { classNames ( 'routing-settings' , props . mode ) } > < SettingsRow { ... obj } field = "departure_time" component = { controls . TimeChooser } label = "Departure time" onSetValue = { set ( 'departure_time' ) } / > { showBikeSpeed ? ( < SettingsRow { ... obj } field = "bike_speed_kph" component = { controls . BikeSpeed } label = "Bike speed" onSetValue = { set ( 'bike_speed_kph' , Number ) } / > ) : null } < /div>); } setModePref ( which , value ) { const [ rail ] = value . split ( ',' ) . map ( Number ) ; this . props . onChange ( which , { rail_multiplier : rail , } ) ; } } interface SettingRowProps { label : string ; component : React . StatelessComponent < controls . SelectProps > ; field ? : keyof QueryOptions ; toValue ? : ( options : QueryOptions ) => string ; onSetValue : ( which : number , newValue : string ) => any ; mode : State [ 'mode' ] ; options : QueryOptions ; options2 : QueryOptions ; } const SettingsRow = props => { const getValue = ( options ) => props . field ? '' + options [ props . field ] : props . toValue ( options ) ; const value = getValue ( props . options ) ; const primary = React . createElement < controls . SelectProps > ( props . component , { value , onChange : v => props . onSetValue ( 1 , v ) , } ) ; return ( < div className = "row" > < span className = "label" > { props . label } < /span> { primary } < /div>); } ;