Merge pull request #185 from gregorywolanski/130

Add expand/collapse all layer groups feature (#130)

src/components/layers/LayerList.jsx

@@ -50,6 +50,7 @@ class LayerListContainer extends React.Component {
     super(props)
     this.state = {
       collapsedGroups: {},
+      areAllGroupsExpanded: false,
       isOpen: {
         add: false,
       }
@@ -95,6 +96,31 @@ class LayerListContainer extends React.Component {
     })
   }
 
+  toggleLayers() {
+    let idx=0
+
+    let newGroups=[]
+
+    this.groupedLayers().forEach(layers => {
+      const groupPrefix = layerPrefix(layers[0].id)
+      const lookupKey = [groupPrefix, idx].join('-')
+      
+
+      if (layers.length > 1) {
+        newGroups[lookupKey] = this.state.areAllGroupsExpanded
+      }
+      
+      layers.forEach((layer) => {
+        idx += 1
+      })
+    });
+
+    this.setState({
+      collapsedGroups: newGroups,
+      areAllGroupsExpanded: !this.state.areAllGroupsExpanded
+    })
+  }
+
   groupedLayers() {
     const groups = []
     for (let i = 0; i < this.props.layers.length; i++) {
@@ -178,11 +204,24 @@ class LayerListContainer extends React.Component {
       <header className="maputnik-layer-list-header">
         <span className="maputnik-layer-list-header-title">Layers</span>
         <span className="maputnik-space" />
-        <Button
+        <div className="maputnik-default-property">
+          <div className="maputnik-multibutton">
+            <a 
+              onClick={this.toggleLayers.bind(this)}
+              className="maputnik-button">
+              {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
+            </a>
+          </div>
+        </div>
+        <div className="maputnik-default-property">
+          <div className="maputnik-multibutton">
+            <a
               onClick={this.toggleModal.bind(this, 'add')}
-          className="maputnik-add-layer">
+              className="maputnik-button maputnik-button-selected">
              Add Layer
-      </Button>
+            </a>
+          </div>
+        </div>
       </header>
       <ul className="maputnik-layer-list-container">
         {listItems}

src/styles/_layer.scss

@@ -1,7 +1,7 @@
 // LAYER LIST
 .maputnik-layer-list {
   &-header {
-    padding: $margin-2;
+    padding: $margin-2 $margin-2 $margin-3;
 
     @include flex-row;