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

Lonely Planet's Components

"use strict";

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

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _reactPortal = require("react-portal");

var _reactPortal2 = _interopRequireDefault(_reactPortal);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

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

var _colors2 = _interopRequireDefault(_colors);

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

var _zIndex2 = _interopRequireDefault(_zIndex);

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

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

var _propTypes4 = _interopRequireDefault(_propTypes3);

var _text = require("../text");

var _overlay = require("../overlay");

var _overlay2 = _interopRequireDefault(_overlay);

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

var styles = {
  container: {
    default: {
      backgroundColor: _colors2.default.bgPrimary,
      marginLeft: "auto",
      marginRight: "auto",
      maxWidth: (0, _grid.span)(4, "static"),
      padding: "48px 24px",
      position: "relative",
      textAlign: "center",
      width: 343 / 375 * 100 + "vw",
      zIndex: _zIndex2.default.dialog
    },

    centered: {
      left: 0,
      marginBottom: "auto",
      marginTop: "auto",
      position: "fixed",
      right: 0,
      top: "50%",
      transform: "translateY(-50%)"
    },

    hidden: {
      display: "none"
    }
  },

  heading: {
    marginBottom: "16px"
  },

  actions: {
    display: "table",
    marginLeft: "auto",
    marginRight: "auto",
    marginTop: "48px",
    maxWidth: "100%",
    minWidth: "140px"
  },

  action: {
    display: "block",
    minHeight: "44px",
    paddingTop: 17 / 11 + "em",
    paddingRight: 48 / 11 + "em",
    paddingBottom: 16 / 11 + "em",
    paddingLeft: 48 / 11 + "em",
    width: "100%"
  }
};

var Dialog = function (_Component) {
  (0, _inherits3.default)(Dialog, _Component);

  function Dialog(props) {
    (0, _classCallCheck3.default)(this, Dialog);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Dialog.__proto__ || (0, _getPrototypeOf2.default)(Dialog)).call(this, props));

    _this.handleKeydown = _this.handleKeydown.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(Dialog, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      document.addEventListener("keydown", this.handleKeydown);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      document.removeEventListener("keydown", this.handleKeydown);
    }
  }, {
    key: "handleKeydown",
    value: function handleKeydown(event) {
      var _props = this.props,
          isOpen = _props.isOpen,
          onClose = _props.onClose,
          modal = _props.modal;


      if (event.keyCode === 27 && isOpen && modal) {
        onClose();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _props2 = this.props,
          children = _props2.children,
          isOpen = _props2.isOpen,
          actions = _props2.actions,
          modal = _props2.modal,
          onClose = _props2.onClose,
          title = _props2.title,
          hasOverlay = _props2.hasOverlay,
          centered = _props2.centered,
          className = _props2.className,
          id = _props2.id,
          style = _props2.style;


      return _react2.default.createElement(
        "div",
        null,
        _react2.default.createElement(
          _reactPortal2.default,
          {
            isOpened: isOpen,
            style: { height: 0, width: 0 }
          },
          _react2.default.createElement(
            "div",
            {
              className: (0, _classnames2.default)("Dialog", className),
              id: id,
              "data-testid": id + "-dialog",
              role: "alertdialog",
              tabIndex: isOpen ? 0 : -1,
              "aria-hidden": isOpen ? "false" : "true",
              "aria-labelledby": id ? id + "-title" : null,
              "aria-describedby": id ? id + "-message" : null,
              style: [styles.container.default, centered && styles.container.centered, hasOverlay && { zIndex: _zIndex2.default.modal }, !isOpen && styles.container.hidden, style]
            },
            title && _react2.default.createElement(
              _text.Heading,
              {
                level: 6,
                size: 6,
                weight: "medium",
                id: id ? id + "-title" : null,
                style: styles.heading
              },
              title
            ),
            _react2.default.createElement(
              _text.TextBodySmall,
              { id: id ? id + "-message" : null },
              children
            ),
            actions && _react2.default.createElement(
              "div",
              { style: styles.actions },
              _react2.default.Children.map(actions, function (child, index) {
                return _react2.default.cloneElement(child, {
                  key: index,
                  customStyles: [styles.action, index > 0 && { marginTop: "16px" }]
                });
              })
            )
          )
        ),
        hasOverlay && _react2.default.createElement(_overlay2.default, {
          attached: isOpen,
          onClick: modal ? onClose : null,
          visible: isOpen
        })
      );
    }
  }]);
  return Dialog;
}(_react.Component);

Dialog.propTypes = {
  children: _propTypes2.default.node.isRequired,
  isOpen: _propTypes2.default.bool.isRequired,
  actions: _propTypes2.default.node.isRequired,
  modal: _propTypes2.default.bool,
  onClose: _propTypes2.default.func,
  hasOverlay: _propTypes2.default.bool,
  centered: _propTypes2.default.bool,
  title: _propTypes2.default.string,
  className: _propTypes2.default.string,
  id: _propTypes2.default.string,
  style: _propTypes4.default.style
};

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