@storybook/design-system/dist/components/modal/Modal.js

Storybook design system

"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Modal = void 0;

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

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

var _theming = require("@storybook/theming");

var _reactModal = _interopRequireDefault(require("react-modal"));

var _Button = require("../Button");

var _Icon = require("../Icon");

var _styles = require("../shared/styles");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }

var Action = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e1pi15s62"
} : {
  target: "e1pi15s62",
  label: "Action"
})("position:absolute;z-index:2;bottom:10vh;left:50%;transform:translateX(-50%);@media (min-width: ", _styles.breakpoint, "px){right:30px;top:30px;bottom:auto;left:auto;transform:none;}");
var CenteredItem = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e1pi15s61"
} : {
  target: "e1pi15s61",
  label: "CenteredItem"
})(_styles.pageMargins, ";width:100%;margin-top:auto!important;margin-bottom:auto!important;padding-top:3rem;padding-bottom:3rem;");
var CenteredWrapper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e1pi15s60"
} : {
  target: "e1pi15s60",
  label: "CenteredWrapper"
})(process.env.NODE_ENV === "production" ? {
  name: "11qebxa",
  styles: "display:flex;justify-content:center;align-items:center;position:absolute;top:0;bottom:0;right:0;left:0"
} : {
  name: "11qebxa",
  styles: "display:flex;justify-content:center;align-items:center;position:absolute;top:0;bottom:0;right:0;left:0",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});

var Modal = function Modal(_ref) {
  var _ref$isBlank = _ref.isBlank,
      isBlank = _ref$isBlank === void 0 ? false : _ref$isBlank,
      isOpen = _ref.isOpen,
      onClose = _ref.onClose,
      children = _ref.children,
      _ref$overlayStyles = _ref.overlayStyles,
      overlayStyles = _ref$overlayStyles === void 0 ? {} : _ref$overlayStyles,
      _ref$contentStyles = _ref.contentStyles,
      contentStyles = _ref$contentStyles === void 0 ? {} : _ref$contentStyles;
  var actions = {
    onClose: onClose
  };
  return /*#__PURE__*/_react["default"].createElement(_reactModal["default"], {
    isOpen: isOpen,
    onRequestClose: onClose,
    contentLabel: "Example Modal",
    ariaHideApp: false,
    closeTimeoutMS: 300,
    style: {
      overlay: _objectSpread({
        backgroundColor: isBlank ? _styles.color.lightest : 'rgba(246, 249, 252, .97)',
        // 1 less that max, to allow intercom over the top
        zIndex: 2147483646,
        overflowX: 'hidden',
        overflowY: 'auto'
      }, overlayStyles),
      content: _objectSpread({
        left: '0',
        top: '0',
        bottom: '0',
        right: '0',
        backgroundColor: 'transparent',
        border: 'none',
        overflow: 'visible',
        padding: '0',
        width: '100%',
        margin: 'auto'
      }, contentStyles)
    }
  }, isBlank ? _react.Children.only(children(actions)) : /*#__PURE__*/_react["default"].createElement(CenteredWrapper, null, /*#__PURE__*/_react["default"].createElement(CenteredItem, null, _react.Children.only(children(actions)))), !isBlank && /*#__PURE__*/_react["default"].createElement(Action, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
    containsIcon: true,
    appearance: "outline",
    onClick: onClose
  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
    icon: "cross"
  }))));
};

exports.Modal = Modal;