@lyra/default-layout/lib/components/LoginStatus.js

The default layout components for Lyra

'use strict';

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

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactClickOutside = require('react-click-outside');

var _reactClickOutside2 = _interopRequireDefault(_reactClickOutside);

var _user = require('part:@lyra/base/user');

var _user2 = _interopRequireDefault(_user);

var _default = require('part:@lyra/components/menus/default');

var _default2 = _interopRequireDefault(_default);

var _signOutIcon = require('part:@lyra/base/sign-out-icon');

var _signOutIcon2 = _interopRequireDefault(_signOutIcon);

var _LoginStatus = require('./styles/LoginStatus.css');

var _LoginStatus2 = _interopRequireDefault(_LoginStatus);

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

class LoginStatus extends _react2.default.PureComponent {

  constructor(...args) {
    super(...args);

    this.handleClickOutside = () => {
      if (this.state.userMenuOpened) {
        this.setState({ userMenuOpened: false });
      }
    };

    this.handleUserMenuToggle = () => {
      this.setState({ userMenuOpened: !this.state.userMenuOpened });
    };

    this.handleUserMenuItemClick = item => {
      if (item.index === 'signOut') {
        _user2.default.actions.logout();
      }
    };

    this.state = {
      userMenuOpened: false
    };
  }

  componentWillMount() {
    this.userSubscription = _user2.default.currentUser.subscribe(event => this.setState({ user: event.user }));
  }

  componentWillUnmount() {
    this.userSubscription.unsubscribe();
  }

  render() {
    const className = this.props.className;
    var _state = this.state;
    const user = _state.user,
          userMenuOpened = _state.userMenuOpened;

    if (!user) {
      return null;
    }

    return _react2.default.createElement(
      'div',
      { className: `${_LoginStatus2.default.root} ${className}` },
      _react2.default.createElement(
        'div',
        { onClick: this.handleUserMenuToggle },
        _react2.default.createElement('img', { src: user.profileImage, className: _LoginStatus2.default.userImage })
      ),
      _react2.default.createElement(
        'div',
        { className: _LoginStatus2.default.userName },
        user.name
      ),
      userMenuOpened && _react2.default.createElement(
        'div',
        { className: _LoginStatus2.default.userMenu },
        _react2.default.createElement(_default2.default, {
          onAction: this.handleUserMenuItemClick,
          items: [{
            title: `Log out ${user.name}`,
            icon: _signOutIcon2.default,
            index: 'signOut'
          }],
          opened: true,
          origin: 'top-right',
          onClickOutside: this.handleUserMenuClose
        })
      )
    );
  }
}

LoginStatus.propTypes = {
  className: _propTypes2.default.string
};
exports.default = (0, _reactClickOutside2.default)(LoginStatus);