From 252403b1e3da70ddacf0a3fbeaf52473164502ce Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 24 Sep 2018 20:40:51 +0100
Subject: [PATCH] Added classBlockModifier to <LayerAction/> and switched to
 only displaying icons for hidden layers

---
 src/components/layers/LayerListItem.jsx | 16 +++++++++++++---
 src/styles/_layer.scss                  |  2 +-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx
index 49ced9b..322c272 100644
--- a/src/components/layers/LayerListItem.jsx
+++ b/src/components/layers/LayerListItem.jsx
@@ -33,6 +33,7 @@ class IconAction extends React.Component {
     onClick: PropTypes.func.isRequired,
     wdKey: PropTypes.string,
     classBlockName: PropTypes.string,
+    classBlockModifier: PropTypes.string,
   }
 
   renderIcon() {
@@ -45,9 +46,15 @@ class IconAction extends React.Component {
   }
 
   render() {
+    const {classBlockName, classBlockModifier} = this.props;
+
     let classAdditions = '';
-    if (this.props.classBlockName) {
-      classAdditions = `maputnik-layer-list-icon-action__${this.props.classBlockName}`;
+    if (classBlockName) {
+      classAdditions = `maputnik-layer-list-icon-action__${classBlockName}`;
+
+      if (classBlockModifier) {
+        classAdditions += ` maputnik-layer-list-icon-action__${classBlockName}--${classBlockModifier}`;
+      }
     }
 
     return <button
@@ -96,6 +103,8 @@ class LayerListItem extends React.Component {
   }
 
   render() {
+    const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
+
     return <li
       key={this.props.layerId}
       onClick={e => this.props.onLayerSelect(this.props.layerId)}
@@ -122,8 +131,9 @@ class LayerListItem extends React.Component {
         />
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
-          action={this.props.visibility === 'visible' ? 'show' : 'hide'}
+          action={visibilityAction}
           classBlockName="visibility"
+          classBlockModifier={visibilityAction}
           onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
         />
     </li>
diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss
index 7a269a8..45af9ac 100644
--- a/src/styles/_layer.scss
+++ b/src/styles/_layer.scss
@@ -72,7 +72,7 @@
     }
   }
 
-  .maputnik-layer-list-icon-action__visibility {
+  .maputnik-layer-list-icon-action__visibility--hide {
     display: block;
   }