react-mapbox-ui - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/react-mapbox-ui.cjs.development.js

@@ -68,12 +68,16 @@ 'use strict';
 
-function createListeners(props, onHandlers, mapCtx, onOrOnce, layerId) {
-  if (onOrOnce === void 0) {
-    onOrOnce = "on";
+function createListeners(onHandlers, target, ctx, opts) {
+  if (opts === void 0) {
+    opts = {
+      listenType: "on"
+    };
   }
 
-  var map = mapCtx.map;
   var handlers = [];
+  var _opts = opts,
+      listenType = _opts.listenType,
+      layerId = _opts.layerId;
 
   var _loop = function _loop(handlerType) {
-    var type = handlerType.replace(onOrOnce, "").toLowerCase();
+    var type = handlerType.replace(listenType, "").toLowerCase();
 
@@ -83,3 +87,3 @@ var handler = function handler(ev) {
       var customHandler = onHandlers[handlerType];
-      return customHandler(props, mapCtx, ev);
+      return customHandler(ctx, ev);
     };
@@ -99,7 +103,7 @@
 
-      if (layerId) {
-        return map[onOrOnce](type, layerId, handler);
+      if (opts.layerId) {
+        return target[listenType](type, opts.layerId, handler);
       }
 
-      return map[onOrOnce](type, handler);
+      return target[listenType](type, handler);
     });
@@ -114,6 +118,6 @@ };
       if (layerId) {
-        return map.off(type, layerId, handler);
+        return target.off(type, layerId, handler);
       }
 
-      return map.off(type, handler);
+      return target.off(type, handler);
     });
@@ -172,10 +176,13 @@ };
     });
-    var onListeners = createListeners(props, onHandlers, {
+    var listenerCtx = {
+      props: props,
       map: map,
       mapbox: MapboxGL
-    }, "on");
-    var onceListeners = createListeners(props, onceHandlers, {
-      map: map,
-      mapbox: MapboxGL
-    }, "once");
+    };
+    var onListeners = createListeners(onHandlers, map, listenerCtx, {
+      listenType: "on"
+    });
+    var onceListeners = createListeners(onceHandlers, map, listenerCtx, {
+      listenType: "once"
+    });
     onListeners.addListeners();
@@ -263,4 +270,13 @@ onceListeners.addListeners();
       children = _props$children === void 0 ? null : _props$children,
-      source = _objectWithoutPropertiesLoose(props, ["id", "onLoad", "children"]);
+      source = _objectWithoutPropertiesLoose(props, ["id", "onLoad", "children"]); // possible source attributes we need to track
+  // https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/
+  // @ts-ignore
 
+
+  var type = source.type,
+      data = source.data,
+      tiles = source.tiles,
+      url = source.url,
+      urls = source.urls,
+      coordinates = source.coordinates;
   useMapboxUIEffect(function (_ref) {
@@ -272,5 +288,6 @@ var map = _ref.map,
     if (onLoad) {
-      onLoad(props, {
+      onLoad({
         map: map,
-        mapbox: mapbox
+        mapbox: mapbox,
+        props: props
       });
@@ -290,3 +307,3 @@ }
     };
-  }, [id, onLoad, source]);
+  }, [id, onLoad, type, data, tiles, url, urls, coordinates]);
   if (!children) return null;
@@ -307,18 +324,30 @@ return React__default.createElement(React__default.Fragment, null, children);
       onceHandlers = _useMemo[1],
-      layer = _useMemo[2];
+      layer = _useMemo[2]; // layer properties to trigger an effect
+  // https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/
+  // @ts-ignore
 
+
+  var type = layer.type,
+      paint = layer.paint;
   useMapboxUIEffect(function (_ref) {
     var map = _ref.map,
         mapbox = _ref.mapbox;
+    var exists = map.getLayer(id);
+    if (exists) return;
     map.addLayer(_extends({
       id: id
     }, layer));
-    var onListeners = createListeners(props, onHandlers, {
+    var listenerCtx = {
+      props: props,
       map: map,
       mapbox: mapbox
-    }, "on", id);
-    var onceListeners = createListeners(props, onceHandlers, {
-      map: map,
-      mapbox: mapbox
-    }, "once", id);
+    };
+    var onListeners = createListeners(onHandlers, map, listenerCtx, {
+      listenType: "on",
+      layerId: id
+    });
+    var onceListeners = createListeners(onceHandlers, map, listenerCtx, {
+      listenType: "once",
+      layerId: id
+    });
     onListeners.addListeners();
@@ -328,5 +357,6 @@ onceListeners.addListeners();
     if (onLoad) {
-      onLoad(props, {
+      onLoad({
         map: map,
-        mapbox: mapbox
+        mapbox: mapbox,
+        props: props
       });
@@ -339,3 +369,3 @@ }
     };
-  }, [id, onLoad]);
+  }, [id, onLoad, type, paint]);
   if (!children) return null;
@@ -371,10 +401,13 @@ return React__default.createElement(React__default.Fragment, null, children);
     var marker = new mapbox.Marker(markerOptions).setLngLat(lngLat).addTo(map);
-    var onListeners = createListeners(props, onHandlers, {
+    var listenerCtx = {
+      props: props,
       map: map,
-      mapbox: MapboxGL
-    }, "on");
-    var onceListeners = createListeners(props, onceHandlers, {
-      map: map,
-      mapbox: MapboxGL
-    }, "once");
+      mapbox: mapbox
+    };
+    var onListeners = createListeners(onHandlers, marker, listenerCtx, {
+      listenType: "on"
+    });
+    var onceListeners = createListeners(onceHandlers, marker, listenerCtx, {
+      listenType: "once"
+    });
     onListeners.addListeners();
@@ -381,0 +414,0 @@ onceListeners.addListeners();

dist/react-mapbox-ui.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),r=e(n),t=e(require("mapbox-gl")),o=e(require("react-dom"));function a(){return(a=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e}).apply(this,arguments)}function u(e,n){if(null==e)return{};var r,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)n.indexOf(r=a[t])>=0||(o[r]=e[r]);return o}function c(e){var n={},r={},t={};for(var o in e)o.includes("once")?r[o]=e[o]:o.includes("on")?n[o]=e[o]:t[o]=e[o];return[n,r,t]}function i(e,n,r,t,o){void 0===t&&(t="on");var a=r.map,u=[],c=function(o){var a=o.replace(t,"").toLowerCase();u.push([a,function(t){return(0,n[o])(e,r,t)}])};for(var i in n)c(i);return{addListeners:function(){u.forEach((function(e){var n=e[0],r=e[1];return o?a[t](n,o,r):a[t](n,r)}))},removeListeners:function(){u.forEach((function(e){var n=e[0],r=e[1];return o?a.off(n,o,r):a.off(n,r)}))}}}var s=r.createContext({map:null,mapbox:t}),l=function(){return n.useContext(s)},m=function(e,r){var t=l(),o=t.map,a=t.mapbox;n.useEffect((function(){if(o&&a)return e({map:o,mapbox:a})}),[o,a].concat(r))};exports.DEFAULT_MAP_STYLE="mapbox://styles/mapbox/light-v10",exports.DEFAULT_MAP_ZOOM=10,exports.Map=function(e){var o=e.accessToken,a=e.mapStyle,l=void 0===a?"mapbox://styles/mapbox/light-v10":a,m=e.children,f=e.defaultCenter,p=e.defaultZoom,d=void 0===p?10:p,v=e.style,x=e.className,L=e.id,b=u(e,["accessToken","mapStyle","children","defaultCenter","defaultZoom","style","className","id"]),y=n.useRef(null),h=n.useState(null),E=h[0],M=h[1],g=n.useState(!1),S=g[0],O=g[1],C=n.useMemo((function(){return c(b)}),[b]),T=C[0],k=C[1];return n.useEffect((function(){if(y.current){var n=new t.Map({accessToken:o,container:y.current,style:l,center:f,zoom:d}),r=i(e,T,{map:n,mapbox:t},"on"),a=i(e,k,{map:n,mapbox:t},"once");r.addListeners(),a.addListeners();var u=function(){return O(!0)};return n.on("load",u),M(n),function(){r.removeListeners(),a.removeListeners(),n.on("load",u)}}}),[y.current]),r.createElement(r.Fragment,null,r.createElement(s.Provider,{value:{map:E,mapbox:t}},r.createElement("div",{id:L,className:x,style:v,ref:function(e){return y.current=e}}),S&&m))},exports.MapCtx=s,exports.MapLayer=function(e){var t=e.id,o=e.onLoad,s=e.children,l=u(e,["id","onLoad","children"]),f=n.useMemo((function(){return c(l)}),[l]),p=f[0],d=f[1],v=f[2];return m((function(n){var r=n.map,u=n.mapbox;r.addLayer(a({id:t},v));var c=i(e,p,{map:r,mapbox:u},"on",t),s=i(e,d,{map:r,mapbox:u},"once",t);return c.addListeners(),s.addListeners(),o&&o(e,{map:r,mapbox:u}),function(){c.removeListeners(),s.removeListeners()}}),[t,o]),s?r.createElement(r.Fragment,null,s):null},exports.MapMarker=function(e){var s=e.lngLat,l=e.children,f=u(e,["lngLat","children"]),p=n.useRef(null),d=n.useMemo((function(){return c(f)}),[f]),v=d[0],x=d[1];return m((function(n){var u=n.map,c=n.mapbox,m=a({},f);l&&(p.current=document.createElement("div"),m.element=p.current,o.render(r.createElement(r.Fragment,null,l),p.current));var d=new c.Marker(m).setLngLat(s).addTo(u),L=i(e,v,{map:u,mapbox:t},"on"),b=i(e,x,{map:u,mapbox:t},"once");return L.addListeners(),b.addListeners(),function(){o.unmountComponentAtNode(d.getElement()),L.removeListeners(),b.removeListeners(),d.remove()}}),[s,l]),null},exports.MapSource=function(e){var n=e.id,t=e.onLoad,o=e.children,a=void 0===o?null:o,c=u(e,["id","onLoad","children"]);return m((function(r){var o=r.map,a=r.mapbox;return o.addSource(n,c),t&&t(e,{map:o,mapbox:a}),function(){var e;null==(e=o.getStyle().layers)||e.forEach((function(e){e.source===n&&o.removeLayer(e.id)})),o.removeSource(n)}}),[n,t,c]),a?r.createElement(r.Fragment,null,a):null},exports.useMapboxUI=l,exports.useMapboxUIEffect=m;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),r=e(n),t=e(require("mapbox-gl")),o=e(require("react-dom"));function a(){return(a=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e}).apply(this,arguments)}function u(e,n){if(null==e)return{};var r,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)n.indexOf(r=a[t])>=0||(o[r]=e[r]);return o}function i(e){var n={},r={},t={};for(var o in e)o.includes("once")?r[o]=e[o]:o.includes("on")?n[o]=e[o]:t[o]=e[o];return[n,r,t]}function s(e,n,r,t){void 0===t&&(t={listenType:"on"});var o=[],a=t.listenType,u=t.layerId,i=function(n){var t=n.replace(a,"").toLowerCase();o.push([t,function(t){return(0,e[n])(r,t)}])};for(var s in e)i(s);return{addListeners:function(){o.forEach((function(e){var r=e[0],o=e[1];return t.layerId?n[a](r,t.layerId,o):n[a](r,o)}))},removeListeners:function(){o.forEach((function(e){var r=e[0],t=e[1];return u?n.off(r,u,t):n.off(r,t)}))}}}var l=r.createContext({map:null,mapbox:t}),c=function(){return n.useContext(l)},p=function(e,r){var t=c(),o=t.map,a=t.mapbox;n.useEffect((function(){if(o&&a)return e({map:o,mapbox:a})}),[o,a].concat(r))};exports.DEFAULT_MAP_STYLE="mapbox://styles/mapbox/light-v10",exports.DEFAULT_MAP_ZOOM=10,exports.Map=function(e){var o=e.accessToken,a=e.mapStyle,c=void 0===a?"mapbox://styles/mapbox/light-v10":a,p=e.children,d=e.defaultCenter,f=e.defaultZoom,m=void 0===f?10:f,v=e.style,y=e.className,x=e.id,L=u(e,["accessToken","mapStyle","children","defaultCenter","defaultZoom","style","className","id"]),b=n.useRef(null),h=n.useState(null),E=h[0],M=h[1],g=n.useState(!1),T=g[0],S=g[1],O=n.useMemo((function(){return i(L)}),[L]),C=O[0],I=O[1];return n.useEffect((function(){if(b.current){var n=new t.Map({accessToken:o,container:b.current,style:c,center:d,zoom:m}),r={props:e,map:n,mapbox:t},a=s(C,n,r,{listenType:"on"}),u=s(I,n,r,{listenType:"once"});a.addListeners(),u.addListeners();var i=function(){return S(!0)};return n.on("load",i),M(n),function(){a.removeListeners(),u.removeListeners(),n.on("load",i)}}}),[b.current]),r.createElement(r.Fragment,null,r.createElement(l.Provider,{value:{map:E,mapbox:t}},r.createElement("div",{id:x,className:y,style:v,ref:function(e){return b.current=e}}),T&&p))},exports.MapCtx=l,exports.MapLayer=function(e){var t=e.id,o=e.onLoad,l=e.children,c=u(e,["id","onLoad","children"]),d=n.useMemo((function(){return i(c)}),[c]),f=d[0],m=d[1],v=d[2];return p((function(n){var r=n.map,u=n.mapbox;if(!r.getLayer(t)){r.addLayer(a({id:t},v));var i={props:e,map:r,mapbox:u},l=s(f,r,i,{listenType:"on",layerId:t}),c=s(m,r,i,{listenType:"once",layerId:t});return l.addListeners(),c.addListeners(),o&&o({map:r,mapbox:u,props:e}),function(){l.removeListeners(),c.removeListeners()}}}),[t,o,v.type,v.paint]),l?r.createElement(r.Fragment,null,l):null},exports.MapMarker=function(e){var t=e.lngLat,l=e.children,c=u(e,["lngLat","children"]),d=n.useRef(null),f=n.useMemo((function(){return i(c)}),[c]),m=f[0],v=f[1];return p((function(n){var u=n.map,i=n.mapbox,p=a({},c);l&&(d.current=document.createElement("div"),p.element=d.current,o.render(r.createElement(r.Fragment,null,l),d.current));var f=new i.Marker(p).setLngLat(t).addTo(u),y={props:e,map:u,mapbox:i},x=s(m,f,y,{listenType:"on"}),L=s(v,f,y,{listenType:"once"});return x.addListeners(),L.addListeners(),function(){o.unmountComponentAtNode(f.getElement()),x.removeListeners(),L.removeListeners(),f.remove()}}),[t,l]),null},exports.MapSource=function(e){var n=e.id,t=e.onLoad,o=e.children,a=void 0===o?null:o,i=u(e,["id","onLoad","children"]);return p((function(r){var o=r.map,a=r.mapbox;return o.addSource(n,i),t&&t({map:o,mapbox:a,props:e}),function(){var e;null==(e=o.getStyle().layers)||e.forEach((function(e){e.source===n&&o.removeLayer(e.id)})),o.removeSource(n)}}),[n,t,i.type,i.data,i.tiles,i.url,i.urls,i.coordinates]),a?r.createElement(r.Fragment,null,a):null},exports.useMapboxUI=c,exports.useMapboxUIEffect=p;
 //# sourceMappingURL=react-mapbox-ui.cjs.production.min.js.map

dist/react-mapbox-ui.esm.js

@@ -61,12 +61,16 @@ import React, { useRef, useState, useMemo, useEffect, useContext } from 'react';
 
-function createListeners(props, onHandlers, mapCtx, onOrOnce, layerId) {
-  if (onOrOnce === void 0) {
-    onOrOnce = "on";
+function createListeners(onHandlers, target, ctx, opts) {
+  if (opts === void 0) {
+    opts = {
+      listenType: "on"
+    };
   }
 
-  var map = mapCtx.map;
   var handlers = [];
+  var _opts = opts,
+      listenType = _opts.listenType,
+      layerId = _opts.layerId;
 
   var _loop = function _loop(handlerType) {
-    var type = handlerType.replace(onOrOnce, "").toLowerCase();
+    var type = handlerType.replace(listenType, "").toLowerCase();
 
@@ -76,3 +80,3 @@ var handler = function handler(ev) {
       var customHandler = onHandlers[handlerType];
-      return customHandler(props, mapCtx, ev);
+      return customHandler(ctx, ev);
     };
@@ -92,7 +96,7 @@
 
-      if (layerId) {
-        return map[onOrOnce](type, layerId, handler);
+      if (opts.layerId) {
+        return target[listenType](type, opts.layerId, handler);
       }
 
-      return map[onOrOnce](type, handler);
+      return target[listenType](type, handler);
     });
@@ -107,6 +111,6 @@ };
       if (layerId) {
-        return map.off(type, layerId, handler);
+        return target.off(type, layerId, handler);
       }
 
-      return map.off(type, handler);
+      return target.off(type, handler);
     });
@@ -165,10 +169,13 @@ };
     });
-    var onListeners = createListeners(props, onHandlers, {
+    var listenerCtx = {
+      props: props,
       map: map,
       mapbox: MapboxGL
-    }, "on");
-    var onceListeners = createListeners(props, onceHandlers, {
-      map: map,
-      mapbox: MapboxGL
-    }, "once");
+    };
+    var onListeners = createListeners(onHandlers, map, listenerCtx, {
+      listenType: "on"
+    });
+    var onceListeners = createListeners(onceHandlers, map, listenerCtx, {
+      listenType: "once"
+    });
     onListeners.addListeners();
@@ -256,4 +263,13 @@ onceListeners.addListeners();
       children = _props$children === void 0 ? null : _props$children,
-      source = _objectWithoutPropertiesLoose(props, ["id", "onLoad", "children"]);
+      source = _objectWithoutPropertiesLoose(props, ["id", "onLoad", "children"]); // possible source attributes we need to track
+  // https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/
+  // @ts-ignore
 
+
+  var type = source.type,
+      data = source.data,
+      tiles = source.tiles,
+      url = source.url,
+      urls = source.urls,
+      coordinates = source.coordinates;
   useMapboxUIEffect(function (_ref) {
@@ -265,5 +281,6 @@ var map = _ref.map,
     if (onLoad) {
-      onLoad(props, {
+      onLoad({
         map: map,
-        mapbox: mapbox
+        mapbox: mapbox,
+        props: props
       });
@@ -283,3 +300,3 @@ }
     };
-  }, [id, onLoad, source]);
+  }, [id, onLoad, type, data, tiles, url, urls, coordinates]);
   if (!children) return null;
@@ -300,18 +317,30 @@ return React.createElement(React.Fragment, null, children);
       onceHandlers = _useMemo[1],
-      layer = _useMemo[2];
+      layer = _useMemo[2]; // layer properties to trigger an effect
+  // https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/
+  // @ts-ignore
 
+
+  var type = layer.type,
+      paint = layer.paint;
   useMapboxUIEffect(function (_ref) {
     var map = _ref.map,
         mapbox = _ref.mapbox;
+    var exists = map.getLayer(id);
+    if (exists) return;
     map.addLayer(_extends({
       id: id
     }, layer));
-    var onListeners = createListeners(props, onHandlers, {
+    var listenerCtx = {
+      props: props,
       map: map,
       mapbox: mapbox
-    }, "on", id);
-    var onceListeners = createListeners(props, onceHandlers, {
-      map: map,
-      mapbox: mapbox
-    }, "once", id);
+    };
+    var onListeners = createListeners(onHandlers, map, listenerCtx, {
+      listenType: "on",
+      layerId: id
+    });
+    var onceListeners = createListeners(onceHandlers, map, listenerCtx, {
+      listenType: "once",
+      layerId: id
+    });
     onListeners.addListeners();
@@ -321,5 +350,6 @@ onceListeners.addListeners();
     if (onLoad) {
-      onLoad(props, {
+      onLoad({
         map: map,
-        mapbox: mapbox
+        mapbox: mapbox,
+        props: props
       });
@@ -332,3 +362,3 @@ }
     };
-  }, [id, onLoad]);
+  }, [id, onLoad, type, paint]);
   if (!children) return null;
@@ -364,10 +394,13 @@ return React.createElement(React.Fragment, null, children);
     var marker = new mapbox.Marker(markerOptions).setLngLat(lngLat).addTo(map);
-    var onListeners = createListeners(props, onHandlers, {
+    var listenerCtx = {
+      props: props,
       map: map,
-      mapbox: MapboxGL
-    }, "on");
-    var onceListeners = createListeners(props, onceHandlers, {
-      map: map,
-      mapbox: MapboxGL
-    }, "once");
+      mapbox: mapbox
+    };
+    var onListeners = createListeners(onHandlers, marker, listenerCtx, {
+      listenType: "on"
+    });
+    var onceListeners = createListeners(onceHandlers, marker, listenerCtx, {
+      listenType: "once"
+    });
     onListeners.addListeners();
@@ -374,0 +407,0 @@ onceListeners.addListeners();

dist/types.d.ts

@@ -9,8 +9,11 @@ import MapboxGL, { EventData, MapEventType, MapLayerEventType } from "mapbox-gl";
 };
+export declare type EventHandlerContext<P> = NonNullMapboxUICtx & {
+    props: P;
+};
 export declare type LayerEvents = keyof MapLayerEventType;
 export declare type MapboxLayerEventHandlerRaw<T extends LayerEvents> = (evt?: MapLayerEventType[T] & EventData) => void;
-export declare type MapboxLayerEventHandler<P, T extends LayerEvents> = (props: P, ctx: NonNullMapboxUICtx, evt?: MapLayerEventType[T] & EventData) => void;
+export declare type MapboxLayerEventHandler<P, T extends LayerEvents> = (ctx: EventHandlerContext<P>, evt?: MapLayerEventType[T] & EventData) => void;
 export declare type MapEvents = keyof MapEventType;
 export declare type MapboxEventHandlerRaw<T extends MapEvents> = (evt?: MapEventType[T] & EventData) => void;
-export declare type MapboxEventHandler<P, T extends MapEvents> = (props: P, ctx: NonNullMapboxUICtx, evt?: MapEventType[T] & EventData) => void;
+export declare type MapboxEventHandler<P, T extends MapEvents> = (ctx: EventHandlerContext<P>, evt?: MapEventType[T] & EventData) => void;
 export declare type OnLayerEventHandlerName<T extends string> = `on${Capitalize<T>}`;
@@ -32,2 +35,2 @@ export declare type OnceLayerEventHandlerName<T extends string> = `once${Capitalize<T>}`;
 export declare type OnEventHandlerRaw = MapboxEventHandlerRaw<any> | MapboxLayerEventHandlerRaw<any>;
-export declare type OnEventHandler<P> = (props: P, ctx: NonNullMapboxUICtx, evt?: any) => void;
+export declare type OnEventHandler<P> = (ctx: EventHandlerContext<P>, evt?: any) => void;

dist/util/createListeners.d.ts

@@ -1,5 +0,11 @@
-import { NonNullMapboxUICtx, OnEventListener } from "../types";
-export declare function createListeners<P>(props: P, onHandlers: OnEventListener<P>, mapCtx: NonNullMapboxUICtx, onOrOnce?: "on" | "once", layerId?: string): {
+/// <reference types="mapbox-gl" />
+import { OnEventListener, EventHandlerContext } from "../types";
+interface ListenerOptions {
+    listenType: "on" | "once";
+    layerId?: string;
+}
+export declare function createListeners<P>(onHandlers: OnEventListener<P>, target: mapboxgl.Map | mapboxgl.Marker, ctx: EventHandlerContext<P>, opts?: ListenerOptions): {
     addListeners: () => void;
     removeListeners: () => void;
 };
+export {};

package.json

 {
-  "version": "1.0.4",
+  "version": "1.0.5",
   "license": "MIT",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

src/types.ts

@@ -14,2 +14,5 @@ /* eslint-disable */
 
+export type EventHandlerContext<P> = NonNullMapboxUICtx & {
+  props: P
+}
 
@@ -19,4 +22,3 @@ export type LayerEvents = keyof MapLayerEventType;
 export type MapboxLayerEventHandler<P, T extends LayerEvents> = (
-  props: P,
-  ctx: NonNullMapboxUICtx,
+  ctx: EventHandlerContext<P>,
   evt?: MapLayerEventType[T] & EventData
@@ -28,4 +30,3 @@ ) => void;
 export type MapboxEventHandler<P, T extends MapEvents> = (
-  props: P,
-  ctx: NonNullMapboxUICtx,
+  ctx: EventHandlerContext<P>,
   evt?: MapEventType[T] & EventData
@@ -57,5 +58,4 @@ ) => void;
 export type OnEventHandler<P> = (
-  props: P,
-  ctx: NonNullMapboxUICtx,
+  ctx: EventHandlerContext<P>,
   evt?:any
 ) => void;

src/util/createListeners.ts

 import {
-  NonNullMapboxUICtx,
   OnEventListener,
@@ -7,16 +6,24 @@ LayerEvents,
   OnEventHandler,
+  EventHandlerContext,
 } from "../types";
 
+interface ListenerOptions {
+  listenType: "on" | "once";
+  layerId?: string;
+}
+
 export function createListeners<P>(
-  props: P,
   onHandlers: OnEventListener<P>,
-  mapCtx: NonNullMapboxUICtx,
-  onOrOnce: "on" | "once" = "on",
-  layerId?: string
+  target: mapboxgl.Map | mapboxgl.Marker,
+  ctx: EventHandlerContext<P>,
+  opts: ListenerOptions = { listenType: "on" }
 ) {
-  const { map } = mapCtx;
   const handlers = [] as [LayerEvents, OnEventHandlerRaw][];
 
+  const { listenType, layerId } = opts;
+
   for (const handlerType in onHandlers) {
-    const type = handlerType.replace(onOrOnce, "").toLowerCase() as LayerEvents;
+    const type = handlerType
+      .replace(listenType, "")
+      .toLowerCase() as LayerEvents;
 
@@ -27,3 +34,3 @@ const handler: OnEventHandlerRaw = ev => {
 
-      return customHandler(props, mapCtx, ev);
+      return customHandler(ctx, ev);
     };
@@ -36,6 +43,10 @@
     handlers.forEach(([type, handler]) => {
-      if (layerId) {
-        return map[onOrOnce](type, layerId, handler);
+      if (opts.layerId) {
+        return (target as mapboxgl.Map)[listenType](
+          type,
+          opts.layerId,
+          handler
+        );
       }
-      return map[onOrOnce](type, handler);
+      return target[listenType](type, handler);
     });
@@ -47,5 +58,5 @@ };
       if (layerId) {
-        return map.off(type, layerId, handler);
+        return (target as mapboxgl.Map).off(type, layerId, handler);
       }
-      return map.off(type, handler);
+      return target.off(type, handler);
     });
@@ -52,0 +63,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

108074

increased by6.87%

Lines of code

1304

increased by5.67%

No dependency changes