schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2025-01-14 17:23:26 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added classBlockModifier to <LayerAction/> and switched to only displaying icons for hidden layers

Browse source
This commit is contained in:
orangemug 2018-09-24 20:40:51 +01:00
parent cdcf16196c
commit 252403b1e3
2 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/layers/LayerListItem.jsx
View file

@ -33,6 +33,7 @@ class IconAction extends React.Component {
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,
wdKey: PropTypes.string, wdKey: PropTypes.string,
classBlockName: PropTypes.string, classBlockName: PropTypes.string,
classBlockModifier: PropTypes.string,
} }
renderIcon() { renderIcon() {
@ -45,9 +46,15 @@ class IconAction extends React.Component {
} }
render() { render() {
const {classBlockName, classBlockModifier} = this.props;
let classAdditions = ''; let classAdditions = '';
if (this.props.classBlockName) { if (classBlockName) {
classAdditions = `maputnik-layer-list-icon-action__${this.props.classBlockName}`; classAdditions = `maputnik-layer-list-icon-action__${classBlockName}`;
if (classBlockModifier) {
classAdditions += ` maputnik-layer-list-icon-action__${classBlockName}--${classBlockModifier}`;
}
} }
return <button return <button
@ -96,6 +103,8 @@ class LayerListItem extends React.Component {
} }
render() { render() {
const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
return <li return <li
key={this.props.layerId} key={this.props.layerId}
onClick={e => this.props.onLayerSelect(this.props.layerId)} onClick={e => this.props.onLayerSelect(this.props.layerId)}
@ -122,8 +131,9 @@ class LayerListItem extends React.Component {
/> />
<IconAction <IconAction
wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"} wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
action={this.props.visibility === 'visible' ? 'show' : 'hide'} action={visibilityAction}
classBlockName="visibility" classBlockName="visibility"
classBlockModifier={visibilityAction}
onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)} onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
/> />
</li> </li>

2
src/styles/_layer.scss
View file

@ -72,7 +72,7 @@
} }
} }
.maputnik-layer-list-icon-action__visibility { .maputnik-layer-list-icon-action__visibility--hide {
display: block; display: block;
} }