Merge pull request #46 from binary-butterfly/marker-no-onclick-if-card-disabled

Marker no onclick if card disabled

Author: DysphoricUnicorn

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-butterfly-map",
-  "version": "1.0.0-rc5",
+  "version": "1.0.0-rc6",
   "license": "MIT",
   "private": false,
   "main": "dist/reactButterflyMap.umd.cjs",

package.json

@@ -172,7 +172,9 @@ const ButterflyMap = (props: ButterflyMapProps) => {
                          width: 'fit',
                          height: props.height,
                      }}>
-                    <Markers handleMapMarkerClick={handleMapMarkerClick} pointsOfInterest={sortedPointsOfInterest}/>
+                    <Markers handleMapMarkerClick={handleMapMarkerClick}
+                             pointsOfInterest={sortedPointsOfInterest}
+                             disabledCards={props.disableCards}/>
                 </Map>
                 <CenterMapButton title={locationBlocked ? localStrings.location_permission_needed : ''}
                                  disabled={centerMapDisabled}

src/js/components/ButterflyMap.tsx

@@ -6,6 +6,7 @@ import styled from 'styled-components';
 type MarkersProps = {
     pointsOfInterest: PointOfInterest[],
     handleMapMarkerClick: (position: Position) => void,
+    disabledCards?: boolean,
 }
 
 const Markers = React.memo((props: MarkersProps): React.JSX.Element => {
@@ -14,8 +15,8 @@ const Markers = React.memo((props: MarkersProps): React.JSX.Element => {
     return <>
         {pointsOfInterest.map((point) =>
             <PointerDiv id={'react-butterfly-map-pointer-' + point.uuid} key={point.uuid}>
-                <Marker onClick={() => handleMapMarkerClick(point.position)} {...point.position}>
-                        <point.MarkerComponent style={{height: '50px', width: '50px'}}/>
+                <Marker onClick={props.disabledCards ? undefined : () => handleMapMarkerClick(point.position)} {...point.position}>
+                    <point.MarkerComponent style={{height: '50px', width: '50px'}}/>
                 </Marker>
             </PointerDiv>,
         )}