@cashub/ui-elv 1.0.1 → 1.0.3

package/esm/map/subComponent/LeafletMapContainer.js

@@ -0,0 +1,166 @@
+import styled from 'styled-components';
+import { MapContainer } from 'react-leaflet';
+const LeafletMapContainer = styled(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;
+  }
+`;
+export default LeafletMapContainer;

package/esm/map/subComponent/MapSearchBoxControl.js

@@ -0,0 +1,47 @@
+import { useRef, useEffect } from 'react';
+import L from 'leaflet';
+import { useMap } from 'react-leaflet';
+import Searchbox from '../../form/Searchbox';
+import { jsx as _jsx } from "react/jsx-runtime";
+const MapSearchBoxControl = _ref => {
+  let {
+    changeLatlng,
+    onSearch,
+    onError
+  } = _ref;
+  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 /*#__PURE__*/_jsx("div", {
+    className: "leaflet-top leaflet-right",
+    ref: barRef,
+    children: /*#__PURE__*/_jsx("div", {
+      className: "leaflet-control leaflet-bar",
+      children: /*#__PURE__*/_jsx(Searchbox, {
+        onSearch: handleSearch,
+        autoFocus: true
+      })
+    })
+  });
+};
+export default MapSearchBoxControl;

package/esm/modal/StateModal.js

@@ -0,0 +1,169 @@
+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/index.esm';
+import { FaRegTimesCircle } from 'react-icons/fa/index.esm';
+import { appendElementTo } from '@cashub/utils';
+import ButtonGroup from '../button/ButtonGroup';
+import Button from '../button/Button';
+import ModalBackdrop from '../backdrop/ModalBackdrop';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StateModal = _ref => {
+  let {
+    onClose,
+    ...props
+  } = _ref;
+  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(/*#__PURE__*/_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 = 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 /*#__PURE__*/_jsx(Wrapper, {
+    ref: refWrapper,
+    onClick: handleDismiss,
+    role: "dialog",
+    "aria-labelledby": `${id}-Title`,
+    children: /*#__PURE__*/_jsxs(Container, {
+      children: [/*#__PURE__*/_jsxs(Body, {
+        type: type,
+        children: [/*#__PURE__*/_jsx(Icon, {
+          role: "img"
+        }), /*#__PURE__*/_jsx(Title, {
+          children: title
+        }), /*#__PURE__*/_jsx(Message, {
+          children: text
+        })]
+      }), modalButtons.length > 0 && /*#__PURE__*/_jsx(ButtonGroup, {
+        alignRight: true,
+        children: modalButtons.map((_ref3, index) => {
+          let {
+            text: buttonText,
+            children,
+            type: buttonType,
+            onClick,
+            closeOnClick,
+            ...buttonProps
+          } = _ref3;
+          return /*#__PURE__*/_jsx(Button, {
+            ...getButtonTypeProps(buttonType),
+            ...buttonProps,
+            onClick: () => handleButtonClick({
+              onClick,
+              closeOnClick
+            }),
+            children: children || buttonText
+          }, `${id}-Button-${index}`);
+        })
+      })]
+    })
+  });
+};
+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);
+
+    ${_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 = 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;

package/esm/modal/TitleModal.js

@@ -0,0 +1,241 @@
+import { useRef, useCallback, useState, useEffect, cloneElement, useMemo, forwardRef } from 'react';
+import ReactDOM, { unmountComponentAtNode } from 'react-dom';
+import styled from 'styled-components';
+import { MdClose } from 'react-icons/md/index.esm';
+import { useForkRef } from '@cashub/hooks';
+import { appendElementTo, isReactComponent } from '@cashub/utils';
+import media from '../styles/mixin/media';
+import scrollbar from '../styles/mixin/scrollbar';
+import Heading3 from '../heading/Heading3';
+import ModalBackdrop from '../backdrop/ModalBackdrop';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TitleModal = props => {
+  const rootElement = appendElementTo('TitleModalContainer');
+  const Container = document.createElement('div');
+  rootElement.appendChild(Container);
+  const handleClose = async function () {
+    let dismiss = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    if (props.onBeforeClose) {
+      // expect a promise
+      // resolve indicate want to close modal
+      // reject indicate do not close modal
+      try {
+        await props.onBeforeClose(dismiss);
+      } catch (error) {
+        return;
+      }
+    }
+
+    // unmount component and clear event handler and state before remove container
+    unmountComponentAtNode(Container);
+    Container.remove();
+    if (props.onClose) {
+      props.onClose(dismiss);
+    }
+  };
+  const methods = {
+    close: handleClose
+  };
+  ReactDOM.render(/*#__PURE__*/_jsx(ModalContent, {
+    ...props,
+    onClose: handleClose,
+    methods: methods
+  }), Container);
+};
+const ModalContent = _ref => {
+  let {
+    children,
+    onClose,
+    methods,
+    size
+  } = _ref;
+  const refWrapper = useRef(null);
+  const [clickTarget, setClickTarget] = useState(null);
+  const child = useMemo(() => {
+    return isReactComponent(children) ? /*#__PURE__*/cloneElement(children, methods) : children;
+  }, [children, methods]);
+  const handleDismiss = dismiss => {
+    if (clickTarget === refWrapper.current) {
+      onClose(dismiss);
+    }
+  };
+  return /*#__PURE__*/_jsx(Wrapper, {
+    ref: refWrapper,
+    onClick: () => {
+      handleDismiss(true);
+    },
+    onMouseDown: event => {
+      setClickTarget(event.target);
+    },
+    children: /*#__PURE__*/_jsx(Container, {
+      size: size,
+      onMouseDown: event => {
+        setClickTarget(event.target);
+      },
+      children: child
+    })
+  });
+};
+const ModalHeader = _ref2 => {
+  let {
+    handleClose,
+    children
+  } = _ref2;
+  return /*#__PURE__*/_jsxs(Header, {
+    children: [/*#__PURE__*/_jsx(MdClose, {
+      onClick: handleClose
+    }), /*#__PURE__*/_jsx(Heading3, {
+      children: children
+    })]
+  });
+};
+const ModalBody = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref3;
+  const ownRef = useRef(null);
+  const bodyRef = useForkRef(ownRef, ref);
+  const recalculateHeight = useCallback(() => {
+    // body element not render yet
+    if (!ownRef.current) return;
+    const ModalBodyElement = ownRef.current;
+    const ModalHeaderElement = ModalBodyElement.previousSibling;
+    const ModalFooterElement = ModalBodyElement.nextSibling;
+    let needSubtractHeight = 0;
+    if (ModalHeaderElement) {
+      needSubtractHeight += ModalHeaderElement.offsetHeight;
+    }
+    if (ModalFooterElement) {
+      needSubtractHeight += ModalFooterElement.offsetHeight;
+    }
+    ModalBodyElement.style.maxHeight = `calc(90vh - ${needSubtractHeight}px)`;
+  }, []);
+  useEffect(() => {
+    recalculateHeight();
+    window.addEventListener('resize', recalculateHeight);
+    return () => window.removeEventListener('resize', recalculateHeight);
+  }, [recalculateHeight]);
+  return /*#__PURE__*/_jsx(Body, {
+    ref: bodyRef,
+    ...props,
+    children: children
+  });
+});
+ModalBody.displayName = 'ModalBody';
+const ModalFooter = _ref4 => {
+  let {
+    children
+  } = _ref4;
+  return /*#__PURE__*/_jsx(Footer, {
+    children: children
+  });
+};
+const Wrapper = styled(ModalBackdrop)`
+  z-index: 80;
+`;
+const Container = styled.div`
+  position: relative;
+  border-radius: var(--border-radius);
+  background: var(--color-background2);
+  box-shadow: var(--box-shadow);
+  border: var(--border-width) solid var(--border-color);
+  width: 100%;
+
+  ${_ref5 => {
+  let {
+    size
+  } = _ref5;
+  switch (size) {
+    case 'extraLarge':
+      return 'max-width: 90%;';
+    case 'large':
+      return 'max-width: 75%;';
+    case 'normal':
+      return 'max-width: 50%;';
+    case 'small':
+      return 'max-width: 30%;';
+    default:
+      break;
+  }
+}}
+
+  ${media.tablet`
+    ${_ref6 => {
+  let {
+    size
+  } = _ref6;
+  switch (size) {
+    case 'extraLarge':
+    case 'large':
+      return 'max-width: 90%;';
+    case 'normal':
+      return 'max-width: 75%;';
+    case 'small':
+      return 'max-width: 50%;';
+    default:
+      break;
+  }
+}}
+  `}
+
+  ${media.mobile`
+    ${_ref7 => {
+  let {
+    size
+  } = _ref7;
+  switch (size) {
+    case 'normal':
+      return 'max-width: 90%;';
+    case 'small':
+      return 'max-width: 70%;';
+    default:
+      break;
+  }
+}}
+  `}
+`;
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-s) 56px var(--spacing-s) var(--spacing-s);
+  border-bottom: var(--border-width) solid var(--border-color);
+  min-height: 64px;
+  color: var(--font-on-background);
+
+  > svg {
+    position: absolute;
+    top: 24px;
+    right: calc(12px + var(--spacing));
+    color: var(--font-on-mute);
+    font-size: var(--font-body1);
+    cursor: pointer;
+  }
+`;
+const Body = styled.div`
+  padding: var(--spacing);
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  ${scrollbar}
+
+  ${_ref8 => {
+  let {
+    noPaddingBottom
+  } = _ref8;
+  return noPaddingBottom && 'padding-bottom: 0;';
+}}
+`;
+const Footer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 var(--spacing);
+  border-top: var(--border-width) solid var(--border-color);
+  height: 64px;
+  line-height: 64px;
+`;
+export default Object.assign(TitleModal, {
+  Header: ModalHeader,
+  Body: ModalBody,
+  Footer: ModalFooter
+});

package/esm/modal/index.js

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