@cashub/ui-elv 1.0.0

package/map/subComponent/GoogleMapPopup.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// 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);
+  }
+}
+var _default = exports.default = GoogleMapPopup;

package/map/subComponent/GoogleMapWrapper.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactWrapper = require("@googlemaps/react-wrapper");
+var _jsxRuntime = require("react/jsx-runtime");
+const GoogleMapWrapper = _ref => {
+  let {
+    children,
+    apiKey,
+    onError,
+    ...props
+  } = _ref;
+  const render = status => {
+    switch (status) {
+      case _reactWrapper.Status.LOADING:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {});
+      case _reactWrapper.Status.FAILURE:
+        onError(status);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {});
+      default:
+        break;
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactWrapper.Wrapper, {
+    apiKey: apiKey,
+    render: render,
+    style: {
+      position: 'relative'
+    },
+    children: /*#__PURE__*/(0, _react.cloneElement)(children, {
+      ...props,
+      onError
+    })
+  });
+};
+var _default = exports.default = GoogleMapWrapper;

package/map/subComponent/LeafletDrawControl.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _leaflet = _interopRequireWildcard(require("leaflet"));
+var _leafletDraw = _interopRequireDefault(require("leaflet-draw"));
+require("leaflet-draw/dist/leaflet.draw.css");
+var _core = require("@react-leaflet/core");
+var _fastDeepEqual = _interopRequireDefault(require("fast-deep-equal"));
+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; }
+// eslint-disable-line
+
+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'
+};
+_leaflet.default.drawLocal.edit.handlers.edit.tooltip = {
+  text: 'Drag handles or markers to edit features.',
+  subtext: null
+};
+const LeafletDrawControl = props => {
+  const {
+    map,
+    layerContainer
+  } = (0, _core.useLeafletContext)();
+  const drawRef = (0, _react.useRef)();
+  const propsRef = (0, _react.useRef)(props);
+  const onDrawCreate = (0, _react.useCallback)(event => {
+    const container = layerContainer;
+    container.addLayer(event.layer);
+  }, [layerContainer]);
+  const enableEdit = (0, _react.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]);
+  (0, _react.useEffect)(() => {
+    // if rendered and all props no change prevent render again
+    if (drawRef.current && props.draw !== undefined && (0, _fastDeepEqual.default)(props.draw, propsRef.current.draw) && (0, _fastDeepEqual.default)(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(_leaflet.default.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(_leaflet.default.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 _leaflet.Control.Draw(options);
+};
+var _default = exports.default = LeafletDrawControl;

package/map/subComponent/LeafletMapContainer.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactLeaflet = require("react-leaflet");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const LeafletMapContainer = (0, _styledComponents.default)(_reactLeaflet.MapContainer)`
+  width: 100%;
+  height: ${_ref => {
+  let {
+    height
+  } = _ref;
+  return 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;
+  }
+`;
+var _default = exports.default = LeafletMapContainer;

package/map/subComponent/MapSearchBoxControl.js

@@ -0,0 +1,54 @@
+"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 _Searchbox = _interopRequireDefault(require("../../form/Searchbox"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MapSearchBoxControl = _ref => {
+  let {
+    changeLatlng,
+    onSearch,
+    onError
+  } = _ref;
+  const map = (0, _reactLeaflet.useMap)();
+  const barRef = (0, _react.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);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    _leaflet.default.DomEvent.disableClickPropagation(barRef.current);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "leaflet-top leaflet-right",
+    ref: barRef,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "leaflet-control leaflet-bar",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Searchbox.default, {
+        onSearch: handleSearch,
+        autoFocus: true
+      })
+    })
+  });
+};
+var _default = exports.default = MapSearchBoxControl;

package/modal/StateModal.js

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactDom = _interopRequireWildcard(require("react-dom"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _lodash = _interopRequireDefault(require("lodash.uniqueid"));
+var _bs = require("react-icons/bs");
+var _fa = require("react-icons/fa");
+var _utils = require("@cashub/utils");
+var _ButtonGroup = _interopRequireDefault(require("../button/ButtonGroup"));
+var _Button = _interopRequireDefault(require("../button/Button"));
+var _ModalBackdrop = _interopRequireDefault(require("../backdrop/ModalBackdrop"));
+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; }
+const StateModal = _ref => {
+  let {
+    onClose,
+    ...props
+  } = _ref;
+  const rootElement = (0, _utils.appendElementTo)('StateModalContainer');
+  const Container = document.createElement('div');
+  rootElement.appendChild(Container);
+  const handleClose = () => {
+    // unmount component and clear event handler and state before remove container
+    (0, _reactDom.unmountComponentAtNode)(Container);
+    Container.remove();
+    if (onClose) onClose();
+  };
+  _reactDom.default.render(/*#__PURE__*/(0, _jsxRuntime.jsx)(ModalContent, {
+    ...props,
+    onClose: handleClose
+  }), Container);
+};
+const ModalContent = _ref2 => {
+  let {
+    type,
+    title,
+    text,
+    buttons,
+    confirmButtonText,
+    cancelButtonText,
+    showConfirmButton = true,
+    showCancelButton,
+    onClose,
+    onConfirm,
+    onCancel,
+    allowDismiss = true,
+    cancelButtonType = 'danger',
+    confirmButtonType = 'success'
+  } = _ref2;
+  const refWrapper = (0, _react.useRef)(null);
+  const [id] = (0, _react.useState)((0, _lodash.default)('SD-'));
+  let Icon = _bs.BsCheckCircle;
+  if (type === 'error') Icon = _fa.FaRegTimesCircle;
+  if (type === 'danger') Icon = _bs.BsExclamationTriangle;
+  if (type === 'warning') Icon = _bs.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 /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    ref: refWrapper,
+    onClick: handleDismiss,
+    role: "dialog",
+    "aria-labelledby": `${id}-Title`,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Body, {
+        type: type,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          role: "img"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Message, {
+          children: text
+        })]
+      }), modalButtons.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroup.default, {
+        alignRight: true,
+        children: modalButtons.map((_ref3, index) => {
+          let {
+            text: buttonText,
+            children,
+            type: buttonType,
+            onClick,
+            closeOnClick,
+            ...buttonProps
+          } = _ref3;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            ...getButtonTypeProps(buttonType),
+            ...buttonProps,
+            onClick: () => handleButtonClick({
+              onClick,
+              closeOnClick
+            }),
+            children: children || buttonText
+          }, `${id}-Button-${index}`);
+        })
+      })]
+    })
+  });
+};
+const Wrapper = (0, _styledComponents.default)(_ModalBackdrop.default)`
+  z-index: 90;
+`;
+const Container = _styledComponents.default.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 = _styledComponents.default.div`
+  margin-bottom: var(--spacing);
+
+  > svg {
+    font-size: 120px;
+    margin-bottom: var(--spacing);
+
+    ${_ref4 => {
+  let {
+    type
+  } = _ref4;
+  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 = _styledComponents.default.h2`
+  font-size: var(--font-body1);
+  font-weight: var(--font-bold);
+  margin-bottom: var(--spacing-s);
+`;
+const Message = _styledComponents.default.p`
+  font-size: var(--font-body1);
+  white-space: pre-line;
+`;
+var _default = exports.default = StateModal;