Allow caller to conditionally display MarkerCluster popup (#161)

* adjust rollup options for interop * allow caller to conditionally display MarkerCluster popup
grommet · Aug 13, 2024 · cdfe322 · cdfe322
1 parent 66dc394
commit cdfe322
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 12 deletions.
diff --git a/grommet-leaflet/README.md b/grommet-leaflet/README.md
@@ -58,10 +58,10 @@ Map supports all [Leaflet Map](https://leafletjs.com/reference.html#map) and [Re
 
 In addition, it also supports the following props:
 
-| Prop        | Type     | Default value | Required | Notes                                                                                                                                                                                                                   |
-| ----------- | -------- | ------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Prop        | Type     | Default value | Required | Notes                                                                                                                                                                                                                                                                 |
+| ----------- | -------- | ------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `tileLayer` | `object` | `undefined`   | `true`   | { <br />&nbsp;&nbsp;&nbsp;&nbsp;url: `string` in the form of `'https://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png'`, <br />&nbsp;&nbsp;&nbsp;&nbsp;attribution?: `string` e.g. `&copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors` <br /> } |
-| `theme`     | `object` |               |          | See [theme structure](#theme-structure)                                                                                                                                                                                 |
+| `theme`     | `object` |               |          | See [theme structure](#theme-structure)                                                                                                                                                                                                                               |
 
 ### Marker
 
@@ -115,10 +115,10 @@ MarkerCluster supports all [Leaflet.markercluster properties](https://github.com
 
 In addition, it also supports the following props:
 
-| Prop    | Type                       | Default value                                    |
-| ------- | -------------------------- | ------------------------------------------------ |
-| `icon`  | `({ cluster }) => Element` | `({ cluster }) => <Cluster cluster={cluster} />` |
-| `popup` | `({ cluster }) => Element` | `undefined`                                      |
+| Prop    | Type                                                     | Default value                                    |
+| ------- | -------------------------------------------------------- | ------------------------------------------------ |
+| `icon`  | `({ cluster }) => Element`                               | `({ cluster }) => <Cluster cluster={cluster} />` |
+| `popup` | `({ cluster }) => Element \| null \| false \| undefined` | `undefined`                                      |
 
 For large datasets, it can be beneficial to apply `chunkedLoading` to MarkerCluster. See [leaflet.markercluster docs](https://github.com/Leaflet/Leaflet.markercluster#chunked-addlayers-options) for additional details.
 

diff --git a/grommet-leaflet/src/layers/Controls/Controls.jsx b/grommet-leaflet/src/layers/Controls/Controls.jsx
@@ -36,6 +36,7 @@ const Controls = ({ locations }) => {
   useEffect(() => {
     if (bounds && !mounted) {
       if (
+        // eslint-disable-next-line no-underscore-dangle
         JSON.stringify(bounds._northEast) === JSON.stringify(bounds._southWest)
       ) {
         // if the bounds are the same, zoom to the bounds of the locations

diff --git a/grommet-leaflet/src/layers/MarkerCluster/MarkerCluster.jsx b/grommet-leaflet/src/layers/MarkerCluster/MarkerCluster.jsx
@@ -36,7 +36,8 @@ const MarkerCluster = ({ icon: iconProp, popup: popupProp, ...rest }) => {
   return (
     <LeafletMarkerCluster
       iconCreateFunction={cluster => {
-        if (popupProp) {
+        // only bind popup if popupProp is defined
+        if (popupProp({ cluster })) {
           const popup = cluster.bindPopup(
             ReactDOMServer.renderToString(
               <ThemeContext.Provider value={theme}>

diff --git a/grommet-leaflet/src/layers/MarkerCluster/index.d.ts b/grommet-leaflet/src/layers/MarkerCluster/index.d.ts
@@ -3,14 +3,14 @@ import * as L from 'leaflet';
 import 'leaflet.markercluster';
 
 export interface MarkerClusterProps {
-  icon?: (any) => JSX.Element;
-  popup?: (any) => JSX.Element;
+  icon?: ({ cluster }: { cluster: any }) => JSX.Element;
+  popup?: ({ cluster }: { cluster: any }) => JSX.Element | null | false | undefined;
 }
 
 export interface MarkerClusterExtendedProps
   extends MarkerClusterProps,
-    L.MarkerClusterGroupOptions,
-    Omit<JSX.IntrinsicElements['div'], keyof MarkerClusterProps> {}
+  L.MarkerClusterGroupOptions,
+  Omit<JSX.IntrinsicElements['div'], keyof MarkerClusterProps> { }
 
 declare const MarkerCluster: React.FC<MarkerClusterExtendedProps>;