v1.0.0-beta.2

PaulLeCam · Aug 20, 2016 · bf0d48a · bf0d48a
1 parent c3a3cac
commit bf0d48a
Show file tree

Hide file tree

Showing 12 changed files with 452 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,8 @@
-## v1.0.0-beta.2 (unreleased)
+## v1.0.0-beta.2 (2016-08-20)
 
-- Revert basing components from `React.PureComponent` to `React.Component`.
+- Added `Tooltip` component introduced in Leaflet v1.0.0-rc.2. See [Leaflet's documentation](http://leafletjs.com/reference-1.0.0.html#tooltip) for usage.
+- Updated Leaflet dependency to v1.0.0-rc.3.
+- Reverted basing components on `React.PureComponent`, they are now based on `React.Component`.
 
 ## v1.0.0-beta.1 (2016-07-30)
 

diff --git a/dist/react-leaflet.js b/dist/react-leaflet.js
@@ -59,7 +59,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	Object.defineProperty(exports, "__esModule", {
 	  value: true
 	});
-	exports.setIconDefaultImagePath = exports.ZoomControl = exports.WMSTileLayer = exports.TileLayer = exports.ScaleControl = exports.Rectangle = exports.Popup = exports.Polyline = exports.Polygon = exports.Path = exports.Marker = exports.MapLayer = exports.MapControl = exports.MapComponent = exports.Map = exports.LayersControl = exports.LayerGroup = exports.ImageOverlay = exports.GridLayer = exports.GeoJSON = exports.FeatureGroup = exports.CircleMarker = exports.Circle = exports.AttributionControl = exports.PropTypes = undefined;
+	exports.setIconDefaultImagePath = exports.ZoomControl = exports.WMSTileLayer = exports.Tooltip = exports.TileLayer = exports.ScaleControl = exports.Rectangle = exports.Popup = exports.Polyline = exports.Polygon = exports.Path = exports.Marker = exports.MapLayer = exports.MapControl = exports.MapComponent = exports.Map = exports.LayersControl = exports.LayerGroup = exports.ImageOverlay = exports.GridLayer = exports.GeoJSON = exports.FeatureGroup = exports.CircleMarker = exports.Circle = exports.AttributionControl = exports.PropTypes = undefined;
 
 	var _leaflet = __webpack_require__(1);
 
@@ -153,11 +153,15 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	var _TileLayer3 = _interopRequireDefault(_TileLayer2);
 
-	var _WMSTileLayer2 = __webpack_require__(104);
+	var _Tooltip2 = __webpack_require__(104);
+
+	var _Tooltip3 = _interopRequireDefault(_Tooltip2);
+
+	var _WMSTileLayer2 = __webpack_require__(105);
 
 	var _WMSTileLayer3 = _interopRequireDefault(_WMSTileLayer2);
 
-	var _ZoomControl2 = __webpack_require__(105);
+	var _ZoomControl2 = __webpack_require__(106);
 
 	var _ZoomControl3 = _interopRequireDefault(_ZoomControl2);
 
@@ -187,6 +191,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	exports.Rectangle = _Rectangle3.default;
 	exports.ScaleControl = _ScaleControl3.default;
 	exports.TileLayer = _TileLayer3.default;
+	exports.Tooltip = _Tooltip3.default;
 	exports.WMSTileLayer = _WMSTileLayer3.default;
 	exports.ZoomControl = _ZoomControl3.default;
 	var setIconDefaultImagePath = exports.setIconDefaultImagePath = function setIconDefaultImagePath(path) {
@@ -4848,6 +4853,135 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	var _react = __webpack_require__(4);
 
+	var _reactDom = __webpack_require__(100);
+
+	var _MapComponent2 = __webpack_require__(51);
+
+	var _MapComponent3 = _interopRequireDefault(_MapComponent2);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+	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; }
+
+	var Tooltip = function (_MapComponent) {
+	  _inherits(Tooltip, _MapComponent);
+
+	  function Tooltip() {
+	    var _Object$getPrototypeO;
+
+	    var _temp, _this, _ret;
+
+	    _classCallCheck(this, Tooltip);
+
+	    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+	      args[_key] = arguments[_key];
+	    }
+
+	    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tooltip)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.onTooltipOpen = function (_ref) {
+	      var tooltip = _ref.tooltip;
+
+	      if (tooltip === _this.leafletElement) {
+	        _this.renderTooltipContent();
+	      }
+	    }, _this.onTooltipClose = function (_ref2) {
+	      var tooltip = _ref2.tooltip;
+
+	      if (tooltip === _this.leafletElement) {
+	        _this.removeTooltipContent();
+	      }
+	    }, _this.renderTooltipContent = function () {
+	      if (_this.props.children) {
+	        (0, _reactDom.render)(_react.Children.only(_this.props.children), _this.leafletElement._contentNode);
+	        _this.leafletElement.update();
+	      } else {
+	        _this.removeTooltipContent();
+	      }
+	    }, _this.removeTooltipContent = function () {
+	      if (_this.leafletElement._contentNode) {
+	        (0, _reactDom.unmountComponentAtNode)(_this.leafletElement._contentNode);
+	      }
+	    }, _temp), _possibleConstructorReturn(_this, _ret);
+	  }
+
+	  _createClass(Tooltip, [{
+	    key: 'componentWillMount',
+	    value: function componentWillMount() {
+	      _get(Object.getPrototypeOf(Tooltip.prototype), 'componentWillMount', this).call(this);
+	      var _props = this.props;
+	      var _children = _props.children;
+
+	      var props = _objectWithoutProperties(_props, ['children']);
+
+	      this.leafletElement = (0, _leaflet.tooltip)(props, this.context.popupContainer);
+	      this.context.popupContainer.on({
+	        tooltipopen: this.onTooltipOpen,
+	        tooltipclose: this.onTooltipClose
+	      });
+	    }
+	  }, {
+	    key: 'componentDidMount',
+	    value: function componentDidMount() {
+	      this.context.popupContainer.bindTooltip(this.leafletElement);
+	    }
+	  }, {
+	    key: 'componentDidUpdate',
+	    value: function componentDidUpdate() {
+	      if (this.leafletElement.isOpen()) {
+	        this.renderTooltipContent();
+	      }
+	    }
+	  }, {
+	    key: 'componentWillUnmount',
+	    value: function componentWillUnmount() {
+	      this.context.popupContainer.off({
+	        tooltipopen: this.onTooltipOpen,
+	        tooltipclose: this.onTooltipClose
+	      });
+	      this.context.popupContainer.removeLayer(this.leafletElement);
+	      _get(Object.getPrototypeOf(Tooltip.prototype), 'componentWillUnmount', this).call(this);
+	    }
+	  }, {
+	    key: 'render',
+	    value: function render() {
+	      return null;
+	    }
+	  }]);
+
+	  return Tooltip;
+	}(_MapComponent3.default);
+
+	Tooltip.propTypes = {
+	  children: _react.PropTypes.node
+	};
+	Tooltip.contextTypes = {
+	  popupContainer: _react.PropTypes.object
+	};
+	exports.default = Tooltip;
+
+/***/ },
+/* 105 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+	var _leaflet = __webpack_require__(1);
+
+	var _react = __webpack_require__(4);
+
 	var _GridLayer2 = __webpack_require__(78);
 
 	var _GridLayer3 = _interopRequireDefault(_GridLayer2);
@@ -4893,7 +5027,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	exports.default = WMSTileLayer;
 
 /***/ },
-/* 105 */
+/* 106 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';

diff --git a/dist/react-leaflet.min.js b/dist/react-leaflet.min.js
diff --git a/docs/Components.md b/docs/Components.md
@@ -14,6 +14,7 @@ You can directly access the Leaflet element created by a component using `this.l
 - [UI Layers](#ui-layers)
   - [Marker](#marker)
   - [Popup](#popup)
+  - [Tooltip](#tooltip)
 - [Raster Layers](#raster-layers)
   - [TileLayer](#tilelayer)
   - [ImageOverlay](#imageoverlay)
@@ -104,6 +105,12 @@ The Popup children will be rendered using `ReactDOM.render()`, they must be vali
 **Dynamic properties**
 - `position: latLng` (optional)
 
+### Tooltip
+
+[Leaflet reference](http://leafletjs.com/reference-1.0.0.html#tooltip)
+
+The Tooltip children will be rendered using `ReactDOM.render()`, they must be valid React elements.
+
 ## Raster Layers
 
 ### TileLayer

diff --git a/docs/Extending.md b/docs/Extending.md
@@ -33,6 +33,7 @@ Make sure to read the [how it works page](How%20it%20works.md) of this documenta
         - [`Polyline`](Components.md#polyline)
         - [`Rectangle`](Components.md#rectangle)
     - [`Popup`](Components.md#popup)
+    - [`Tooltip`](Components.md#tooltip)
   - [`MapControl`](Components.md#mapcontrol): base class for all controls, handles positioning.
     - [`AttributionControl`](Components.md#attributioncontrol)
     - [`LayersControl`](Components.md#layerscontrol)

diff --git a/example/components/index.js b/example/components/index.js
@@ -3,36 +3,39 @@ import { render } from 'react-dom'
 
 import SimpleExample from './simple'
 import EventsExample from './events'
-import BoundsExample from './bounds'
 import VectorLayersExample from './vector-layers'
 import OtherLayersExample from './other-layers'
 import ZoomControlExample from './zoom-control'
 import LayersControlExample from './layers-control'
+import DraggableExample from './draggable-marker'
+import BoundsExample from './bounds'
 import CustomComponentExample from './custom-component'
 import AnimateExample from './animate'
-import DraggableExample from './draggable-marker'
+import TooltipExample from './tooltip'
 
 const examples = (
   <div>
     <h1>React-Leaflet examples</h1>
     <h2>Popup with Marker</h2>
     <SimpleExample />
-    <h2>Draggable Marker</h2>
-    <DraggableExample />
     <h2>Events</h2>
     <p>Click the map to show a marker at your detected location</p>
     <EventsExample />
-    <h2>Map view by bounds</h2>
-    <p>Click a rectangle to fit the map to its bounds</p>
-    <BoundsExample />
     <h2>Vector layers</h2>
     <VectorLayersExample />
     <h2>Other layers</h2>
     <OtherLayersExample />
+    <h2>Tooltips</h2>
+    <TooltipExample />
     <h2>Zoom control</h2>
     <ZoomControlExample />
     <h2>Layers control</h2>
     <LayersControlExample />
+    <h2>Draggable Marker</h2>
+    <DraggableExample />
+    <h2>Map view by bounds</h2>
+    <p>Click a rectangle to fit the map to its bounds</p>
+    <BoundsExample />
     <h2>List of markers (custom component)</h2>
     <CustomComponentExample />
     <h2>Animate</h2>

diff --git a/example/components/tooltip.js b/example/components/tooltip.js
@@ -0,0 +1,73 @@
+import React, { Component } from 'react'
+import {
+  Circle,
+  CircleMarker,
+  Map,
+  Polygon,
+  Rectangle,
+  TileLayer,
+  Tooltip,
+} from '../../src'
+
+export default class TooltipExample extends Component {
+  state = {
+    clicked: 0,
+  };
+
+  onClickCircle = () => {
+    this.setState({clicked: this.state.clicked + 1})
+  };
+
+  render () {
+    const center = [51.505, -0.09]
+
+    const polygon = [
+      [51.515, -0.09],
+      [51.52, -0.1],
+      [51.52, -0.12],
+    ]
+
+    const multiPolygon = [
+      [[51.51, -0.12], [51.51, -0.13], [51.53, -0.13]],
+      [[51.51, -0.05], [51.51, -0.07], [51.53, -0.07]],
+    ]
+
+    const rectangle = [
+      [51.49, -0.08],
+      [51.5, -0.06],
+    ]
+
+    const clickedText = this.state.clicked === 0
+      ? 'Click this Circle to change the Tooltip text'
+      : `Circle click: ${this.state.clicked}`
+
+    return (
+      <Map center={center} zoom={13}>
+        <TileLayer
+          attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
+        />
+        <Circle center={center} fillColor='blue' onClick={this.onClickCircle} radius={200}>
+          <Tooltip>
+            <span>{clickedText}</span>
+          </Tooltip>
+        </Circle>
+        <CircleMarker center={[51.51, -0.12]} color='red' radius={20}>
+          <Tooltip>
+            <span>Tooltip for CircleMarker</span>
+          </Tooltip>
+        </CircleMarker>
+        <Polygon color='purple' positions={multiPolygon}>
+          <Tooltip sticky>
+            <span>sticky Tooltip for Polygon</span>
+          </Tooltip>
+        </Polygon>
+        <Rectangle bounds={rectangle} color='black'>
+          <Tooltip direction='bottom' offset={[0, 20]} opacity={1} permanent>
+            <span>permanent Tooltip for Rectangle</span>
+          </Tooltip>
+        </Rectangle>
+      </Map>
+    )
+  }
+}