@cashub/ui 0.48.28 → 0.49.0-beta.0

package/dist/map/GoogleMap.js

@@ -0,0 +1,448 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _server = require("react-dom/server");
+var _markerclusterer = require("@googlemaps/markerclusterer");
+var _GoogleMapWrapper = _interopRequireDefault(require("./subComponent/GoogleMapWrapper"));
+var _GoogleMapContainer = _interopRequireDefault(require("./subComponent/GoogleMapContainer"));
+var _GoogleMapPopup = _interopRequireDefault(require("./subComponent/GoogleMapPopup"));
+var _map_icon = _interopRequireDefault(require("../assets/icons/map_icon1.png"));
+var _map_icon2 = _interopRequireDefault(require("../assets/icons/map_icon4.png"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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] = (0, _react.useState)(true);
+  const [validLocations, setValidLocations] = (0, _react.useState)([]);
+  const [validBounds, setValidBounds] = (0, _react.useState)([]);
+  const handleError = (0, _react.useCallback)(errorCode => {
+    if (onError) {
+      onError(errorCode);
+    }
+  }, [onError]);
+  (0, _react.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__*/(0, _jsxRuntime.jsx)(_GoogleMapWrapper.default, {
+      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__*/(0, _jsxRuntime.jsx)(Map, {})
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {});
+};
+const Map = _ref2 => {
+  let {
+    height,
+    zoom,
+    defaultPosition,
+    position,
+    locations,
+    message,
+    bounds,
+    geoFence,
+    geoFenceOptions,
+    customPopup,
+    checkPrimaryLocation
+  } = _ref2;
+  const ref = (0, _react.useRef)(null);
+  const [map, setMap] = (0, _react.useState)();
+  const [OverlappingMarkerSpiderfier, setOverlappingMarkerSpiderfier] = (0, _react.useState)(null);
+  const options = (0, _react.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
+  (0, _react.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
+  (0, _react.useEffect)(() => {
+    if (map && OverlappingMarkerSpiderfier && locations.length > 0) {
+      const markers = [];
+
+      // set up popup
+      const popup = new _GoogleMapPopup.default({
+        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: _map_icon.default,
+            scaledSize: new window.google.maps.Size(40, 50)
+          };
+        } else {
+          icon = {
+            url: _map_icon2.default,
+            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((0, _server.renderToString)(customPopup(location)));
+            popup.draw();
+          });
+        }
+        markers.push(marker);
+        oms.addMarker(marker);
+      });
+      const markerClusterer = new _markerclusterer.MarkerClusterer({
+        map,
+        markers,
+        algorithm: new _markerclusterer.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
+  (0, _react.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
+  (0, _react.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]);
+  (0, _react.useEffect)(() => {
+    if (ref.current && !map) {
+      setMap(new window.google.maps.Map(ref.current, {}));
+    }
+  }, [map, options]);
+  (0, _react.useEffect)(() => {
+    if (map && !OverlappingMarkerSpiderfier) {
+      Promise.resolve().then(() => _interopRequireWildcard(require('overlapping-marker-spiderfier'))).then(module => {
+        setOverlappingMarkerSpiderfier(module);
+      }).catch(error => {
+        console.log(error);
+      });
+    }
+  }, [map, OverlappingMarkerSpiderfier]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GoogleMapContainer.default, {
+    ref: ref,
+    height: height,
+    tabIndex: "0",
+    onClick: event => {
+      event.target.focus();
+    },
+    onFocus: () => {
+      map.setOptions({
+        scrollwheel: true
+      });
+    },
+    onBlur: () => {
+      map.setOptions({
+        scrollwheel: false
+      });
+    }
+  });
+};
+var _default = exports.default = GoogleMap;

package/dist/map/GoogleReverseGeolocation.js

@@ -0,0 +1,200 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _GoogleMapWrapper = _interopRequireDefault(require("./subComponent/GoogleMapWrapper"));
+var _GoogleMapContainer = _interopRequireDefault(require("./subComponent/GoogleMapContainer"));
+var _Searchbox = _interopRequireDefault(require("../form/Searchbox"));
+var _map_icon = _interopRequireDefault(require("../assets/icons/map_icon4.png"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const GoogleReverseGeolocation = _ref => {
+  let {
+    apiKey,
+    children,
+    defaultLatlng,
+    changeLatlng,
+    onChoose,
+    onSearch,
+    onError
+  } = _ref;
+  const [markerLatLng, setMarkerLatLng] = (0, _react.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__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: children(/*#__PURE__*/(0, _jsxRuntime.jsx)(_GoogleMapWrapper.default, {
+      apiKey: apiKey,
+      height: 512,
+      zoom: 3,
+      markerLatLng: markerLatLng,
+      handleChangeLatlng: handleChangeLatlng,
+      onSearch: onSearch,
+      onError: onError,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Map, {})
+    }), confirmChooseLocation)
+  });
+};
+const Map = _ref2 => {
+  let {
+    height,
+    zoom,
+    markerLatLng,
+    handleChangeLatlng,
+    onSearch,
+    onError
+  } = _ref2;
+  const ref = (0, _react.useRef)(null);
+  const [map, setMap] = (0, _react.useState)();
+  const options = (0, _react.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
+  (0, _react.useEffect)(() => {
+    if (map) {
+      map.setOptions(options);
+    }
+  }, [map, options]);
+
+  // click to choose location
+  (0, _react.useEffect)(() => {
+    if (map) {
+      map.addListener('click', event => {
+        handleChangeLatlng(event.latLng.toJSON());
+      });
+      return () => {
+        window.google.maps.event.clearListeners(map, 'click');
+      };
+    }
+  }, [map, handleChangeLatlng]);
+
+  // render marker cluster
+  (0, _react.useEffect)(() => {
+    if (map && markerLatLng.lat && markerLatLng.lng) {
+      const marker = new window.google.maps.Marker({
+        icon: {
+          url: _map_icon.default,
+          scaledSize: new window.google.maps.Size(40, 50)
+        },
+        position: markerLatLng
+      });
+      marker.setMap(map);
+      return () => {
+        marker.setMap(null);
+      };
+    }
+  }, [map, markerLatLng]);
+  (0, _react.useEffect)(() => {
+    if (ref.current && !map) {
+      setMap(new window.google.maps.Map(ref.current, {}));
+    }
+  }, [map, options]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      position: 'relative'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MapSearchBoxControl, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Searchbox.default, {
+        onSearch: handleSearch,
+        autoFocus: true
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GoogleMapContainer.default, {
+      ref: ref,
+      height: height,
+      tabIndex: "0",
+      onClick: event => {
+        event.target.focus();
+      },
+      onFocus: () => {
+        map.setOptions({
+          scrollwheel: true
+        });
+      },
+      onBlur: () => {
+        map.setOptions({
+          scrollwheel: false
+        });
+      }
+    })]
+  });
+};
+const MapSearchBoxControl = _styledComponents.default.div`
+  position: absolute;
+  top: var(--spacing-s);
+  right: var(--spacing-s);
+  z-index: 1;
+`;
+var _default = exports.default = GoogleReverseGeolocation;