@attivio/suit/es/components/Masthead.js

Attivio SUIT, the Search UI Toolkit, is a library for creating search clients for searching the Attivio platform.

var _class, _temp;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React from 'react';


import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';

import Configurable from './Configurable';
import MastheadUser from './MastheadUser';
import AuthUtils from '../util/AuthUtils';

/**
 * Display a masthead header at the top of your page. It displays a logo,
 * the name of the application, and the currently logged-in user. It can
 * contain arbitrary components, but components particularly suited for
 * being in masthead have names that start with "Masthead," such as
 * MastheadNavBar and MastheadNavTabs.
 */
var Masthead = (_temp = _class = function (_React$Component) {
  _inherits(Masthead, _React$Component);

  function Masthead(props) {
    _classCallCheck(this, Masthead);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.state = {
      userInfo: null
    };
    _this.navigateHome = _this.navigateHome.bind(_this);
    _this.updateUser = _this.updateUser.bind(_this);
    return _this;
  }

  Masthead.prototype.componentDidMount = function componentDidMount() {
    this.updateUser();
  };

  Masthead.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    if (this.props.username !== nextProps.username) {
      this.updateUser();
    }
  };

  Masthead.prototype.updateUser = function updateUser() {
    var _this2 = this;

    if (this.props.username) {
      this.setState({
        userInfo: {
          userId: this.props.username
        }
      });
    } else {
      var currentUser = AuthUtils.getSavedUser();
      if (currentUser) {
        this.setState({
          userInfo: currentUser
        });
      } else {
        // If we need to, ask the server...
        AuthUtils.getLoggedInUserInfo(function (loggedInUserInfo) {
          _this2.setState({
            userInfo: loggedInUserInfo
          });
        });
      }
    }
  };

  Masthead.prototype.navigateHome = function navigateHome() {
    if (this.homeLink) {
      this.homeLink.blur();
    }
    if (this.context && this.context.searcher) {
      this.context.searcher.reset();
    }
    this.props.history.push({
      pathname: this.props.homeRoute,
      search: this.props.location.search
    });
  };

  Masthead.prototype.renderButton = function renderButton() {
    var _this3 = this;

    var engineInfo = null;
    if (this.props.searchEngineType === 'solr') {
      engineInfo = React.createElement(
        'span',
        {
          style: {
            display: 'inline-block',
            float: 'right',
            fontSize: '0.6875em',
            fontWeight: 100,
            color: '#fff',
            width: '100%',
            textAlign: 'right',
            padding: 0
          }
        },
        'for Apache Solr'
      );
    } else if (this.props.searchEngineType === 'elastic') {
      engineInfo = React.createElement(
        'span',
        {
          style: {
            display: 'inline-block',
            float: 'right',
            fontSize: '0.6875em',
            fontWeight: 100,
            color: '#fff',
            width: '100%',
            textAlign: 'right',
            padding: 0
          }
        },
        'for Elasticsearch'
      );
    }

    var logo = React.createElement('img', {
      src: this.props.logoUri,
      alt: this.props.logoAlt,
      className: 'attivio-globalmast-logo-img'
    });

    if (this.props.homeUrl) {
      return React.createElement(
        'a',
        {
          style: {
            backgroundColor: 'transparent',
            borderWidth: 0,
            textDecoration: 'none'
          },
          role: 'button',
          href: this.props.homeUrl,
          className: 'attivio-globalmast-logo attivio-globalmast-separator after'
        },
        logo,
        engineInfo
      );
    }

    return React.createElement(
      'button',
      {
        style: { backgroundColor: 'transparent', borderWidth: 0 },
        onClick: this.navigateHome,
        className: 'attivio-globalmast-logo attivio-globalmast-separator after',
        ref: function ref(c) {
          _this3.homeLink = c;
        }
      },
      logo,
      engineInfo
    );
  };

  Masthead.prototype.render = function render() {
    var logoutFunction = this.props.logoutFunction;
    if (this.state.userInfo) {
      if (this.state.userInfo.saml) {
        // If the user is logged in via SAML, diable logging out.
        logoutFunction = null;
      }
    } else {
      // If there's no user logged in, then disable logging out.
      logoutFunction = null;
    }

    return React.createElement(
      'header',
      { className: 'attivio-globalmast attivio-minwidth' },
      React.createElement(
        'div',
        { className: 'attivio-container' },
        this.renderButton(),
        React.createElement(
          'div',
          { className: 'attivio-globalmast-appname attivio-globalmast-separator after ' + (this.props.multiline ? '' : 'nowrap') },
          this.props.applicationName
        ),
        this.props.children,
        React.createElement('div', { className: 'attivio-globalmast-spacer' }),
        React.createElement(MastheadUser, {
          username: AuthUtils.getUserName(this.state.userInfo),
          logoutFunction: logoutFunction,
          helpUri: this.props.helpUri
        })
      )
    );
  };

  return Masthead;
}(React.Component), _class.defaultProps = {
  logoUri: 'img/attivio-logo-reverse.png',
  logoAlt: 'Attivio Home',
  homeRoute: '/',
  homeUrl: null,
  logoutFunction: null,
  applicationName: 'Cognitive Search',
  multiline: false,
  searchEngineType: 'attivio',
  helpUri: null,
  username: null
}, _class.contextTypes = {
  searcher: PropTypes.any
}, _class.displayName = 'Masthead', _temp);


export default withRouter(Configurable(Masthead));