@cashub/ui-elv 1.0.0

package/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;

package/map/LeafletMap.js

@@ -0,0 +1,231 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _leaflet = _interopRequireDefault(require("leaflet"));
+var _reactLeaflet = require("react-leaflet");
+var _reactLeafletMarkercluster = _interopRequireDefault(require("react-leaflet-markercluster"));
+require("leaflet/dist/leaflet.css");
+require("react-leaflet-markercluster/dist/styles.min.css");
+var _BasicLeafletMap = _interopRequireDefault(require("./subComponent/BasicLeafletMap"));
+var _LeafletDrawControl = _interopRequireDefault(require("./subComponent/LeafletDrawControl"));
+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 }; }
+const LeafletMap = _ref => {
+  let {
+    height = 512,
+    zoom = 10,
+    data = {
+      defaultPosition: null,
+      position: null,
+      locations: []
+    },
+    geoFence = false,
+    geoFenceOptions = {},
+    onError,
+    customPopup,
+    checkPrimaryLocation
+  } = _ref;
+  const [hasError, setHasError] = (0, _react.useState)(true);
+  const [validLocations, setValidLocations] = (0, _react.useState)([]);
+  const [validBound, setValidBound] = (0, _react.useState)([]);
+  const [markers, setMarkers] = (0, _react.useState)([]);
+  const drawControlRef = (0, _react.useRef)();
+  const handleError = (0, _react.useCallback)(errorCode => {
+    if (onError) {
+      onError(errorCode);
+    }
+  }, [onError]);
+  const handleMountedDrawControl = (0, _react.useCallback)(control => {
+    drawControlRef.current = control;
+    if (geoFenceOptions.editable) {
+      drawControlRef.current.enableEdit();
+    }
+  }, [geoFenceOptions.editable]);
+  const handleEditResizeDraw = (0, _react.useCallback)(event => {
+    const {
+      minRadius,
+      eventHandlers
+    } = geoFenceOptions;
+    const radius = event.layer.getRadius();
+    if (minRadius && radius < minRadius) {
+      event.layer.setRadius(minRadius);
+      return;
+    }
+    const tooltips = event.target._panes.popupPane.getElementsByClassName('leaflet-draw-tooltip');
+    for (let index = 0; index < tooltips.length; index += 1) {
+      tooltips[index].textContent = `Radius: ${parseInt(radius, 10)}`;
+    }
+    if (eventHandlers.edit) {
+      eventHandlers.edit(radius);
+    }
+  }, [geoFenceOptions]);
+  const handleEditMoveDraw = (0, _react.useCallback)(event => {
+    const {
+      eventHandlers
+    } = geoFenceOptions;
+    if (eventHandlers.drag) {
+      eventHandlers.drag(event.layer.getLatLng());
+    }
+  }, [geoFenceOptions]);
+  (0, _react.useEffect)(() => {
+    const {
+      defaultPosition,
+      position,
+      locations
+    } = data;
+    const arrLatLngs = [];
+    const bounds = [];
+    const markers = [];
+    if (!position && !defaultPosition) {
+      handleError('NO_COORDINATES');
+      setHasError(true);
+      return;
+    }
+    locations.forEach((location, index) => {
+      const {
+        latitude,
+        longitude
+      } = location;
+      if (!latitude && latitude !== 0 || !longitude && longitude !== 0 || latitude === 0 && longitude === 0 || latitude === '0' && longitude === '0') {
+        return;
+      }
+
+      // prevent duplicate LatLngBounds
+      if (!bounds.some(LatLng => {
+        return latitude === LatLng[0] && longitude === LatLng[1];
+      })) {
+        bounds.push([latitude, longitude]);
+      }
+      arrLatLngs.push([latitude, longitude]);
+      let popupContent = null;
+      if (customPopup) {
+        popupContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactLeaflet.Popup, {
+          maxWidth: 400,
+          closeButton: false,
+          children: customPopup(location)
+        });
+      }
+      let Icon = _leaflet.default.icon({
+        iconUrl: _map_icon2.default,
+        iconSize: [40, 50]
+      });
+      if (checkPrimaryLocation && checkPrimaryLocation(location)) {
+        Icon = _leaflet.default.icon({
+          iconUrl: _map_icon.default,
+          iconSize: [40, 50]
+        });
+      }
+      markers.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactLeaflet.Marker, {
+        position: [latitude, longitude],
+        icon: Icon,
+        children: popupContent
+      }, index));
+    });
+
+    // pass all checking
+    setHasError(false);
+    setValidLocations(arrLatLngs);
+    setValidBound(bounds);
+    setMarkers(markers);
+  }, [data, handleError, customPopup, checkPrimaryLocation]);
+  (0, _react.useEffect)(() => {
+    if (drawControlRef.current && geoFenceOptions.editable) {
+      drawControlRef.current.enableEdit();
+    }
+  }, [geoFenceOptions.editable]);
+  if (!hasError) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_BasicLeafletMap.default, {
+      height: height,
+      zoom: zoom,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MapInteractor, {
+        zoom: zoom,
+        locations: validLocations,
+        bounds: validBound,
+        markers: markers,
+        defaultPosition: data.defaultPosition,
+        position: data.position
+      }), markers.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactLeafletMarkercluster.default, {
+        maxClusterRadius: 120,
+        iconCreateFunction: cluster => {
+          return _leaflet.default.divIcon({
+            html: `<div><span>${cluster.getChildCount()}</span></div>`,
+            className: 'marker-cluster',
+            iconSize: _leaflet.default.point(40, 40)
+          });
+        },
+        children: markers
+      }), geoFence && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactLeaflet.FeatureGroup, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LeafletDrawControl.default, {
+          draw: false,
+          edit: {
+            edit: false,
+            remove: false
+          },
+          onMounted: handleMountedDrawControl,
+          onEditResize: handleEditResizeDraw,
+          onEditMove: handleEditMoveDraw
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactLeaflet.Circle, {
+          center: [geoFenceOptions.latitude, geoFenceOptions.longitude],
+          radius: geoFenceOptions.radius,
+          pathOptions: {
+            stroke: false,
+            fillColor: 'var(--color-primary)',
+            fillOpacity: 0.5
+          }
+        })]
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {});
+};
+const MapInteractor = _ref2 => {
+  let {
+    zoom,
+    locations,
+    bounds,
+    markers,
+    defaultPosition,
+    position
+  } = _ref2;
+  const map = (0, _reactLeaflet.useMapEvents)({
+    click: event => {
+      event.originalEvent.stopPropagation();
+    },
+    focus: () => {
+      map.scrollWheelZoom.enable();
+    },
+    blur: () => {
+      map.scrollWheelZoom.disable();
+    }
+  });
+  (0, _react.useEffect)(() => {
+    if (bounds.length === 1) {
+      map.setView(bounds[0]);
+    } else if (locations.length > 0) {
+      map.fitBounds(bounds);
+
+      // check current view has marker, if not set view to first marker
+      const currentBounds = map.getBounds();
+      const found = locations.find(LatLng => {
+        const tmpLat = parseFloat(LatLng[0]);
+        const tmpLng = parseFloat(LatLng[1]);
+        if (Number.isNaN(tmpLat) || Number.isNaN(tmpLng)) return false;
+        return currentBounds.contains([tmpLat, tmpLng]);
+      });
+      if (!found) {
+        map.setView(locations[0]);
+      }
+    } else {
+      map.setView([position && position.latitude || defaultPosition.latitude, position && position.longitude || defaultPosition.longitude]);
+    }
+    map.setZoom(zoom);
+  }, [map, zoom, locations, bounds, markers, defaultPosition, position]);
+  return null;
+};
+var _default = exports.default = LeafletMap;

package/map/LeafletReverseGeolocation.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _leaflet = _interopRequireDefault(require("leaflet"));
+var _reactLeaflet = require("react-leaflet");
+var _BasicLeafletMap = _interopRequireDefault(require("./subComponent/BasicLeafletMap"));
+var _MapSearchBoxControl = _interopRequireDefault(require("./subComponent/MapSearchBoxControl"));
+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 LeafletReverseGeolocation = _ref => {
+  let {
+    children,
+    defaultLatlng,
+    changeLatlng,
+    onChoose,
+    onSearch,
+    onError
+  } = _ref;
+  const [markerLatLng, setMarkerLatLng] = (0, _react.useState)(defaultLatlng);
+  const Icon = (0, _react.useMemo)(() => {
+    return _leaflet.default.icon({
+      iconUrl: _map_icon.default,
+      iconSize: [40, 50]
+    });
+  }, []);
+  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'
+      });
+    }
+  };
+  const Map = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_BasicLeafletMap.default, {
+    height: 500,
+    zoom: 10,
+    scrollWheelZoom: true,
+    children: [markerLatLng.lat && markerLatLng.lng && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactLeaflet.Marker, {
+      position: [markerLatLng.lat, markerLatLng.lng],
+      icon: Icon
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MapInteractor, {
+      changeLatlng: handleChangeLatlng
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MapSearchBoxControl.default, {
+      changeLatlng: handleChangeLatlng,
+      onSearch: onSearch,
+      onError: onError
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: children(Map, confirmChooseLocation)
+  });
+};
+const MapInteractor = _ref2 => {
+  let {
+    changeLatlng
+  } = _ref2;
+  const map = (0, _reactLeaflet.useMapEvents)({
+    click: event => {
+      const {
+        lat,
+        lng
+      } = event.latlng;
+      changeLatlng({
+        lat: lat.toString(),
+        lng: lng.toString()
+      });
+    }
+  });
+  (0, _react.useEffect)(() => {
+    const bounds = _leaflet.default.latLngBounds([[90, 180], [-90, -180]]);
+    const wantedZoom = map.getBoundsZoom(bounds, true);
+    const center = bounds.getCenter();
+    map.setView(center);
+    map.setZoom(wantedZoom);
+  }, [map]);
+  return null;
+};
+var _default = exports.default = LeafletReverseGeolocation;

package/map/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "GoogleMap", {
+  enumerable: true,
+  get: function () {
+    return _GoogleMap.default;
+  }
+});
+Object.defineProperty(exports, "GoogleReverseGeolocation", {
+  enumerable: true,
+  get: function () {
+    return _GoogleReverseGeolocation.default;
+  }
+});
+Object.defineProperty(exports, "LeafletMap", {
+  enumerable: true,
+  get: function () {
+    return _LeafletMap.default;
+  }
+});
+Object.defineProperty(exports, "LeafletReverseGeolocation", {
+  enumerable: true,
+  get: function () {
+    return _LeafletReverseGeolocation.default;
+  }
+});
+var _LeafletMap = _interopRequireDefault(require("./LeafletMap"));
+var _LeafletReverseGeolocation = _interopRequireDefault(require("./LeafletReverseGeolocation"));
+var _GoogleMap = _interopRequireDefault(require("./GoogleMap"));
+var _GoogleReverseGeolocation = _interopRequireDefault(require("./GoogleReverseGeolocation"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/map/subComponent/BasicLeafletMap.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _LeafletMapContainer = _interopRequireDefault(require("./LeafletMapContainer"));
+var _reactLeaflet = require("react-leaflet");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BasicLeafletMap = _ref => {
+  let {
+    height,
+    zoom,
+    scrollWheelZoom = false,
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_LeafletMapContainer.default, {
+    height: height,
+    center: [1, 1],
+    zoom: zoom,
+    scrollWheelZoom: scrollWheelZoom,
+    maxBounds: [[-90, -180], [90, 180]],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactLeaflet.TileLayer, {
+      attribution: "Map data \xA9 <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors",
+      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+      minZoom: 3,
+      maxZoom: 20,
+      noWrap: true,
+      bounds: [[-90, -180], [90, 180]]
+    }), children]
+  });
+};
+var _default = exports.default = BasicLeafletMap;

package/map/subComponent/GoogleMapContainer.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const GoogleMapContainer = _styledComponents.default.div`
+  height: ${_ref => {
+  let {
+    height
+  } = _ref;
+  return height;
+}}px;
+  border: 1px solid transparent;
+  border-radius: var(--border-radius);
+
+  &:focus {
+    border-color: var(--border-color);
+    box-shadow: var(--box-shadow);
+  }
+
+  .google-popup-content-wrapper {
+    position: absolute;
+    transform: translate(-50%, -100%);
+  }
+`;
+var _default = exports.default = GoogleMapContainer;