@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/link/__test__/LinkSpan.test.js

@@ -0,0 +1,52 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import LinkSpan from '../LinkSpan';
+import 'jest-styled-components';
+
+describe('Test LinkSpan Component', () => {
+  test('render default component', () => {
+    render(<LinkSpan>Link Text</LinkSpan>);
+
+    const linkSpan = screen.getByText('Link Text');
+    expect(linkSpan).toBeInTheDocument();
+    expect(linkSpan).toHaveStyle({
+      fontSize: '9rem',
+      color: 'rgba(255, 255, 255, 0.5)',
+    });
+  });
+
+  test('hover', () => {
+    render(<LinkSpan>Link Text</LinkSpan>);
+
+    const linkSpan = screen.getByText('Link Text');
+    expect(linkSpan).toHaveStyleRule('border-bottom', '1px solid #3e5fff', {
+      modifier: '&:hover:after',
+    });
+  });
+
+  test('click', () => {
+    const mockfn = jest.fn();
+    render(<LinkSpan onClick={mockfn}>Link Text</LinkSpan>);
+
+    const linkSpan = screen.getByText('Link Text');
+    fireEvent.click(linkSpan);
+    expect(mockfn).toHaveBeenCalledTimes(1);
+  });
+
+  test('variant', () => {
+    render(
+      <LinkSpan fontSmall light>
+        Link Text
+      </LinkSpan>,
+    );
+
+    const linkSpan = screen.getByText('Link Text');
+    expect(linkSpan).toBeInTheDocument();
+    expect(linkSpan).toHaveStyle({
+      fontSize: '1rem',
+      color: '#fff',
+    });
+    expect(linkSpan).toHaveStyleRule('border-bottom', '1px solid #e6e6e6', {
+      modifier: '&:hover:after',
+    });
+  });
+});

package/src/link/index.js

@@ -0,0 +1 @@
+export { default as LinkSpan } from './LinkSpan';

package/src/map/GoogleMap.js

@@ -0,0 +1,489 @@
+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;