|
| 1 | +// @flow |
| 2 | + |
| 3 | +import Icon from '@conveyal/woonerf/components/icon' |
| 4 | +import React, {Component} from 'react' |
| 5 | +import { Button, Dropdown, MenuItem } from 'react-bootstrap' |
| 6 | + |
| 7 | +import * as stopStrategiesActions from '../../actions/map/stopStrategies' |
| 8 | + |
| 9 | +import type {GtfsStop, Pattern, PatternStop, Style} from '../../../types' |
| 10 | + |
| 11 | +type Props = { |
| 12 | + activePattern: Pattern, |
| 13 | + addStopToPattern: typeof stopStrategiesActions.addStopToPattern, |
| 14 | + index?: number, // current pattern stop index (if dropdown shown for current pattern stop) |
| 15 | + label?: string, |
| 16 | + patternStop?: PatternStop, // optional current pattern stop |
| 17 | + size?: string, |
| 18 | + stop: GtfsStop, |
| 19 | + style?: Style |
| 20 | +} |
| 21 | + |
| 22 | +const DISABLED_MESSAGE = 'Cannot have the same stop appear consecutively in list' |
| 23 | + |
| 24 | +/** |
| 25 | + * Dropdown button that adds a stop as a new pattern stop to the actively |
| 26 | + * selected pattern. |
| 27 | + */ |
| 28 | +export default class AddPatternStopDropdown extends Component<Props> { |
| 29 | + _addStop = (index?: number) => { |
| 30 | + const {activePattern, addStopToPattern, stop} = this.props |
| 31 | + addStopToPattern(activePattern, stop, index) |
| 32 | + } |
| 33 | + |
| 34 | + _matchesStopAtIndex = (index: number) => { |
| 35 | + const {activePattern, stop} = this.props |
| 36 | + const patternStopAtIndex = activePattern.patternStops[index] |
| 37 | + return patternStopAtIndex && patternStopAtIndex.stopId === stop.stop_id |
| 38 | + } |
| 39 | + |
| 40 | + _onAddToEnd = () => this._addStop() |
| 41 | + |
| 42 | + _onSelectStop = (key: number) => this._addStop(key) |
| 43 | + |
| 44 | + render () { |
| 45 | + const {activePattern, index, label, size, style} = this.props |
| 46 | + const {patternStops} = activePattern |
| 47 | + const lastIndex = patternStops.length - 1 |
| 48 | + // Check that first/last stop is not already set to this stop. |
| 49 | + let addToEndDisabled = this._matchesStopAtIndex(lastIndex) |
| 50 | + let addToBeginningDisabled = this._matchesStopAtIndex(0) |
| 51 | + // Also, disable end/beginning if the current pattern stop being viewed |
| 52 | + // occupies one of these positions. |
| 53 | + if (typeof index === 'number') { |
| 54 | + addToEndDisabled = addToEndDisabled || index >= lastIndex |
| 55 | + addToBeginningDisabled = addToBeginningDisabled || index === 0 |
| 56 | + } |
| 57 | + return ( |
| 58 | + <Dropdown |
| 59 | + id={`add-stop-dropdown`} |
| 60 | + pullRight |
| 61 | + onSelect={this._onSelectStop} |
| 62 | + style={style} |
| 63 | + > |
| 64 | + <Button |
| 65 | + bsSize={size} |
| 66 | + bsStyle='success' |
| 67 | + disabled={addToEndDisabled} |
| 68 | + title={addToEndDisabled ? DISABLED_MESSAGE : ''} |
| 69 | + onClick={this._onAddToEnd}> |
| 70 | + <Icon type='plus' /> {label} |
| 71 | + </Button> |
| 72 | + <Dropdown.Toggle |
| 73 | + bsSize={size} |
| 74 | + bsStyle='success' /> |
| 75 | + <Dropdown.Menu style={{maxHeight: '200px', overflowY: 'scroll'}}> |
| 76 | + <MenuItem |
| 77 | + disabled={addToEndDisabled} |
| 78 | + title={addToEndDisabled ? DISABLED_MESSAGE : ''} |
| 79 | + value={activePattern.patternStops.length} |
| 80 | + eventKey={activePattern.patternStops.length}> |
| 81 | + Add to end (default) |
| 82 | + </MenuItem> |
| 83 | + {activePattern.patternStops && activePattern.patternStops.map((s, i) => { |
| 84 | + // addIndex is in "reverse" order |
| 85 | + const addIndex = activePattern.patternStops.length - i |
| 86 | + let disableAdjacent = false |
| 87 | + // If showing for current pattern stop, do not allow adding as an |
| 88 | + // adjacent stop. |
| 89 | + if (typeof index === 'number') { |
| 90 | + disableAdjacent = (index >= addIndex - 2 && index < addIndex) |
| 91 | + } |
| 92 | + // Disable adding stop to current position or directly before/after |
| 93 | + // current position |
| 94 | + const addAtIndexDisabled = disableAdjacent || |
| 95 | + this._matchesStopAtIndex(addIndex - 2) || |
| 96 | + this._matchesStopAtIndex(addIndex - 1) |
| 97 | + // Skip MenuItem index is the same as the pattern stop index |
| 98 | + if (index === addIndex - 1 || addIndex === 1) { |
| 99 | + return null |
| 100 | + } |
| 101 | + return ( |
| 102 | + <MenuItem |
| 103 | + disabled={addAtIndexDisabled} |
| 104 | + value={addIndex - 1} |
| 105 | + title={addAtIndexDisabled ? DISABLED_MESSAGE : ''} |
| 106 | + key={i} |
| 107 | + eventKey={addIndex - 1}> |
| 108 | + {`Insert as stop #${addIndex}`} |
| 109 | + </MenuItem> |
| 110 | + ) |
| 111 | + })} |
| 112 | + <MenuItem |
| 113 | + disabled={addToBeginningDisabled} |
| 114 | + title={addToBeginningDisabled ? DISABLED_MESSAGE : ''} |
| 115 | + value={0} |
| 116 | + eventKey={0}> |
| 117 | + Add to beginning |
| 118 | + </MenuItem> |
| 119 | + </Dropdown.Menu> |
| 120 | + </Dropdown> |
| 121 | + ) |
| 122 | + } |
| 123 | +} |
0 commit comments