feat(form): allow for custom configuration of exclusive modes

Author: evansiroky

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

@@ -241,6 +241,92 @@ class SettingsSelectorPanel extends Component {
     }
   }
 
+  _renderExclusiveAccessSelectors = () => {
+    const {config, mode, icons} = this.props
+    const {exclusiveModes} = config.modes
+    const modeHasTransit = hasTransit(mode)
+
+    if (!exclusiveModes) return null
+
+    // create an array of children to display within a mode-group-row
+    // at most 2 exclusive modes will be displayed side-by-side
+    const children = []
+    const spacer = (
+      <Col xs={2} style={{ height: 44 }}>&nbsp;</Col>
+    )
+
+    exclusiveModes.forEach((exclusiveMode, idx) => {
+      // add left padding for every evenly indexed exclusiveMode
+      if (idx % 2 === 0) {
+        children.push(spacer)
+      }
+
+      switch (exclusiveMode) {
+        case 'WALK':
+          children.push(
+            <Col xs={4}>
+              <ModeButton
+                enabled
+                active={mode === 'WALK'}
+                icons={icons}
+                mode={'WALK'}
+                height={36}
+                label={'Walk Only'}
+                inlineLabel
+                onClick={this._setWalkOnly}
+              />
+            </Col>
+          )
+          break
+        case 'BICYCLE':
+          children.push(
+            <Col xs={4}>
+              <ModeButton
+                enabled
+                active={!modeHasTransit && hasBike(mode)}
+                icons={icons}
+                mode={'BICYCLE'}
+                height={36}
+                label={'Bike Only'}
+                inlineLabel
+                onClick={this._setBikeOnly}
+              />
+            </Col>
+          )
+          break
+        case 'MICROMOBILITY':
+          children.push(
+            <Col xs={4}>
+              <ModeButton
+                enabled
+                active={!modeHasTransit && hasMicromobility(mode)}
+                icons={icons}
+                mode={'MICROMOBILITY'}
+                height={36}
+                label={'eScooter Only'}
+                inlineLabel
+                onClick={this._setMicromobilityOnly}
+              />
+            </Col>
+          )
+          break
+        default:
+          throw new Error(`Unsupported exclusive mode: ${exclusiveMode}`)
+      }
+
+      // add right padding for every odd indexed exclusiveMode
+      if (idx % 2 !== 0) {
+        children.push(spacer)
+      }
+    })
+
+    return (
+      <Row className='mode-group-row'>
+        {children}
+      </Row>
+    )
+  }
+
   render () {
     const { config, mode, icons, queryModes } = this.props
 
@@ -285,46 +371,7 @@ class SettingsSelectorPanel extends Component {
             })}
           </Row>
 
-          <Row className='mode-group-row'>
-            <Col xs={1} />
-            <Col xs={3}>
-              <ModeButton
-                enabled
-                active={mode === 'WALK'}
-                icons={icons}
-                mode={'WALK'}
-                height={36}
-                label={'Walk Only'}
-                inlineLabel
-                onClick={this._setWalkOnly}
-              />
-            </Col>
-            <Col xs={3}>
-              <ModeButton
-                enabled
-                active={!modeHasTransit && hasBike(mode)}
-                icons={icons}
-                mode={'BICYCLE'}
-                height={36}
-                label={'Bike Only'}
-                inlineLabel
-                onClick={this._setBikeOnly}
-              />
-            </Col>
-            <Col xs={4}>
-              <ModeButton
-                enabled
-                active={!modeHasTransit && hasMicromobility(mode)}
-                icons={icons}
-                mode={'MICROMOBILITY'}
-                height={36}
-                label={'eScooter Only'}
-                inlineLabel
-                onClick={this._setMicromobilityOnly}
-              />
-            </Col>
-            <Col xs={1} />
-          </Row>
+          {this._renderExclusiveAccessSelectors()}
 
           {/* Transit mode selector */}
           {/* <Row className='mode-group-row'>