terra-consumer-nav/lib/components/modal/Modal.js

A responsive container that neatly displays logo, quicklinks, navlinks and profile.

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _bind = require('classnames/bind');

var _bind2 = _interopRequireDefault(_bind);

var _terraButton = require('terra-button');

var _terraButton2 = _interopRequireDefault(_terraButton);

var _IconClose = require('terra-icon/lib/icon/IconClose');

var _IconClose2 = _interopRequireDefault(_IconClose);

var _terraOverlay = require('terra-overlay');

var _terraOverlay2 = _interopRequireDefault(_terraOverlay);

var _SafeHtml = require('../safe-html/SafeHtml');

var _SafeHtml2 = _interopRequireDefault(_SafeHtml);

var _Modal = require('./Modal.scss');

var _Modal2 = _interopRequireDefault(_Modal);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var cx = _bind2.default.bind(_Modal2.default);

var propTypes = {
  /**
   * Title to be rendered on top of the modal content
   */
  title: _propTypes2.default.string,

  /**
   * Boolean value to render modal.
   */
  isModalOpen: _propTypes2.default.bool,

  /**
   * Required callback function for use by parent component to update state.
   */
  onRequestClose: _propTypes2.default.func.isRequired,

  /**
   * Content to be rendered in the body of the dialog box.
   */
  children: _propTypes2.default.node
};

var defaultProps = {
  isModalOpen: false
};

var Modal = function Modal(_ref) {
  var title = _ref.title,
      isModalOpen = _ref.isModalOpen,
      onRequestClose = _ref.onRequestClose,
      children = _ref.children,
      customProps = _objectWithoutProperties(_ref, ['title', 'isModalOpen', 'onRequestClose', 'children']);

  var modalHeader = _react2.default.createElement(
    'div',
    { className: cx('modal-title') },
    _react2.default.createElement(_SafeHtml2.default, { text: title }),
    _react2.default.createElement(
      'div',
      { className: cx('close-button-container') },
      _react2.default.createElement(_terraButton2.default, { icon: _react2.default.createElement(_IconClose2.default, null), className: cx('close-button'), onClick: onRequestClose, variant: 'utility', text: 'Close' })
    )
  );

  return _react2.default.createElement(
    _terraOverlay2.default,
    _extends({}, customProps, { isOpen: isModalOpen, className: cx('overlay') }),
    modalHeader,
    _react2.default.createElement(
      'div',
      { className: cx('modal') },
      children
    )
  );
};

Modal.propTypes = propTypes;
Modal.defaultProps = defaultProps;

exports.default = Modal;