@cashub/ui 0.48.30 → 0.49.0-beta.0

package/src/map/subComponent/GoogleMapContainer.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+const GoogleMapContainer = styled.div`
+  height: ${({ height }) => 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/src/map/subComponent/GoogleMapPopup.js

@@ -0,0 +1,115 @@
+// 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({ maxWidth, offset } = {}) {
+        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/src/map/subComponent/GoogleMapWrapper.js

@@ -0,0 +1,27 @@
+import { cloneElement } from 'react';
+import { Wrapper, Status } from '@googlemaps/react-wrapper';
+
+const GoogleMapWrapper = ({ children, apiKey, onError, ...props }) => {
+  const render = (status) => {
+    switch (status) {
+      case Status.LOADING:
+        return <div></div>;
+      case Status.FAILURE:
+        onError(status);
+        return <div></div>;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <Wrapper apiKey={apiKey} render={render} style={{ position: 'relative' }}>
+      {cloneElement(children, {
+        ...props,
+        onError,
+      })}
+    </Wrapper>
+  );
+};
+
+export default GoogleMapWrapper;

package/src/map/subComponent/LeafletDrawControl.js

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

package/src/map/subComponent/LeafletMapContainer.js

@@ -0,0 +1,163 @@
+import styled from 'styled-components';
+import { MapContainer } from 'react-leaflet';
+
+const LeafletMapContainer = styled(MapContainer)`
+  width: 100%;
+  height: ${({ height }) => height}px;
+  border: 1px solid transparent;
+  border-radius: var(--border-radius);
+  z-index: 1;
+
+  &:focus {
+    border-color: var(--border-color);
+    box-shadow: var(--box-shadow);
+  }
+
+  .leaflet-control-container {
+    .leaflet-control-zoom {
+      box-shadow: var(--box-shadow);
+      border-radius: var(--border-radius);
+
+      a {
+        background: transparent;
+        border-bottom: 1px solid var(--border-color);
+        color: var(--font-on-background);
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        &.leaflet-disabled {
+          opacity: 0.5;
+        }
+      }
+    }
+
+    .leaflet-draw {
+      box-shadow: var(--box-shadow);
+      border-radius: var(--border-radius);
+
+      a {
+        background-color: var(--color-background1);
+      }
+
+      .leaflet-draw-draw-polyline {
+        background-position: -3px -3px;
+      }
+
+      .leaflet-draw-draw-polygon {
+        background-position: -32px -3px;
+      }
+
+      .leaflet-draw-draw-rectangle {
+        background-position: -63px -3px;
+      }
+
+      .leaflet-draw-draw-circle {
+        background-position: -93px -3px;
+      }
+
+      .leaflet-draw-draw-marker {
+        background-position: -123px -3px;
+      }
+
+      .leaflet-draw-draw-circlemarker {
+        background-position: -273px -3px;
+      }
+
+      .leaflet-draw-edit-edit {
+        background-position: -213px -3px;
+      }
+
+      .leaflet-draw-edit-remove {
+        background-position: -243px -3px;
+      }
+    }
+
+    .leaflet-left .leaflet-control {
+      margin-left: var(--spacing-s);
+    }
+
+    .leaflet-right .leaflet-control {
+      margin-right: var(--spacing-s);
+    }
+
+    .leaflet-top .leaflet-control {
+      margin-top: var(--spacing-s);
+    }
+
+    .leaflet-control {
+      font-weight: bold;
+      background: var(--color-background1);
+
+      &.leaflet-control-attribution {
+        background: var(--color-white);
+        color: var(--color-dark);
+        margin: 0;
+      }
+    }
+  }
+
+  .leaflet-edit-move {
+    border-radius: 50px;
+    border-color: var(--border-color);
+  }
+
+  .leaflet-edit-resize {
+    border-radius: 50px;
+    border-color: var(--border-color);
+  }
+
+  &.leaflet-touch {
+    .leaflet-bar {
+      border: none;
+
+      a {
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+      }
+    }
+
+    .leaflet-left .leaflet-control {
+      margin-left: var(--spacing-s);
+    }
+
+    .leaflet-right .leaflet-control {
+      margin-right: var(--spacing-s);
+    }
+
+    .leaflet-top .leaflet-control {
+      margin-top: var(--spacing-s);
+    }
+  }
+
+  .marker-cluster {
+    background: var(--color-primary) a1;
+
+    div {
+      background: var(--color-primary);
+      color: var(--font-on-primary);
+    }
+  }
+
+  .leaflet-popup-content-wrapper {
+    background: transparent;
+    box-shadow: unset;
+  }
+
+  .leaflet-popup-content p {
+    margin: 0;
+    margin-bottom: var(--spacing-s);
+  }
+
+  .leaflet-popup-tip {
+    display: none;
+  }
+
+  .sr-only {
+    display: none;
+  }
+`;
+
+export default LeafletMapContainer;

package/src/map/subComponent/MapSearchBoxControl.js

@@ -0,0 +1,43 @@
+import { useRef, useEffect } from 'react';
+import L from 'leaflet';
+import { useMap } from 'react-leaflet';
+import Searchbox from '../../form/Searchbox';
+
+const MapSearchBoxControl = ({ changeLatlng, onSearch, onError }) => {
+  const map = useMap();
+  const barRef = useRef(null);
+
+  const handleError = (errorCode) => {
+    if (onError) {
+      onError(errorCode);
+    }
+  };
+
+  const handleSearch = async (address) => {
+    try {
+      const latlng = await onSearch(address);
+      if (latlng) {
+        map.flyTo(latlng, 15);
+        changeLatlng(latlng);
+      } else {
+        handleError('NO_RESULT');
+      }
+    } catch (error) {
+      handleError(error.message);
+    }
+  };
+
+  useEffect(() => {
+    L.DomEvent.disableClickPropagation(barRef.current);
+  }, []);
+
+  return (
+    <div className='leaflet-top leaflet-right' ref={barRef}>
+      <div className='leaflet-control leaflet-bar'>
+        <Searchbox onSearch={handleSearch} autoFocus />
+      </div>
+    </div>
+  );
+};
+
+export default MapSearchBoxControl;

package/src/modal/StateModal.js

@@ -0,0 +1,182 @@
+import { useState, useRef } from 'react';
+import ReactDOM, { unmountComponentAtNode } from 'react-dom';
+import styled from 'styled-components';
+import uniqueId from 'lodash.uniqueid';
+import {
+  BsCheckCircle,
+  BsExclamationTriangle,
+  BsExclamationCircle,
+} from 'react-icons/bs';
+import { FaRegTimesCircle } from 'react-icons/fa';
+import { appendElementTo } from '@cashub/utils';
+import ButtonGroup from '../button/ButtonGroup';
+import Button from '../button/Button';
+import ModalBackdrop from '../backdrop/ModalBackdrop';
+
+const StateModal = ({ onClose, ...props }) => {
+  const rootElement = appendElementTo('StateModalContainer');
+  const Container = document.createElement('div');
+
+  rootElement.appendChild(Container);
+
+  const handleClose = () => {
+    // unmount component and clear event handler and state before remove container
+    unmountComponentAtNode(Container);
+    Container.remove();
+
+    if (onClose) onClose();
+  };
+
+  ReactDOM.render(<ModalContent {...props} onClose={handleClose} />, Container);
+};
+
+const ModalContent = ({
+  type,
+  title,
+  text,
+  buttons,
+  confirmButtonText,
+  cancelButtonText,
+  showConfirmButton = true,
+  showCancelButton,
+  onClose,
+  onConfirm,
+  onCancel,
+  allowDismiss = true,
+  cancelButtonType = 'danger',
+  confirmButtonType = 'success',
+}) => {
+  const refWrapper = useRef(null);
+  const [id] = useState(uniqueId('SD-'));
+
+  let Icon = BsCheckCircle;
+  if (type === 'error') Icon = FaRegTimesCircle;
+  if (type === 'danger') Icon = BsExclamationTriangle;
+  if (type === 'warning') Icon = BsExclamationCircle;
+
+  const getButtonTypeProps = (buttonType) => ({
+    ...(buttonType === 'danger' && { danger: true }),
+    ...(buttonType === 'warning' && { warning: true }),
+    ...(buttonType === 'success' && { success: true }),
+  });
+
+  const handleDismiss = (event) => {
+    if (event.target === refWrapper.current && allowDismiss === true) {
+      onClose();
+    }
+  };
+
+  const modalButtons =
+    buttons ||
+    [
+      showCancelButton === true && {
+        text: cancelButtonText || 'Cancel',
+        type: cancelButtonType,
+        onClick: onCancel,
+      },
+      showConfirmButton === true && {
+        text: confirmButtonText || 'Confirm',
+        type: confirmButtonType,
+        onClick: onConfirm,
+      },
+    ].filter(Boolean);
+
+  const handleButtonClick = (button) => {
+    if (button.onClick) button.onClick();
+    if (button.closeOnClick !== false) onClose();
+  };
+
+  return (
+    <Wrapper
+      ref={refWrapper}
+      onClick={handleDismiss}
+      role='dialog'
+      aria-labelledby={`${id}-Title`}
+    >
+      <Container>
+        <Body type={type}>
+          <Icon role='img' />
+          <Title>{title}</Title>
+          <Message>{text}</Message>
+        </Body>
+
+        {modalButtons.length > 0 && (
+          <ButtonGroup alignRight>
+            {modalButtons.map(
+              (
+                {
+                  text: buttonText,
+                  children,
+                  type: buttonType,
+                  onClick,
+                  closeOnClick,
+                  ...buttonProps
+                },
+                index,
+              ) => (
+                <Button
+                  key={`${id}-Button-${index}`}
+                  {...getButtonTypeProps(buttonType)}
+                  {...buttonProps}
+                  onClick={() => handleButtonClick({ onClick, closeOnClick })}
+                >
+                  {children || buttonText}
+                </Button>
+              ),
+            )}
+          </ButtonGroup>
+        )}
+      </Container>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled(ModalBackdrop)`
+  z-index: 90;
+`;
+
+const Container = styled.div`
+  width: 500px;
+  max-width: 90%;
+  background: var(--color-background2);
+  box-shadow: var(--box-shadow);
+  padding: var(--spacing);
+  border-radius: var(--border-radius);
+  color: var(--font-on-background);
+  border: var(--border-width) solid var(--border-color);
+  text-align: center;
+`;
+
+const Body = styled.div`
+  margin-bottom: var(--spacing);
+
+  > svg {
+    font-size: 120px;
+    margin-bottom: var(--spacing);
+
+    ${({ type }) => {
+      switch (type) {
+        case 'error':
+        case 'danger':
+          return 'color: var(--color-danger);';
+        case 'warning':
+          return 'color: var(--color-warning);';
+        default:
+          return 'color: var(--color-success);';
+      }
+    }}
+  }
+`;
+
+const Title = styled.h2`
+  font-size: var(--font-body1);
+  font-weight: var(--font-bold);
+  margin-bottom: var(--spacing-s);
+`;
+
+const Message = styled.p`
+  font-size: var(--font-body1);
+  white-space: pre-line;
+`;
+
+export default StateModal;