Merge pull request #162 from giorgiabosello/bugfix/general

🐛 #147 fix Google Link not updating on map change

dist/index.cjs

@@ -4,6 +4,6 @@ var react = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
 
-var S={};function Y(e){let r=document.querySelector(`script[src="${e}"]`),a=r==null?void 0:r.getAttribute("data-status");return {node:r,status:a}}function J(e={src:"",attributes:{},callbacks:{onLoadCallback:()=>{},onErrorCallback:()=>{}},elementIdToAppend:""},r,a={removeOnUnmount:!1,shouldPreventLoad:!1}){let[l,s]=react.useState(()=>!e.src||a!=null&&a.shouldPreventLoad?"idle":typeof window>"u"?"loading":S[e.src]??"loading");return react.useEffect(()=>{var u,n,m;if(r){s(r);return}if(!(e!=null&&e.src)||a!=null&&a.shouldPreventLoad)return;let i=S[e.src];if(i==="ready"||i==="error"){s(i);return}let c=Y(e.src),t=c.node;if(t){let p=c.status??i??"loading";switch(p){case"loading":case"ready":(n=e.callbacks)!=null&&n.onLoadCallback&&e.callbacks.onLoadCallback();break;case"error":(m=e.callbacks)!=null&&m.onErrorCallback&&e.callbacks.onErrorCallback();break;}s(p);}else {t=document.createElement("script"),t.src=e.src,t.async=!0,t.setAttribute("data-status","loading"),e.attributes&&Object.entries(e.attributes).length>0&&Object.entries(e.attributes).map(([g,d])=>t==null?void 0:t.setAttribute(g,d)),e.elementIdToAppend&&document.getElementById(e.elementIdToAppend)?(u=document.getElementById(e.elementIdToAppend))==null||u.appendChild(t):document.body.appendChild(t);let p=g=>{let d=g.type==="load"?"ready":"error";t==null||t.setAttribute("data-status",d);};t.addEventListener("load",p),t.addEventListener("error",p);}let o=p=>{var d,f;let g=p.type==="load"?"ready":"error";p.type==="load"?(d=e.callbacks)!=null&&d.onLoadCallback&&e.callbacks.onLoadCallback():(f=e.callbacks)!=null&&f.onErrorCallback&&e.callbacks.onErrorCallback(),s(g),S[e.src]=g;};return t.addEventListener("load",o),t.addEventListener("error",o),()=>{t&&(t.removeEventListener("load",o),t.removeEventListener("error",o)),t&&(a!=null&&a.removeOnUnmount)&&t.remove();}},[e,r,l]),l}var O=J;var T=({apiKey:e,libraries:r=[],loadScriptExternally:a=!1,status:l="idle",externalApiParams:s,callback:i})=>{var o;typeof window<"u"&&(window.googleMapsCallback=i);let c=(o=new URLSearchParams(s))==null?void 0:o.toString(),t=e?{src:`https://maps.googleapis.com/maps/api/js?key=${e}&callback=googleMapsCallback&libraries=${r==null?void 0:r.join(",")}${c?`&${c}`:""}`,attributes:{id:"googleMapsApi"}}:{src:`https://maps.googleapis.com/maps/api/js?callback=googleMapsCallback&libraries=${r==null?void 0:r.join(",")}`,attributes:{id:"googleMapsApi"}};return O(t,a?l:void 0)};var x=(e,r,a=1e-6)=>{if(e.length&&r.length){for(let l=0;l!==e.length;++l)if(Math.abs(e[l]-r[l])>a)return !1;return !0}return !1};var _=(e,r)=>{let a=react.useRef(),l=a.current,s=r(l,e);return react.useEffect(()=>{s||(a.current=e);}),s?l:e},H=_;var k=e=>{try{return {lat:e==null?void 0:e.lat(),lng:e==null?void 0:e.lng()}}catch{return e}},K=({container:e,pane:r,position:a,maps:l,drag:s})=>{class i extends google.maps.OverlayView{onAdd=()=>{var u;let t=this;s!=null&&s.draggable&&(this.get("map").getDiv().addEventListener("mouseleave",()=>{google.maps.event.trigger(this.container,"mouseup");}),this.container.addEventListener("mousedown",n=>{var m;this.container.style.cursor="grabbing",(m=t.map)==null||m.set("draggable",!1),t.set("origin",n),s.onDragStart(n,{latLng:k(this.position)}),t.moveHandler=this.get("map").getDiv().addEventListener("mousemove",p=>{let g=t.get("origin"),d=g.clientX-p.clientX,f=g.clientY-p.clientY,b=t.getProjection().fromLatLngToDivPixel(t.position);if(b===null)return;let v=t.getProjection().fromDivPixelToLatLng(new l.Point(b.x-d,b.y-f));t.set("position",v),t.set("origin",p),t.draw(),s.onDrag(p,{latLng:k(v)});});}),this.container.addEventListener("mouseup",n=>{var m;(m=t.map)==null||m.set("draggable",!0),this.container.style.cursor="default",t.moveHandler&&(google.maps.event.removeListener(t.moveHandler),t.moveHandler=null),s.onDragEnd(n,{latLng:k(t.position)});}));let o=(u=this.getPanes())==null?void 0:u[this.pane];o==null||o.classList.add("google-map-markers-overlay"),o==null||o.appendChild(this.container);};draw=()=>{let o=this.getProjection().fromLatLngToDivPixel(this.position);o!==null&&(this.container.style.transform=`translate(${o.x}px, ${o.y}px)`,this.container.style.width="0px",this.container.style.height="0px");};onRemove=()=>{this.container.parentNode!==null&&(google.maps.event.clearInstanceListeners(this.container),this.container.parentNode.removeChild(this.container));};container;pane;position;map=this.getMap();moveHandler;constructor(t,o,u){super(),this.container=t,this.pane=o,this.position=u,this.moveHandler=null;}}return new i(e,r,a)},U=K;var ee=({pane:e="floatPane",position:r,map:a,maps:l,zIndex:s=0,children:i,drag:c})=>{let t=react.useMemo(()=>{let n=document.createElement("div");return n.style.position="absolute",n},[]),o=react.useMemo(()=>U({container:t,pane:e,position:r,maps:l,drag:c}),[t,c,l,e,r]),u=H(i==null?void 0:i.props,(n,m)=>n&&n.lat===m.lat&&n.lng===m.lng);return react.useEffect(()=>!o.map&&a?(o==null||o.setMap(a),()=>{o==null||o.setMap(null);}):()=>{},[a,u]),react.useEffect(()=>{t.style.zIndex=`${s}`;},[s,t]),reactDom.createPortal(i,t)},R=ee;var P=()=>{},ae=({children:e,map:r,maps:a})=>{let l=react.useMemo(()=>!r||!a?[]:react.Children.map(e,s=>{if(react.isValidElement(s)){let i={lat:s.props.lat,lng:s.props.lng},{zIndex:c,draggable:t=!1,onDragStart:o=P,onDrag:u=P,onDragEnd:n=P}=s.props||{};return s=react.cloneElement(s,{...s.props,draggable:void 0,onDragStart:void 0,onDrag:void 0,onDragEnd:void 0}),jsxRuntime.jsx(R,{position:new a.LatLng(i.lat,i.lng),map:r,maps:a,zIndex:c,drag:{draggable:t,onDragStart:o,onDrag:u,onDragEnd:n},children:s})}return null}),[e,r,a]);return jsxRuntime.jsx("div",{children:l})},j=ae;function le({children:e=null,style:r={width:"100%",height:"100%",left:0,top:0,margin:0,padding:0,position:"absolute"},defaultCenter:a,defaultZoom:l,onGoogleApiLoaded:s,onChange:i,options:c={},events:t=[]}){let o=react.useRef(null),u=react.useRef([]),[n,m]=react.useState(),[p,g]=react.useState(),[d,f]=react.useState(!1),b=react.useCallback(()=>{var v,y;try{if(!n)return;let E=n.getZoom()??l,M=n.getBounds(),F=[(v=n.getCenter())==null?void 0:v.lng(),(y=n.getCenter())==null?void 0:y.lat()],L=M==null?void 0:M.getNorthEast(),h=M==null?void 0:M.getSouthWest();if(!L||!h||!M)return;let D=[h.lng(),h.lat(),L.lng(),L.lat()];x(D,u.current)||(i&&i({zoom:E,center:F,bounds:M}),u.current=D);}catch(E){console.error(E);}},[n,i]);return react.useEffect(()=>{o.current&&!n&&(m(new google.maps.Map(o.current,{center:a,zoom:l,...c})),g(google.maps));},[a,l,n,o,c]),react.useEffect(()=>{n&&(d||(s&&p&&s({map:n,maps:p,ref:o.current}),f(!0)),google.maps.event.hasListeners(n,"idle")&&google.maps.event.clearListeners(n,"idle"),google.maps.event.addListener(n,"idle",b));},[d,n,p,i,s,b]),react.useEffect(()=>()=>{n&&google.maps.event.clearListeners(n,"idle");},[n]),jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{ref:o,style:r,className:"google-map",...t==null?void 0:t.reduce((v,{name:y,handler:E})=>(v[y]=E,v),{})}),e&&n&&p&&jsxRuntime.jsx(j,{map:n,maps:p,children:e})]})}var q=le;var ue=react.forwardRef(({apiKey:e="",libraries:r=["places","geometry"],children:a=null,loadingContent:l="Google Maps is loading",idleContent:s="Google Maps is on idle",errorContent:i="Google Maps is on error",mapMinHeight:c="unset",containerProps:t={},loadScriptExternally:o=!1,status:u="idle",scriptCallback:n=()=>{},externalApiParams:m={},...p},g)=>{let d={ready:jsxRuntime.jsx(q,{...p,children:a}),loading:l,idle:s,error:i},f=T({apiKey:e,libraries:r,loadScriptExternally:o,status:u,externalApiParams:m,callback:n});return jsxRuntime.jsx("div",{ref:g,style:{height:"100%",width:"100%",overflow:"hidden",position:"relative",minHeight:c},...t,children:d[f]||null})}),B=ue;var qe=B;
+var S={};function Y(e){let r=document.querySelector(`script[src="${e}"]`),a=r==null?void 0:r.getAttribute("data-status");return {node:r,status:a}}function J(e={src:"",attributes:{},callbacks:{onLoadCallback:()=>{},onErrorCallback:()=>{}},elementIdToAppend:""},r,a={removeOnUnmount:!1,shouldPreventLoad:!1}){let[l,s]=react.useState(()=>!e.src||a!=null&&a.shouldPreventLoad?"idle":typeof window>"u"?"loading":S[e.src]??"loading");return react.useEffect(()=>{var u,n,m;if(r){s(r);return}if(!(e!=null&&e.src)||a!=null&&a.shouldPreventLoad)return;let i=S[e.src];if(i==="ready"||i==="error"){s(i);return}let c=Y(e.src),t=c.node;if(t){let p=c.status??i??"loading";switch(p){case"loading":case"ready":(n=e.callbacks)!=null&&n.onLoadCallback&&e.callbacks.onLoadCallback();break;case"error":(m=e.callbacks)!=null&&m.onErrorCallback&&e.callbacks.onErrorCallback();break;}s(p);}else {t=document.createElement("script"),t.src=e.src,t.async=!0,t.setAttribute("data-status","loading"),e.attributes&&Object.entries(e.attributes).length>0&&Object.entries(e.attributes).map(([g,d])=>t==null?void 0:t.setAttribute(g,d)),e.elementIdToAppend&&document.getElementById(e.elementIdToAppend)?(u=document.getElementById(e.elementIdToAppend))==null||u.appendChild(t):document.body.appendChild(t);let p=g=>{let d=g.type==="load"?"ready":"error";t==null||t.setAttribute("data-status",d);};t.addEventListener("load",p),t.addEventListener("error",p);}let o=p=>{var d,f;let g=p.type==="load"?"ready":"error";p.type==="load"?(d=e.callbacks)!=null&&d.onLoadCallback&&e.callbacks.onLoadCallback():(f=e.callbacks)!=null&&f.onErrorCallback&&e.callbacks.onErrorCallback(),s(g),S[e.src]=g;};return t.addEventListener("load",o),t.addEventListener("error",o),()=>{t&&(t.removeEventListener("load",o),t.removeEventListener("error",o)),t&&(a!=null&&a.removeOnUnmount)&&t.remove();}},[e,r,l]),l}var O=J;var T=({apiKey:e,libraries:r=[],loadScriptExternally:a=!1,status:l="idle",externalApiParams:s,callback:i})=>{var o;typeof window<"u"&&(window.googleMapsCallback=i);let c=(o=new URLSearchParams(s))==null?void 0:o.toString(),t=e?{src:`https://maps.googleapis.com/maps/api/js?key=${e}&callback=googleMapsCallback&libraries=${r==null?void 0:r.join(",")}${c?`&${c}`:""}`,attributes:{id:"googleMapsApi"}}:{src:`https://maps.googleapis.com/maps/api/js?callback=googleMapsCallback&libraries=${r==null?void 0:r.join(",")}`,attributes:{id:"googleMapsApi"}};return O(t,a?l:void 0)};var x=(e,r,a=1e-6)=>{if(e.length&&r.length){for(let l=0;l!==e.length;++l)if(Math.abs(e[l]-r[l])>a)return !1;return !0}return !1};var _=(e,r)=>{let a=react.useRef(),l=a.current,s=r(l,e);return react.useEffect(()=>{s||(a.current=e);}),s?l:e},H=_;var k=e=>{try{return {lat:e==null?void 0:e.lat(),lng:e==null?void 0:e.lng()}}catch{return e}},K=({container:e,pane:r,position:a,maps:l,drag:s})=>{class i extends google.maps.OverlayView{onAdd=()=>{var u;let t=this;s!=null&&s.draggable&&(this.get("map").getDiv().addEventListener("mouseleave",()=>{google.maps.event.trigger(this.container,"mouseup");}),this.container.addEventListener("mousedown",n=>{var m;this.container.style.cursor="grabbing",(m=t.map)==null||m.set("draggable",!1),t.set("origin",n),s.onDragStart(n,{latLng:k(this.position)}),t.moveHandler=this.get("map").getDiv().addEventListener("mousemove",p=>{let g=t.get("origin"),d=g.clientX-p.clientX,f=g.clientY-p.clientY,b=t.getProjection().fromLatLngToDivPixel(t.position);if(b===null)return;let v=t.getProjection().fromDivPixelToLatLng(new l.Point(b.x-d,b.y-f));t.set("position",v),t.set("origin",p),t.draw(),s.onDrag(p,{latLng:k(v)});});}),this.container.addEventListener("mouseup",n=>{var m;(m=t.map)==null||m.set("draggable",!0),this.container.style.cursor="default",t.moveHandler&&(google.maps.event.removeListener(t.moveHandler),t.moveHandler=null),s.onDragEnd(n,{latLng:k(t.position)});}));let o=(u=this.getPanes())==null?void 0:u[this.pane];o==null||o.classList.add("google-map-markers-overlay"),o==null||o.appendChild(this.container);};draw=()=>{let o=this.getProjection().fromLatLngToDivPixel(this.position);o!==null&&(this.container.style.transform=`translate(${o.x}px, ${o.y}px)`,this.container.style.width="0px",this.container.style.height="0px");};onRemove=()=>{this.container.parentNode!==null&&(google.maps.event.clearInstanceListeners(this.container),this.container.parentNode.removeChild(this.container));};container;pane;position;map=this.getMap();moveHandler;constructor(t,o,u){super(),this.container=t,this.pane=o,this.position=u,this.moveHandler=null;}}return new i(e,r,a)},U=K;var ee=({pane:e="floatPane",position:r,map:a,maps:l,zIndex:s=0,children:i,drag:c})=>{let t=react.useMemo(()=>{let n=document.createElement("div");return n.style.position="absolute",n},[]),o=react.useMemo(()=>U({container:t,pane:e,position:r,maps:l,drag:c}),[t,c,l,e,r]),u=H(i==null?void 0:i.props,(n,m)=>n&&n.lat===m.lat&&n.lng===m.lng);return react.useEffect(()=>!o.map&&a?(o==null||o.setMap(a),()=>{o==null||o.setMap(null);}):()=>{},[a,u]),react.useEffect(()=>{t.style.zIndex=`${s}`;},[s,t]),reactDom.createPortal(i,t)},R=ee;var P=()=>{},ae=({children:e,map:r,maps:a})=>{let l=react.useMemo(()=>!r||!a?[]:react.Children.map(e,s=>{if(react.isValidElement(s)){let i={lat:s.props.lat,lng:s.props.lng},{zIndex:c,draggable:t=!1,onDragStart:o=P,onDrag:u=P,onDragEnd:n=P}=s.props||{};return s=react.cloneElement(s,{...s.props,draggable:void 0,onDragStart:void 0,onDrag:void 0,onDragEnd:void 0}),jsxRuntime.jsx(R,{position:new a.LatLng(i.lat,i.lng),map:r,maps:a,zIndex:c,drag:{draggable:t,onDragStart:o,onDrag:u,onDragEnd:n},children:s})}return null}),[e,r,a]);return jsxRuntime.jsx("div",{children:l})},j=ae;function le({children:e=null,style:r={width:"100%",height:"100%",left:0,top:0,margin:0,padding:0,position:"absolute"},defaultCenter:a,defaultZoom:l,onGoogleApiLoaded:s,onChange:i,options:c={},events:t=[]}){let o=react.useRef(null),u=react.useRef([]),[n,m]=react.useState(),[p,g]=react.useState(),[d,f]=react.useState(!1),b=react.useCallback(()=>{var v,y;try{if(!n)return;let E=n.getZoom()??l,M=n.getBounds(),F=[(v=n.getCenter())==null?void 0:v.lng(),(y=n.getCenter())==null?void 0:y.lat()],h=M==null?void 0:M.getNorthEast(),L=M==null?void 0:M.getSouthWest();if(!h||!L||!M)return;let D=[L.lng(),L.lat(),h.lng(),h.lat()];x(D,u.current)||(i&&i({zoom:E,center:F,bounds:M}),u.current=D);}catch(E){console.error(E);}},[n,i]);return react.useEffect(()=>{o.current&&!n&&(m(new google.maps.Map(o.current,{center:a,zoom:l,...c})),g(google.maps));},[a,l,n,o,c]),react.useEffect(()=>{n&&!d&&(typeof s=="function"&&p&&s({map:n,maps:p,ref:o.current}),f(!0),google.maps.event.hasListeners(n,"idle")&&google.maps.event.clearListeners(n,"idle"),google.maps.event.addListener(n,"idle",b));},[d,n,s]),react.useEffect(()=>()=>{n&&google.maps.event.clearListeners(n,"idle");},[n]),jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{ref:o,style:r,className:"google-map",...t==null?void 0:t.reduce((v,{name:y,handler:E})=>(v[y]=E,v),{})}),e&&n&&p&&jsxRuntime.jsx(j,{map:n,maps:p,children:e})]})}var q=le;var ue=react.forwardRef(({apiKey:e="",libraries:r=["places","geometry"],children:a=null,loadingContent:l="Google Maps is loading",idleContent:s="Google Maps is on idle",errorContent:i="Google Maps is on error",mapMinHeight:c="unset",containerProps:t={},loadScriptExternally:o=!1,status:u="idle",scriptCallback:n=()=>{},externalApiParams:m={},...p},g)=>{let d={ready:jsxRuntime.jsx(q,{...p,children:a}),loading:l,idle:s,error:i},f=T({apiKey:e,libraries:r,loadScriptExternally:o,status:u,externalApiParams:m,callback:n});return jsxRuntime.jsx("div",{ref:g,style:{height:"100%",width:"100%",overflow:"hidden",position:"relative",minHeight:c},...t,children:d[f]||null})}),B=ue;var qe=B;
 
 module.exports = qe;

dist/index.d.cts

@@ -292,4 +292,4 @@ interface GoogleMapProps extends MapProps, IUseGoogleMaps {
 
 declare const GoogleMap: React.ForwardRefExoticComponent<GoogleMapProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Drag, EventProps, GoogleMapProps, IUseGoogleMaps, LatLng, LatLngBounds, LatLngBoundsLiteral, LatLngLiteral, Map, MapContextProps, MapMarkersProps, MapMouseEvent, MapOptions, MapPanes, MapProps, MapsLibrary, OverlayViewProps, Pane, ScriptProps, UseScriptOptions, UseScriptStatus, createOverlayProps, GoogleMap as default, onGoogleApiLoadedProps };
+export { type Drag, type EventProps, type GoogleMapProps, type IUseGoogleMaps, type LatLng, type LatLngBounds, type LatLngBoundsLiteral, type LatLngLiteral, type Map, type MapContextProps, type MapMarkersProps, type MapMouseEvent, type MapOptions, type MapPanes, type MapProps, type MapsLibrary, type OverlayViewProps, type Pane, type ScriptProps, type UseScriptOptions, type UseScriptStatus, type createOverlayProps, GoogleMap as default, type onGoogleApiLoadedProps };

dist/index.d.ts

@@ -292,4 +292,4 @@ interface GoogleMapProps extends MapProps, IUseGoogleMaps {
 
 declare const GoogleMap: React.ForwardRefExoticComponent<GoogleMapProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Drag, EventProps, GoogleMapProps, IUseGoogleMaps, LatLng, LatLngBounds, LatLngBoundsLiteral, LatLngLiteral, Map, MapContextProps, MapMarkersProps, MapMouseEvent, MapOptions, MapPanes, MapProps, MapsLibrary, OverlayViewProps, Pane, ScriptProps, UseScriptOptions, UseScriptStatus, createOverlayProps, GoogleMap as default, onGoogleApiLoadedProps };
+export { type Drag, type EventProps, type GoogleMapProps, type IUseGoogleMaps, type LatLng, type LatLngBounds, type LatLngBoundsLiteral, type LatLngLiteral, type Map, type MapContextProps, type MapMarkersProps, type MapMouseEvent, type MapOptions, type MapPanes, type MapProps, type MapsLibrary, type OverlayViewProps, type Pane, type ScriptProps, type UseScriptOptions, type UseScriptStatus, type createOverlayProps, GoogleMap as default, type onGoogleApiLoadedProps };