@cashub/ui 0.49.0-beta.0 → 0.49.0-beta.2

package/src/map/GoogleMap.js

@@ -1,489 +0,0 @@
-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';
-
-const GoogleMap = ({
-  apiKey,
-  height = 512,
-  zoom = 10,
-  data = {
-    defaultPosition: null,
-    position: null,
-    locations: [],
-    message: null,
-  },
-  geoFence = false,
-  geoFenceOptions = {},
-  onError,
-  customPopup,
-  checkPrimaryLocation,
-}) => {
-  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 (
-      <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}
-      >
-        <Map />
-      </GoogleMapWrapper>
-    );
-  }
-
-  return <div></div>;
-};
-
-const Map = ({
-  height,
-  zoom,
-  defaultPosition,
-  position,
-  locations,
-  message,
-  bounds,
-  geoFence,
-  geoFenceOptions,
-  customPopup,
-  checkPrimaryLocation,
-}) => {
-  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 (
-    <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/src/map/GoogleReverseGeolocation.js

@@ -1,197 +0,0 @@
-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';
-
-const GoogleReverseGeolocation = ({
-  apiKey,
-  children,
-  defaultLatlng,
-  changeLatlng,
-  onChoose,
-  onSearch,
-  onError,
-}) => {
-  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 (
-    <>
-      {children(
-        <GoogleMapWrapper
-          apiKey={apiKey}
-          height={512}
-          zoom={3}
-          markerLatLng={markerLatLng}
-          handleChangeLatlng={handleChangeLatlng}
-          onSearch={onSearch}
-          onError={onError}
-        >
-          <Map />
-        </GoogleMapWrapper>,
-        confirmChooseLocation,
-      )}
-    </>
-  );
-};
-
-const Map = ({
-  height,
-  zoom,
-  markerLatLng,
-  handleChangeLatlng,
-  onSearch,
-  onError,
-}) => {
-  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 (
-    <div style={{ position: 'relative' }}>
-      <MapSearchBoxControl>
-        <Searchbox onSearch={handleSearch} autoFocus />
-      </MapSearchBoxControl>
-      <GoogleMapContainer
-        ref={ref}
-        height={height}
-        tabIndex='0'
-        onClick={(event) => {
-          event.target.focus();
-        }}
-        onFocus={() => {
-          map.setOptions({ scrollwheel: true });
-        }}
-        onBlur={() => {
-          map.setOptions({ scrollwheel: false });
-        }}
-      />
-    </div>
-  );
-};
-
-const MapSearchBoxControl = styled.div`
-  position: absolute;
-  top: var(--spacing-s);
-  right: var(--spacing-s);
-  z-index: 1;
-`;
-
-export default GoogleReverseGeolocation;