From 83c448e3a526b3d1586eff9793dee5a3b04dd783 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Wed, 5 Jun 2019 14:24:52 +0300
Subject: [PATCH] Control expansion panels

---
 src/client/components/facet_bar/FacetBar.js   | 34 ++++++++++++++++---
 .../components/facet_bar/FacetHeader.js       | 14 +++++---
 src/client/reducers/manuscriptsFacets.js      |  8 ++---
 3 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/src/client/components/facet_bar/FacetBar.js b/src/client/components/facet_bar/FacetBar.js
index 0aa2cdca..b43e61e1 100644
--- a/src/client/components/facet_bar/FacetBar.js
+++ b/src/client/components/facet_bar/FacetBar.js
@@ -23,14 +23,17 @@ const styles = theme => ({
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0
   },
-  expansionPanelHeading: {
+  expansionPanelSummaryRoot: {
     paddingLeft: theme.spacing(1),
+    cursor: 'default !important'
+  },
+  expansionPanelSummaryContent: {
+    margin: 0
   },
   expansionPanelDetails: {
     paddingTop: 0,
     paddingLeft: theme.spacing(1),
     flexDirection: 'column'
-
   },
   three: {
     height: 108,
@@ -48,6 +51,23 @@ const styles = theme => ({
 
 class FacetBar extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeFacets: new Set(),
+    };
+  }
+
+  handleExpandButtonOnClick = facetID => () => {
+    let activeFacets = this.state.activeFacets;
+    if (activeFacets.has(facetID)) {
+      activeFacets.delete(facetID);
+    } else {
+      activeFacets.add(facetID);
+    }
+    this.setState({ activeFacets });
+  }
+
   renderFacet = (facetID, someFacetIsFetching) => {
     const { classes } = this.props;
     const { facetUpdateID, updatedFacet, updatedFilter, facets } = this.props.facetData;
@@ -108,20 +128,26 @@ class FacetBar extends React.Component {
         );
         break;
     }
+    let isActive = this.state.activeFacets.has(facetID);
     return(
       <ExpansionPanel
         key={facetID}
-        
+        expanded={isActive}
       >
         <ExpansionPanelSummary
-          className={classes.expansionPanelHeading}
+          classes={{
+            root: classes.expansionPanelSummaryRoot,
+            content: classes.expansionPanelSummaryContent
+          }}
           expandIcon={<ExpandMoreIcon />}
+          IconButtonProps={{ onClick: this.handleExpandButtonOnClick(facetID) }}
           aria-controls="panel1a-content"
           id="panel1a-header"
         >
           <FacetHeader
             facetID={facetID}
             facet={facet}
+            isActive={isActive}
             facetClass={this.props.facetClass}
             resultClass={this.props.resultClass}
             fetchFacet={this.props.fetchFacet}
diff --git a/src/client/components/facet_bar/FacetHeader.js b/src/client/components/facet_bar/FacetHeader.js
index 8667f6e6..63afce91 100644
--- a/src/client/components/facet_bar/FacetHeader.js
+++ b/src/client/components/facet_bar/FacetHeader.js
@@ -17,6 +17,8 @@ const styles = theme => ({
   headingContainer: {
     display: 'flex',
     alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%'
     //paddingLeft: theme.spacing(1),
     //borderBottomLeftRadius: 0,
     //borderBottomRightRadius: 0,
@@ -167,14 +169,17 @@ class FacetHeader extends React.Component {
   }
 
   render() {
-    const { classes } = this.props;
+    const { classes, isActive } = this.props;
     const { label, sortButton, spatialFilterButton } = this.props.facet;
+    let showMenuButton = isActive && (sortButton || spatialFilterButton);
     return (
       <div className={classes.headingContainer}>
         <Typography variant="body1">{label} </Typography>
-        <div className={classes.facetHeaderButtons}>
-          {(sortButton || spatialFilterButton) && this.renderFacetMenu()}
-        </div>
+        {showMenuButton &&
+          <div className={classes.facetHeaderButtons}>
+            {this.renderFacetMenu()}
+          </div>
+        }
       </div>
     );
   }
@@ -184,6 +189,7 @@ FacetHeader.propTypes = {
   classes: PropTypes.object.isRequired,
   facetID: PropTypes.string,
   facet: PropTypes.object,
+  isActive: PropTypes.bool.isRequired,
   facetClass: PropTypes.string,
   resultClass: PropTypes.string,
   fetchFacet: PropTypes.func,
diff --git a/src/client/reducers/manuscriptsFacets.js b/src/client/reducers/manuscriptsFacets.js
index 6cee1d7a..1ba62ca7 100644
--- a/src/client/reducers/manuscriptsFacets.js
+++ b/src/client/reducers/manuscriptsFacets.js
@@ -60,7 +60,7 @@ export const INITIAL_STATE = {
       sortBy: 'prefLabel',
       sortDirection: 'asc',
       sortButton: false,
-      spatialFilterButton: false,
+      spatialFilterButton: true,
       isFetching: false,
       searchField: true,
       containerClass: 'ten',
@@ -95,7 +95,7 @@ export const INITIAL_STATE = {
       flatValues: [],
       sortBy: 'instanceCount',
       sortDirection: 'desc',
-      sortButton: false,
+      sortButton: true,
       spatialFilterButton: false,
       isFetching: false,
       searchField: true,
@@ -112,7 +112,7 @@ export const INITIAL_STATE = {
       flatValues: [],
       sortBy: 'instanceCount',
       sortDirection: 'desc',
-      sortButton: false,
+      sortButton: true,
       spatialFilterButton: false,
       isFetching: false,
       searchField: true,
@@ -129,7 +129,7 @@ export const INITIAL_STATE = {
       flatValues: [],
       sortBy: 'instanceCount',
       sortDirection: 'desc',
-      sortButton: false,
+      sortButton: true,
       spatialFilterButton: false,
       isFetching: false,
       searchField: true,
-- 
GitLab