feature: new Component Point.Content

Signed-off-by: wgj <wgj>

Author: wgj

README.md

@@ -34,8 +34,18 @@
 
 - [TileLayer](#TileLayer)
 
+- [TileLayer.BMap](#TileLayer) `(v1.2.0+)`
+
+- [TileLayer.AMap](#TileLayer) `(v1.2.0+)`
+
+- [TileLayer.OpenStreetMap](#TileLayer) `(v1.2.0+)`
+
+- [TileLayer.GoogleMap](#TileLayer) `(v1.2.0+)`
+
 - [Point](#Point)
 
+- [Point.Content](#Point) `(v1.2.0+)`
+
 - [MassPoints](#MassPoints) `(v1.1.0+)`
 
 - [ClusterPoints](#ClusterPoints) `(v1.1.0+)`
@@ -195,7 +205,7 @@ import { RCMap } from 'rc-leaflet'
 
     const { TileLayers } = Config
 
-    console.log(TileLayers.BMap, TileLayers.AMap)
+    console.log(TileLayers.BMap, TileLayers.AMap, TileLayers.OpenStreetMap, TileLayers.GoogleMap)
     ```
 
 - minZoom
@@ -345,6 +355,22 @@ import { RCMap, TileLayer } from 'rc-leaflet'
   <RCMap>
     <TileLayer />
   </RCMap>
+
+  <RCMap>
+    <TileLayer.BMap />
+  </RCMap>
+
+  <RCMap>
+    <TileLayer.AMap />
+  </RCMap>
+
+  <RCMap>
+    <TileLayer.OpenStreetMap />
+  </RCMap>
+
+  <RCMap>
+    <TileLayer.GoogleMap />
+  </RCMap>
 )
 ```
 
@@ -372,6 +398,13 @@ import { RCMap, Point } from 'rc-leaflet'
 (
   <RCMap>
     <Point />
+
+    <Point>
+      <Point.Content className>
+        <div>first row.</div>
+        <div>second row.</div>
+      </Point.Content>
+    </Point>
   </RCMap>
 )
 ```
@@ -811,12 +844,16 @@ import { RCMap, DivIcon, Point } from 'rc-leaflet'
 
 (
   <RCMap>
-    <DivIcon content={<div>must be single jsx element content.</div>}>
-      <Point />
+    <DivIcon>
+      <Point>
+        <Point.Content />
+      </Point>
     </DivIcon>
 
     <Point>
-      <DivIcon content={<div>must be single jsx element content.</div>} />
+      <DivIcon>
+        <Point.Content />
+      </DivIcon>
     </Point>
   </RCMap>
 )
@@ -834,16 +871,6 @@ import { RCMap, DivIcon, Point } from 'rc-leaflet'
 
   - the className of DivIcon container.
 
-- content
-
-  - type: `React.ReactElement`
-
-  - default: `null`
-
-  - required: `false`
-
-  - custom `JSX` code to put inside the div element, empty by default. Alternatively, an instance of `React.ReactElement`.
-
 - bgPos
 
   - type: [Pixel](#Data-Structure)

UPDATE.md

@@ -1,3 +1,15 @@
+## v1.2.0
+
+- remove: remove `content` prop of `DivIcon`, there are too many edge cases to handle with.
+
+- feature: new Component `Point.Content`, used to replace `content` prop of `DivIcon`.
+
+- feature: new Components, export all abstract Components for plugin development.
+
+- feature: add `TileLayers.OpenStreetMap`, `TileLayers.GoogleMap` config.
+
+- feature: new Components `TileLayer.BMap`, `TileLayer.AMap`, `TileLayer.OpenStreetMap`, `TileLayer.GoogleMap`
+
 ## v1.1.3
 
 - fix: handle the edge case when layer of `DivOverlay` is changed.

build/rollup.config.js

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-leaflet",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "React components of Leaflet",
   "keywords": [
     "leaflet",

src/components/BaseIcon/index.tsx renamed to src/components/BaseIcon/index.ts

@@ -1,8 +1,7 @@
 import React, { PureComponent, Children, isValidElement, cloneElement } from 'react'
 import PropTypes from 'prop-types'
 import L from 'leaflet'
-import { Types } from '../../config'
-import { defaultIcon } from '../DivIcon/creator'
+import * as Types from '../Util/PropTypes'
 
 interface PartialProps {
   layer: L.Marker
@@ -13,7 +12,8 @@ export type Props = Readonly<Partial<PartialProps>>
 
 export default abstract class BaseIcon<T extends L.Icon | L.DivIcon, P extends L.BaseIconOptions> extends PureComponent<Props & P, { instance: T }> {
   public static propTypes = {
-    ...Types.LayerOptionsShape,
+    pane: PropTypes.string,
+    attribution: PropTypes.string,
     iconUrl: PropTypes.string,
     iconRetinaUrl: PropTypes.string,
     iconSize: Types.Pixel,
@@ -29,27 +29,10 @@ export default abstract class BaseIcon<T extends L.Icon | L.DivIcon, P extends L
     children: PropTypes.node
   }
 
-  protected constructor (props: Props & P) {
-    super(props)
-    const { layer, children, ...options } = props
-
-    this.state = {
-      instance: this.createInstance(options as P)
-    }
+  public readonly state: { instance: T } = {
+    instance: undefined
   }
 
-  public componentWillUnmount (): void {
-    const { layer } = this.props
-
-    if (layer) {
-      setTimeout(() => {
-        layer.setIcon(defaultIcon)
-      }, 0)
-    }
-  }
-
-  protected abstract createInstance (options: P): T
-
   public render (): React.ReactNode {
     const { children } = this.props
     const { instance: icon } = this.state

src/components/Circle/index.tsx renamed to src/components/Circle/index.ts

@@ -1,7 +1,7 @@
-import Path from '../Path'
 import PropTypes from 'prop-types'
-import { Types } from '../../config'
 import L from 'leaflet'
+import * as Types from '../Util/PropTypes'
+import Path from '../Path'
 
 export type CircleMarkerOptions = Omit<L.CircleMarkerOptions, 'radius'>
 

src/components/CircleMarker/index.tsx renamed to src/components/CircleMarker/index.ts

@@ -1,23 +1,24 @@
 import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 import React from 'react'
-import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import L from 'leaflet'
 import 'leaflet.markercluster'
-import { Types } from '../../config'
-import { ContextType } from '../RCMap'
+import * as Types from '../Util/PropTypes'
+import { ContextType } from '../RCMap/Context'
 import Layer from '../Layer'
+import PointContext from '../Point/Context'
 import { PolylinePropTypes } from '../Polyline'
-import { Consumer as DivIconConsumer } from '../DivIcon'
 import { defaultIcon } from '../DivIcon/creator'
 
+type Icon = L.Icon | L.DivIcon
+
 interface RequiredProps {
   points: L.LatLngExpression[]
 }
 
 interface PartialProps {
-  icon: L.Icon | L.DivIcon
+  icon: Icon
   clusterPane: string
   chunkProgress (processed?: number, total?: number, time?: number): void
 }
@@ -71,6 +72,7 @@ export default class ClusterPoints extends Layer<L.MarkerClusterGroup, Props> {
     if (points !== prevPoints || icon !== prevIcon) {
       this.instance.clearLayers()
       this.addPoints()
+      this.forceUpdate()
     }
   }
 
@@ -98,16 +100,12 @@ export default class ClusterPoints extends Layer<L.MarkerClusterGroup, Props> {
   }
 
   public render (): React.ReactNode {
-    const { icon } = this.props
-    const layers = this.instance.getLayers()
+    const { icon = defaultIcon } = this.props
 
     return (
-      <>
+      <PointContext.Provider value={{ instance: this.instance, icon }}>
         { super.render() }
-        <DivIconConsumer>
-          { content => (icon instanceof L.DivIcon ? layers.filter(layer => layer instanceof L.Marker && layer.getElement()).map((point: L.Marker) => createPortal(content, point.getElement())) : null) }
-        </DivIconConsumer>
-      </>
+      </PointContext.Provider>
     )
   }
 }

src/components/ClusterPoints/index.tsx

@@ -19,5 +19,6 @@ const defaultIcon = creator(defaultOptions)
 export default creator
 
 export {
+  defaultOptions,
   defaultIcon
 }

src/components/DivIcon/creator.ts

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types'
+import L from 'leaflet'
+import * as Types from '../Util/PropTypes'
+import creator, { defaultIcon } from './creator'
+import BaseIcon, { Props as BaseIconProps } from '../BaseIcon'
+
+type Props = Readonly<BaseIconProps & L.DivIconOptions>
+
+interface State {
+  instance: L.DivIcon
+}
+
+export const keepPrevHTML = (point: L.Marker, icon: L.DivIcon): void => {
+  if (point) {
+    const element = point.getElement()
+    const html = element && element.lastElementChild
+    point.setIcon(icon)
+    if (html) {
+      element.appendChild(html)
+    }
+  }
+}
+
+export default class DivIcon extends BaseIcon<L.DivIcon, Props> {
+  public static propTypes = {
+    ...BaseIcon.propTypes,
+    html: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf<false>([false])]),
+    bgPos: Types.Pixel,
+    iconSize: Types.Pixel,
+    iconAnchor: Types.Pixel,
+    popupAnchor: Types.Pixel,
+    className: PropTypes.string
+  }
+
+  public static getDerivedStateFromProps (nextProps: Props, prevState: State): State {
+    const { layer, children, html, ...options } = nextProps
+    let { instance: icon } = prevState
+
+    icon = creator(options)
+    keepPrevHTML(layer, icon)
+    return { instance: icon }
+  }
+
+  public componentWillUnmount (): void {
+    keepPrevHTML(this.props.layer, defaultIcon)
+  }
+}