contrib/assets/IconSwitch: add reusable icon switch component and add…

… to project overview toggles
liqd · Nov 25, 2021 · b0cdbab · b0cdbab
1 parent 2cce34d
commit b0cdbab
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 26 deletions.
diff --git a/meinberlin/apps/budgeting/assets/BudgetingProposalList.jsx b/meinberlin/apps/budgeting/assets/BudgetingProposalList.jsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { BudgetingProposalListItem } from './BudgetingProposalListItem'
 import { Pagination } from './Pagination'
-import MapListSwitch from '../../contrib/assets/MapListSwitch'
 
 export const BudgetingProposalList = (props) => {
   const [data, setData] = useState([])
@@ -34,7 +33,6 @@ export const BudgetingProposalList = (props) => {
   return (
     <div className="l-wrapper">
       <div className="l-center-8">
-        <MapListSwitch />
         <ul className="u-list-reset">
           {data.map((proposal, idx) =>
             <BudgetingProposalListItem

diff --git a/meinberlin/apps/contrib/assets/IconSwitch.jsx b/meinberlin/apps/contrib/assets/IconSwitch.jsx
@@ -0,0 +1,60 @@
+import React from 'react'
+
+export const IconSwitch = (props) => {
+  const {
+    activeClass,
+    inactiveClass,
+    startIconClass,
+    endIconClass,
+    startText,
+    endText,
+    startID,
+    endID,
+    startAria,
+    endAria,
+    showStartObject,
+    showEndObject,
+    displayStartObject
+  } = props
+
+  return (
+    <div>
+      <div className="switch-btn-group-container">
+        <div className="btn-group switch-btn-group" role="group">
+          <label
+            htmlFor={startID}
+            className={!displayStartObject ? activeClass : inactiveClass}
+          >
+            <input
+              className="radio__input"
+              type="radio"
+              value={startID}
+              id={startID}
+              aria-label={startAria}
+              onClick={showStartObject}
+              onKeyDown={showStartObject}
+            />
+            <i className={startIconClass} />
+            <span>{startText}</span>
+          </label>
+          <label
+            htmlFor={endID}
+            className={displayStartObject ? activeClass : inactiveClass}
+          >
+            <input
+              className="radio__input"
+              type="radio"
+              id={endID}
+              value={endID}
+              aria-label={endAria}
+              onClick={showEndObject}
+              onKeyDown={showEndObject}
+            />
+            <i className={endIconClass} />
+            <span>{endText}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/meinberlin/apps/plans/assets/Toggles.jsx b/meinberlin/apps/plans/assets/Toggles.jsx
@@ -1,5 +1,6 @@
-/* global django */
-const React = require('react')
+import React from 'react'
+import django from 'django'
+import { IconSwitch } from '../../contrib/assets/IconSwitch'
 
 class Toggles extends React.Component {
   clickStatusButton () {
@@ -122,28 +123,21 @@ class Toggles extends React.Component {
                 >{this.titleSearchButtonString()} <i className="fa fa-times" />
                 </button>}
             </div>
-            <div className="switch-btn-group-container">
-              <div className="btn-group switch-btn-group" role="group">
-                <switch
-                  className={!this.props.displayMap ? 'btn btn--light switch--btn active' : 'btn btn--light'}
-                  onClick={this.props.showList} // eslint-disable-line react/jsx-handler-names
-                  htmlFor="show_list"
-                >
-                  <input className="radio__input" type="radio" value="list" id="show_list" aria-label={django.gettext('show list')} />
-                  <i className="fa fa-list" />
-                  <span> {django.gettext('List')}</span>
-                </switch>
-                <switch
-                  className={this.props.displayMap ? 'btn btn--light switch--btn active' : 'btn btn--light'}
-                  onClick={this.props.showMap} // eslint-disable-line react/jsx-handler-names
-                  htmlFor="show_map"
-                >
-                  <input className="radio__input" type="radio" value="map" id="show_map" aria-label={django.gettext('show map')} />
-                  <i className="fa fa-map" />
-                  <span> {django.gettext('Map')}</span>
-                </switch>
-              </div>
-            </div>
+            <IconSwitch
+              activeClass="btn btn--icon btn--light switch--btn active"
+              inactiveClass="btn btn--icon btn--light"
+              startText={django.gettext('List')}
+              endText={django.gettext('Map')}
+              startAria={django.gettext('show list')}
+              endAria={django.gettext('show map')}
+              startIconClass="fa fa-list"
+              endIconClass="fa fa-map"
+              startID="show_list"
+              endID="show_map"
+              displayStartObject={this.props.displayMap}
+              showStartObject={this.props.showList}
+              showEndObject={this.props.showMap}
+            />
           </div>
         </div>
       )