catreact
Version:
Catavolt Core React Components
212 lines (211 loc) • 11.4 kB
JavaScript
/**
* Created by rburson on 4/27/16.
*/
"use strict";
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var React = require('react');
var react_google_maps_1 = require('react-google-maps');
var catreact_1 = require('../catreact');
var catavolt_sdk_1 = require('catavolt-sdk');
/*
***************************************************
* Render a Map
***************************************************
*/
exports.CvMapPanel = React.createClass({
mixins: [catreact_1.CvBaseMixin],
componentDidMount: function () {
var event = { type: catreact_1.CvEventType.MESSAGE,
eventObj: { message: 'Map Tip: Click on multiple markers to see route and distance. Right-click for a context menu.', type: catreact_1.CvMessageType.INFO } };
this.eventRegistry().publish(event, false);
catreact_1.CvActionBase._publishActionStarted('#loadMap', this.props.mapContext, true, this.props.actionListeners, this.eventRegistry());
},
getDefaultProps: function () {
return {
paneRef: null,
formContext: null,
mapContext: null,
navigationListeners: [],
selectionListener: null,
stateChangeListeners: [],
actionListeners: [],
navTarget: null,
containerProps: null,
actionProvider: null
};
},
getInitialState: function () {
return { currentSelection: null, previousSelection: null, openMarker: null, openMenu: null, directions: null };
},
render: function () {
var _this = this;
var _a = this.state, currentSelection = _a.currentSelection, previousSelection = _a.previousSelection, directions = _a.directions, openMenu = _a.openMenu, openMarker = _a.openMarker;
var mapPaneProps = {
paneRef: this.props.paneRef,
formContext: this.props.formContext,
queryContext: this.props.mapContext,
stateChangeListeners: this.props.stateChangeListeners,
actionProvider: this.props.actionProvider
};
var mapContainerProps = catavolt_sdk_1.ObjUtil.addAllProps(this.props.containerProps, { className: 'cv-map-container' });
/*
Note:
We have to explicitly pass every prop to the CvDropdownMenu component that might normally be found in the context
because the 'GoogleMap' react library interferes with the context
*/
return (React.createElement(catreact_1.CvQueryPane, __assign({}, mapPaneProps, {queryRenderer: function (cvContext, callback) {
var mapContext = cvContext.scopeCtx.scopeObj;
var mapDef = mapContext.mapDef;
var records = catavolt_sdk_1.ArrayUtil.copy(mapContext.scroller.buffer);
var markers = records.map(function (record) {
return {
id: record.objectId,
lat: record.propAtName(mapDef.latitudePropName).value,
lng: record.propAtName(mapDef.longitudePropName).value,
desc: record.propAtName(mapDef.descriptionPropName).value,
imgUrl: record.imageName,
tipText: record.tipText,
imagePlc: record.imagePlacement
};
});
return (React.createElement(react_google_maps_1.GoogleMapLoader, {containerElement: React.createElement("div", __assign({}, mapContainerProps)), googleMapElement: React.createElement(react_google_maps_1.GoogleMap, {defaultZoom: 7, defaultCenter: { lat: 39.144973, lng: -100.019531 }, defaultOptions: { fullscreenControl: true }, onClick: _this._handleMapClick, ref: function (map) { if (map) {
_this._initMap(map, markers);
} }}, directions ? React.createElement(react_google_maps_1.DirectionsRenderer, {directions: directions, options: { suppressMarkers: true }}) : null, markers.map(function (marker, index) {
var menuDef = (mapContext.menuDefs && mapContext.menuDefs.length > 0) ? mapContext.menuDefs[0].findContextMenuDef() : null;
var selectionAdapter = new catreact_1.CvValueAdapter();
selectionAdapter.createValueListener()([marker.id]);
return (React.createElement(react_google_maps_1.Marker, {defaultPosition: { lat: marker.lat, lng: marker.lng }, defaultAnimation: google.maps.Animation.DROP, key: marker.id, icon: marker.imgUrl, title: marker.tipText, onMouseover: _this._handleMarkerOver.bind(_this, marker), onClick: _this._handleMarkerClick.bind(_this, marker), onRightclick: _this._handleMarkerRightClick.bind(_this, marker)}, openMarker && openMarker.id === marker.id ?
_this._getInfoDisplay(directions, marker, currentSelection) : null, openMenu && openMenu.id === marker.id ?
React.createElement(react_google_maps_1.OverlayView, {position: { lat: marker.lat, lng: marker.lng }, mapPaneName: react_google_maps_1.OverlayView.OVERLAY_MOUSE_TARGET, getPixelPositionOffset: _this._getPixelPositionOffset}, React.createElement(catreact_1.CvDropdownMenu, {paneContext: mapContext, menuDef: menuDef, navigationListeners: _this.props.navigationListeners, actionListeners: [_this._actionFired.bind(_this, marker)], stateChangeListeners: _this.props.stateChangeListeners, navTarget: _this.props.navTarget, selectionProvider: selectionAdapter, catavolt: _this.catavolt(), initOpen: true, launchMenuElement: React.createElement("span", null), eventRegistry: _this.eventRegistry()}))
: null));
}))}));
}})));
},
_actionFired: function (marker, event) {
},
_getInfoDisplay: function (directions, marker, targetMarker) {
if (!directions) {
return React.createElement(react_google_maps_1.InfoWindow, {onCloseclick: this._handleInfoClose.bind(this, marker)}, marker.desc);
}
else {
if (marker.id == targetMarker.id) {
var leg = directions.routes[0].legs[0];
return React.createElement(react_google_maps_1.InfoWindow, {onCloseclick: this._handleInfoClose.bind(this, marker)}, React.createElement("div", null, React.createElement("span", {className: "cv-icon cv-map-info pull-right", "aria-hidden": "true"}), React.createElement("div", null, React.createElement("strong", null, 'To: '), marker.desc), React.createElement("div", null, leg.end_address), React.createElement("div", null, leg.distance ? leg.distance.text : null), React.createElement("div", null, leg.duration ? leg.duration.text : null)));
}
}
return null;
},
_getPixelPositionOffset: function (width, height) {
return { x: -(width / 2), y: -(height / 2) };
},
_handleMapClick: function (e) {
if (!this.state.openMenu) {
this.setState({
openMarker: null,
directions: null,
currentSelection: null,
previousSelection: null
});
}
},
_handleMarkerOver: function (marker, e) {
if (!this.state.directions) {
this.setState({
openMarker: marker,
openMenu: null
});
}
},
_handleMarkerClick: function (marker, e) {
var _this = this;
if (this.props.selectionListener)
this.props.selectionListener([marker.id]);
var previousSelection = this.state.currentSelection;
var currentSelection = marker;
if (previousSelection && currentSelection.id !== previousSelection.id) {
var ds = new google.maps.DirectionsService();
ds.route({
origin: new google.maps.LatLng(previousSelection.lat, previousSelection.lng),
destination: new google.maps.LatLng(currentSelection.lat, currentSelection.lng),
travelMode: google.maps.TravelMode.DRIVING,
provideRouteAlternatives: true
}, function (result, status) {
if (status === google.maps.DirectionsStatus.OK) {
_this.setState({
directions: result,
currentSelection: currentSelection,
previousSelection: previousSelection,
openMarker: marker,
openMenu: null
});
}
else {
var event_1 = { type: catreact_1.CvEventType.MESSAGE,
eventObj: { message: "error fetching directions " + result,
messageObj: new catavolt_sdk_1.DialogException('', 'Error retrieving directions'), type: catreact_1.CvMessageType.ERROR } };
_this.eventRegistry().publish(event_1, false);
}
});
}
else {
this.setState({
currentSelection: currentSelection,
previousSelection: previousSelection,
openMenu: null,
directions: null
});
}
},
_handleMarkerRightClick: function (marker, e) {
if (this.props.selectionListener)
this.props.selectionListener([marker.id]);
this.setState({
previousSelection: this.state.currentSelection,
currentSelection: marker,
openMenu: marker
});
},
_handleInfoClose: function (marker, e) {
this.setState({ openMarker: null });
},
_initMap: function (map, latLng) {
if (!this._gMap && latLng && latLng.length > 0) {
this._gMap = map;
var latLngBounds = new google.maps.LatLngBounds();
for (var i = 0; i < latLng.length; i++) {
latLngBounds.extend(new google.maps.LatLng(latLng[i].lat, latLng[i].lng));
}
map.fitBounds(latLngBounds);
catreact_1.CvActionBase._publishActionFinished('#loadMap', this.props.mapContext, this.props.actionListeners, this.eventRegistry());
}
},
_geoLocate: function (callback) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
callback(pos);
}, function () {
var event = { type: catreact_1.CvEventType.MESSAGE,
eventObj: { message: 'Geolocation failed',
messageObj: new catavolt_sdk_1.DialogException('', 'Geolocation failed'), type: catreact_1.CvMessageType.ERROR } };
this.eventRegistry().publish(event, false);
});
}
else {
var event_2 = { type: catreact_1.CvEventType.MESSAGE,
eventObj: { message: 'Geolocation not supported (or disabled)',
messageObj: new catavolt_sdk_1.DialogException('', 'Geolocation not supported (or disabled)'), type: catreact_1.CvMessageType.ERROR } };
this.eventRegistry().publish(event_2, false);
}
}
});