132 lines
3.9 KiB
JavaScript
132 lines
3.9 KiB
JavaScript
import React, { Component, PropTypes } from 'react'
|
|
|
|
import DataVis from './DataVis'
|
|
import MapButtons from './MapButtons'
|
|
import InfoAndHelp from './InfoAndHelp'
|
|
import MapControls from './MapControls'
|
|
import MapChat from './MapChat'
|
|
import TopicCard from '../TopicCard'
|
|
|
|
class MapView extends Component {
|
|
|
|
static propTypes = {
|
|
mobile: PropTypes.bool,
|
|
mapId: PropTypes.string,
|
|
map: PropTypes.object,
|
|
mapIsStarred: PropTypes.bool,
|
|
onMapStar: PropTypes.func,
|
|
onMapUnstar: PropTypes.func,
|
|
toggleFilterBox: PropTypes.func,
|
|
filterBoxHtml: PropTypes.string,
|
|
toggleMapInfoBox: PropTypes.func,
|
|
infoBoxHtml: PropTypes.string,
|
|
currentUser: PropTypes.object,
|
|
endActiveMap: PropTypes.func,
|
|
launchNewMap: PropTypes.func,
|
|
openImportLightbox: PropTypes.func,
|
|
forkMap: PropTypes.func,
|
|
openHelpLightbox: PropTypes.func,
|
|
onZoomExtents: PropTypes.func,
|
|
onZoomIn: PropTypes.func,
|
|
onZoomOut: PropTypes.func
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
chatOpen: false
|
|
}
|
|
}
|
|
|
|
endMap() {
|
|
this.setState({
|
|
chatOpen: false
|
|
})
|
|
this.props.endActiveMap()
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
const oldMapId = prevProps.mapId
|
|
const { mapId, launchNewMap } = this.props
|
|
if (!oldMapId && mapId) launchNewMap(mapId)
|
|
else if (oldMapId && mapId && oldMapId !== mapId) {
|
|
this.endMap()
|
|
launchNewMap(mapId)
|
|
}
|
|
else if (oldMapId && !mapId) this.endMap()
|
|
}
|
|
|
|
render = () => {
|
|
const { map, currentUser, onOpen, onClose,
|
|
toggleMapInfoBox, toggleFilterBox, infoBoxHtml, filterBoxHtml,
|
|
openImportLightbox, forkMap, openHelpLightbox,
|
|
mapIsStarred, onMapStar, onMapUnstar,
|
|
onZoomExtents, onZoomIn, onZoomOut } = this.props
|
|
const { chatOpen } = this.state
|
|
const onChatOpen = () => {
|
|
this.setState({chatOpen: true})
|
|
onOpen()
|
|
}
|
|
const onChatClose = () => {
|
|
this.setState({chatOpen: false})
|
|
onClose()
|
|
}
|
|
const canEditMap = map && map.authorizeToEdit(currentUser)
|
|
// TODO: stop using {...this.props} and make explicit
|
|
return <div className="mapWrapper">
|
|
<MapButtons currentUser={currentUser}
|
|
onImportClick={openImportLightbox}
|
|
onFilterClick={toggleFilterBox}
|
|
onForkClick={forkMap}
|
|
canEditMap={canEditMap}
|
|
filterBoxHtml={filterBoxHtml} />
|
|
<DataVis />
|
|
<TopicCard {...this.props} />
|
|
<MapChat {...this.props} onOpen={onChatOpen} onClose={onChatClose} chatOpen={chatOpen} />
|
|
<MapControls onClickZoomExtents={onZoomExtents}
|
|
onClickZoomIn={onZoomIn}
|
|
onClickZoomOut={onZoomOut} />
|
|
<InfoAndHelp mapIsStarred={mapIsStarred}
|
|
currentUser={currentUser}
|
|
map={map}
|
|
onInfoClick={toggleMapInfoBox}
|
|
onMapStar={onMapStar}
|
|
onMapUnstar={onMapUnstar}
|
|
onHelpClick={openHelpLightbox}
|
|
infoBoxHtml={infoBoxHtml} />
|
|
</div>
|
|
}
|
|
}
|
|
|
|
export default MapView
|
|
|
|
/*
|
|
|
|
<% if authenticated? %>
|
|
<% # for creating and pulling in topics and synapses %>
|
|
<% if controller_name == 'maps' && action_name == "conversation" %>
|
|
<%= render :partial => 'maps/newtopicsecret' %>
|
|
<% else %>
|
|
<%= render :partial => 'maps/newtopic' %>
|
|
<% end %>
|
|
<%= render :partial => 'maps/newsynapse' %>
|
|
<% # for populating the change metacode list on the topic card %>
|
|
<%= render :partial => 'shared/metacodeoptions' %>
|
|
<% end %>
|
|
<%= render :partial => 'layouts/lowermapelements' %>
|
|
|
|
<div id="loading"></div>
|
|
|
|
<div id="instructions">
|
|
<div className="addTopic">
|
|
Double-click to<br>add a topic
|
|
</div>
|
|
<div className="tabKey">
|
|
Use Tab & Shift+Tab to select a metacode
|
|
</div>
|
|
<div className="enterKey">
|
|
Press Enter to add the topic
|
|
</div>
|
|
</div>
|
|
|
|
*/
|