lazy loading working

README.md

@@ -1,4 +1,4 @@
-Dash Leaflet is a light wrapper around React-Leaflet. The syntax is similar to other Dash components, with naming conventions following the React-Leaflet API. 
+Dash Leaflet is a light wrapper around React-Leaflet. The syntax is similar to other Dash components, with naming conventions following the React-Leaflet API.
 
 ## Getting started
 
@@ -19,16 +19,16 @@ app = dash.Dash()
 app.layout = dl.Map(dl.TileLayer(), style={'width': '1000px', 'height': '500px'})
 
 if __name__ == '__main__':
-    app.run_server()    
+    app.run_server()
 ````
 
 If you visit http://127.0.0.1:8050/ in your browser, you should see a Leaflet map.
 
 ## Documentation
 
-The documentation has been moved to [Heroku](https://dash-leaflet.herokuapp.com/) to enable an interactive example gallery. 
+The documentation has been moved to [Heroku](https://dash-leaflet.herokuapp.com/) to enable an interactive example gallery.
 
-NB: The 0.1.0 release contains a number breaking changes, most prominently merging of the `SuperCluster` and `GeoJSON` components into a new `GeoJSON` component powered by [functional properties](https://dash-leaflet.herokuapp.com/#func_props).  
+NB: The 0.1.0 release contains a number breaking changes, most prominently merging of the `SuperCluster` and `GeoJSON` components into a new `GeoJSON` component powered by [functional properties](https://dash-leaflet.herokuapp.com/#func_props).
 
 ## Build instructions
 
@@ -49,8 +49,8 @@ pip install -r requirements.txt
 Finally, install packages via npm (ignore errors) and run the build script,
 
 ````
-npm i --ignore-scripts 
-npm run build:all
+npm i --ignore-scripts
+npm run build
 ````
 
 ## Donation

src/lib/components/Minichart.react.js

@@ -2,7 +2,7 @@ import React, { Suspense } from 'react';
 import PropTypes from 'prop-types';
 
 // eslint-disable-next-line no-inline-comments
-const LazyMinichart = React.lazy(() => import(/* webpackChunkName: "minichart" */ '../fragments/LeafletMinichart.react'));
+const LazyMinichart = React.lazy(() => import(/* webpackChunkName: "minichart" */ '../fragments/Minichart.react'));
 
 const Minichart = (props) => {
     return (

src/lib/fragments/Minichart.react.js

@@ -1,50 +1,9 @@
 import React, { Component } from "react"
-import {propTypes} from '../components/Minichart.react';
-import { withLeaflet, MapLayer } from "react-leaflet";
+import { propTypes } from '../components/Minichart.react';
 
-require("leaflet.minichart");
+import LeafletMinichart from "../LeafletMinichart"
 
 
-class LeafletMinichart extends MapLayer {
-
-  createLeafletElement(props) {
-    const center = this._parseCenter(props);
-    const options = this._parseOptions(props);
-    return new L.minichart(center, options);
-  }
-
-  updateLeafletElement(fromProps, toProps) {
-    const fromOptions = this._parseOptions(fromProps);
-    const toOptions = this._parseOptions(toProps);
-    if (fromOptions !== toOptions) {
-      this.leafletElement.setOptions(toOptions);
-    }
-  }
-
-  _parseCenter(props) {
-    return [props.lat, props.lon]
-  }
-
-  _parseOptions(props) {
-    return {
-      type: props.type,
-      data: props.data,
-      maxValues: props.maxValues,
-      colors: props.colors,
-      width: props.width,
-      height: props.height,
-      labels: props.labels,
-      labelMinSize: props.labelMinSize,
-      labelMaxSize: props.labelMaxSize,
-      labelPadding: props.labelPadding,
-      labelStyle: props.labelStyle,
-      labelColor: props.labelColor,
-      transitionTime: props.transitionTime,
-    }
-  }
-
-}
-
 /**
  * Minichart is a wrapper of leaflet.minichart.
  */
@@ -54,5 +13,4 @@ export default class Minichart extends Component {
     }
 }
 
-export default withLeaflet(Minichart)
 Minichart.propTypes = propTypes;