Skip to content

Commit 886e831

Browse files
auserauser
committed
Updates
1 parent 545335c commit 886e831

11 files changed

+126
-44
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@
77
npm-debug.log
88
node_modules
99
.env
10+
public/

‎Makefile

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.PHONY: publish
2+
3+
dev:
4+
npm run dev
5+
6+
build:
7+
npm run prepublish
8+
9+
example:
10+
npm run build
11+
12+
publish:
13+
git checkout gh-pages
14+
git merge master
15+
git push origin gh-pages
16+
git checkout master

‎dist/GoogleMapsReactComponent.1.0.0.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/GoogleMapsReactComponent.1.0.0.js

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!doctype html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/><link rel="stylesheet" href="/GoogleMapsReactComponent.1.0.0.css"/></head><body><div id="root"></div><script src="/GoogleMapsReactComponent.1.0.0.js"></script></body>

‎dist/index.js

+46-27
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
(function (global, factory) {
22
if (typeof define === "function" && define.amd) {
3-
define(['module', 'exports', './GoogleApiComponent', './components/Marker', '/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/redbox-react/lib/index.js', '/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/react-transform-catch-errors/lib/index.js', 'react', '/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/react-transform-hmr/lib/index.js', 'react-dom', './lib/String'], factory);
3+
define(['module', 'exports', './GoogleApiComponent', './components/Marker', '/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/redbox-react/lib/index.js', '/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/react-transform-catch-errors/lib/index.js', 'react', '/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/react-transform-hmr/lib/index.js', 'react-dom', './lib/String', './lib/cancelablePromise'], factory);
44
} else if (typeof exports !== "undefined") {
5-
factory(module, exports, require('./GoogleApiComponent'), require('./components/Marker'), require('/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/redbox-react/lib/index.js'), require('/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/react-transform-catch-errors/lib/index.js'), require('react'), require('/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/react-transform-hmr/lib/index.js'), require('react-dom'), require('./lib/String'));
5+
factory(module, exports, require('./GoogleApiComponent'), require('./components/Marker'), require('/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/redbox-react/lib/index.js'), require('/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/react-transform-catch-errors/lib/index.js'), require('react'), require('/Users/auser/Development/fullstack/GoogleMapComponent/node_modules/react-transform-hmr/lib/index.js'), require('react-dom'), require('./lib/String'), require('./lib/cancelablePromise'));
66
} else {
77
var mod = {
88
exports: {}
99
};
10-
factory(mod, mod.exports, global.GoogleApiComponent, global.Marker, global.index, global.index, global.react, global.index, global.reactDom, global.String);
10+
factory(mod, mod.exports, global.GoogleApiComponent, global.Marker, global.index, global.index, global.react, global.index, global.reactDom, global.String, global.cancelablePromise);
1111
global.index = mod.exports;
1212
}
13-
})(this, function (module, exports, _GoogleApiComponent, _Marker, _index, _index3, _react2, _index5, _reactDom, _String) {
13+
})(this, function (module, exports, _GoogleApiComponent, _Marker, _index, _index3, _react2, _index5, _reactDom, _String, _cancelablePromise) {
1414
'use strict';
1515

1616
Object.defineProperty(exports, "__esModule", {
@@ -121,10 +121,17 @@
121121
}
122122

123123
var mapStyles = {
124-
map: {
125-
zIndex: 0,
124+
container: {
125+
position: 'absolute',
126126
width: '100%',
127127
height: '100%'
128+
},
129+
map: {
130+
position: 'absolute',
131+
left: 0,
132+
right: 0,
133+
bottom: 0,
134+
top: 0
128135
}
129136
};
130137

@@ -138,6 +145,7 @@
138145

139146
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Map).call(this, props));
140147

148+
_this.listeners = {};
141149
_this.state = {
142150
currentLocation: {
143151
lat: _this.props.initialCenter.lat,
@@ -154,28 +162,25 @@
154162

155163
if (this.props.centerAroundCurrentLocation) {
156164
if (navigator && navigator.geolocation) {
157-
navigator.geolocation.getCurrentPosition(function (pos) {
165+
this.geoPromise = (0, _cancelablePromise.makeCancelable)(new Promise(function (resolve, reject) {
166+
navigator.geolocation.getCurrentPosition(resolve, reject);
167+
}));
168+
169+
this.geoPromise.promise.then(function (pos) {
158170
var coords = pos.coords;
159171
_this2.setState({
160172
currentLocation: {
161173
lat: coords.latitude,
162174
lng: coords.longitude
163175
}
164176
});
177+
}).catch(function (e) {
178+
return e;
165179
});
166180
}
167181
}
168182
this.loadMap();
169183
}
170-
}, {
171-
key: 'componentWillReceiveProps',
172-
value: function componentWillReceiveProps(nextProps) {
173-
if (nextProps.initialCenter !== this.state.currentLocation) {
174-
this.setState({
175-
currentLocation: nextProps.initialCenter
176-
});
177-
}
178-
}
179184
}, {
180185
key: 'componentDidUpdate',
181186
value: function componentDidUpdate(prevProps, prevState) {
@@ -189,10 +194,24 @@
189194
this.recenterMap();
190195
}
191196
}
197+
}, {
198+
key: 'componentWillUnmount',
199+
value: function componentWillUnmount() {
200+
var _this3 = this;
201+
202+
var google = this.props.google;
203+
204+
if (this.geoPromise) {
205+
this.geoPromise.cancel();
206+
}
207+
Object.keys(this.listeners).forEach(function (e) {
208+
google.maps.event.removeListener(_this3.listeners[e]);
209+
});
210+
}
192211
}, {
193212
key: 'loadMap',
194213
value: function loadMap() {
195-
var _this3 = this;
214+
var _this4 = this;
196215

197216
if (this.props && this.props.google) {
198217
var google = this.props.google;
@@ -212,7 +231,7 @@
212231
this.map = new maps.Map(node, mapConfig);
213232

214233
evtNames.forEach(function (e) {
215-
_this3.map.addListener(e, _this3.handleEvent(e));
234+
_this4.listeners[e] = _this4.map.addListener(e, _this4.handleEvent(e));
216235
});
217236
maps.event.trigger(this.map, 'ready');
218237
this.forceUpdate();
@@ -221,7 +240,7 @@
221240
}, {
222241
key: 'handleEvent',
223242
value: function handleEvent(evtName) {
224-
var _this4 = this;
243+
var _this5 = this;
225244

226245
var timeout = void 0;
227246
var handlerName = 'on' + (0, _String.camelize)(evtName);
@@ -232,8 +251,8 @@
232251
timeout = null;
233252
}
234253
timeout = setTimeout(function () {
235-
if (_this4.props[handlerName]) {
236-
_this4.props[handlerName](_this4.props, _this4.map, e);
254+
if (_this5.props[handlerName]) {
255+
_this5.props[handlerName](_this5.props, _this5.map, e);
237256
}
238257
}, 0);
239258
};
@@ -267,7 +286,7 @@
267286
}, {
268287
key: 'renderChildren',
269288
value: function renderChildren() {
270-
var _this5 = this;
289+
var _this6 = this;
271290

272291
var children = this.props.children;
273292

@@ -276,22 +295,22 @@
276295

277296
return _react3.default.Children.map(children, function (c) {
278297
return _react3.default.cloneElement(c, {
279-
map: _this5.map,
280-
google: _this5.props.google,
281-
mapCenter: _this5.state.currentLocation
298+
map: _this6.map,
299+
google: _this6.props.google,
300+
mapCenter: _this6.state.currentLocation
282301
});
283302
});
284303
}
285304
}, {
286305
key: 'render',
287306
value: function render() {
288307
var style = Object.assign({}, mapStyles.map, this.props.style, {
289-
display: this.props.visible ? 'block' : 'none'
308+
display: this.props.visible ? 'inherit' : 'none'
290309
});
291310

292311
return _react3.default.createElement(
293312
'div',
294-
{ className: this.props.className },
313+
{ style: mapStyles.container, className: this.props.className },
295314
_react3.default.createElement(
296315
'div',
297316
{ style: style, ref: 'map' },

‎dist/lib/cancelablePromise.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
(function (global, factory) {
2+
if (typeof define === "function" && define.amd) {
3+
define(["exports"], factory);
4+
} else if (typeof exports !== "undefined") {
5+
factory(exports);
6+
} else {
7+
var mod = {
8+
exports: {}
9+
};
10+
factory(mod.exports);
11+
global.cancelablePromise = mod.exports;
12+
}
13+
})(this, function (exports) {
14+
"use strict";
15+
16+
Object.defineProperty(exports, "__esModule", {
17+
value: true
18+
});
19+
// https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html
20+
21+
var makeCancelable = exports.makeCancelable = function makeCancelable(promise) {
22+
var hasCanceled_ = false;
23+
24+
var wrappedPromise = new Promise(function (resolve, reject) {
25+
promise.then(function (val) {
26+
return hasCanceled_ ? reject({ isCanceled: true }) : resolve(val);
27+
});
28+
promise.catch(function (error) {
29+
return hasCanceled_ ? reject({ isCanceled: true }) : reject(error);
30+
});
31+
});
32+
33+
return {
34+
promise: wrappedPromise,
35+
cancel: function cancel() {
36+
hasCanceled_ = true;
37+
}
38+
};
39+
};
40+
});

‎examples/Container.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const Container = React.createClass({
3333
render: function() {
3434
const {routeMap, routeDef} = this.props;
3535
const {router} = this.context;
36-
36+
3737
const c = this.renderChildren();
3838
return (
3939
<div className={styles.container}>
@@ -53,7 +53,7 @@ export const Container = React.createClass({
5353
</div>
5454
<div className={styles.content}>
5555
<div className={styles.header}>
56-
<h1>{routeDef.name} Example</h1>
56+
<h1>{routeDef && routeDef.name} Example</h1>
5757
</div>
5858
{c}
5959
</div>

‎examples/index.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import React from 'react'
22
import ReactDOM from 'react-dom'
3-
import {Router, browserHistory, Redirect, Route, IndexRoute, Link} from 'react-router'
3+
import {Router, hashHistory, Redirect, Route, IndexRoute, Link} from 'react-router'
44

55
import Container from './Container'
66

77
const routeMap = {
88
'basic': {
99
name: 'Simple',
10-
filename: 'basic'
10+
component: require('./components/basic').default
1111
},
1212
'markers': {
1313
name: 'Marker',
14-
filename: 'withMarkers'
14+
component: require('./components/withMarkers').default
1515
},
1616
'clickable_markers': {
1717
name: 'Clickable markers',
18-
filename: 'clickableMarkers'
18+
component: require('./components/clickableMarkers').default
1919
}
2020
}
2121

@@ -30,18 +30,18 @@ const createElement = (Component, props) => {
3030

3131
const routes = (
3232
<Router createElement={createElement}
33-
history={browserHistory}>
33+
history={hashHistory}>
3434
<Route component={Container}
3535
path='/'>
3636
{Object.keys(routeMap).map(key => {
37-
const C = require('./components/' + routeMap[key].filename).default;
37+
const r = routeMap[key]
3838
return (<Route
3939
key={key}
4040
path={key}
41-
name={key}
42-
component={C} />)
41+
name={r.name}
42+
component={r.component} />)
4343
})}
44-
<Redirect from='*' to='basic' />
44+
<IndexRoute component={routeMap['basic'].component} />
4545
</Route>
4646
</Router>
4747
)

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"scripts": {
1212
"prepublish": "babel --plugins 'transform-es2015-modules-umd' src --ignore __tests__ --out-dir ./dist",
1313
"dev": "NODE_ENV=development ./node_modules/hjs-webpack/bin/hjs-dev-server.js",
14+
"build": "NODE_ENV=production webpack",
1415
"lint": "eslint ./src",
1516
"lintfix": "eslint ./src --fix",
1617
"testonly": "NODE_ENV=test mocha $npm_package_options_mocha",

‎webpack.config.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const root = resolve(__dirname);
1515
const src = join(root, 'src');
1616
const examples = join(root, 'examples');
1717
const modules = join(root, 'node_modules');
18-
const dest = join(root, 'dist');
18+
const dest = join(root, 'public');
1919

2020
const getConfig = require('hjs-webpack')
2121

@@ -25,6 +25,7 @@ var config = getConfig({
2525
out: dest,
2626
clearBeforeBuild: true,
2727
html: function(context) {
28+
context.relative = true;
2829
return {
2930
'index.html': context.defaultTemplate(),
3031
}
@@ -86,9 +87,4 @@ config.postcss = [].concat([
8687
require('cssnano')({})
8788
])
8889

89-
90-
config.output = Object.assign({}, config.output, {
91-
publicPath: isDev ? 'http://localhost:3000/' : '/'
92-
})
93-
9490
module.exports = config;

0 commit comments

Comments
 (0)