fix: Point.Content Bug fix.

wgj · wgj · commit ad157c9d68e0 · 2019-08-15T10:33:23.000+08:00
Signed-off-by: wgj &lt;wgj&gt;
diff --git a/README.md b/README.md
@@ -74,8 +74,6 @@
 
 - TileLayers
 
-- Types
-
 ## Data Structure
 
 - ThemeProps: `{ path?: L.PathOptions }` (see [Leaflet.js](#docs) docs)
@@ -491,14 +489,15 @@ import { RCMap, MassPoints, Popup, Tooltip } from 'rc-leaflet'
 #### `Usage`
 
 ```jsx
-import { RCMap, ClusterPoints, Popup, Tooltip } from 'rc-leaflet'
+import { RCMap, Point, ClusterPoints, Popup, Tooltip } from 'rc-leaflet'
 
 (
   <RCMap>
     <ClusterPoints points />
 
     <DivIcon>
       <ClusterPoints points>
+        <Point.Content />
         <Popup>this is Popup.</Popup>
         <Tooltip>this is Tooltip.</Tooltip>
       </ClusterPoints>
@@ -840,7 +839,7 @@ import { RCMap, Icon, Point } from 'rc-leaflet'
 #### `Usage`
 
 ```jsx
-import { RCMap, DivIcon, Point } from 'rc-leaflet'
+import { RCMap, Point, DivIcon, Point } from 'rc-leaflet'
 
 (
   <RCMap>
diff --git a/UPDATE.md b/UPDATE.md
@@ -4,12 +4,46 @@
 
 - feature: new Component `Point.Content`, used to replace `content` prop of `DivIcon`.
 
+  ```jsx
+  <Point>
+    <Point.Content />
+  </Point>
+
+  <Point>
+    <DivIcon>
+      <Point.Content />
+    </DivIcon>
+  </Point>
+
+  <DivIcon>
+    <Point>
+      <Point.Content />
+    </Point>
+  </DivIcon>
+
+  <ClusterPoints>
+    <Point.Content />
+  </ClusterPoints>
+
+  <DivIcon>
+    <ClusterPoints>
+      <Point.Content />
+    </ClusterPoints>
+  </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`
 
+  ```jsx
+  <RCMap crs>
+    <TileLayer.GoogleMap />
+  </RCMap>
+  ```
+
 ## v1.1.3
 
 - fix: handle the edge case when layer of `DivOverlay` is changed.
@@ -26,7 +60,7 @@
 
 - feature: new Component `MassPoints`.
 
-  ```js
+  ```jsx
   <MassPoints points />
 
   <MassPoints points iconUrl />
@@ -39,7 +73,7 @@
 
 - feature: new Component `ClusterPoints`.
 
-  ```js
+  ```jsx
   <ClusterPoints points />
 
   <DivIcon>
@@ -70,7 +104,7 @@
 
 - feature: `DivIcon` supports single jsx element.
 
-  ```js
+  ```jsx
   let Content = (
     <div>
       <div>content row.</div>
diff --git a/src/components/BaseIcon/index.ts b/src/components/BaseIcon/index.ts
@@ -1,7 +1,7 @@
 import React, { PureComponent, Children, isValidElement, cloneElement } from 'react'
 import PropTypes from 'prop-types'
 import L from 'leaflet'
-import * as Types from '../Util/PropTypes'
+import { Pixel } from '../../util/PropTypes'
 
 interface PartialProps {
   layer: L.Marker
@@ -16,14 +16,14 @@ export default abstract class BaseIcon<T extends L.Icon | L.DivIcon, P extends L
     attribution: PropTypes.string,
     iconUrl: PropTypes.string,
     iconRetinaUrl: PropTypes.string,
-    iconSize: Types.Pixel,
-    iconAnchor: Types.Pixel,
-    popupAnchor: Types.Pixel,
-    tooltipAnchor: Types.Pixel,
+    iconSize: Pixel,
+    iconAnchor: Pixel,
+    popupAnchor: Pixel,
+    tooltipAnchor: Pixel,
     shadowUrl: PropTypes.string,
     shadowRetinaUrl: PropTypes.string,
-    shadowSize: Types.Pixel,
-    shadowAnchor: Types.Pixel,
+    shadowSize: Pixel,
+    shadowAnchor: Pixel,
     className: PropTypes.string,
     layer: PropTypes.instanceOf(L.Marker),
     children: PropTypes.node
diff --git a/src/components/CircleMarker/index.ts b/src/components/CircleMarker/index.ts
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import L from 'leaflet'
-import * as Types from '../Util/PropTypes'
+import { Point } from '../../util/PropTypes'
 import Path from '../Path'
 
 export type CircleMarkerOptions = Omit<L.CircleMarkerOptions, 'radius'>
@@ -16,7 +16,7 @@ export default class CircleMarker<P extends CircleMarkerOptions = CircleMarkerOp
   public static propTypes = {
     ...Path.propTypes,
     radius: PropTypes.number.isRequired,
-    center: Types.Point.isRequired
+    center: Point.isRequired
   }
 
   protected createInstance (props: Props & P): L.CircleMarker {
diff --git a/src/components/ClusterPoints/index.tsx b/src/components/ClusterPoints/index.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import L from 'leaflet'
 import 'leaflet.markercluster'
-import * as Types from '../Util/PropTypes'
+import { Icon, Point } from '../../util/PropTypes'
 import { ContextType } from '../RCMap/Context'
 import Layer from '../Layer'
 import PointContext from '../Point/Context'
@@ -28,8 +28,8 @@ type Props = Readonly<RequiredProps & Partial<PartialProps> & L.MarkerClusterGro
 export default class ClusterPoints extends Layer<L.MarkerClusterGroup, Props> {
   public static propTypes = {
     ...Layer.propTypes,
-    points: PropTypes.arrayOf(Types.Point).isRequired,
-    icon: Types.Icon,
+    points: PropTypes.arrayOf(Point).isRequired,
+    icon: Icon,
     clusterPane: PropTypes.string,
     chunkProgress: PropTypes.func,
     showCoverageOnHover: PropTypes.bool,
diff --git a/src/components/DivIcon/index.ts b/src/components/DivIcon/index.ts
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import L from 'leaflet'
-import * as Types from '../Util/PropTypes'
+import { Pixel } from '../../util/PropTypes'
 import creator, { defaultIcon } from './creator'
 import BaseIcon, { Props as BaseIconProps } from '../BaseIcon'
 
@@ -25,10 +25,10 @@ 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,
+    bgPos: Pixel,
+    iconSize: Pixel,
+    iconAnchor: Pixel,
+    popupAnchor: Pixel,
     className: PropTypes.string
   }
 
diff --git a/src/components/DivOverlay/index.tsx b/src/components/DivOverlay/index.tsx
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'
 import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import L from 'leaflet'
-import * as Types from '../Util/PropTypes'
+import { Pixel, Point } from '../../util/PropTypes'
 import Context, { ContextType } from '../RCMap/Context'
 
 interface PartialProps {
@@ -17,12 +17,12 @@ type Props = Readonly<Partial<PartialProps>>
 
 export default abstract class DivOverlay<T extends L.Popup | L.Tooltip, P extends L.PopupOptions | L.TooltipOptions> extends PureComponent<Props & P> {
   public static propTypes = {
-    offset: Types.Pixel,
+    offset: Pixel,
     zoomAnimation: PropTypes.bool,
     className: PropTypes.string,
     pane: PropTypes.string,
     layer: PropTypes.instanceOf(L.Layer),
-    position: Types.Point,
+    position: Point,
     children: PropTypes.node,
     onOpen: PropTypes.func,
     onClose: PropTypes.func
diff --git a/src/components/Evented/index.ts b/src/components/Evented/index.ts
@@ -1,7 +1,7 @@
 import { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import L from 'leaflet'
-import { LeafletMouseEventHandlerFn } from '../Util/Types'
+import { LeafletMouseEventHandlerFn } from '../../util/Types'
 
 interface MouseEvents {
   onClick: LeafletMouseEventHandlerFn
diff --git a/src/components/MassPoints/index.ts b/src/components/MassPoints/index.ts
@@ -1,8 +1,8 @@
 import { Children, isValidElement, cloneElement } from 'react'
 import PropTypes from 'prop-types'
 import L from 'leaflet'
-import * as Types from '../Util/PropTypes'
-import { getBounds } from '../Util/Map'
+import { Pixel, Point } from '../../util/PropTypes'
+import { getBounds } from '../../util/Map'
 import { ContextType } from '../RCMap/Context'
 import { defaultOptions } from '../Icon/creator'
 import InteractiveLayer from '../InteractiveLayer'
@@ -38,12 +38,12 @@ type State = Readonly<{
 export default class MassPoints extends InteractiveLayer<L.ImageOverlay, Props, State> {
   public static propTypes = {
     ...InteractiveLayer.propTypes,
-    points: PropTypes.arrayOf(Types.Point).isRequired,
+    points: PropTypes.arrayOf(Point).isRequired,
     iconUrl: PropTypes.string,
-    iconSize: Types.Pixel,
-    iconAnchor: Types.Pixel,
-    popupAnchor: Types.Pixel,
-    tooltipAnchor: Types.Pixel
+    iconSize: Pixel,
+    iconAnchor: Pixel,
+    popupAnchor: Pixel,
+    tooltipAnchor: Pixel
   }
 
   private canvas: HTMLCanvasElement
diff --git a/src/components/Point/Content.tsx b/src/components/Point/Content.tsx
@@ -11,6 +11,15 @@ interface PartialProps {
 
 type Props = Readonly<Partial<PartialProps>>
 
+const isTargetPoint = (layer: L.Layer): layer is L.Marker => {
+  if (!layer) {
+    return false
+  }
+  const point = layer as L.Marker
+  const icon = point.getIcon && point.getIcon()
+  return icon && icon instanceof L.DivIcon
+}
+
 export default class Content extends PureComponent<Props> {
   public static propTypes = {
     children: PropTypes.node
@@ -25,10 +34,10 @@ export default class Content extends PureComponent<Props> {
     const layer = this.context && this.context.instance
 
     if (layer) {
-      if (layer instanceof L.Marker && layer.getIcon() instanceof L.DivIcon && layer.getElement()) {
+      if (isTargetPoint(layer)) {
         return createPortal(<div className={className} {...props}>{ children }</div>, layer.getElement())
       } else if (layer instanceof L.LayerGroup) {
-        const points = layer.getLayers().filter(el => el instanceof L.Marker && el.getIcon() instanceof L.DivIcon && el.getElement()) as L.Marker[]
+        const points = layer.getLayers().filter<L.Marker>(isTargetPoint)
         return points.map(point => createPortal(<div className={className} {...props}>{ children }</div>, point.getElement()))
       }
     }
diff --git a/src/components/Point/index.tsx b/src/components/Point/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import L from 'leaflet'
-import * as Types from '../Util/PropTypes'
+import { Pixel, Point as PointType } from '../../util/PropTypes'
 import { ContextType } from '../RCMap/Context'
 import Context, { ContextType as State } from './Context'
 import InteractiveLayer from '../InteractiveLayer'
@@ -18,7 +18,7 @@ type Props = Readonly<RequiredProps & L.MarkerOptions>
 export default class Point extends InteractiveLayer<L.Marker, Props, State> {
   public static propTypes = {
     ...InteractiveLayer.propTypes,
-    position: Types.Point.isRequired,
+    position: PointType.isRequired,
     zIndexOffset: PropTypes.number,
     opacity: PropTypes.number,
     clickable: PropTypes.bool,
@@ -30,7 +30,7 @@ export default class Point extends InteractiveLayer<L.Marker, Props, State> {
     riseOffset: PropTypes.number,
     autoPan: PropTypes.bool,
     autoPanSpeed: PropTypes.number,
-    autoPanPadding: Types.Pixel
+    autoPanPadding: Pixel
   }
 
   public static Content = Content
diff --git a/src/components/Polygon/index.ts b/src/components/Polygon/index.ts
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import L from 'leaflet'
-import * as Types from '../Util/PropTypes'
+import { Point } from '../../util/PropTypes'
 import Path from '../Path'
 
 interface RequiredProps {
@@ -12,7 +12,7 @@ type Props = Readonly<RequiredProps>
 export default class Polygon<P extends L.PolylineOptions = L.PolylineOptions> extends Path<L.Polygon, Props & P> {
   public static propTypes = {
     ...Path.propTypes,
-    points: PropTypes.oneOfType([PropTypes.arrayOf(Types.Point), PropTypes.arrayOf(PropTypes.arrayOf(Types.Point))]).isRequired,
+    points: PropTypes.oneOfType([PropTypes.arrayOf(Point), PropTypes.arrayOf(PropTypes.arrayOf(Point))]).isRequired,
     smoothFactor: PropTypes.number,
     noClip: PropTypes.bool
   }
diff --git a/src/components/Polyline/index.ts b/src/components/Polyline/index.ts
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import L from 'leaflet'
-import * as Types from '../Util/PropTypes'
+import { Point } from '../../util/PropTypes'
 import Path from '../Path'
 
 interface RequiredProps {
@@ -18,7 +18,7 @@ export const PolylinePropTypes = {
 export default class Polyline<P extends L.PolylineOptions = L.PolylineOptions> extends Path<L.Polyline, Props & P> {
   public static propTypes = {
     ...PolylinePropTypes,
-    points: PropTypes.oneOfType([PropTypes.arrayOf(Types.Point), PropTypes.arrayOf(PropTypes.arrayOf(Types.Point))]).isRequired
+    points: PropTypes.oneOfType([PropTypes.arrayOf(Point), PropTypes.arrayOf(PropTypes.arrayOf(Point))]).isRequired
   }
 
   protected createInstance (props: Props & P): L.Polyline {
diff --git a/src/components/Popup/index.ts b/src/components/Popup/index.ts
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import L from 'leaflet'
-import * as Types from '../Util/PropTypes'
+import { Pixel } from '../../util/PropTypes'
 import DivOverlay from '../DivOverlay'
 
 export default class Popup extends DivOverlay<L.Popup, L.PopupOptions> {
@@ -12,9 +12,9 @@ export default class Popup extends DivOverlay<L.Popup, L.PopupOptions> {
     keepInView: PropTypes.bool,
     closeButton: PropTypes.bool,
     autoPan: PropTypes.bool,
-    autoPanPaddingTopLeft: Types.Pixel,
-    autoPanPaddingBottomRight: Types.Pixel,
-    autoPanPadding: Types.Pixel,
+    autoPanPaddingTopLeft: Pixel,
+    autoPanPaddingBottomRight: Pixel,
+    autoPanPadding: Pixel,
     autoClose: PropTypes.bool,
     closeOnClick: PropTypes.bool,
     closeOnEscapeKey: PropTypes.bool
diff --git a/src/components/RCMap/index.tsx b/src/components/RCMap/index.tsx
diff --git a/src/components/Rectangle/index.ts b/src/components/Rectangle/index.ts
diff --git a/src/components/TileLayer/Component.ts b/src/components/TileLayer/Component.ts
diff --git a/src/components/Tooltip/index.ts b/src/components/Tooltip/index.ts
diff --git a/src/util/Map.ts b/src/util/Map.ts
diff --git a/src/util/PropTypes.ts b/src/util/PropTypes.ts
diff --git a/src/util/Types.ts b/src/util/Types.ts
