@cashub/ui-elv 1.0.2 → 1.0.4

package/esm/map/GoogleMap.js

@@ -0,0 +1,439 @@
+import { useState, useCallback, useRef, useMemo, useEffect } from 'react';
+import { renderToString } from 'react-dom/server';
+import { MarkerClusterer, SuperClusterAlgorithm } from '@googlemaps/markerclusterer';
+import GoogleMapWrapper from './subComponent/GoogleMapWrapper';
+import GoogleMapContainer from './subComponent/GoogleMapContainer';
+import GoogleMapPopup from './subComponent/GoogleMapPopup';
+import PrimaryMapIcon from '../assets/icons/map_icon1.png';
+import MapIcon from '../assets/icons/map_icon4.png';
+import { jsx as _jsx } from "react/jsx-runtime";
+const GoogleMap = _ref => {
+  let {
+    apiKey,
+    height = 512,
+    zoom = 10,
+    data = {
+      defaultPosition: null,
+      position: null,
+      locations: [],
+      message: null
+    },
+    geoFence = false,
+    geoFenceOptions = {},
+    onError,
+    customPopup,
+    checkPrimaryLocation
+  } = _ref;
+  const [hasError, setHasError] = useState(true);
+  const [validLocations, setValidLocations] = useState([]);
+  const [validBounds, setValidBounds] = useState([]);
+  const handleError = useCallback(errorCode => {
+    if (onError) {
+      onError(errorCode);
+    }
+  }, [onError]);
+  useEffect(() => {
+    const {
+      defaultPosition,
+      position,
+      locations
+    } = data;
+    const validLocations = [];
+    const bounds = [];
+    if (!position && !defaultPosition) {
+      handleError('NO_COORDINATES');
+      setHasError(true);
+      return;
+    }
+    locations.forEach(location => {
+      let {
+        latitude,
+        longitude
+      } = location;
+      if (!latitude && latitude !== 0 || !longitude && longitude !== 0 || latitude === 0 && longitude === 0 || latitude === '0' && longitude === '0') {
+        return;
+      }
+
+      // make sure coordinate in number type
+      latitude = Number(latitude);
+      longitude = Number(longitude);
+      if (Number.isNaN(latitude) || Number.isNaN(longitude)) {
+        return;
+      }
+
+      // prevent duplicate LatLngBounds
+      if (!bounds.some(LatLng => {
+        return latitude === LatLng.lat && longitude === LatLng.lng;
+      })) {
+        bounds.push({
+          lat: latitude,
+          lng: longitude
+        });
+      }
+      validLocations.push({
+        ...location,
+        latitude,
+        longitude
+      });
+    });
+
+    // pass all checking
+    setHasError(false);
+    setValidLocations(validLocations);
+    setValidBounds(bounds);
+  }, [data, handleError]);
+  if (!hasError) {
+    return /*#__PURE__*/_jsx(GoogleMapWrapper, {
+      apiKey: apiKey,
+      height: height,
+      zoom: zoom,
+      defaultPosition: data.defaultPosition,
+      position: data.position,
+      locations: validLocations,
+      message: data.message,
+      bounds: validBounds,
+      geoFence: geoFence,
+      geoFenceOptions: geoFenceOptions,
+      onError: handleError,
+      customPopup: customPopup,
+      checkPrimaryLocation: checkPrimaryLocation,
+      children: /*#__PURE__*/_jsx(Map, {})
+    });
+  }
+  return /*#__PURE__*/_jsx("div", {});
+};
+const Map = _ref2 => {
+  let {
+    height,
+    zoom,
+    defaultPosition,
+    position,
+    locations,
+    message,
+    bounds,
+    geoFence,
+    geoFenceOptions,
+    customPopup,
+    checkPrimaryLocation
+  } = _ref2;
+  const ref = useRef(null);
+  const [map, setMap] = useState();
+  const [OverlappingMarkerSpiderfier, setOverlappingMarkerSpiderfier] = useState(null);
+  const options = useMemo(() => {
+    return {
+      zoom,
+      center: {
+        lat: 1,
+        lng: 1
+      },
+      scrollwheel: false,
+      zoomControl: true,
+      zoomControlOptions: {
+        position: window.google.maps.ControlPosition.LEFT_TOP
+      },
+      mapTypeControl: false,
+      scaleControl: false,
+      streetViewControl: false,
+      rotateControl: false,
+      fullscreenControl: false,
+      minZoom: 3,
+      maxZoom: 20,
+      restriction: {
+        latLngBounds: {
+          east: 179.9999,
+          north: 85,
+          south: -85,
+          west: -179.9999
+        },
+        strictBounds: true
+      }
+    };
+  }, [zoom]);
+
+  // setup map
+  useEffect(() => {
+    if (map) {
+      map.setOptions(options);
+      window.google.maps.event.addListenerOnce(map, 'idle', () => {
+        if (geoFence) {
+          map.setCenter({
+            lat: geoFenceOptions.latitude,
+            lng: geoFenceOptions.longitude
+          });
+        } else {
+          if (bounds.length === 1) {
+            // there is only one location, locate it
+            map.setCenter(bounds[0]);
+          } else if (locations.length > 0) {
+            // locate to the center of all coordinates on first load
+            const latLngBounds = new window.google.maps.LatLngBounds();
+            bounds.forEach(bound => {
+              latLngBounds.extend(bound);
+            });
+            map.fitBounds(latLngBounds);
+            const found = locations.find(location => {
+              return latLngBounds.contains({
+                lat: location.latitude,
+                lng: location.longitude
+              });
+            });
+
+            // if center no contain any marker then locate to first location
+            if (!found) {
+              map.setCenter(bounds[0]);
+            }
+          } else {
+            map.setCenter({
+              lat: position && position.latitude || defaultPosition.latitude,
+              lng: position && position.longitude || defaultPosition.longitude
+            });
+          }
+        }
+      });
+      return () => {
+        window.google.maps.event.clearListeners(map, 'click');
+      };
+    }
+  }, [map, options, locations, bounds, defaultPosition, position, geoFence, geoFenceOptions.latitude, geoFenceOptions.longitude]);
+
+  // render marker cluster
+  useEffect(() => {
+    if (map && OverlappingMarkerSpiderfier && locations.length > 0) {
+      const markers = [];
+
+      // set up popup
+      const popup = new GoogleMapPopup({
+        maxWidth: 400,
+        offset: 36
+      });
+      map.addListener('click', () => {
+        popup.setMap(null);
+      });
+      const oms = new OverlappingMarkerSpiderfier.default(map, {
+        markersWontMove: true,
+        markersWontHide: true,
+        basicFormatEvents: true
+      });
+      locations.forEach(location => {
+        const {
+          latitude,
+          longitude
+        } = location;
+        let icon;
+        if (checkPrimaryLocation && checkPrimaryLocation(location)) {
+          icon = {
+            url: PrimaryMapIcon,
+            scaledSize: new window.google.maps.Size(40, 50)
+          };
+        } else {
+          icon = {
+            url: MapIcon,
+            scaledSize: new window.google.maps.Size(40, 50)
+          };
+        }
+        const marker = new window.google.maps.Marker({
+          icon,
+          map,
+          position: {
+            lat: latitude,
+            lng: longitude
+          }
+        });
+        if (customPopup) {
+          marker.addListener('click', event => {
+            event.stop();
+            const coordinate = {
+              lat: latitude,
+              lng: longitude
+            };
+            popup.setMap(map);
+            popup.setPosition(coordinate);
+            popup.setContent(renderToString(customPopup(location)));
+            popup.draw();
+          });
+        }
+        markers.push(marker);
+        oms.addMarker(marker);
+      });
+      const markerClusterer = new MarkerClusterer({
+        map,
+        markers,
+        algorithm: new SuperClusterAlgorithm({
+          radius: 120
+        }),
+        onClusterClick: (event, cluster, map) => {
+          // fix: cluster marker spiderfier
+          // const targetPosition = cluster.markers[0].getPosition().toJSON();
+          // const isAllSamePosition = cluster.markers.every((marker) => {
+          //   const position = marker.getPosition().toJSON();
+          //   return (
+          //     targetPosition.lat === position.lat &&
+          //     targetPosition.lng === position.lng
+          //   );
+          // });
+          // if (isAllSamePosition) {
+          //   return;
+          // }
+
+          // fix: need to call twice to actually work
+          map.fitBounds(cluster.bounds);
+          map.fitBounds(cluster.bounds);
+
+          // check current view has marker, if not set view to first marker
+          const currentBounds = map.getBounds();
+          const found = cluster.markers.find(marker => {
+            return currentBounds.contains(marker.getPosition());
+          });
+          if (!found) {
+            map.setCenter(cluster.markers[0].getPosition());
+          }
+        }
+      });
+      return () => {
+        popup.setMap(null);
+        markerClusterer.setMap(null);
+        markers.forEach(marker => {
+          marker.setMap(null);
+        });
+      };
+    }
+  }, [map, OverlappingMarkerSpiderfier, locations, checkPrimaryLocation, customPopup]);
+
+  // geofencing
+  useEffect(() => {
+    if (map && geoFence) {
+      const circle = new window.google.maps.Circle({
+        strokeColor: '#597EF7',
+        strokeOpacity: 0,
+        strokeWeight: 0,
+        fillColor: '#597EF7',
+        fillOpacity: 0.5,
+        center: {
+          lat: geoFenceOptions.latitude,
+          lng: geoFenceOptions.longitude
+        },
+        radius: geoFenceOptions.radius,
+        editable: geoFenceOptions.editable,
+        draggable: geoFenceOptions.editable
+      });
+      circle.setMap(map);
+
+      // add event listener
+      if (geoFenceOptions.eventHandlers) {
+        const {
+          click,
+          edit,
+          drag
+        } = geoFenceOptions.eventHandlers;
+        if (click) {
+          window.google.maps.event.addListener(circle, 'click', click);
+        }
+        if (edit) {
+          circle.addListener('radius_changed', () => {
+            const radius = circle.getRadius();
+            if (geoFenceOptions.minRadius && radius < geoFenceOptions.minRadius) {
+              circle.setRadius(geoFenceOptions.minRadius);
+              return;
+            }
+            edit(circle.getRadius());
+          });
+        }
+        if (drag) {
+          circle.addListener('center_changed', () => {
+            drag(circle.getCenter().toJSON());
+          });
+        }
+      }
+      let repositionButton;
+      if (geoFenceOptions.enabledReposition) {
+        repositionButton = document.createElement('button');
+        repositionButton.style.margin = 'var(--spacing-s)';
+        repositionButton.style.padding = 'var(--spacing-xs)';
+        repositionButton.style.boxShadow = 'rgba(0, 0, 0, 0.3) 0px 1px 4px -1px';
+        repositionButton.style.border = 'none';
+        repositionButton.style.borderRadius = '2px';
+        repositionButton.style.cursor = 'pointer';
+        repositionButton.style.backgroundColor = 'rgb(255, 255, 255)';
+        repositionButton.style.fontSize = '1rem';
+        repositionButton.textContent = 'Reposition';
+        repositionButton.title = 'Click to reposition the map to geofence';
+        repositionButton.type = 'button';
+        repositionButton.addEventListener('click', () => {
+          map.setCenter({
+            lat: geoFenceOptions.latitude,
+            lng: geoFenceOptions.longitude
+          });
+        });
+        const controlDiv = document.createElement('div');
+        controlDiv.appendChild(repositionButton);
+        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
+      }
+      return () => {
+        circle.setMap(null);
+        window.google.maps.event.clearListeners(circle, 'click');
+        window.google.maps.event.clearListeners(circle, 'radius_changed');
+        window.google.maps.event.clearListeners(circle, 'center_changed');
+
+        // remove reposition button if exist
+        const rightBottonControls = map.controls[google.maps.ControlPosition.RIGHT_BOTTOM];
+        if (rightBottonControls.getAt(0)) {
+          rightBottonControls.removeAt(0);
+        }
+      };
+    }
+  }, [map, geoFence, geoFenceOptions.latitude, geoFenceOptions.longitude, geoFenceOptions.radius, geoFenceOptions.minRadius, geoFenceOptions.editable, geoFenceOptions.eventHandlers]);
+
+  // show message
+  useEffect(() => {
+    if (map && message) {
+      const messageContainer = document.createElement('p');
+      messageContainer.style.margin = 'var(--spacing-s)';
+      messageContainer.style.padding = 'var(--spacing-xs)';
+      messageContainer.style.boxShadow = 'var(--box-shadow)';
+      messageContainer.style.border = 'none';
+      messageContainer.style.borderRadius = 'var(--border-radius-s)';
+      messageContainer.style.cursor = 'pointer';
+      messageContainer.style.color = 'rgb(0, 0, 0)';
+      messageContainer.style.backgroundColor = 'rgb(255, 255, 255)';
+      messageContainer.style.fontSize = 'var(--font-body1)';
+      messageContainer.textContent = message;
+      const index = map.controls[window.google.maps.ControlPosition.CENTER].push(messageContainer);
+      return () => {
+        map.controls[window.google.maps.ControlPosition.CENTER].removeAt(index - 1);
+      };
+    }
+  }, [map, message]);
+  useEffect(() => {
+    if (ref.current && !map) {
+      setMap(new window.google.maps.Map(ref.current, {}));
+    }
+  }, [map, options]);
+  useEffect(() => {
+    if (map && !OverlappingMarkerSpiderfier) {
+      import('overlapping-marker-spiderfier').then(module => {
+        setOverlappingMarkerSpiderfier(module);
+      }).catch(error => {
+        console.log(error);
+      });
+    }
+  }, [map, OverlappingMarkerSpiderfier]);
+  return /*#__PURE__*/_jsx(GoogleMapContainer, {
+    ref: ref,
+    height: height,
+    tabIndex: "0",
+    onClick: event => {
+      event.target.focus();
+    },
+    onFocus: () => {
+      map.setOptions({
+        scrollwheel: true
+      });
+    },
+    onBlur: () => {
+      map.setOptions({
+        scrollwheel: false
+      });
+    }
+  });
+};
+export default GoogleMap;

package/esm/map/GoogleReverseGeolocation.js

@@ -0,0 +1,193 @@
+import { useState, useMemo, useRef, useEffect } from 'react';
+import styled from 'styled-components';
+import GoogleMapWrapper from './subComponent/GoogleMapWrapper';
+import GoogleMapContainer from './subComponent/GoogleMapContainer';
+import Searchbox from '../form/Searchbox';
+import MapIcon from '../assets/icons/map_icon4.png';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const GoogleReverseGeolocation = _ref => {
+  let {
+    apiKey,
+    children,
+    defaultLatlng,
+    changeLatlng,
+    onChoose,
+    onSearch,
+    onError
+  } = _ref;
+  const [markerLatLng, setMarkerLatLng] = useState(defaultLatlng);
+  const handleChangeLatlng = latlng => {
+    setMarkerLatLng(latlng);
+    changeLatlng(latlng);
+  };
+  const confirmChooseLocation = async callback => {
+    if (markerLatLng.lat && markerLatLng.lng) {
+      try {
+        const address = await onChoose(markerLatLng);
+        if (address) {
+          callback({
+            address
+          });
+        } else {
+          callback({
+            error: 'ReverseGeo'
+          });
+        }
+      } catch (error) {
+        callback(error);
+      }
+    } else {
+      callback({
+        error: 'PleaseChooseLocation'
+      });
+    }
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children(/*#__PURE__*/_jsx(GoogleMapWrapper, {
+      apiKey: apiKey,
+      height: 512,
+      zoom: 3,
+      markerLatLng: markerLatLng,
+      handleChangeLatlng: handleChangeLatlng,
+      onSearch: onSearch,
+      onError: onError,
+      children: /*#__PURE__*/_jsx(Map, {})
+    }), confirmChooseLocation)
+  });
+};
+const Map = _ref2 => {
+  let {
+    height,
+    zoom,
+    markerLatLng,
+    handleChangeLatlng,
+    onSearch,
+    onError
+  } = _ref2;
+  const ref = useRef(null);
+  const [map, setMap] = useState();
+  const options = useMemo(() => {
+    return {
+      zoom,
+      center: {
+        lat: 1,
+        lng: 1
+      },
+      scrollwheel: true,
+      zoomControl: true,
+      zoomControlOptions: {
+        position: window.google.maps.ControlPosition.LEFT_TOP
+      },
+      mapTypeControl: false,
+      scaleControl: false,
+      streetViewControl: false,
+      rotateControl: false,
+      fullscreenControl: false,
+      minZoom: 3,
+      restriction: {
+        latLngBounds: {
+          east: 179.9999,
+          north: 85,
+          south: -85,
+          west: -179.9999
+        },
+        strictBounds: true
+      }
+    };
+  }, [zoom]);
+  const handleError = errorCode => {
+    if (onError) {
+      onError(errorCode);
+    }
+  };
+  const handleSearch = async address => {
+    try {
+      const latlng = await onSearch(address);
+      if (latlng) {
+        map.setZoom(15);
+        map.panTo(latlng);
+        handleChangeLatlng(latlng);
+      } else {
+        handleError('NO_RESULT');
+      }
+    } catch (error) {
+      handleError(error.message);
+    }
+  };
+
+  // setup map
+  useEffect(() => {
+    if (map) {
+      map.setOptions(options);
+    }
+  }, [map, options]);
+
+  // click to choose location
+  useEffect(() => {
+    if (map) {
+      map.addListener('click', event => {
+        handleChangeLatlng(event.latLng.toJSON());
+      });
+      return () => {
+        window.google.maps.event.clearListeners(map, 'click');
+      };
+    }
+  }, [map, handleChangeLatlng]);
+
+  // render marker cluster
+  useEffect(() => {
+    if (map && markerLatLng.lat && markerLatLng.lng) {
+      const marker = new window.google.maps.Marker({
+        icon: {
+          url: MapIcon,
+          scaledSize: new window.google.maps.Size(40, 50)
+        },
+        position: markerLatLng
+      });
+      marker.setMap(map);
+      return () => {
+        marker.setMap(null);
+      };
+    }
+  }, [map, markerLatLng]);
+  useEffect(() => {
+    if (ref.current && !map) {
+      setMap(new window.google.maps.Map(ref.current, {}));
+    }
+  }, [map, options]);
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      position: 'relative'
+    },
+    children: [/*#__PURE__*/_jsx(MapSearchBoxControl, {
+      children: /*#__PURE__*/_jsx(Searchbox, {
+        onSearch: handleSearch,
+        autoFocus: true
+      })
+    }), /*#__PURE__*/_jsx(GoogleMapContainer, {
+      ref: ref,
+      height: height,
+      tabIndex: "0",
+      onClick: event => {
+        event.target.focus();
+      },
+      onFocus: () => {
+        map.setOptions({
+          scrollwheel: true
+        });
+      },
+      onBlur: () => {
+        map.setOptions({
+          scrollwheel: false
+        });
+      }
+    })]
+  });
+};
+const MapSearchBoxControl = styled.div`
+  position: absolute;
+  top: var(--spacing-s);
+  right: var(--spacing-s);
+  z-index: 1;
+`;
+export default GoogleReverseGeolocation;