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

var _terraArrange2 = _interopRequireDefault(_terraArrange);

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

var _bind2 = _interopRequireDefault(_bind);

var _reactIntl = require('react-intl');

var _IconEllipses = require('terra-icon/lib/icon/IconEllipses');

var _IconEllipses2 = _interopRequireDefault(_IconEllipses);

var _IconOutlineUserCircle = require('terra-consumer-icon/lib/icon/IconOutlineUserCircle');

var _IconOutlineUserCircle2 = _interopRequireDefault(_IconOutlineUserCircle);

var _ProfileLinks = require('./ProfileLinks');

var _ProfileLinks2 = _interopRequireDefault(_ProfileLinks);

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

var _SafeHtml2 = _interopRequireDefault(_SafeHtml);

var _UserProfile = require('./UserProfile.scss');

var _UserProfile2 = _interopRequireDefault(_UserProfile);

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

var propTypes = {
  /**
   * User name to be displayed in profile if user is signed in.
   */
  userName: _propTypes2.default.string,

  /**
   * Avatar to be displayed in profile.
   */
  avatar: _propTypes2.default.element,

  /**
   * A unique id set to the profile popup button that will be referred in profile popup.
   */
  id: _propTypes2.default.string,

  /**
   * The path signout button would redirect to.
   */
  signoutUrl: _propTypes2.default.string.isRequired,

  /**
   * The path to the login page.
   */
  signinUrl: _propTypes2.default.string,

  /**
   * Determiniate of whether profile should render as signin link or profile button.
   */
  isSignIn: _propTypes2.default.bool,

  /**
   * The content of the each profile items.
   */
  profileLinks: _propTypes2.default.array, // eslint-disable-line react/forbid-prop-types

  /**
   * A function used as a callback to render modal and popup content.
   */
  handleClick: _propTypes2.default.func.isRequired,

  /**
   * Injected react-intl formatting api
   */
  intl: _reactIntl.intlShape.isRequired,

  /**
   * A function used as a callback when user clicks on any link in the content.
   */
  onLinkClick: _propTypes2.default.func.isRequired
};

var defaultProps = {
  avatar: _react2.default.createElement(_IconOutlineUserCircle2.default, null),
  profileLinks: [],
  isSignIn: false,
  id: 'terra-conumser-nav-profile-button'
};

var UserProfile = function UserProfile(_ref) {
  var userName = _ref.userName,
      avatar = _ref.avatar,
      id = _ref.id,
      signoutUrl = _ref.signoutUrl,
      signinUrl = _ref.signinUrl,
      isSignIn = _ref.isSignIn,
      profileLinks = _ref.profileLinks,
      handleClick = _ref.handleClick,
      onLinkClick = _ref.onLinkClick,
      intl = _ref.intl,
      customProps = _objectWithoutProperties(_ref, ['userName', 'avatar', 'id', 'signoutUrl', 'signinUrl', 'isSignIn', 'profileLinks', 'handleClick', 'onLinkClick', 'intl']);

  var profileContent = void 0;
  if (isSignIn) {
    profileContent = _react2.default.createElement(
      'a',
      { className: cx('popup-button'), href: signinUrl },
      _react2.default.createElement(_terraArrange2.default, {
        fitStart: _react2.default.createElement(
          'div',
          { className: cx('avatar') },
          avatar
        ),
        fill: _react2.default.createElement(_reactIntl.FormattedMessage, { id: 'Terra.Consumer.UserProfile.signin' }),
        align: 'center'
      })
    );
  } else {
    var content = _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(_ProfileLinks2.default, { linkItems: profileLinks, handleClick: onLinkClick }),
      _react2.default.createElement(
        'a',
        { className: cx('link', 'signout-border'), href: signoutUrl },
        _react2.default.createElement(_reactIntl.FormattedMessage, { id: 'Terra.Consumer.UserProfile.signout' })
      )
    );

    var title = intl.formatMessage({ id: 'Terra.Consumer.UserProfile.Modal.title' });

    profileContent =
    // Add an extra link to the number to account for the static signout/signin url
    _react2.default.createElement(
      'button',
      { className: cx('popup-button'), onClick: function onClick() {
          return handleClick({ title: title, content: content }, profileLinks.length + 1);
        } },
      _react2.default.createElement(_terraArrange2.default, {
        fitStart: _react2.default.createElement(
          'div',
          { className: cx('avatar') },
          avatar
        ),
        fill: _react2.default.createElement(_SafeHtml2.default, { text: userName }),
        fitEnd: _react2.default.createElement(_IconEllipses2.default, { className: cx('icon'), id: id }),
        alignFill: 'center'
      })
    );
  }

  return _react2.default.createElement(
    'div',
    _extends({}, customProps, { className: cx('profile') }),
    profileContent
  );
};

UserProfile.propTypes = propTypes;
UserProfile.defaultProps = defaultProps;

exports.default = (0, _reactIntl.injectIntl)(UserProfile);