backpack-ui/dist/components/modal/index.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

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

var _extends3 = _interopRequireDefault(_extends2);

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

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _reactModal2 = _interopRequireDefault(_reactModal);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _mq = require("../../styles/mq");

var _mq2 = _interopRequireDefault(_mq);

var _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

var _zIndex = require("../../styles/zIndex");

var _zIndex2 = _interopRequireDefault(_zIndex);

var _color = require("../../utils/color");

var _propTypes3 = require("../../utils/propTypes");

var _propTypes4 = _interopRequireDefault(_propTypes3);

var _typography = require("../../utils/typography");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var largeMQ = "(min-width: " + _mq2.default.min[768] + ")";
var modalPadding = 24;

var styles = {
  overlay: {
    backgroundColor: (0, _color.rgba)(_colors2.default.bgOverlay, 0.3),
    overflow: "hidden",
    zIndex: _zIndex2.default.modal
  },

  header: (0, _defineProperty3.default)({
    alignItems: "center",
    display: "flex",
    height: "56px",
    justifyContent: "center",
    position: "relative",
    textAlign: "center"

  }, "@media " + largeMQ, {
    height: "72px"
  }),

  contentContainer: (0, _defineProperty3.default)({
    padding: "40px"

  }, "@media " + largeMQ, {
    padding: "8px 56px"
  }),

  actionItem: (0, _defineProperty3.default)({
    backgroundColor: "transparent",
    cursor: "pointer",
    padding: "16px",
    position: "absolute",
    top: 0

  }, "@media " + largeMQ, {
    padding: modalPadding + "px"
  }),

  rightAction: {
    right: 0
  },

  leftAction: {
    left: 0
  },

  title: (0, _extends3.default)({}, {
    display: "inline-block"
  }, (0, _typography.textHeading6)("medium"), {
    lineHeight: 1
  })
};

function ModalComponent(_ref) {
  var isOpen = _ref.isOpen,
      closeModal = _ref.closeModal,
      closeTimeoutMS = _ref.closeTimeoutMS,
      contentLabel = _ref.contentLabel,
      desktopMaxHeight = _ref.desktopMaxHeight,
      desktopWidth = _ref.desktopWidth,
      leftAction = _ref.leftAction,
      leftActionContent = _ref.leftActionContent,
      leftActionDisabled = _ref.leftActionDisabled,
      rightAction = _ref.rightAction,
      rightActionContent = _ref.rightActionContent,
      rightActionDisabled = _ref.rightActionDisabled,
      disableContentPadding = _ref.disableContentPadding,
      title = _ref.title,
      showTitle = _ref.showTitle,
      hideHeader = _ref.hideHeader,
      className = _ref.className,
      children = _ref.children,
      contentStyle = _ref.contentStyle,
      style = _ref.style,
      qaHook = _ref.qaHook;

  var rules = {
    ".ReactModal__Content": {
      outline: 0
    },

    ".ReactModal__Content--after-open.ReactModal__Content--before-close": {
      opacity: 0,
      transform: "translateY(55%)",
      transition: "opacity " + _timing2.default.default + ",\n        transform " + _timing2.default.default
    },

    ".ReactModal__Content--after-open": {
      opacity: 1,
      transform: "translateY(0)",
      transition: "opacity " + _timing2.default.default + ",\n        transform " + _timing2.default.default
    },

    ".ReactModal__Overlay--after-open.ReactModal__Overlay--before-close": {
      opacity: 0,
      transition: "opacity " + _timing2.default.default
    },

    ".ReactModal__Overlay--after-open": {
      opacity: 1,
      transition: "opacity " + _timing2.default.default
    },

    ".ModalBase": {
      background: _colors2.default.bgPrimary,
      border: 0,
      borderRadius: 0,
      bottom: "auto",
      boxShadow: "0 27px 50px " + (0, _color.rgba)(_colors2.default.bgOverlay, 0.36),
      height: "100vh",
      left: 0,
      marginLeft: "auto",
      marginRight: "auto",
      MsOverflowStyle: "-ms-autohiding-scrollbar",
      overflow: "auto",
      position: "absolute",
      right: 0,
      top: 0,
      WebkitOverflowScrolling: "touch",
      width: "100%",
      transform: "translate3d(0, 0, 0) !important"
    },

    mediaQueries: (0, _defineProperty3.default)({}, largeMQ, {
      ".ModalBase": {
        maxHeight: desktopMaxHeight,
        top: "50%",
        width: desktopWidth,
        maxWidth: "1290px",
        transform: "translate3d(0, -50%, 0) !important"
      }
    })
  };

  return _react2.default.createElement(
    _reactModal2.default,
    {
      isOpen: isOpen,
      style: (0, _extends3.default)({}, styles, style),
      onRequestClose: closeModal,
      closeTimeoutMS: closeTimeoutMS,
      contentLabel: contentLabel,
      className: className ? "ModalBase " + className : "ModalBase",
      "data-testid": qaHook ? "modal" : null
    },
    _react2.default.createElement(_radium.Style, {
      scopeSelector: ".ReactModalPortal",
      rules: rules
    }),
    !hideHeader && _react2.default.createElement(
      "header",
      {
        className: "Modal-header clearfix",
        style: [styles.header, title && (0, _defineProperty3.default)({}, "@media (max-width: " + _mq2.default.max[768] + ")", {
          borderBottom: "1px solid " + _colors2.default.borderPrimary
        })]
      },
      leftAction && _react2.default.createElement(
        "button",
        {
          "data-testid": qaHook ? "left-action-btn" : null,
          style: [styles.actionItem, styles.leftAction],
          disabled: leftActionDisabled,
          onClick: leftAction
        },
        leftActionContent
      ),
      title && _react2.default.createElement(
        "span",
        {
          style: [styles.title, !showTitle && (0, _defineProperty3.default)({}, "@media " + largeMQ, {
            display: "none"
          })]
        },
        title
      ),
      rightAction && _react2.default.createElement(
        "button",
        {
          "data-testid": qaHook ? "right-action-btn" : null,
          style: [styles.actionItem, styles.rightAction],
          disabled: rightActionDisabled,
          onClick: rightAction
        },
        rightActionContent
      )
    ),
    _react2.default.createElement(
      "div",
      {
        className: "Modal-content",
        style: (0, _extends3.default)({}, !disableContentPadding ? styles.contentContainer : {}, contentStyle)
      },
      children
    )
  );
}

ModalComponent.propTypes = {
  isOpen: _propTypes2.default.bool.isRequired,
  children: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.string]).isRequired,
  closeModal: _propTypes2.default.func,
  leftAction: _propTypes2.default.func,
  leftActionContent: _propTypes2.default.node,
  leftActionDisabled: _propTypes2.default.bool,
  rightAction: _propTypes2.default.func,
  rightActionContent: _propTypes2.default.node,
  rightActionDisabled: _propTypes2.default.bool,
  closeTimeoutMS: _propTypes2.default.number,
  contentLabel: _propTypes2.default.string,
  desktopMaxHeight: _propTypes2.default.string,
  desktopWidth: _propTypes2.default.string,
  title: _propTypes2.default.string,
  showTitle: _propTypes2.default.bool,
  hideHeader: _propTypes2.default.bool,
  className: _propTypes2.default.string,
  disableContentPadding: _propTypes2.default.bool,
  contentStyle: _propTypes4.default.style,
  style: _propTypes4.default.style,
  qaHook: _propTypes2.default.bool
};

ModalComponent.defaultProps = {
  isOpen: false,
  desktopMaxHeight: "85vh",
  desktopWidth: "85%",
  closeTimeoutMS: _timing2.default.numDefault,
  disableContentPadding: false,
  hideHeader: false,
  qaHook: false
};

ModalComponent.styles = styles;

exports.default = (0, _radium2.default)(ModalComponent);