[release] 1.1.8: Remove deprecated-styles. Use react-leaflet context …

…for markers. (#62) * [config] Update dependencies * [demo-app] Update Panel props according lates react-bootstrap specification * [styles] Remove requiring of deprecated-styles inside .js plugin * [plugin] Use react context store to access markers instead of clonning them during rendering * [config] Update peerDependencies * [doc] Update README and CHANGELOG * [alerts] Add deprecation warnings * [demo-app] Create examples for deprecated API * [demo-app] Update examples according to the latest API requirements * [build] Source * [config] Update release version
yuzhva · Mar 8, 2018 · eb52550 · eb52550
1 parent e9d9ff1
commit eb52550
Show file tree

Hide file tree

Showing 41 changed files with 9,707 additions and 4,934 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,26 +1,45 @@
-# v1.2.0
+# [future-release] v1.2.0
+TODO: There are critical changes that touches to the MarkerClusterGroup API:
+**1.** Support of `marker` object `lat` and `lng` keys are removed.
+**2.** `options` property of `MarkerClusterGroup` removed.
+**3.** Console **deprecated warnings** are removed.
+**4.** Better handling on events.
+
+# v1.1.8
 There are critical changes that touches to the MarkerClusterGroup API:
 
-### **1.** marker object `lat` and `lng` keys are deprecated (will be removed at v1.2.0).
-To set marker position, please use `position` key at marker object like:
+### **1.** `options` property is deprecated (will be removed at v1.2.0).
+Since now you don't need to use `options` **prop** to pass [Leaflet.markercluster option](https://github.com/Leaflet/Leaflet.markercluster#all-options) into `<MarkerClusterGroup />`.
+
+Just pass whatever option you need from [All Leaflet.markercluster Options](https://github.com/Leaflet/Leaflet.markercluster#all-options)
+list to `MarkerClusterGroup` as `prop`.
+
+For example:
 ```javascript
-const markers = [
-  { position: [49.8397, 24.0297] },
-  { position: [52.2297, 21.0122] },
-  { position: [51.5074, -0.0901] },
-];
+// New API
+<MarkerClusterGroup showCoverageOnHover={false} />
+
+// How it was before 1.1.8
+<MarkerClusterGroup options={{ showCoverageOnHover: false }} />
 ```
-`position` that is [Leaflet.LatLng](http://leafletjs.com/reference-1.2.0.html#latlng)
-`array` or `object`, that could be declared like:
+or:
 ```javascript
-const markers = [
-  { position: [49.8397, 24.0297] }, // [lat, lng]
-  { position: { lat: 52.2297, lng: 21.0122 } },
-  { position: { lat: 52.2297, lon: 21.0122 } },
-];
+const createClusterCustomIcon = function (cluster) {
+  return L.divIcon({
+    html: `<span>${cluster.getChildCount()}</span>`,
+    className: 'marker-cluster-custom',
+    iconSize: L.point(40, 40, true),
+  });
+}
+
+// New API
+<MarkerClusterGroup iconCreateFunction={createClusterCustomIcon} showCoverageOnHover={false} />
+
+// How it was before 1.1.8
+<MarkerClusterGroup options={{ iconCreateFunction: clusterCustomIcon, showCoverageOnHover: false }} />
 ```
 
-### **2.** `wrapperOptions` is fully deprecated and will not use anymore (will be removed at v1.2.0).
+### **2.** Deprecated `wrapperOptions` property has been removed.
 How to replace `wrapperOptions` old `enableDefaultStyle | disableDefaultAnimation | removeDuplicates` features:
 - `enableDefaultStyle:` to enable `leaflet.markercluster` default style for cluster,
 just import Markercluster styles:
@@ -67,6 +86,36 @@ render() {
 // ...
 ```
 
+### **3.** Bug Fix
+- Dependencies Update
+- Demo-app: Update Panel props according to latest react-bootstrap specification
+- **Remove** requiring of **deprecated-styles** inside **react-leaflet-markercluster.js** plugin
+- **Use react context store to access markers instead of cloning markers during their render**
+- Deprecation warnings about **MarkerClusterGroup** `options` property
+- Update Demo-app with fresh examples
+
+# v1.1.7
+### **1.** marker object `lat` and `lng` keys are deprecated (will be removed at v1.2.0).
+To set marker position, please use `position` key at marker object like:
+```javascript
+const markers = [
+  { position: [49.8397, 24.0297] },
+  { position: [52.2297, 21.0122] },
+  { position: [51.5074, -0.0901] },
+];
+```
+`position` that is [Leaflet.LatLng](http://leafletjs.com/reference-1.2.0.html#latlng)
+`array` or `object`, that could be declared like:
+```javascript
+const markers = [
+  { position: [49.8397, 24.0297] }, // [lat, lng]
+  { position: { lat: 52.2297, lng: 21.0122 } },
+  { position: { lat: 52.2297, lon: 21.0122 } },
+];
+```
+
+### **2.** `wrapperOptions` is fully deprecated and will not be used anymore (will be removed at v1.1.8).
+
 ### **3.** Bug Fix
 - Check if map className was already added/changed when MarkerClusterGroup is mounting
 - Remove markers from map when MarkerClusterGroup received empty array in nextProps

diff --git a/README.md b/README.md
@@ -20,10 +20,8 @@ overlapping because they are close to each other - you probably need to group th
 That is what you can do with **react-leaflet-markercluster**.
 
 > **Note: Before getting started, please see these useful guides:**
-> - [Leaflet Quick Start Guide](
-http://leafletjs.com/examples/quick-start/).
-> - [react-leaflet Getting started](
-https://github.com/PaulLeCam/react-leaflet/blob/master/docs/Getting%20started.md).
+> - [Leaflet Quick Start Guide](http://leafletjs.com/examples/quick-start/).
+> - [react-leaflet Installation](https://react-leaflet.js.org/docs/en/installation.html).
 
 
 # Table of Contents
@@ -41,10 +39,10 @@ npm install react-leaflet-markercluster # npm
 ```
 The `react-leaflet-markercluster` requires `leaflet.markercluster` as [`peerDependency`](https://docs.npmjs.com/files/package.json#peerdependencies)
 
-(React, PropTypes, Leaflet, react-leaflet also should be installed)
+(Leaflet, react-leaflet, PropTypes also should be installed)
 ```bash
-yarn add leaflet.markercluster # yarn
-npm install leaflet.markercluster # npm
+yarn add leaflet.markercluster leaflet react-leaflet prop-types # yarn
+npm install leaflet.markercluster leaflet react-leaflet prop-types # npm
 ```
 
 **2.** Import Markercluster styles:
@@ -54,58 +52,75 @@ npm install leaflet.markercluster # npm
 
 require('react-leaflet-markercluster/dist/styles.min.css'); // inside .js file
 ```
-or include CSS styles directly to the head of HTML file:
+Or include CSS styles directly to the head of HTML file:
 ```html
 <link rel="stylesheet" href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css" />
 ```
 
-**3.** Import package to your component:
-```javascript
-import MarkerClusterGroup from 'react-leaflet-markercluster';
-```
-
-**4.** Declare some markers in next format:
-```javascript
-const markers = [
-  { position: [49.8397, 24.0297] },
-  { position: [52.2297, 21.0122] },
-  { position: [51.5074, -0.0901] },
-];
-```
-
-**5.** Put `<MarkerClusterGroup ... />` inside react-leaflet, right after `<TileLayer />`:
+**3.** Write some simple `react-leaflet` Map:
 ```javascript
 <Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
   <TileLayer
     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
     attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
   />
 
-  <MarkerClusterGroup markers={markers} />
+  <Marker position={[49.8397, 24.0297]} />
+  <Marker position={[52.2297, 21.0122]} />
+  <Marker position={[51.5074, -0.0901]} />
+
 </Map>
 ```
 
-[**Check demo**](https://yuzhva.github.io/react-leaflet-markercluster/) for more examples.
 
-**P.S:** support of react-leaflet Marker available as a testing feature.  
-Just grab your markers inside MarkerClusterGroup like:
+**4.** Import package to your component:
 ```javascript
-<Map className="markercluster-map" center={[51.0, 19.0]} zoom={4} maxZoom={18}>
-  <TileLayer
-    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-  />
+import MarkerClusterGroup from 'react-leaflet-markercluster';
+```
 
-  <MarkerClusterGroup>
-    <Marker position={[49.8397, 24.0297]} />
-    <Marker position={[52.2297, 21.0122]} />
-    <Marker position={[51.5074, -0.0901]} />
-  </MarkerClusterGroup>
-</Map>
+**5.** Just grab your markers inside `<MarkerClusterGroup />` component (right after `<TileLayer />`):
+```javascript
+<MarkerClusterGroup>
+  <Marker position={[49.8397, 24.0297]} />
+  <Marker position={[52.2297, 21.0122]} />
+  <Marker position={[51.5074, -0.0901]} />
+</MarkerClusterGroup>
 ```
 
+[**Check demo**](https://yuzhva.github.io/react-leaflet-markercluster/) for more examples.
+
+
 # API
-* `markers: array of objects` (required)
+Just pass whatever option you need from [All Leaflet.markercluster Options](https://github.com/Leaflet/Leaflet.markercluster#all-options)
+to `MarkerClusterGroup` as `prop`.
+
+For example:
+```javascript
+<MarkerClusterGroup showCoverageOnHover={false} />
+```
+or:
+```javascript
+const createClusterCustomIcon = function (cluster) {
+  return L.divIcon({
+    html: `<span>${cluster.getChildCount()}</span>`,
+    className: 'marker-cluster-custom',
+    iconSize: L.point(40, 40, true),
+  });
+}
+
+<MarkerClusterGroup iconCreateFunction={createClusterCustomIcon} />
+```
+P.S: old examples are available at [CHANGELOG.md](./CHANGELOG.md#v118)
+
+**Event listeners:**
++ `onMarkerClick: function`
++ `onClusterClick: function`
++ `onPopupClose: function`
+
+**Deprecated since v1.1.8 API:**
++ `options: object` All available [options for Leaflet.markercluster](
+  https://github.com/Leaflet/Leaflet.markercluster#options)
+* `markers: array of objects`
 
   keys for marker object, that will be placed in markers array:
     - `position: array | object` [Leaflet.LatLng](http://leafletjs.com/reference-1.2.0.html#latlng) (required)
@@ -115,13 +130,10 @@ Just grab your markers inside MarkerClusterGroup like:
     - `popup: Leaflet.Popup | string | HTMLElement`
     - `tooltip: Leaflet.Tooltip | string | HTMLElement`
 
-+ `options: object` All available [options for Leaflet.markercluster](
-  https://github.com/Leaflet/Leaflet.markercluster#options)
-+ `markerOptions: object` All available [options for Leaflet.Marker](
++ `markerOptions: object` (options for `markers` in JSON format)
+  All available [options for Leaflet.Marker](
   http://leafletjs.com/reference-1.0.3.html#marker-option)
-+ `onMarkerClick: function`
-+ `onClusterClick: function`
-+ `onPopupClose: function`
+
 
 **Refs.** Accessing markerClusterGroup Leaflet element:
 ```javascript
@@ -167,13 +179,9 @@ npm run build:source
 > Don't contribute directly to `./dist` folder.
 Distributions should be updated after running build:source command.
 
-**3.** In newly updated `./dist` folder, please:
-* change `deprecated-styles.scss` to `deprecated-styles.css` in `*.js` file
-* change `deprecated-styles.scss` to `deprecated-styles.min.css` in `*.min.js` file
-
-**4.** Commit your changes and open Pull Request.
+**3.** Commit your changes and open Pull Request.
 
-**5.** :beer: **Thank you for contribution** :beer:
+:beer: **Thank you for contribution** :beer:
 
 
 # UMD

diff --git a/config/gulpfile.babel.js b/config/gulpfile.babel.js
@@ -27,8 +27,7 @@ gulp.task('dist:script', () => (
 ));
 
 gulp.task('dist:styles', () => (
-  // TEMP: remove compiling of deprecated-styles from v1.2.0 because of deprecated wrapperOptions
-  gulp.src([path.join(srcPath, 'styles.scss'), path.join(srcPath, 'deprecated-styles.scss')])
+  gulp.src(path.join(srcPath, 'styles.scss'))
     .pipe(sass({ includePaths: [rootPath] }).on('error', sass.logError))
     .pipe(gulp.dest(distPath))
 ));
@@ -41,8 +40,7 @@ gulp.task('uglify:script', () => (
 ));
 
 gulp.task('uglify:styles', () => (
-  // TEMP: remove uglifying of deprecated-styles from v1.2.0 because of deprecated wrapperOptions
-  gulp.src([path.join(distPath, 'styles.css'), path.join(distPath, 'deprecated-styles.css')])
+  gulp.src(path.join(distPath, 'styles.css'))
     .pipe(uglifyCSS({ compatibility: 'ie8' }))
     .pipe(rename({ suffix: '.min' }))
     .pipe(gulp.dest(distPath))

diff --git a/demo-app/components/basic-example/index.js b/demo-app/components/basic-example/index.js