feature: add onCreate, onAdd, onBeforeRemove, onRemove lifecycle hooks to components extends Layer, for plugin development.

Signed-off-by: wgj <wgj>

Author: wgj

build/rollup.config.js

@@ -18,7 +18,15 @@ export default {
     dir: dist,
     format: 'umd',
     name: 'RCLeaflet',
-    exports: 'named'
+    exports: 'named',
+    globals: {
+      react: 'React',
+      'react-dom': 'ReactDOM',
+      'prop-types': 'PropTypes',
+      classnames: 'classNames',
+      'airbnb-prop-types': 'airbnbPropTypes',
+      leaflet: 'L'
+    }
   },
   external: ['react', 'react-dom', 'prop-types', 'airbnb-prop-types', 'classnames', 'leaflet', 'proj4', 'proj4leaflet', 'leaflet.markercluster'],
   plugins: [

package.json

@@ -1,13 +1,14 @@
 {
   "name": "rc-leaflet",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "React components of Leaflet",
   "keywords": [
-    "leaflet",
-    "react",
     "typescript",
     "ts",
+    "react",
+    "leaflet",
     "map",
+    "react-leaflet",
     "react-component",
     "component"
   ],
@@ -85,7 +86,7 @@
   },
   "peerDependencies": {
     "typescript": ">=3.5.1",
-    "react": ">=16.0.0",
-    "react-dom": ">=16.0.0"
+    "react": ">=16.2.0",
+    "react-dom": ">=16.2.0"
   }
 }

src/components/ClusterPoints/index.tsx

@@ -76,10 +76,6 @@ export default class ClusterPoints extends Layer<L.MarkerClusterGroup, Props> {
     }
   }
 
-  public componentWillUnmount (): void {
-    this.instance.remove()
-  }
-
   protected createInstance (props: Props): L.MarkerClusterGroup {
     const { points, icon, ...options } = props
 

src/components/Layer/index.ts

@@ -5,6 +5,10 @@ import Context, { ContextType } from '../RCMap/Context'
 import Evented from '../Evented'
 
 interface PartialProps {
+  onCreate (layer: L.Layer): void
+  onAdd (e: L.LeafletEvent, layer: L.Layer): void
+  onBeforeRemove (layer: L.Layer): void
+  onRemove (e: L.LeafletEvent, layer: L.Layer): void
   children: React.ReactNode
 }
 
@@ -15,6 +19,10 @@ export default abstract class Layer<T extends L.Layer, P extends L.LayerOptions,
     ...Evented.propTypes,
     pane: PropTypes.string,
     attribution: PropTypes.string,
+    onCreate: PropTypes.func,
+    onAdd: PropTypes.func,
+    onBeforeRemove: PropTypes.func,
+    onRemove: PropTypes.func,
     children: PropTypes.node
   }
 
@@ -24,15 +32,16 @@ export default abstract class Layer<T extends L.Layer, P extends L.LayerOptions,
 
   protected constructor (props: Props & P, context: ContextType) {
     super(props, context)
-    const { children, ...restProps } = props
+    const { onCreate, onAdd, onRemove, children, ...restProps } = props
 
     this.instance = this.createInstance({ ...this.getTheme(), ...restProps } as P)
-    if (context.map) {
-      this.instance.addTo(context.map)
-    }
+    onCreate && onCreate(this.instance)
+    this.instance.on({ add: this.onAdd, remove: this.onRemove })
+    this.instance.addTo(context.map)
   }
 
   public componentWillUnmount (): void {
+    this.props.onBeforeRemove && this.props.onBeforeRemove(this.instance)
     this.instance.remove()
   }
 
@@ -42,6 +51,10 @@ export default abstract class Layer<T extends L.Layer, P extends L.LayerOptions,
     return {}
   }
 
+  private onAdd = (e: L.LeafletEvent) => this.props.onAdd && this.props.onAdd(e, this.instance)
+
+  private onRemove = (e: L.LeafletEvent) => this.props.onRemove && this.props.onRemove(e, this.instance)
+
   public render (): React.ReactNode {
     const { children } = this.props
     const layer = this.instance

src/components/TileLayer/Component.ts

@@ -27,9 +27,7 @@ export default class TileLayer extends Component<Props> {
     const { url, ...options } = props
 
     this.instance = L.tileLayer(url, options)
-    if (context.map) {
-      context.map.addLayer(this.instance)
-    }
+    context.map.addLayer(this.instance)
   }
 
   public shouldComponentUpdate (nextProps: Props): boolean {