From 63b3cb91212c0e8b41ee64b08bf4ccdc28df11d3 Mon Sep 17 00:00:00 2001 From: Giorgia Bosello Date: Tue, 24 Oct 2023 19:33:43 +0200 Subject: [PATCH] :zap: remove map from dist --- dist/index.cjs | 2 +- dist/index.js | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dist/index.cjs b/dist/index.cjs index cf9d3e3..94d9b86 100644 --- a/dist/index.cjs +++ b/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&&r){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.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&&r){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.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; module.exports = qe; diff --git a/dist/index.js b/dist/index.js index d8ed2b5..120415e 100644 --- a/dist/index.js +++ b/dist/index.js @@ -2,6 +2,6 @@ import { forwardRef, useRef, useState, useCallback, useEffect, useMemo, Children import { createPortal } from 'react-dom'; import { jsx, jsxs, Fragment } from '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]=useState(()=>!e.src||a!=null&&a.shouldPreventLoad?"idle":typeof window>"u"?"loading":S[e.src]??"loading");return 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&&r){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=useRef(),l=a.current,s=r(l,e);return 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=useMemo(()=>{let n=document.createElement("div");return n.style.position="absolute",n},[]),o=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 useEffect(()=>!o.map&&a?(o==null||o.setMap(a),()=>{o==null||o.setMap(null);}):()=>{},[a,u]),useEffect(()=>{t.style.zIndex=`${s}`;},[s,t]),createPortal(i,t)},R=ee;var P=()=>{},ae=({children:e,map:r,maps:a})=>{let l=useMemo(()=>!r||!a?[]:Children.map(e,s=>{if(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=cloneElement(s,{...s.props,draggable:void 0,onDragStart:void 0,onDrag:void 0,onDragEnd:void 0}),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 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=useRef(null),u=useRef(),[n,m]=useState(),[p,g]=useState(),[d,f]=useState(!1),b=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 useEffect(()=>{o.current&&!n&&(m(new google.maps.Map(o.current,{center:a,zoom:l,...c})),g(google.maps));},[a,l,n,o,c]),useEffect(()=>{n&&(d||(s&&p&&s({map:n,maps:p,ref:o.current}),f(!0)),google.maps.event.clearListeners(n,"idle"),google.maps.event.addListener(n,"idle",b));},[d,n,p,i,s,b]),useEffect(()=>()=>{n&&google.maps.event.clearListeners(n,"idle");},[n]),jsxs(Fragment,{children:[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&&jsx(j,{map:n,maps:p,children:e})]})}var q=le;var ue=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: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 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]=useState(()=>!e.src||a!=null&&a.shouldPreventLoad?"idle":typeof window>"u"?"loading":S[e.src]??"loading");return 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&&r){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=useRef(),l=a.current,s=r(l,e);return 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=useMemo(()=>{let n=document.createElement("div");return n.style.position="absolute",n},[]),o=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 useEffect(()=>!o.map&&a?(o==null||o.setMap(a),()=>{o==null||o.setMap(null);}):()=>{},[a,u]),useEffect(()=>{t.style.zIndex=`${s}`;},[s,t]),createPortal(i,t)},R=ee;var P=()=>{},ae=({children:e,map:r,maps:a})=>{let l=useMemo(()=>!r||!a?[]:Children.map(e,s=>{if(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=cloneElement(s,{...s.props,draggable:void 0,onDragStart:void 0,onDrag:void 0,onDragEnd:void 0}),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 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=useRef(null),u=useRef([]),[n,m]=useState(),[p,g]=useState(),[d,f]=useState(!1),b=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 useEffect(()=>{o.current&&!n&&(m(new google.maps.Map(o.current,{center:a,zoom:l,...c})),g(google.maps));},[a,l,n,o,c]),useEffect(()=>{n&&(d||(s&&p&&s({map:n,maps:p,ref:o.current}),f(!0)),google.maps.event.clearListeners(n,"idle"),google.maps.event.addListener(n,"idle",b));},[d,n,p,i,s,b]),useEffect(()=>()=>{n&&google.maps.event.clearListeners(n,"idle");},[n]),jsxs(Fragment,{children:[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&&jsx(j,{map:n,maps:p,children:e})]})}var q=le;var ue=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: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 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; export { qe as default }; diff --git a/package.json b/package.json index d41c1c2..a9e3e15 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "google-maps-react-markers", - "version": "2.0.4", + "version": "2.0.5", "description": "Google Maps library that accepts markers as react components, works with React 18+ and it is fully typed.", "author": "Giorgia Bosello", "license": "MIT",