terra-consumer-nav/lib/components/nav-help/NavHelpPopup.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 _terraArrange = require('terra-arrange');

var _terraArrange2 = _interopRequireDefault(_terraArrange);

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

var _terraButton2 = _interopRequireDefault(_terraButton);

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

var _IconClose2 = _interopRequireDefault(_IconClose);

var _terraPopup = require('terra-popup');

var _terraPopup2 = _interopRequireDefault(_terraPopup);

var _terraSpacer = require('terra-spacer');

var _terraSpacer2 = _interopRequireDefault(_terraSpacer);

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

var _SafeHtml2 = _interopRequireDefault(_SafeHtml);

var _NavHelpPopup = require('./NavHelpPopup.scss');

var _NavHelpPopup2 = _interopRequireDefault(_NavHelpPopup);

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(_NavHelpPopup2.default);

var propTypes = {
  /**
   * Title to be rendered on top of the popup content
   */
  title: _propTypes2.default.string,
  /**
   * Boolean value to hide/display popup header with title and close button
   */
  hasHeader: _propTypes2.default.bool,
  /**
   * Content to be displayed in a dialog
   */
  popupContent: _propTypes2.default.element,
  /**
   * Boolean value to render the popup
   */
  isOpen: _propTypes2.default.bool,
  /**
   * Required callback function for use by parent component to update state.
   */
  closePopup: _propTypes2.default.func,
  /**
   * Number of rows in the help pop up to know what height to use
   */
  rowCount: _propTypes2.default.number.isRequired
};

var defaultProps = {
  hasHeader: false,
  isOpen: false,
  closePopup: null
};

var NavHelpPopup = function NavHelpPopup(_ref) {
  var title = _ref.title,
      hasHeader = _ref.hasHeader,
      popupContent = _ref.popupContent,
      isOpen = _ref.isOpen,
      closePopup = _ref.closePopup,
      rowCount = _ref.rowCount,
      customProps = _objectWithoutProperties(_ref, ['title', 'hasHeader', 'popupContent', 'isOpen', 'closePopup', 'rowCount']);

  var popupHeader = hasHeader && _react2.default.createElement(
    _terraSpacer2.default,
    { className: cx('popup-title'), paddingTop: 'small-1', paddingRight: 'small', paddingBottom: 'small-1', paddingLeft: 'large+1' },
    _react2.default.createElement(_terraArrange2.default, {
      fill: _react2.default.createElement(_SafeHtml2.default, { text: title }),
      fitEnd: _react2.default.createElement(_terraButton2.default, {
        className: cx('close-button'),
        icon: _react2.default.createElement(_IconClose2.default, null),
        onClick: closePopup,
        text: 'Close Popup',
        variant: 'utility'
      })
    })
  );

  return _react2.default.createElement(
    _terraPopup2.default,
    _extends({}, customProps, {
      isOpen: isOpen,
      onRequestClose: closePopup,
      isHeaderDisabled: true,
      contentHeight: 'auto'
    }),
    _react2.default.createElement(
      'div',
      null,
      popupHeader,
      _react2.default.createElement(
        'div',
        null,
        popupContent
      )
    )
  );
};

NavHelpPopup.propTypes = propTypes;
NavHelpPopup.defaultProps = defaultProps;

exports.default = NavHelpPopup;