react-mapbox-ui - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

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

@@ -172,2 +172,16 @@ 'use strict';
     });
+
+    var onLoad = function onLoad() {
+      return setIsLoaded(true);
+    };
+
+    map.on("load", onLoad);
+    setMapInstance(map);
+    return function () {
+      map.off("load", onLoad);
+    };
+  }, [mapContainer.current]);
+  React.useEffect(function () {
+    var map = mapInstance;
+    if (!map) return;
     var listenerCtx = {
@@ -186,20 +200,15 @@ props: props,
     onceListeners.addListeners();
-
-    var onLoad = function onLoad() {
-      return setIsLoaded(true);
-    };
-
-    map.on("load", onLoad);
-    setMapInstance(map);
     return function () {
       onListeners.removeListeners();
       onceListeners.removeListeners();
-      map.on("load", onLoad);
     };
-  }, [mapContainer.current]);
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(MapCtx.Provider, {
-    value: {
+  }, [mapInstance, onHandlers, onceHandlers]);
+  var ctxValue = React.useMemo(function () {
+    return {
       map: mapInstance,
       mapbox: MapboxGL
-    }
+    };
+  }, [mapInstance, MapboxGL]);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(MapCtx.Provider, {
+    value: ctxValue
   }, React__default.createElement("div", {
@@ -335,2 +344,14 @@ id: id,
     }, layer));
+
+    if (onLoad) {
+      onLoad({
+        map: map,
+        mapbox: mapbox,
+        props: props
+      });
+    }
+  }, [id, onLoad, type, paint]);
+  useMapboxUIEffect(function (_ref2) {
+    var map = _ref2.map,
+        mapbox = _ref2.mapbox;
     var listenerCtx = {
@@ -351,11 +372,2 @@ props: props,
     onceListeners.addListeners();
-
-    if (onLoad) {
-      onLoad({
-        map: map,
-        mapbox: mapbox,
-        props: props
-      });
-    }
-
     return function () {
@@ -365,3 +377,3 @@ onListeners.removeListeners();
     };
-  }, [id, onLoad, type, paint]);
+  }, [id, onHandlers, onceHandlers]);
   if (!children) return null;
@@ -368,0 +380,0 @@ return React__default.createElement(React__default.Fragment, null, children);

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 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 c=r.createContext({map:null,mapbox:t}),l=function(){return n.useContext(c)},p=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,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),g=h[0],E=h[1],M=n.useState(!1),T=M[0],S=M[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:l,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),E(n),function(){a.removeListeners(),u.removeListeners(),n.on("load",i)}}}),[b.current]),r.createElement(r.Fragment,null,r.createElement(c.Provider,{value:{map:g,mapbox:t}},r.createElement("div",{id:x,className:y,style:v,ref:function(e){return b.current=e}}),T&&p))},exports.MapCtx=c,exports.MapLayer=function(e){var t=e.id,o=e.onLoad,c=e.children,l=u(e,["id","onLoad","children"]),d=n.useMemo((function(){return i(l)}),[l]),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},c=s(f,r,i,{listenType:"on",layerId:t}),l=s(m,r,i,{listenType:"once",layerId:t});return c.addListeners(),l.addListeners(),o&&o({map:r,mapbox:u,props:e}),function(){c.removeListeners(),l.removeListeners()}}}),[t,o,v.type,v.paint]),c?r.createElement(r.Fragment,null,c):null},exports.MapMarker=function(e){var t=e.lngLat,c=e.children,l=u(e,["lngLat","children"]),d=n.useRef(null),f=n.useMemo((function(){return i(l)}),[l]),m=f[0],v=f[1];return p((function(n){var u=n.map,i=n.mapbox,p=a({},l);c&&(d.current=document.createElement("div"),p.element=d.current,o.render(r.createElement(r.Fragment,null,c),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,c]),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"]),s=i.data;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]),p((function(e){var r=e.map.getSource(n);null!=r&&r.setData&&r.setData(s)}),[n,s]),a?r.createElement(r.Fragment,null,a):null},exports.useMapboxUI=l,exports.useMapboxUIEffect=p;
+"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 c(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 c in e)i(c);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 s=r.createContext({map:null,mapbox:t}),l=function(){return n.useContext(s)},p=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,p=e.children,f=e.defaultCenter,d=e.defaultZoom,m=void 0===d?10:d,v=e.style,x=e.className,y=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];n.useEffect((function(){if(b.current){var e=new t.Map({accessToken:o,container:b.current,style:l,center:f,zoom:m}),n=function(){return S(!0)};return e.on("load",n),M(e),function(){e.off("load",n)}}}),[b.current]),n.useEffect((function(){var n=E;if(n){var r={props:e,map:n,mapbox:t},o=c(C,n,r,{listenType:"on"}),a=c(I,n,r,{listenType:"once"});return o.addListeners(),a.addListeners(),function(){o.removeListeners(),a.removeListeners()}}}),[E,C,I]);var k=n.useMemo((function(){return{map:E,mapbox:t}}),[E,t]);return r.createElement(r.Fragment,null,r.createElement(s.Provider,{value:k},r.createElement("div",{id:y,className:x,style:v,ref:function(e){return b.current=e}}),T&&p))},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 i(l)}),[l]),d=f[0],m=f[1],v=f[2];return p((function(n){var r=n.map,u=n.mapbox;r.getLayer(t)||(r.addLayer(a({id:t},v)),o&&o({map:r,mapbox:u,props:e}))}),[t,o,v.type,v.paint]),p((function(n){var r=n.map,o={props:e,map:r,mapbox:n.mapbox},a=c(d,r,o,{listenType:"on",layerId:t}),u=c(m,r,o,{listenType:"once",layerId:t});return a.addListeners(),u.addListeners(),function(){a.removeListeners(),u.removeListeners()}}),[t,d,m]),s?r.createElement(r.Fragment,null,s):null},exports.MapMarker=function(e){var t=e.lngLat,s=e.children,l=u(e,["lngLat","children"]),f=n.useRef(null),d=n.useMemo((function(){return i(l)}),[l]),m=d[0],v=d[1];return p((function(n){var u=n.map,i=n.mapbox,p=a({},l);s&&(f.current=document.createElement("div"),p.element=f.current,o.render(r.createElement(r.Fragment,null,s),f.current));var d=new i.Marker(p).setLngLat(t).addTo(u),x={props:e,map:u,mapbox:i},y=c(m,d,x,{listenType:"on"}),L=c(v,d,x,{listenType:"once"});return y.addListeners(),L.addListeners(),function(){o.unmountComponentAtNode(d.getElement()),y.removeListeners(),L.removeListeners(),d.remove()}}),[t,s]),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"]),c=i.data;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]),p((function(e){var r=e.map.getSource(n);null!=r&&r.setData&&r.setData(c)}),[n,c]),a?r.createElement(r.Fragment,null,a):null},exports.useMapboxUI=l,exports.useMapboxUIEffect=p;
 //# sourceMappingURL=react-mapbox-ui.cjs.production.min.js.map

dist/react-mapbox-ui.esm.js

@@ -165,2 +165,16 @@ import React, { useRef, useState, useMemo, useEffect, useContext } from 'react';
     });
+
+    var onLoad = function onLoad() {
+      return setIsLoaded(true);
+    };
+
+    map.on("load", onLoad);
+    setMapInstance(map);
+    return function () {
+      map.off("load", onLoad);
+    };
+  }, [mapContainer.current]);
+  useEffect(function () {
+    var map = mapInstance;
+    if (!map) return;
     var listenerCtx = {
@@ -179,20 +193,15 @@ props: props,
     onceListeners.addListeners();
-
-    var onLoad = function onLoad() {
-      return setIsLoaded(true);
-    };
-
-    map.on("load", onLoad);
-    setMapInstance(map);
     return function () {
       onListeners.removeListeners();
       onceListeners.removeListeners();
-      map.on("load", onLoad);
     };
-  }, [mapContainer.current]);
-  return React.createElement(React.Fragment, null, React.createElement(MapCtx.Provider, {
-    value: {
+  }, [mapInstance, onHandlers, onceHandlers]);
+  var ctxValue = useMemo(function () {
+    return {
       map: mapInstance,
       mapbox: MapboxGL
-    }
+    };
+  }, [mapInstance, MapboxGL]);
+  return React.createElement(React.Fragment, null, React.createElement(MapCtx.Provider, {
+    value: ctxValue
   }, React.createElement("div", {
@@ -328,2 +337,14 @@ id: id,
     }, layer));
+
+    if (onLoad) {
+      onLoad({
+        map: map,
+        mapbox: mapbox,
+        props: props
+      });
+    }
+  }, [id, onLoad, type, paint]);
+  useMapboxUIEffect(function (_ref2) {
+    var map = _ref2.map,
+        mapbox = _ref2.mapbox;
     var listenerCtx = {
@@ -344,11 +365,2 @@ props: props,
     onceListeners.addListeners();
-
-    if (onLoad) {
-      onLoad({
-        map: map,
-        mapbox: mapbox,
-        props: props
-      });
-    }
-
     return function () {
@@ -358,3 +370,3 @@ onListeners.removeListeners();
     };
-  }, [id, onLoad, type, paint]);
+  }, [id, onHandlers, onceHandlers]);
   if (!children) return null;
@@ -361,0 +373,0 @@ return React.createElement(React.Fragment, null, children);

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

112205

increased by2.97%

Lines of code

1356

increased by3.12%

No dependency changes