82 lines
1.8 KiB
JavaScript
82 lines
1.8 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import Filters from './Filters';
|
||
|
|
import Listings from './Listings';
|
||
|
|
|
||
|
|
class Main extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
const uluru = {lat: -25.363, lng: 131.044};
|
||
|
|
const map = new google.maps.Map(this.refs.map, {
|
||
|
|
zoom: 4,
|
||
|
|
center: uluru,
|
||
|
|
streetViewControl: false,
|
||
|
|
mapTypeControl: false
|
||
|
|
});
|
||
|
|
const marker = new google.maps.Marker({
|
||
|
|
position: uluru,
|
||
|
|
map: map
|
||
|
|
});
|
||
|
|
|
||
|
|
var control = document.createElement('div');
|
||
|
|
control.classList.add('filters-btn-toggle');
|
||
|
|
control.innerHTML = '<button>Filters</button>';
|
||
|
|
control.style = "top: 200px;"
|
||
|
|
|
||
|
|
control.addEventListener('click', (e) => {
|
||
|
|
this.setState({
|
||
|
|
mapClicked: true
|
||
|
|
});
|
||
|
|
});
|
||
|
|
control.index = 1;
|
||
|
|
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
|
||
|
|
}
|
||
|
|
|
||
|
|
onCloseClick(e) {
|
||
|
|
this.setState({
|
||
|
|
mapClicked: false
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const leftStyle = {};
|
||
|
|
const rightStyle = {};
|
||
|
|
|
||
|
|
let leftClass = 'left-base';
|
||
|
|
let rightClass ='right-base';
|
||
|
|
|
||
|
|
if (this.state.mapClicked) {
|
||
|
|
leftClass = 'left-hidden';
|
||
|
|
rightClass = 'right-shown';
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div id="container">
|
||
|
|
<div id="header">
|
||
|
|
Kivi {this.state.mapClicked ? 'YEs': 'No'}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="right" style={rightStyle} className={rightClass}>
|
||
|
|
<div className="right-content">
|
||
|
|
<div className="filters-close-button">
|
||
|
|
<button onClick={this.onCloseClick.bind(this)}>Close me!</button>
|
||
|
|
</div>
|
||
|
|
<Filters />
|
||
|
|
<Listings />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="left" style={leftStyle} className={leftClass}>
|
||
|
|
<div id="map" ref="map">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export default Main;
|