@ntragas/pouncejstest/dist/cjs/components/Modal/Modal.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

var _reactSpring = require("react-spring");

var _dialog = require("@reach/dialog");

var _autoId = require("@reach/auto-id");

var _Box = _interopRequireDefault(require("../Box"));

var _Card = _interopRequireDefault(require("../Card"));

var _Heading = _interopRequireDefault(require("../Heading"));

var _Flex = _interopRequireDefault(require("../Flex"));

var _IconButton = _interopRequireDefault(require("../IconButton"));

var AnimatedDialogOverlay = (0, _reactSpring.animated)(_dialog.DialogOverlay);
var AnimatedDialogContent = (0, _reactSpring.animated)(_dialog.DialogContent);

/**
 * A dialog variation that helps with grabbing the user's attention by blurring the background and
 * presenting an element that requires action from the user
 */
var Modal = function Modal(_ref) {
  var title = _ref.title,
      children = _ref.children,
      open = _ref.open,
      onClose = _ref.onClose,
      showCloseButton = _ref.showCloseButton,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["title", "children", "open", "onClose", "showCloseButton"]);
  var transitions = (0, _reactSpring.useTransition)(open, null, {
    from: {
      transform: 'translate3d(0, 25px, 0)',
      opacity: 0
    },
    enter: {
      transform: 'translate3d(0, 0, 0)',
      opacity: 1
    },
    leave: {
      transform: 'translate3d(0, 25px, 0)',
      opacity: 0,
      pointerEvents: 'none'
    }
  });
  var id = (0, _autoId.useId)();
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, transitions.map(function (_ref2) {
    var item = _ref2.item,
        key = _ref2.key,
        styles = _ref2.props;
    return item && /*#__PURE__*/_react.default.createElement(AnimatedDialogOverlay, {
      key: key,
      isOpen: item,
      onDismiss: onClose,
      style: {
        overflow: 'visible',
        opacity: styles.opacity
      },
      as: 'div'
    }, /*#__PURE__*/_react.default.createElement(_Flex.default, {
      justify: "center",
      align: "center",
      height: "100%"
    }, /*#__PURE__*/_react.default.createElement(AnimatedDialogContent, (0, _extends2.default)({
      "aria-labelledby": id,
      style: (0, _extends2.default)({
        outline: 'none'
      }, styles),
      as: 'div'
    }, rest), /*#__PURE__*/_react.default.createElement(_Card.default, {
      minWidth: "400px",
      position: "relative",
      boxShadow: "dark200"
    }, title && /*#__PURE__*/_react.default.createElement(_Box.default, {
      as: "header",
      borderBottom: "1px solid",
      borderColor: "navyblue-300",
      py: 6
    }, /*#__PURE__*/_react.default.createElement(_Heading.default, {
      as: "h4",
      size: "x-small",
      textAlign: "center",
      id: id
    }, title)), showCloseButton && /*#__PURE__*/_react.default.createElement(_Box.default, {
      position: "absolute",
      top: 3,
      right: 3,
      zIndex: 1
    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
      icon: "close",
      "aria-label": "Dismiss Dialog",
      variant: "ghost",
      variantColor: "navyblue",
      onClick: onClose
    })), /*#__PURE__*/_react.default.createElement(_Box.default, {
      p: 8
    }, children)))));
  }));
};

var _default = Modal;
exports.default = _default;