diff --git a/.eslintrc b/.eslintrc index f7bae48..c066c83 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,5 +1,5 @@ { - "extends": "eslint-config-airbnb", + "extends": "airbnb", "env": { "browser": true, "mocha": true, @@ -10,15 +10,19 @@ "__DEV_TOOLS__": false }, "rules": { - "id-length": 0, - "max-len": [1, 100, 2], - "react/jsx-uses-react": 2, - "react/jsx-uses-vars": 2, - "react/react-in-jsx-scope": 2, - "block-scoped-var": 0, - "padded-blocks": 0 + "no-confusing-arrow": 0, + "no-nested-ternary": 0, + "yoda": 0, + "no-underscore-dangle": 0 + }, + "parserOptions": { + "ecmaVersion": 6, + "ecmaFeatures": { + "experimentalObjectRestSpread": true + } }, "plugins": [ "react" - ] + ], + "parser": "babel-eslint" } diff --git a/package.json b/package.json index 3beb16e..c8c6c72 100644 --- a/package.json +++ b/package.json @@ -48,11 +48,13 @@ "devDependencies": { "babel": "^5.8.23", "babel-core": "^5.8.25", - "babel-eslint": "^4.1.3", + "babel-eslint": "^6.0.4", "babel-loader": "^5.3.2", - "eslint": "^1.6.0", - "eslint-config-airbnb": "^0.1.0", - "eslint-plugin-react": "^3.5.1", + "eslint": "^2.12.0", + "eslint-config-airbnb": "^9.0.1", + "eslint-plugin-import": "^1.8.1", + "eslint-plugin-jsx-a11y": "^1.4.2", + "eslint-plugin-react": "^5.1.1", "expect": "^1.11.1", "jsdom": "^6.5.1", "mocha": "^2.3.3", diff --git a/src/google_map.js b/src/google_map.js index fc9690a..8e43f99 100644 --- a/src/google_map.js +++ b/src/google_map.js @@ -1,4 +1,4 @@ -import React, {PropTypes, Component} from 'react'; +import React, { PropTypes, Component } from 'react'; import ReactDOM from 'react-dom'; import shallowEqual from 'fbjs/lib/shallowEqual'; @@ -38,14 +38,14 @@ function defaultOptions_(/* maps */) { rotateControl: true, mapTypeControl: false, // disable poi - styles: [{ featureType: 'poi', elementType: 'labels', stylers: [{ visibility: 'off' }]}], + styles: [{ featureType: 'poi', elementType: 'labels', stylers: [{ visibility: 'off' }] }], minZoom: DEFAULT_MIN_ZOOM, // dynamically recalculted if possible during init }; } const latLng2Obj = (latLng) => isPlainObject(latLng) ? latLng - : {lat: latLng[0], lng: latLng[1]}; + : { lat: latLng[0], lng: latLng[1] }; export default class GoogleMap extends Component { static propTypes = { @@ -147,24 +147,24 @@ export default class GoogleMap extends Component { if (process.env.NODE_ENV !== 'production') { if (this.props.apiKey) { - console.warn( 'GoogleMap: ' + // eslint-disable-line no-console + console.warn('GoogleMap: ' + // eslint-disable-line no-console 'apiKey is deprecated, use ' + 'bootstrapURLKeys={{key: YOUR_API_KEY}} instead.'); } if (this.props.onBoundsChange) { - console.warn( 'GoogleMap: ' + // eslint-disable-line no-console + console.warn('GoogleMap: ' + // eslint-disable-line no-console 'onBoundsChange is deprecated, use ' + 'onChange({center, zoom, bounds, ...other}) instead.'); } if (this.props.center === undefined && this.props.defaultCenter === undefined) { - console.warn( 'GoogleMap: center or defaultCenter' + // eslint-disable-line no-console + console.warn('GoogleMap: center or defaultCenter' + // eslint-disable-line no-console 'property must be defined'); } if (this.props.zoom === undefined && this.props.defaultZoom === undefined) { - console.warn( 'GoogleMap: zoom or defaultZoom' + // eslint-disable-line no-console + console.warn('GoogleMap: zoom or defaultZoom' + // eslint-disable-line no-console 'property must be defined'); } } @@ -194,7 +194,7 @@ export default class GoogleMap extends Component { window.addEventListener('mouseup', this._onChildMouseUp, false); const bootstrapURLKeys = { - ...(this.props.apiKey && {key: this.props.apiKey}), + ...(this.props.apiKey && { key: this.props.apiKey }), ...this.props.bootstrapURLKeys, }; @@ -240,7 +240,7 @@ export default class GoogleMap extends Component { Math.abs(nextPropsCenter.lat - centerLatLng.lat) + Math.abs(nextPropsCenter.lng - centerLatLng.lng) > kEPS ) { - this.map_.panTo({lat: nextPropsCenter.lat, lng: nextPropsCenter.lng}); + this.map_.panTo({ lat: nextPropsCenter.lat, lng: nextPropsCenter.lng }); } } } @@ -254,10 +254,10 @@ export default class GoogleMap extends Component { if (this.props.draggable !== undefined && nextProps.draggable === undefined) { // reset to default - this.map_.setOptions({draggable: this.defaultDraggableOption_}); + this.map_.setOptions({ draggable: this.defaultDraggableOption_ }); } else if (this.props.draggable !== nextProps.draggable) { // also prevent this on window 'mousedown' event to prevent map move - this.map_.setOptions({draggable: nextProps.draggable}); + this.map_.setOptions({ draggable: nextProps.draggable }); } } } @@ -323,7 +323,7 @@ export default class GoogleMap extends Component { _computeMinZoom = (minZoomOverride, minZoom) => { if (minZoomOverride) { - return minZoom ? minZoom : DEFAULT_MIN_ZOOM; + return minZoom || DEFAULT_MIN_ZOOM; } return this._getMinZoom(); } @@ -341,7 +341,7 @@ export default class GoogleMap extends Component { this._onBoundsChanged(); // now we can calculate map bounds center etc... const bootstrapURLKeys = { - ...(this.props.apiKey && {key: this.props.apiKey}), + ...(this.props.apiKey && { key: this.props.apiKey }), ...this.props.bootstrapURLKeys, }; @@ -376,7 +376,7 @@ export default class GoogleMap extends Component { const defaultOptions = defaultOptions_(mapPlainObjects); const draggableOptions = this.props.draggable !== undefined && - {draggable: this.props.draggable}; + { draggable: this.props.draggable }; const minZoom = this._computeMinZoom(options.minZoomOverride, options.minZoom); this.minZoom_ = minZoom; @@ -433,7 +433,8 @@ export default class GoogleMap extends Component { const panes = this.getPanes(); panes.overlayMouseTarget.appendChild(div); - ReactDOM.render(( + ReactDOM.render( + ( ), + dispatcher={this_.markersDispatcher_} + /> + ), div, // remove prerendered markers - () => this_.setState({overlayCreated: true}), + () => this_.setState({ overlayCreated: true }), ); }, @@ -464,14 +467,14 @@ export default class GoogleMap extends Component { // need round for safari still can't find what need for firefox const ptxRounded = detectBrowser().isSafari - ? {x: Math.round(ptx.x), y: Math.round(ptx.y)} - : {x: ptx.x, y: ptx.y}; + ? { x: Math.round(ptx.x), y: Math.round(ptx.y) } + : { x: ptx.x, y: ptx.y }; this_.updateCounter_++; this_._onBoundsChanged(map, maps, !this_.props.debounced); if (!this_.googleApiLoadedCalled_) { - this_._onGoogleApiLoaded({map, maps}); + this_._onGoogleApiLoaded({ map, maps }); this_.googleApiLoadedCalled_ = true; } @@ -522,7 +525,7 @@ export default class GoogleMap extends Component { if (currMinZoom !== this.minZoom_) { this.minZoom_ = currMinZoom; - map.setOptions({minZoom: currMinZoom}); + map.setOptions({ minZoom: currMinZoom }); } this.resetSizeOnIdle_ = false; @@ -541,8 +544,8 @@ export default class GoogleMap extends Component { const ptx = overlayProjection.fromLatLngToDivPixel(new maps.LatLng(ne.lat(), sw.lng())); // need round for safari still can't find what need for firefox const ptxRounded = detectBrowser().isSafari - ? {x: Math.round(ptx.x), y: Math.round(ptx.y)} - : {x: ptx.x, y: ptx.y}; + ? { x: Math.round(ptx.x), y: Math.round(ptx.y) } + : { x: ptx.x, y: ptx.y }; this_.updateCounter_++; this_._onBoundsChanged(map, maps); @@ -581,7 +584,7 @@ export default class GoogleMap extends Component { this_._onDrag(); }); }) - .catch( e => { + .catch(e => { console.error(e); // eslint-disable-line no-console throw e; }); @@ -590,7 +593,7 @@ export default class GoogleMap extends Component { _onGoogleApiLoaded = (...args) => { if (this.props.onGoogleApiLoaded) { if (process.env.NODE_ENV !== 'production' && - this.props.yesIWantToUseGoogleMapApiInternals !== true ) { + this.props.yesIWantToUseGoogleMapApiInternals !== true) { console.warn( 'GoogleMap: ' + // eslint-disable-line 'Usage of internal api objects is dangerous ' + 'and can cause a lot of issues.\n' + @@ -602,9 +605,7 @@ export default class GoogleMap extends Component { } } - _getHoverDistance = () => { - return this.props.hoverDistance; - } + _getHoverDistance = () => this.props.hoverDistance; _onDrag = (...args) => this.props.onDrag && this.props.onDrag(...args); @@ -619,12 +620,13 @@ export default class GoogleMap extends Component { if (this.props.onChildClick) { return this.props.onChildClick(...args); } + return undefined; } _onChildMouseDown = (hoverKey, childProps) => { if (this.props.onChildMouseDown) { this.childMouseDownArgs_ = [hoverKey, childProps]; - this.props.onChildMouseDown(hoverKey, childProps, {...this.mouse_}); + this.props.onChildMouseDown(hoverKey, childProps, { ...this.mouse_ }); } } @@ -632,7 +634,7 @@ export default class GoogleMap extends Component { _onChildMouseUp = () => { if (this.childMouseDownArgs_) { if (this.props.onChildMouseUp) { - this.props.onChildMouseUp(...this.childMouseDownArgs_, {...this.mouse_}); + this.props.onChildMouseUp(...this.childMouseDownArgs_, { ...this.mouse_ }); } this.childMouseDownArgs_ = null; this.childMouseUpTime_ = (new Date()).getTime(); @@ -643,7 +645,7 @@ export default class GoogleMap extends Component { _onChildMouseMove = () => { if (this.childMouseDownArgs_) { if (this.props.onChildMouseMove) { - this.props.onChildMouseMove(...this.childMouseDownArgs_, {...this.mouse_}); + this.props.onChildMouseMove(...this.childMouseDownArgs_, { ...this.mouse_ }); } } } @@ -652,12 +654,14 @@ export default class GoogleMap extends Component { if (this.props.onChildMouseEnter) { return this.props.onChildMouseEnter(...args); } + return undefined; } _onChildMouseLeave = (...args) => { if (this.props.onChildMouseLeave) { return this.props.onChildMouseLeave(...args); } + return undefined; } _setViewSize = () => { @@ -687,7 +691,7 @@ export default class GoogleMap extends Component { const mousePosY = e.clientY - this.boundingRect_.top; if (!this.mouse_) { - this.mouse_ = {x: 0, y: 0, lat: 0, lng: 0}; + this.mouse_ = { x: 0, y: 0, lat: 0, lng: 0 }; } this.mouse_.x = mousePosX; @@ -789,7 +793,7 @@ export default class GoogleMap extends Component { if (this.props.onBoundsChange) { this.props.onBoundsChange( this.centerIsObject_ - ? {...centerLatLng} + ? { ...centerLatLng } : [centerLatLng.lat, centerLatLng.lng], zoom, bounds, @@ -799,7 +803,7 @@ export default class GoogleMap extends Component { if (this.props.onChange) { this.props.onChange({ - center: {...centerLatLng}, + center: { ...centerLatLng }, zoom, bounds: { nw: { @@ -867,7 +871,8 @@ export default class GoogleMap extends Component { render() { - const mapMarkerPrerender = !this.state.overlayCreated ? ( + const mapMarkerPrerender = !this.state.overlayCreated + ? ( - ) : null; + dispatcher={this.markersDispatcher_} + /> + ) + : null; return (
{ - return { - children: this.props.dispatcher.getChildren(), - updateCounter: this.props.dispatcher.getUpdateCounter(), - }; - } + _getState = () => ({ + children: this.props.dispatcher.getChildren(), + updateCounter: this.props.dispatcher.getUpdateCounter(), + }); _onChangeHandler = () => { if (!this.dimesionsCache_) { @@ -126,7 +124,7 @@ export default class GoogleMapMarkers extends Component { this.hoverChildProps_ = childProps; this.hoverKey_ = hoverKey; - this.setState({hoverKey: hoverKey}); + this.setState({ hoverKey }); } _onChildMouseLeave = () => { @@ -144,7 +142,7 @@ export default class GoogleMapMarkers extends Component { this.hoverKey_ = null; this.hoverChildProps_ = null; - this.setState({hoverKey: null}); + this.setState({ hoverKey: null }); } } @@ -182,7 +180,7 @@ export default class GoogleMapMarkers extends Component { distances.push( { key: childKey, - dist: dist, + dist, props: child.props, }); } @@ -250,7 +248,7 @@ export default class GoogleMapMarkers extends Component { return (
{React.cloneElement(child, { diff --git a/src/google_map_markers_prerender.js b/src/google_map_markers_prerender.js index 930f673..8c4c360 100644 --- a/src/google_map_markers_prerender.js +++ b/src/google_map_markers_prerender.js @@ -1,4 +1,4 @@ -import React, {/* PropTypes, */ Component} from 'react'; +import React from 'react'; import GoogleMapMarkers from './google_map_markers.js'; const style = { @@ -13,17 +13,10 @@ const style = { // opacity: 0.3 }; -export default class GoogleMapMarkersPrerender extends Component { - constructor(props) { - super(props); - } - - - render() { - return ( -
- -
- ); - } +export default function (props) { + return ( +
+ +
+ ); } diff --git a/src/utils/detect.js b/src/utils/detect.js index 07efe9e..ae09c26 100644 --- a/src/utils/detect.js +++ b/src/utils/detect.js @@ -22,7 +22,7 @@ export default function detectBrowser() { isChrome = false; } - detectBrowserResult_ = {isExplorer, isFirefox, isOpera, isChrome, isSafari}; + detectBrowserResult_ = { isExplorer, isFirefox, isOpera, isChrome, isSafari }; return detectBrowserResult_; } diff --git a/src/utils/geo.js b/src/utils/geo.js index 2aea36d..a0c77b3 100644 --- a/src/utils/geo.js +++ b/src/utils/geo.js @@ -36,7 +36,7 @@ export default class Geo { unproject(ptXY, viewFromLeftTop) { let ptRes; if (viewFromLeftTop) { - const ptxy = {...ptXY}; + const ptxy = { ...ptXY }; ptxy.x -= this.transform_.width / 2; ptxy.y -= this.transform_.height / 2; ptRes = this.transform_.pointLocation(Point.convert(ptxy)); @@ -75,7 +75,7 @@ export default class Geo { } getCenter() { - const ptRes = this.transform_.pointLocation({x: 0, y: 0}); + const ptRes = this.transform_.pointLocation({ x: 0, y: 0 }); return ptRes; } diff --git a/src/utils/lib_geo/lat_lng.js b/src/utils/lib_geo/lat_lng.js index 8fb89c7..d519620 100644 --- a/src/utils/lib_geo/lat_lng.js +++ b/src/utils/lib_geo/lat_lng.js @@ -19,7 +19,7 @@ export default class LatLng { constructor(lat, lng) { if (isNaN(lat) || isNaN(lng)) { - throw new Error('Invalid LatLng object: (' + lat + ', ' + lng + ')'); + throw new Error(`Invalid LatLng object: (${lat}, ${lng})`); } this.lat = +lat; this.lng = +lng; diff --git a/src/utils/lib_geo/lat_lng_bounds.js b/src/utils/lib_geo/lat_lng_bounds.js index 069c53c..fb9650f 100644 --- a/src/utils/lib_geo/lat_lng_bounds.js +++ b/src/utils/lib_geo/lat_lng_bounds.js @@ -39,7 +39,6 @@ export default class LatLngBounds { if (!sw && !ne) { this._sw = new LatLng(sw2.lat, sw2.lng); this._ne = new LatLng(ne2.lat, ne2.lng); - } else { sw.lat = Math.min(sw2.lat, sw.lat); sw.lng = Math.min(sw2.lng, sw.lng); diff --git a/src/utils/loaders/google_map_loader.js b/src/utils/loaders/google_map_loader.js index 529891b..3dee0d1 100644 --- a/src/utils/loaders/google_map_loader.js +++ b/src/utils/loaders/google_map_loader.js @@ -13,7 +13,7 @@ const _customPromise = new Promise(resolve => { // TODO add libraries language and other map options export default function googleMapLoader(bootstrapURLKeys) { if (!$script_) { - $script_ = require('scriptjs'); + $script_ = require('scriptjs'); // eslint-disable-line } // call from outside google-map-react @@ -57,7 +57,7 @@ export default function googleMapLoader(bootstrapURLKeys) { const queryString = reduce( Object.keys(bootstrapURLKeys), - (r, key) => r + `&${key}=${bootstrapURLKeys[key]}`, + (r, key) => `${r}&${key}=${bootstrapURLKeys[key]}`, '' ); diff --git a/src/utils/pick.js b/src/utils/pick.js index a2ae4dd..43f8906 100644 --- a/src/utils/pick.js +++ b/src/utils/pick.js @@ -3,7 +3,7 @@ export default function pick(obj, fn) { return Object.keys(obj).reduce((result, key) => { if (fn(obj[key])) { - result[key] = obj[key]; + result[key] = obj[key]; // eslint-disable-line } return result; }, {}); diff --git a/src/utils/utils.js b/src/utils/utils.js index b7efa95..5db754b 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -1,7 +1,7 @@ const GOOGLE_TILE_SIZE = 256; import log2 from './math/log2'; -function latLng2World({lat, lng}) { +function latLng2World({ lat, lng }) { const sin = Math.sin(lat * Math.PI / 180); const x = (lng / 360 + 0.5); let y = (0.5 - 0.25 * Math.log((1 + sin) / (1 - sin)) / Math.PI); @@ -11,10 +11,10 @@ function latLng2World({lat, lng}) { : y > 1 ? 1 : y; - return {x, y}; + return { x, y }; } -function world2LatLng({x, y}) { +function world2LatLng({ x, y }) { const n = Math.PI - 2 * Math.PI * y; // TODO test that this is faster @@ -32,11 +32,11 @@ function latLng2MetersPerDegree({ lat }) { 1.175 * Math.cos(4 * phi) - 0.0023 * Math.cos(6 * phi); const metersPerLngDegree = 111412.84 * Math.cos(phi) - 93.5 * Math.cos(3 * phi) + 0.118 * Math.cos(5 * phi); - return {metersPerLatDegree, metersPerLngDegree}; + return { metersPerLatDegree, metersPerLngDegree }; } -function meters2LatLngBounds(meters, {lat, lng}) { - const {metersPerLatDegree, metersPerLngDegree} = latLng2MetersPerDegree({ lat }); +function meters2LatLngBounds(meters, { lat, lng }) { + const { metersPerLatDegree, metersPerLngDegree } = latLng2MetersPerDegree({ lat }); const latDelta = 0.5 * meters / metersPerLatDegree; const lngDelta = 0.5 * meters / metersPerLngDegree; @@ -53,18 +53,18 @@ function meters2LatLngBounds(meters, {lat, lng}) { }; } -function meters2WorldSize(meters, {lat, lng}) { - const {nw, se} = meters2LatLngBounds(meters, {lat, lng}); +function meters2WorldSize(meters, { lat, lng }) { + const { nw, se } = meters2LatLngBounds(meters, { lat, lng }); const nwWorld = latLng2World(nw); const seWorld = latLng2World(se); const w = Math.abs(seWorld.x - nwWorld.x); const h = Math.abs(seWorld.y - nwWorld.y); - return {w, h}; + return { w, h }; } export default { - fitBounds({nw, se}, {width, height}) { + fitBounds({ nw, se }, { width, height }) { const EPS = 0.000000001; const nwWorld = latLng2World(nw); const seWorld = latLng2World(se); @@ -100,8 +100,8 @@ export default { // ------------------------------------------------------------------- // Helpers to calc some markers size - meters2ScreenPixels(meters, {lat, lng}, zoom) { - const {w, h} = meters2WorldSize(meters, {lat, lng}); + meters2ScreenPixels(meters, { lat, lng }, zoom) { + const { w, h } = meters2WorldSize(meters, { lat, lng }); const scale = Math.pow(2, zoom); const wScreen = w * scale * GOOGLE_TILE_SIZE; const hScreen = h * scale * GOOGLE_TILE_SIZE; @@ -114,7 +114,7 @@ export default { // -------------------------------------------------- // Helper functions for working with svg tiles, (examples coming soon) - tile2LatLng({x, y}, zoom) { + tile2LatLng({ x, y }, zoom) { const n = Math.PI - 2 * Math.PI * y / Math.pow(2, zoom); return ({ @@ -123,8 +123,8 @@ export default { }); }, - latLng2Tile({lat, lng}, zoom) { - const worldCoords = latLng2World({lat, lng}); + latLng2Tile({ lat, lng }, zoom) { + const worldCoords = latLng2World({ lat, lng }); const scale = Math.pow(2, zoom); return { @@ -133,7 +133,7 @@ export default { }; }, - getTilesIds({from, to}, zoom) { + getTilesIds({ from, to }, zoom) { const scale = Math.pow(2, zoom); const ids = [];