feature: DivIcon support single jsx element.

Signed-off-by: wgj <wgj>

Author: wgj

README.md

@@ -685,12 +685,12 @@ import { RCMap, DivIcon, Point } from 'rc-leaflet'
 
 (
   <RCMap>
-    <DivIcon>
+    <DivIcon content={<div>must be single jsx element content.</div>}>
       <Point />
     </DivIcon>
 
     <Point>
-      <DivIcon />
+      <DivIcon content={<div>must be single jsx element content.</div>} />
     </Point>
   </RCMap>
 )
@@ -708,15 +708,15 @@ import { RCMap, DivIcon, Point } from 'rc-leaflet'
 
   - the className of DivIcon container.
 
-- html
+- content
 
-  - type: `string | HTMLElement`
+  - type: `React.ReactElement`
 
-  - default: `''`
+  - default: `null`
 
   - required: `false`
 
-  - custom HTML code to put inside the div element, empty by default. Alternatively, an instance of HTMLElement.
+  - custom `JSX` code to put inside the div element, empty by default. Alternatively, an instance of `React.ReactElement`.
 
 - bgPos
 
@@ -788,16 +788,6 @@ import { RCMap, Popup, Point, CircleMarker, Circle, Polyline } from 'rc-leaflet'
 
   - position is needed only when popup is set directly under the map component.
 
-- content
-
-  - type: `string | HTMLElement | Function`
-
-  - default: `undefined`
-
-  - required: `false`
-
-  - sets the HTML content of the popup. If a function is passed the source layer will be passed to the function. The function should return a String or HTMLElement to be used in the popup.
-
 - maxWidth
 
   - type: `number`
@@ -1010,16 +1000,6 @@ import { RCMap, Tooltip, Point, CircleMarker, Circle, Polyline } from 'rc-leafle
 
   - position is needed only when Tooltip is set directly under the map component.
 
-- content
-
-  - type: `string | HTMLElement | Function`
-
-  - default: `undefined`
-
-  - required: `false`
-
-  - sets the HTML content of the tooltip. If a function is passed the source layer will be passed to the function. The function should return a String or HTMLElement to be used in the tooltip.
-
 - pane
 
   - type: `string`

package.json

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

src/components/BaseIcon/index.tsx

@@ -38,41 +38,33 @@ export default abstract class BaseIcon<T extends L.Icon | L.DivIcon, P extends L
 
   protected constructor (props: Props & P) {
     super(props)
-
     const { layer, children, ...options } = props
 
     this.state = {
       instance: this.createInstance(options as P)
     }
-    if (layer) {
-      layer.setIcon(this.state.instance)
-    }
   }
 
-  public componentDidUpdate (prevProps: Props & P, prevState: { instance: T }): void {
-    const { layer: prevLayer } = prevProps
-    const { layer, children, ...options } = this.props
-    const { instance: prevIcon } = prevState
-    const { instance: icon } = this.state
+  public static getDerivedStateFromProps (nextProps, prevState): null {
+    const { layer, children, ...options } = nextProps
+    const { instance: icon } = prevState
 
-    if (icon === prevIcon) {
-      const instance = this.createInstance(options as P)
-
-      if (layer !== prevLayer && prevLayer) {
-        prevLayer.setIcon(defaultIcon)
-      }
-      if (layer) {
-        layer.setIcon(instance)
-      }
-      this.setState({ instance })
+    for (const [key, value] of Object.entries(options)) {
+      icon.options[key] = value
+    }
+    if (layer) {
+      layer.setIcon(icon)
     }
+    return null
   }
 
   public componentWillUnmount (): void {
     const { layer } = this.props
 
     if (layer) {
-      layer.setIcon(defaultIcon)
+      setTimeout(() => {
+        layer.setIcon(defaultIcon)
+      }, 0)
     }
   }
 

src/components/DivIcon/index.tsx

@@ -1,10 +1,20 @@
+import React, { createContext } from 'react'
+import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import L from 'leaflet'
 import { Types } from '../../config'
 import creator, { defaultOptions } from './creator'
 import BaseIcon, { Props as BaseIconProps } from '../BaseIcon'
 
-type Props = Readonly<BaseIconProps & L.DivIconOptions>
+interface PartialProps {
+  content: React.ReactElement
+}
+
+type Props = Readonly<Partial<PartialProps> & BaseIconProps & L.DivIconOptions>
+
+const Context = createContext<React.ReactElement>(null)
+
+export const Consumer = Context.Consumer
 
 export default class DivIcon extends BaseIcon<L.DivIcon, Props> {
   protected static propTypes = {
@@ -14,15 +24,40 @@ export default class DivIcon extends BaseIcon<L.DivIcon, Props> {
     iconSize: Types.Pixel,
     iconAnchor: Types.Pixel,
     popupAnchor: Types.Pixel,
-    className: PropTypes.string
+    className: PropTypes.string,
+    content: PropTypes.element
   }
 
-  protected static defaultProps = {
+  protected static defaultProps: typeof BaseIcon.defaultProps & typeof defaultOptions & PartialProps = {
     ...BaseIcon.defaultProps,
-    ...defaultOptions
+    ...defaultOptions,
+    content: null
+  }
+
+  public static getDerivedStateFromProps (nextProps, prevState): null {
+    const { layer, children, html, ...options } = nextProps
+    const { instance: icon } = prevState
+
+    if (layer) {
+      icon.options.html = layer.getElement() ? layer.getElement().firstElementChild : null
+    }
+    return BaseIcon.getDerivedStateFromProps({ layer, ...options }, prevState)
   }
 
-  protected createInstance (options: L.DivIconOptions): L.DivIcon {
+  protected createInstance ({ html, ...options }: L.DivIconOptions): L.DivIcon {
     return creator(options)
   }
+
+  public render (): React.ReactNode {
+    const { layer, content } = this.props
+
+    return (
+      <>
+        <Context.Provider value={content}>
+          { super.render() }
+        </Context.Provider>
+        { layer && layer.getElement() ? createPortal(content, layer.getElement()) : null }
+      </>
+    )
+  }
 }

src/components/Layer/index.ts

@@ -29,7 +29,6 @@ export default abstract class Layer<T extends L.Layer, P extends L.LayerOptions>
 
   protected constructor (props: Props & P, context: ContextType) {
     super(props)
-
     const { children, ...restProps } = props
 
     this.instance = this.createInstance({ ...this.getOptions(), ...restProps } as P)

src/components/Point/index.tsx

@@ -1,7 +1,10 @@
+import React from 'react'
+import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import L from 'leaflet'
 import { Types } from '../../config'
 import InteractiveLayer from '../InteractiveLayer'
+import { Consumer as DivIconConsumer } from '../DivIcon'
 import { defaultIcon } from '../DivIcon/creator'
 
 interface RequiredProps {
@@ -50,4 +53,17 @@ export default class Point extends InteractiveLayer<L.Marker, Props> {
     }
     super.bindEvents(prevProps)
   }
+
+  public render (): React.ReactNode {
+    const { icon } = this.props
+
+    return (
+      <>
+        { super.render() }
+        <DivIconConsumer>
+          { content => (icon instanceof L.DivIcon ? createPortal(content, this.instance.getElement()) : null) }
+        </DivIconConsumer>
+      </>
+    )
+  }
 }

tsconfig.json

@@ -6,7 +6,7 @@
     "allowSyntheticDefaultImports": true,
     "jsx": "react",
     "esModuleInterop": true,
-    "lib": ["ES2017", "DOM"],
+    "lib": ["es2017", "dom"],
     "declaration": true,
     "moduleResolution": "Node"
   }