diff --git a/src/app.jsx b/src/app.jsx index 3d6ae72..d0ddab4 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -41,6 +41,7 @@ export default class App extends React.Component { this.state = { accessToken: this.settingsStore.accessToken, mapStyle: style.emptyStyle, + selectedLayer: null, } } @@ -102,9 +103,13 @@ export default class App extends React.Component { } } + onLayerSelected(layerId) { + this.setState({ + selectedLayer: this.state.mapStyle.getIn(['layers', layerId],null) + }) + } + render() { - const layers = this.state.mapStyle.get('layers').keySeq() - console.log(layers.size) return
@@ -136,7 +142,7 @@ export default class App extends React.Component { overflow: "hidden", backgroundColor: colors.gray} }> - {layers.size > 0 && } + {this.state.selectedLayer && } {this.mapRenderer()} diff --git a/src/layers/editor.jsx b/src/layers/editor.jsx index 1197396..5988a02 100644 --- a/src/layers/editor.jsx +++ b/src/layers/editor.jsx @@ -43,9 +43,6 @@ export class LayerEditor extends React.Component { constructor(props) { super(props); this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this); - this.state = { - isOpened: false, - } } getChildContext () { @@ -79,10 +76,6 @@ export class LayerEditor extends React.Component { this.props.onLayerChanged(changedLayer) } - toggleLayer() { - this.setState({isOpened: !this.state.isOpened}) - } - layerFromType(type) { if (type === "fill") { return - + #{this.props.layer.get('id')} @@ -155,11 +148,9 @@ export class LayerEditor extends React.Component { - -
- {this.layerFromType(this.props.layer.get('type'))} -
-
+
+ {this.layerFromType(this.props.layer.get('type'))} +
} } diff --git a/src/layers/list.jsx b/src/layers/list.jsx index ccf152d..12de4f0 100644 --- a/src/layers/list.jsx +++ b/src/layers/list.jsx @@ -9,12 +9,18 @@ import Space from 'rebass/dist/Space' import { LayerEditor } from './editor.jsx' import scrollbars from '../scrollbars.scss' import PureRenderMixin from 'react-addons-pure-render-mixin'; +import theme from '../theme.js' // List of collapsible layer editors export class LayerList extends React.Component { static propTypes = { layers: React.PropTypes.instanceOf(Immutable.OrderedMap), - onLayersChanged: React.PropTypes.func.isRequired + onLayersChanged: React.PropTypes.func.isRequired, + onLayerSelected: React.PropTypes.func, + } + + static defaultProps = { + onLayerSelected: () => {}, } constructor(props) { @@ -35,12 +41,23 @@ export class LayerList extends React.Component { render() { var layerPanels = [] layerPanels = this.props.layers.map(layer => { - return + const layerId = layer.get('id') + return
+ this.props.onLayerSelected(layerId)}> + + #{layerId} + + + +
}).toIndexedSeq() return