fix(PatternStopPopup): prevent stop from appearing consecutively by disabling all entries where stop

Author: landonreed

lib/editor/components/map/PatternStopPopup.js

@@ -6,7 +6,12 @@ import MinuteSecondInput from '../MinuteSecondInput'
 
 export default class PatternStopPopup extends Component {
   render () {
+    console.log(this.props)
     const { stop, index, patternStop, activePattern, entityEdited, saveActiveEntity, setActiveEntity, feedSource, removeStopFromPattern, addStopToPattern, updateActiveEntity, controlPoints } = this.props
+    const {patternStops} = activePattern
+    const lastIndex = patternStops.length - 1
+    const addToEndDisabled = index >= lastIndex || patternStops[lastIndex].stopId === stop.id
+    const addToBeginningDisabled = index === 0 || patternStops[0].stopId === stop.id
     return (
       <div
         style={{minWidth: '240px'}} // keep button group from separating
@@ -49,7 +54,7 @@ export default class PatternStopPopup extends Component {
               >
                 <Button
                   bsStyle='success'
-                  disabled={index >= activePattern.patternStops.length - 2}
+                  disabled={addToEndDisabled}
                   onClick={(e) => {
                     addStopToPattern(activePattern, stop)
                   }}
@@ -59,23 +64,28 @@ export default class PatternStopPopup extends Component {
                 <Dropdown.Toggle bsStyle='success' />
                 <Dropdown.Menu style={{maxHeight: '200px', overflowY: 'scroll'}}>
                   <MenuItem
-                    disabled={index >= activePattern.patternStops.length - 1}
+                    disabled={addToEndDisabled}
                     value={activePattern.patternStops.length}
                     eventKey={activePattern.patternStops.length}>
                     Add to end (default)
                   </MenuItem>
-                  {activePattern.patternStops && activePattern.patternStops.map((stop, i) => {
+                  {activePattern.patternStops && activePattern.patternStops.map((s, i) => {
                     // addIndex is in "reverse" order
                     const addIndex = activePattern.patternStops.length - i
+                    const addAtIndexDisabled = (index >= addIndex - 2 && index < addIndex) ||
+                      (patternStops[addIndex - 2] && patternStops[addIndex - 2].stopId === stop.id) ||
+                      (patternStops[addIndex - 1] && patternStops[addIndex - 1].stopId === stop.id)
+                      // (patternStops[addIndex + 1] && patternStops[addIndex + 1].stopId === stop.id)
                     // skip MenuItem index is the same as the pattern stop index
-                    if (index === addIndex - 1) {
+                    if (index === addIndex - 1 || addIndex === 1) {
                       return null
                     }
                     // disable adding stop to current position or directly before/after current position
                     return (
                       <MenuItem
-                        disabled={index >= addIndex - 2 && index < addIndex}
+                        disabled={addAtIndexDisabled}
                         value={addIndex - 1}
+                        title={addAtIndexDisabled ? `Cannot have the same stop appear consecutively in list` : ''}
                         key={i}
                         eventKey={addIndex - 1}
                       >
@@ -84,7 +94,7 @@ export default class PatternStopPopup extends Component {
                     )
                   })}
                   <MenuItem
-                    disabled={index === 0}
+                    disabled={addToBeginningDisabled}
                     value={0}
                     eventKey={0}
                   >