Merge pull request #2 from evansiroky/master

fix merge conflict and linting issues

Author: MartinSahlen

.eslintignore

@@ -1 +1,2 @@
 node_modules/**
+lib/**

.eslintrc

@@ -47,7 +47,7 @@
     "block-scoped-var": 0,
     // Temporarily disabled for test/* until babel/babel-eslint#33 is resolved
     "padded-blocks": 0,
-
+    "no-param-reassign": 0
   },
   "plugins": [
     "react",

CHANGELOG.md

@@ -1,3 +1,13 @@
+# 1.0.0 Release
+- Leaflet 1.0.0 support
+- React-Leaflet 1.0.0 support
+- List eslint as an explicit devDependency
+- upgrade the eslint related packages
+- fix linting errors using current config
+- Add notes about maintaining absence of lint errors and warnings in Contributing guide
+- This should make it easier to ensure code quality as others contribute in the open
+- Also, drop unused jest and enzyme deps
+
 # 0.2.3 Release
 - Missed Transpilation
 

CONTRIBUTING.md

@@ -56,6 +56,7 @@ Before submitting a Pull Request please ensure you have completed the following
 2. Make sure your copy is up to date: `git pull upstream master`
 3. Run `npm run compile`, to compile your changes to the exported `/lib` code.
 4. Bump the version in `package.json` as appropriate, see `Versioning` in the section below.
+4. Run `npm run lint` to verify code style, all pull requests should have zero lint errors and warnings
 4. Commit your changes
 5. Push your changes to your fork: `your-username/react-leaflet-heatmap-layer`
 6. Open a pull request from your fork to the `upstream` fork (`OpenGov/react-leaflet-heatmap-layer`)

example/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
+import { Map, TileLayer } from 'react-leaflet';
 import HeatmapLayer from '../src/HeatmapLayer';
 import { addressPoints } from './realworld.10000.js';
 
@@ -9,7 +9,7 @@ class MapExample extends React.Component {
   state = {
     mapHidden: false,
     layerHidden: false,
-    addressPoints: addressPoints
+    addressPoints
   };
 
   componentDidMount() {
@@ -25,38 +25,46 @@ class MapExample extends React.Component {
           <input
             type="button"
             value="Toggle Map"
-            onClick={() => this.setState({ mapHidden: !this.state.mapHidden })} />
+            onClick={() => this.setState({ mapHidden: !this.state.mapHidden })}
+          />
         </div>
       );
     }
-    const gradient = { '0.1': '#89BDE0', '0.2': '#96E3E6', '0.4': '#82CEB6', '0.6': '#FAF3A5', '0.8': '#F5D98B', '1.0': '#DE9A96'};
+
+    const gradient = {
+      0.1: '#89BDE0', 0.2: '#96E3E6', 0.4: '#82CEB6',
+      0.6: '#FAF3A5', 0.8: '#F5D98B', '1.0': '#DE9A96'
+    };
 
     return (
       <div>
-        <Map center={[0,0]} zoom={13}>
+        <Map center={[0, 0]} zoom={13}>
           {!this.state.layerHidden &&
               <HeatmapLayer
-              fitBoundsOnLoad
-              fitBoundsOnUpdate
-              points={this.state.addressPoints}
-              longitudeExtractor={m => m[1]}
-              latitudeExtractor={m => m[0]}
-              gradient={gradient}
-              intensityExtractor={m => parseFloat(m[2])} />
+                fitBoundsOnLoad
+                fitBoundsOnUpdate
+                points={this.state.addressPoints}
+                longitudeExtractor={m => m[1]}
+                latitudeExtractor={m => m[0]}
+                gradient={gradient}
+                intensityExtractor={m => parseFloat(m[2])}
+              />
             }
           <TileLayer
-            url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
+            url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
             attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           />
         </Map>
         <input
           type="button"
           value="Toggle Map"
-          onClick={() => this.setState({ mapHidden: !this.state.mapHidden })} />
+          onClick={() => this.setState({ mapHidden: !this.state.mapHidden })}
+        />
         <input
           type="button"
           value="Toggle Layer"
-          onClick={() => this.setState({ layerHidden: !this.state.layerHidden })} />
+          onClick={() => this.setState({ layerHidden: !this.state.layerHidden })}
+        />
       </div>
     );
   }

lib/HeatmapLayer.js

@@ -6,10 +6,6 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
 var _lodash = require('lodash.map');
 
 var _lodash2 = _interopRequireDefault(_lodash);
@@ -18,30 +14,22 @@ var _lodash3 = require('lodash.reduce');
 
 var _lodash4 = _interopRequireDefault(_lodash3);
 
-var _lodash5 = require('lodash.foreach');
+var _lodash5 = require('lodash.filter');
 
 var _lodash6 = _interopRequireDefault(_lodash5);
 
-var _lodash7 = require('lodash.pluck');
+var _lodash7 = require('lodash.min');
 
 var _lodash8 = _interopRequireDefault(_lodash7);
 
-var _lodash9 = require('lodash.filter');
+var _lodash9 = require('lodash.max');
 
 var _lodash10 = _interopRequireDefault(_lodash9);
 
-var _lodash11 = require('lodash.min');
+var _lodash11 = require('lodash.isnumber');
 
 var _lodash12 = _interopRequireDefault(_lodash11);
 
-var _lodash13 = require('lodash.max');
-
-var _lodash14 = _interopRequireDefault(_lodash13);
-
-var _lodash15 = require('lodash.isnumber');
-
-var _lodash16 = _interopRequireDefault(_lodash15);
-
 var _leaflet = require('leaflet');
 
 var _leaflet2 = _interopRequireDefault(_leaflet);
@@ -60,25 +48,25 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-function isValidLatLngArray(arr) {
-  return (0, _lodash10.default)(arr, isValid).length === arr.length;
+function isInvalid(num) {
+  return !(0, _lodash12.default)(num) && !num;
 }
 
-function isInvalidLatLngArray(arr) {
-  return !isValidLatLngArray(arr);
+function isValid(num) {
+  return !isInvalid(num);
 }
 
-function isInvalid(num) {
-  return !(0, _lodash16.default)(num) && !num;
+function isValidLatLngArray(arr) {
+  return (0, _lodash6.default)(arr, isValid).length === arr.length;
 }
 
-function isValid(num) {
-  return !isInvalid(num);
+function isInvalidLatLngArray(arr) {
+  return !isValidLatLngArray(arr);
 }
 
-function safeRemoveLayer(map, el) {
-  var _map$getPanes = map.getPanes(),
-      overlayPane = _map$getPanes.overlayPane;
+function safeRemoveLayer(leafletMap, el) {
+  var _leafletMap$getPanes = leafletMap.getPanes(),
+      overlayPane = _leafletMap$getPanes.overlayPane;
 
   if (overlayPane.contains(el)) {
     overlayPane.removeChild(el);
@@ -103,41 +91,34 @@ var HeatmapLayer = function (_MapLayer) {
   };
 
   HeatmapLayer.prototype.componentDidMount = function componentDidMount() {
-    var _style;
+    var _this2 = this;
 
     var canAnimate = this.context.map.options.zoomAnimation && _leaflet2.default.Browser.any3d;
     var zoomClass = 'leaflet-zoom-' + (canAnimate ? 'animated' : 'hide');
     var mapSize = this.context.map.getSize();
     var transformProp = _leaflet2.default.DomUtil.testProp(['transformOrigin', 'WebkitTransformOrigin', 'msTransformOrigin']);
 
-    var canvasProps = {
-      className: 'leaflet-heatmap-layer leaflet-layer ' + zoomClass,
-      style: (_style = {}, _style[transformProp] = '50% 50%', _style),
-      width: mapSize.x,
-      height: mapSize.y
-    };
-
     this._el = _leaflet2.default.DomUtil.create('canvas', zoomClass);
     this._el.style[transformProp] = '50% 50%';
     this._el.width = mapSize.x;
     this._el.height = mapSize.y;
 
     var el = this._el;
 
-    var element = _leaflet2.default.Layer.extend({
-      onAdd: function onAdd(map) {
-        map.getPanes().overlayPane.appendChild(el);
+    var Heatmap = _leaflet2.default.Layer.extend({
+      onAdd: function onAdd(leafletMap) {
+        return leafletMap.getPanes().overlayPane.appendChild(el);
       },
-      addTo: function addTo(map) {
-        map.addLayer(this);
-        return this;
+      addTo: function addTo(leafletMap) {
+        leafletMap.addLayer(_this2);
+        return _this2;
       },
-      onRemove: function onRemove(map) {
-        safeRemoveLayer(map, el);
+      onRemove: function onRemove(leafletMap) {
+        return safeRemoveLayer(leafletMap, el);
       }
     });
 
-    this.leafletElement = new element();
+    this.leafletElement = new Heatmap();
     _MapLayer.prototype.componentDidMount.call(this);
     this._heatmap = (0, _simpleheat2.default)(this._el);
     this.reset();
@@ -207,8 +188,8 @@ var HeatmapLayer = function (_MapLayer) {
     var points = this.props.points;
     var lngs = (0, _lodash2.default)(points, this.props.longitudeExtractor);
     var lats = (0, _lodash2.default)(points, this.props.latitudeExtractor);
-    var ne = { lng: (0, _lodash14.default)(lngs), lat: (0, _lodash14.default)(lats) };
-    var sw = { lng: (0, _lodash12.default)(lngs), lat: (0, _lodash12.default)(lats) };
+    var ne = { lng: (0, _lodash10.default)(lngs), lat: (0, _lodash10.default)(lats) };
+    var sw = { lng: (0, _lodash8.default)(lngs), lat: (0, _lodash8.default)(lats) };
 
     if (shouldIgnoreLocation(ne) || shouldIgnoreLocation(sw)) {
       return;
@@ -230,17 +211,17 @@ var HeatmapLayer = function (_MapLayer) {
   };
 
   HeatmapLayer.prototype.attachEvents = function attachEvents() {
-    var _this2 = this;
+    var _this3 = this;
 
-    var map = this.context.map;
-    map.on('viewreset', function () {
-      return _this2.reset();
+    var leafletMap = this.props.map;
+    leafletMap.on('viewreset', function () {
+      return _this3.reset();
     });
-    map.on('moveend', function () {
-      return _this2.reset();
+    leafletMap.on('moveend', function () {
+      return _this3.reset();
     });
-    if (map.options.zoomAnimation && _leaflet2.default.Browser.any3d) {
-      map.on('zoomanim', this._animateZoom, this);
+    if (leafletMap.options.zoomAnimation && _leaflet2.default.Browser.any3d) {
+      leafletMap.on('zoomanim', this._animateZoom, this);
     }
   };
 
@@ -268,7 +249,7 @@ var HeatmapLayer = function (_MapLayer) {
       this._el.height = this._heatmap._height = size.y;
     }
 
-    if (this._heatmap && !this._frame && !this.context.map._animating) {
+    if (this._heatmap && !this._frame && !this.props.map._animating) {
       this._frame = _leaflet2.default.Util.requestAnimFrame(this.redraw, this);
     }
 
@@ -286,8 +267,7 @@ var HeatmapLayer = function (_MapLayer) {
     var v = 1 / Math.pow(2, Math.max(0, Math.min(maxZoom - this.context.map.getZoom(), 12)));
 
     var cellSize = r / 2;
-    var grid = [];
-    var panePos = this.context.map._getMapPanePos();
+    var panePos = this.props.map._getMapPanePos();
     var offsetX = panePos.x % cellSize;
     var offsetY = panePos.y % cellSize;
     var getLat = this.props.latitudeExtractor;
@@ -298,15 +278,15 @@ var HeatmapLayer = function (_MapLayer) {
       return bounds.contains(p);
     };
 
-    var filterUndefined = function filterUndefined(r) {
-      return (0, _lodash10.default)(r, function (c) {
+    var filterUndefined = function filterUndefined(row) {
+      return (0, _lodash6.default)(row, function (c) {
         return c !== undefined;
       });
     };
 
     var roundResults = function roundResults(results) {
       return (0, _lodash4.default)(results, function (result, row) {
-        return (0, _lodash2.default)(filterUndefined(row), function (cell, key, row) {
+        return (0, _lodash2.default)(filterUndefined(row), function (cell) {
           return [Math.round(cell[0]), Math.round(cell[1]), Math.min(cell[2], maxIntensity), cell[3]];
         }).concat(result);
       }, []);
@@ -348,28 +328,27 @@ var HeatmapLayer = function (_MapLayer) {
       }, []);
     };
 
-    var getBounds = function getBounds(leafletMap) {
+    var getBounds = function getBounds() {
       return new _leaflet2.default.Bounds(_leaflet2.default.point([-r, -r]), size.add([r, r]));
     };
 
     var getDataForHeatmap = function getDataForHeatmap(points, leafletMap) {
       return roundResults(accumulateInGrid(points, leafletMap, getBounds(leafletMap)));
     };
-    var data = getDataForHeatmap(this.props.points, this.context.map);
+
+    var data = getDataForHeatmap(this.props.points, this.props.map);
 
     this._heatmap.clear();
     this._heatmap.data(data).draw(this.getMinOpacity(this.props));
 
     this._frame = null;
 
     if (this.props.onStatsUpdate && this.props.points && this.props.points.length > 0) {
-      var stats = _.reduce(data, function (stats, point) {
+      this.props.onStatsUpdate((0, _lodash4.default)(data, function (stats, point) {
         stats.max = point[3] > stats.max ? point[3] : stats.max;
         stats.min = point[3] < stats.min ? point[3] : stats.min;
         return stats;
-      }, { min: Infinity, max: -Infinity });
-
-      this.props.onStatsUpdate(stats);
+      }, { min: Infinity, max: -Infinity }));
     }
   };