@cashub/ui-elv 1.0.2 → 1.0.4

package/esm/map/LeafletMap.js

@@ -0,0 +1,224 @@
+import { useCallback, useEffect, useState, useRef } from 'react';
+import L from 'leaflet';
+import { Marker, Popup, useMapEvents, FeatureGroup, Circle } from 'react-leaflet';
+import MarkerClusterGroup from 'react-leaflet-markercluster';
+import 'leaflet/dist/leaflet.css';
+import 'react-leaflet-markercluster/dist/styles.min.css';
+import BasicLeafletMap from './subComponent/BasicLeafletMap';
+import LeafletDrawControl from './subComponent/LeafletDrawControl';
+import PrimaryMapIcon from '../assets/icons/map_icon1.png';
+import MapIcon from '../assets/icons/map_icon4.png';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LeafletMap = _ref => {
+  let {
+    height = 512,
+    zoom = 10,
+    data = {
+      defaultPosition: null,
+      position: null,
+      locations: []
+    },
+    geoFence = false,
+    geoFenceOptions = {},
+    onError,
+    customPopup,
+    checkPrimaryLocation
+  } = _ref;
+  const [hasError, setHasError] = useState(true);
+  const [validLocations, setValidLocations] = useState([]);
+  const [validBound, setValidBound] = useState([]);
+  const [markers, setMarkers] = useState([]);
+  const drawControlRef = useRef();
+  const handleError = useCallback(errorCode => {
+    if (onError) {
+      onError(errorCode);
+    }
+  }, [onError]);
+  const handleMountedDrawControl = useCallback(control => {
+    drawControlRef.current = control;
+    if (geoFenceOptions.editable) {
+      drawControlRef.current.enableEdit();
+    }
+  }, [geoFenceOptions.editable]);
+  const handleEditResizeDraw = 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 = useCallback(event => {
+    const {
+      eventHandlers
+    } = geoFenceOptions;
+    if (eventHandlers.drag) {
+      eventHandlers.drag(event.layer.getLatLng());
+    }
+  }, [geoFenceOptions]);
+  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__*/_jsx(Popup, {
+          maxWidth: 400,
+          closeButton: false,
+          children: customPopup(location)
+        });
+      }
+      let Icon = L.icon({
+        iconUrl: MapIcon,
+        iconSize: [40, 50]
+      });
+      if (checkPrimaryLocation && checkPrimaryLocation(location)) {
+        Icon = L.icon({
+          iconUrl: PrimaryMapIcon,
+          iconSize: [40, 50]
+        });
+      }
+      markers.push(/*#__PURE__*/_jsx(Marker, {
+        position: [latitude, longitude],
+        icon: Icon,
+        children: popupContent
+      }, index));
+    });
+
+    // pass all checking
+    setHasError(false);
+    setValidLocations(arrLatLngs);
+    setValidBound(bounds);
+    setMarkers(markers);
+  }, [data, handleError, customPopup, checkPrimaryLocation]);
+  useEffect(() => {
+    if (drawControlRef.current && geoFenceOptions.editable) {
+      drawControlRef.current.enableEdit();
+    }
+  }, [geoFenceOptions.editable]);
+  if (!hasError) {
+    return /*#__PURE__*/_jsxs(BasicLeafletMap, {
+      height: height,
+      zoom: zoom,
+      children: [/*#__PURE__*/_jsx(MapInteractor, {
+        zoom: zoom,
+        locations: validLocations,
+        bounds: validBound,
+        markers: markers,
+        defaultPosition: data.defaultPosition,
+        position: data.position
+      }), markers.length > 0 && /*#__PURE__*/_jsx(MarkerClusterGroup, {
+        maxClusterRadius: 120,
+        iconCreateFunction: cluster => {
+          return L.divIcon({
+            html: `<div><span>${cluster.getChildCount()}</span></div>`,
+            className: 'marker-cluster',
+            iconSize: L.point(40, 40)
+          });
+        },
+        children: markers
+      }), geoFence && /*#__PURE__*/_jsxs(FeatureGroup, {
+        children: [/*#__PURE__*/_jsx(LeafletDrawControl, {
+          draw: false,
+          edit: {
+            edit: false,
+            remove: false
+          },
+          onMounted: handleMountedDrawControl,
+          onEditResize: handleEditResizeDraw,
+          onEditMove: handleEditMoveDraw
+        }), /*#__PURE__*/_jsx(Circle, {
+          center: [geoFenceOptions.latitude, geoFenceOptions.longitude],
+          radius: geoFenceOptions.radius,
+          pathOptions: {
+            stroke: false,
+            fillColor: 'var(--color-primary)',
+            fillOpacity: 0.5
+          }
+        })]
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx("div", {});
+};
+const MapInteractor = _ref2 => {
+  let {
+    zoom,
+    locations,
+    bounds,
+    markers,
+    defaultPosition,
+    position
+  } = _ref2;
+  const map = useMapEvents({
+    click: event => {
+      event.originalEvent.stopPropagation();
+    },
+    focus: () => {
+      map.scrollWheelZoom.enable();
+    },
+    blur: () => {
+      map.scrollWheelZoom.disable();
+    }
+  });
+  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;
+};
+export default LeafletMap;

package/esm/map/LeafletReverseGeolocation.js

@@ -0,0 +1,94 @@
+import { useState, useMemo, useEffect } from 'react';
+import L from 'leaflet';
+import { Marker, useMapEvents } from 'react-leaflet';
+import BasicLeafletMap from './subComponent/BasicLeafletMap';
+import MapSearchBoxControl from './subComponent/MapSearchBoxControl';
+import MapIcon from '../assets/icons/map_icon4.png';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const LeafletReverseGeolocation = _ref => {
+  let {
+    children,
+    defaultLatlng,
+    changeLatlng,
+    onChoose,
+    onSearch,
+    onError
+  } = _ref;
+  const [markerLatLng, setMarkerLatLng] = useState(defaultLatlng);
+  const Icon = useMemo(() => {
+    return L.icon({
+      iconUrl: MapIcon,
+      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__*/_jsxs(BasicLeafletMap, {
+    height: 500,
+    zoom: 10,
+    scrollWheelZoom: true,
+    children: [markerLatLng.lat && markerLatLng.lng && /*#__PURE__*/_jsx(Marker, {
+      position: [markerLatLng.lat, markerLatLng.lng],
+      icon: Icon
+    }), /*#__PURE__*/_jsx(MapInteractor, {
+      changeLatlng: handleChangeLatlng
+    }), /*#__PURE__*/_jsx(MapSearchBoxControl, {
+      changeLatlng: handleChangeLatlng,
+      onSearch: onSearch,
+      onError: onError
+    })]
+  });
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children(Map, confirmChooseLocation)
+  });
+};
+const MapInteractor = _ref2 => {
+  let {
+    changeLatlng
+  } = _ref2;
+  const map = useMapEvents({
+    click: event => {
+      const {
+        lat,
+        lng
+      } = event.latlng;
+      changeLatlng({
+        lat: lat.toString(),
+        lng: lng.toString()
+      });
+    }
+  });
+  useEffect(() => {
+    const bounds = L.latLngBounds([[90, 180], [-90, -180]]);
+    const wantedZoom = map.getBoundsZoom(bounds, true);
+    const center = bounds.getCenter();
+    map.setView(center);
+    map.setZoom(wantedZoom);
+  }, [map]);
+  return null;
+};
+export default LeafletReverseGeolocation;

package/esm/map/index.js

@@ -0,0 +1,4 @@
+export { default as LeafletMap } from './LeafletMap';
+export { default as LeafletReverseGeolocation } from './LeafletReverseGeolocation';
+export { default as GoogleMap } from './GoogleMap';
+export { default as GoogleReverseGeolocation } from './GoogleReverseGeolocation';

package/esm/map/subComponent/BasicLeafletMap.js

@@ -0,0 +1,27 @@
+import LeafletMapContainer from './LeafletMapContainer';
+import { TileLayer } from 'react-leaflet';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BasicLeafletMap = _ref => {
+  let {
+    height,
+    zoom,
+    scrollWheelZoom = false,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsxs(LeafletMapContainer, {
+    height: height,
+    center: [1, 1],
+    zoom: zoom,
+    scrollWheelZoom: scrollWheelZoom,
+    maxBounds: [[-90, -180], [90, 180]],
+    children: [/*#__PURE__*/_jsx(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]
+  });
+};
+export default BasicLeafletMap;

package/esm/map/subComponent/GoogleMapContainer.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+const GoogleMapContainer = styled.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%);
+  }
+`;
+export default GoogleMapContainer;

package/esm/map/subComponent/GoogleMapPopup.js

@@ -0,0 +1,103 @@
+// custom popup
+// https://developers.google.com/maps/documentation/javascript/examples/overlay-popup
+class GoogleMapPopup {
+  constructor(options) {
+    // wrap class to prevent cannot reference maps during runtime
+    // because google map library will load after render map only
+    class MapPopup extends window.google.maps.OverlayView {
+      position;
+      containerDiv;
+      offset = 16;
+      justRendered = false;
+      constructor() {
+        let {
+          maxWidth,
+          offset
+        } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        super();
+
+        // This zero-height div is positioned at the bottom of the tip.
+        this.containerDiv = document.createElement('div');
+        this.containerDiv.classList.add('google-popup-content-wrapper');
+        if (maxWidth) {
+          this.containerDiv.style.maxWidth = `${maxWidth}px`;
+        }
+        if (offset) {
+          this.offset = offset;
+        }
+
+        // Optionally stop clicks, etc., from bubbling up to the map.
+        MapPopup.preventMapHitsAndGesturesFrom(this.containerDiv);
+      }
+      /** Called when the popup is added to the map. */
+      onAdd() {
+        this.getPanes().floatPane.appendChild(this.containerDiv);
+        this.justRendered = true;
+      }
+      /** Called when the popup is removed from the map. */
+      onRemove() {
+        if (this.containerDiv.parentElement) {
+          this.containerDiv.parentElement.removeChild(this.containerDiv);
+          this.justRendered = false;
+        }
+      }
+      /** Called each frame when the popup needs to draw itself. */
+      draw() {
+        if (this.position) {
+          const divPosition = this.getProjection().fromLatLngToDivPixel(this.position);
+
+          // On the first render, if we go beyond the map, pan the map
+          if (this.justRendered) {
+            this.fitMap();
+            this.justRendered = false;
+          }
+          this.containerDiv.style.left = `${divPosition.x}px`;
+          this.containerDiv.style.top = `${divPosition.y - this.offset}px`;
+        }
+      }
+      setPosition(position) {
+        this.position = position;
+      }
+      setContent(content) {
+        if (!content) return;
+        if (typeof content === 'object') {
+          this.containerDiv.replaceChildren(content);
+        } else {
+          this.containerDiv.innerHTML = content;
+        }
+      }
+      fitMap() {
+        const projection = this.getProjection();
+        const {
+          offsetWidth,
+          offsetHeight
+        } = this.containerDiv;
+        const halfWidth = offsetWidth / 2;
+        const {
+          offsetTop,
+          offsetLeft
+        } = this.containerDiv;
+
+        // Calculate the coordinates of the four corners of the container
+        // because container use transform for position(-50%, -100%), so we need to subtract them
+        const topLeft = new window.google.maps.Point(offsetLeft - halfWidth, offsetTop - offsetHeight);
+        const topRight = new window.google.maps.Point(offsetLeft + offsetWidth - halfWidth, offsetTop - offsetHeight);
+        const bottomLeft = new window.google.maps.Point(offsetLeft - halfWidth, offsetTop + offsetHeight - offsetHeight);
+        const bottomRight = new window.google.maps.Point(offsetLeft + offsetWidth - halfWidth, offsetTop + offsetHeight - offsetHeight);
+        const northWest = projection.fromDivPixelToLatLng(topLeft);
+        const northEast = projection.fromDivPixelToLatLng(topRight);
+        const southWest = projection.fromDivPixelToLatLng(bottomLeft);
+        const southEast = projection.fromDivPixelToLatLng(bottomRight);
+        const popupBound = new window.google.maps.LatLngBounds();
+        popupBound.extend(northWest);
+        popupBound.extend(northEast);
+        popupBound.extend(southWest);
+        popupBound.extend(southEast);
+        popupBound.extend(this.position);
+        this.map.fitBounds(popupBound);
+      }
+    }
+    return new MapPopup(options);
+  }
+}
+export default GoogleMapPopup;

package/esm/map/subComponent/GoogleMapWrapper.js

@@ -0,0 +1,34 @@
+import { cloneElement } from 'react';
+import { Wrapper, Status } from '@googlemaps/react-wrapper';
+import { jsx as _jsx } from "react/jsx-runtime";
+const GoogleMapWrapper = _ref => {
+  let {
+    children,
+    apiKey,
+    onError,
+    ...props
+  } = _ref;
+  const render = status => {
+    switch (status) {
+      case Status.LOADING:
+        return /*#__PURE__*/_jsx("div", {});
+      case Status.FAILURE:
+        onError(status);
+        return /*#__PURE__*/_jsx("div", {});
+      default:
+        break;
+    }
+  };
+  return /*#__PURE__*/_jsx(Wrapper, {
+    apiKey: apiKey,
+    render: render,
+    style: {
+      position: 'relative'
+    },
+    children: /*#__PURE__*/cloneElement(children, {
+      ...props,
+      onError
+    })
+  });
+};
+export default GoogleMapWrapper;

package/esm/map/subComponent/LeafletDrawControl.js

@@ -0,0 +1,116 @@
+import { useEffect, useRef, useCallback } from 'react';
+import L, { Control } from 'leaflet';
+import Draw from 'leaflet-draw'; // eslint-disable-line
+import 'leaflet-draw/dist/leaflet.draw.css';
+import { useLeafletContext } from '@react-leaflet/core';
+import isEqual from 'fast-deep-equal';
+const eventHandlers = {
+  onEdited: 'draw:edited',
+  onDrawStart: 'draw:drawstart',
+  onDrawStop: 'draw:drawstop',
+  onDrawVertex: 'draw:drawvertex',
+  onEditStart: 'draw:editstart',
+  onEditMove: 'draw:editmove',
+  onEditResize: 'draw:editresize',
+  onEditVertex: 'draw:editvertex',
+  onEditStop: 'draw:editstop',
+  onDeleted: 'draw:deleted',
+  onDeleteStart: 'draw:deletestart',
+  onDeleteStop: 'draw:deletestop'
+};
+L.drawLocal.edit.handlers.edit.tooltip = {
+  text: 'Drag handles or markers to edit features.',
+  subtext: null
+};
+const LeafletDrawControl = props => {
+  const {
+    map,
+    layerContainer
+  } = useLeafletContext();
+  const drawRef = useRef();
+  const propsRef = useRef(props);
+  const onDrawCreate = useCallback(event => {
+    const container = layerContainer;
+    container.addLayer(event.layer);
+  }, [layerContainer]);
+  const enableEdit = useCallback(() => {
+    // programatically enable edit mode
+    // https://github.com/Leaflet/Leaflet.draw/issues/129
+    const editHandler = drawRef.current._toolbars.edit.getModeHandlers()[0].handler;
+    // this is hacky but needed otherwise enabling the edit mode will fail
+    // when the code attempts to fire map events for edit start etc
+    editHandler._map = map;
+    editHandler.enable();
+  }, [map]);
+  useEffect(() => {
+    // if rendered and all props no change prevent render again
+    if (drawRef.current && props.draw !== undefined && isEqual(props.draw, propsRef.current.draw) && isEqual(props.edit, propsRef.current.edit) && props.position === propsRef.current.position) {
+      return;
+    }
+
+    // add event listener
+    for (const key in eventHandlers) {
+      map.on(eventHandlers[key], evt => {
+        const handlers = Object.keys(eventHandlers).filter(handler => eventHandlers[handler] === evt.type);
+        if (handlers.length === 1) {
+          const [handler] = handlers;
+          props[handler] && props[handler](evt);
+        }
+      });
+    }
+
+    // add create draw event listener
+    map.on(L.Draw.Event.CREATED, onDrawCreate);
+
+    // create draw element and render on map
+    drawRef.current = createDrawElement(props, layerContainer);
+    map.addControl(drawRef.current);
+    drawRef.current.enableEdit = enableEdit;
+    if (props.onMounted) {
+      props.onMounted(drawRef.current);
+    }
+    return () => {
+      drawRef.current.remove(map);
+      drawRef.current = null;
+      map.off(L.Draw.Event.CREATED, onDrawCreate);
+      for (const key in eventHandlers) {
+        if (props[key]) {
+          map.off(eventHandlers[key], props[key]);
+        }
+      }
+    };
+  }, [props, map, layerContainer, onDrawCreate, enableEdit]);
+  return null;
+};
+const createDrawElement = (props, layerContainer) => {
+  const {
+    draw,
+    edit,
+    position
+  } = props;
+  const options = {
+    edit: {
+      featureGroup: layerContainer
+    }
+  };
+  if (draw !== undefined) {
+    if (typeof draw === 'object') {
+      options.draw = {
+        ...draw
+      };
+    } else {
+      options.draw = draw;
+    }
+  }
+  if (edit) {
+    options.edit = {
+      ...options.edit,
+      ...edit
+    };
+  }
+  if (position) {
+    options.position = position;
+  }
+  return new Control.Draw(options);
+};
+export default LeafletDrawControl;