@cashub/ui 0.48.28 → 0.49.0-beta.0

package/map/GoogleMap.js

@@ -1,452 +0,0 @@
-"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; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-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(_objectSpread(_objectSpread({}, 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/map/GoogleReverseGeolocation.js

@@ -1,197 +0,0 @@
-"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");
-var _templateObject;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-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(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: var(--spacing-s);\n  right: var(--spacing-s);\n  z-index: 1;\n"])));
-var _default = exports.default = GoogleReverseGeolocation;