@blockstack/ui/dist/modal/index.esm.js

Blockstack UI components built using React and styled-components with styled-system.

import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../_virtual/_rollupPluginBabelHelpers.js';
import React__default from 'react';
import { Box } from '../box/index.esm.js';
import { Flex } from '../flex/index.esm.js';
import useOnClickOutside from 'use-onclickoutside';

var ModalContext = /*#__PURE__*/React__default.createContext({
  isOpen: false
});
var useModalState = function useModalState() {
  return React__default.useContext(ModalContext);
};
var Header = /*#__PURE__*/React__default.memo(function (_ref) {
  var component = _ref.component;
  return component ? React__default.createElement(Box, {
    borderTopRightRadius: "6px",
    borderTopLeftRadius: "6px"
  }, component) : null;
});
var Footer = /*#__PURE__*/React__default.memo(function (_ref2) {
  var component = _ref2.component;
  return component ? React__default.createElement(Box, {
    borderBottomRightRadius: "6px",
    borderBottomLeftRadius: "6px"
  }, component) : null;
});

var ModalUnderlay = function ModalUnderlay(_ref3) {
  var isOpen = _ref3.isOpen,
      noAnimation = _ref3.noAnimation;
  return React__default.createElement(Box, {
    position: "fixed",
    size: "100%",
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    bg: "rgba(0,0,0," + (isOpen ? '0.48' : '0') + ")",
    transition: noAnimation ? 'unset' : 'all 0.15s',
    zIndex: 99999,
    style: {
      userSelect: isOpen ? 'unset' : 'none',
      pointerEvents: isOpen ? 'unset' : 'none',
      willChange: 'background'
    }
  });
};

var ModalWrapper = function ModalWrapper(_ref4) {
  var isOpen = _ref4.isOpen,
      rest = _objectWithoutPropertiesLoose(_ref4, ["isOpen"]);

  return React__default.createElement(Flex, Object.assign({
    zIndex: 999999,
    position: "fixed",
    bottom: [0, 'unset'],
    width: "100%",
    top: 0,
    left: 0,
    height: "100%",
    maxHeight: ['100vh', 'unset'],
    alignItems: "center",
    justifyContent: ['flex-end', 'center'],
    flexDirection: "column",
    opacity: isOpen ? 1 : 0,
    style: {
      userSelect: isOpen ? 'unset' : 'none',
      pointerEvents: isOpen ? 'unset' : 'none'
    }
  }, rest));
};

var ModalCardContainer = /*#__PURE__*/React__default.forwardRef(function (_ref5, ref) {
  var noAnimation = _ref5.noAnimation,
      isOpen = _ref5.isOpen,
      rest = _objectWithoutPropertiesLoose(_ref5, ["noAnimation", "isOpen"]);

  return React__default.createElement(Flex, Object.assign({
    flexDirection: "column",
    position: "relative",
    bg: "white",
    mx: "auto",
    minWidth: ['100%', '396px'],
    maxWidth: ['100%', '396px'],
    maxHeight: ['100%', 'calc(100% - 48px)'],
    borderRadius: ['unset', '6px'],
    boxShadow: "high",
    transform: noAnimation ? 'translateY(0px)' : isOpen ? 'translateY(0px)' : 'translateY(15px)',
    transition: noAnimation ? 'unset' : 'all 0.2s ease-in-out',
    style: {
      willChange: 'transform'
    },
    ref: ref
  }, rest));
});
var Modal = /*#__PURE__*/React__default.memo(function (_ref6) {
  var _ref6$footerComponent = _ref6.footerComponent,
      FooterComponent = _ref6$footerComponent === void 0 ? null : _ref6$footerComponent,
      _ref6$headerComponent = _ref6.headerComponent,
      HeaderComponent = _ref6$headerComponent === void 0 ? null : _ref6$headerComponent,
      _ref6$isOpen = _ref6.isOpen,
      isOpen = _ref6$isOpen === void 0 ? false : _ref6$isOpen,
      children = _ref6.children,
      _ref6$noAnimation = _ref6.noAnimation,
      noAnimation = _ref6$noAnimation === void 0 ? false : _ref6$noAnimation,
      close = _ref6.close,
      props = _objectWithoutPropertiesLoose(_ref6, ["footerComponent", "headerComponent", "isOpen", "children", "noAnimation", "close"]);

  var _useModalState = useModalState(),
      doCloseModal = _useModalState.doCloseModal;

  var ref = React__default.useRef(null);
  React__default.useEffect(function () {
    var func = function func(event) {
      if (event.key === 'Escape') {
        if (close) {
          close();
        } else if (doCloseModal) {
          doCloseModal();
        }
      }
    };

    if (isOpen) {
      var _window, _window$document;

      typeof window !== 'undefined' && ((_window = window) === null || _window === void 0 ? void 0 : (_window$document = _window.document) === null || _window$document === void 0 ? void 0 : _window$document.createElement) && document.addEventListener('keydown', func);
    }

    return function () {
      var _window2, _window2$document;

      typeof window !== 'undefined' && ((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$document = _window2.document) === null || _window2$document === void 0 ? void 0 : _window2$document.createElement) && document.removeEventListener('keydown', func);
    };
  }, [isOpen, close]);
  var handler = isOpen ? close || doCloseModal || null : null;
  useOnClickOutside(ref, handler);
  return React__default.createElement(React__default.Fragment, null, React__default.createElement(ModalUnderlay, {
    isOpen: isOpen,
    noAnimation: noAnimation
  }), React__default.createElement(ModalWrapper, {
    isOpen: isOpen
  }, React__default.createElement(ModalCardContainer, Object.assign({
    ref: ref,
    isOpen: isOpen,
    noAnimation: noAnimation
  }, props), React__default.createElement(Header, {
    component: HeaderComponent
  }), React__default.createElement(Box, {
    overflowY: "auto"
  }, children), React__default.createElement(Footer, {
    component: FooterComponent
  }))));
});
var ModalProvider = function ModalProvider(props) {
  var _React$useState = React__default.useState(false),
      isOpen = _React$useState[0],
      setIsOpen = _React$useState[1];

  var doOpenModal = function doOpenModal() {
    return !isOpen ? setIsOpen(true) : null;
  };

  var doCloseModal = function doCloseModal() {
    return isOpen ? setIsOpen(false) : null;
  };

  return React__default.createElement(ModalContext.Provider, {
    value: {
      isOpen: isOpen,
      doOpenModal: doOpenModal,
      doCloseModal: doCloseModal
    }
  }, props.children);
};

export { Modal, ModalProvider, useModalState };
//# sourceMappingURL=index.esm.js.map