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

Lonely Planet's Components

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _reactModal2 = _interopRequireDefault(_reactModal);

var _settings = require("../../../settings.json");

var _icon = require("../icon");

var _icon2 = _interopRequireDefault(_icon);

var _heading = require("../heading");

var _heading2 = _interopRequireDefault(_heading);

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

var _grid = require("../../utils/grid");

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

var styles = {
  content: {
    border: 0,
    borderRadius: 0,
    bottom: "auto",
    boxShadow: "0 27px 50px rgba(" + (0, _color.rgb)(_settings.color.black) + ", .36)",
    left: 0,
    marginLeft: "auto",
    marginRight: "auto",
    maxHeight: "75vh",
    padding: (0, _grid.gutter)("static"),
    right: 0,
    top: "50%",
    transform: "translateY(-50%)",
    width: "50%",
    zIndex: _settings.zIndex.modal
  },
  overlay: {
    backgroundColor: "rgba(" + (0, _color.rgb)(_settings.color.black) + ", .4)",
    overflow: "hidden",
    zIndex: _settings.zIndex.modal - 2
  },
  header: {
    borderBottom: "1px solid " + _settings.color.gray,
    paddingBottom: "16px",
    position: "relative",
    textAlign: "center",
    textTransform: "uppercase"
  },
  contentContainer: {
    paddingTop: "10px"
  },
  close: {
    backgroundColor: _settings.color.white,
    border: 0,
    color: _settings.color.lightText,
    fontSize: "16px",
    position: "absolute",
    right: 0,
    top: "-5px"
  },
  selectNone: {
    backgroundColor: "transparent",
    color: _settings.color.blue,
    fontSize: "11px",
    fontWeight: 600,
    left: 0,
    position: "absolute",
    textTransform: "uppercase",
    top: "-1px"
  }
};

function ModalComponent(_ref) {
  var isOpen = _ref.isOpen;
  var selectNone = _ref.selectNone;
  var onSelectNone = _ref.onSelectNone;
  var title = _ref.title;
  var closeModal = _ref.closeModal;
  var children = _ref.children;

  return _react2.default.createElement(
    _reactModal2.default,
    {
      isOpen: isOpen,
      style: styles,
      onRequestClose: closeModal
    },
    _react2.default.createElement(
      "header",
      {
        className: "Modal-header",
        style: styles.header
      },
      selectNone && _react2.default.createElement(
        "button",
        {
          style: styles.selectNone,
          onClick: onSelectNone
        },
        "Select None"
      ),
      _react2.default.createElement(
        _heading2.default,
        {
          level: 4,
          size: "small",
          weight: "thick",
          caps: true
        },
        title
      ),
      _react2.default.createElement(
        "button",
        {
          style: styles.close,
          onClick: closeModal
        },
        _react2.default.createElement(_icon2.default, {
          name: "cross",
          label: "Close"
        })
      )
    ),
    _react2.default.createElement(
      "div",
      {
        className: "Modal-content",
        style: styles.contentContainer
      },
      children
    )
  );
}

ModalComponent.propTypes = {
  /**
   * Set modal to open or closed
   */
  isOpen: _react2.default.PropTypes.bool.isRequired,

  /**
   * Set selectNone visibility
   */
  selectNone: _react2.default.PropTypes.bool,

  /**
   * Clear all selected filters
   */
  onSelectNone: _react2.default.PropTypes.func,

  /**
   * Modal title
   */
  title: _react2.default.PropTypes.string.isRequired,

  /**
   * Function to close modal
   */
  closeModal: _react2.default.PropTypes.func.isRequired,

  /**
   * Contents of modal
   */
  children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.node, _react2.default.PropTypes.string]).isRequired
};

ModalComponent.defaultProps = {
  isOpen: false,

  selectNone: false,

  onSelectNone: null,

  title: "Modal",

  closeModal: null,

  children: null
};

ModalComponent.styles = styles;

exports.default = ModalComponent;