cspace-ui/lib/components/sections/TitleBar.js

CollectionSpace user interface for browsers

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactHelmet = _interopRequireDefault(require("react-helmet"));

var _classnames = _interopRequireDefault(require("classnames"));

var _TitleBar = _interopRequireDefault(require("../../../styles/cspace-ui/TitleBar.css"));

var _Subtitle = _interopRequireDefault(require("../../../styles/cspace-ui/Subtitle.css"));

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

/* global window */
const propTypes = {
  title: _propTypes.default.node,
  subtitle: _propTypes.default.node,
  aside: _propTypes.default.node,
  icon: _propTypes.default.node,
  nav: _propTypes.default.node,
  serviceType: _propTypes.default.string,
  updateDocumentTitle: _propTypes.default.bool,
  onDocked: _propTypes.default.func
};

class TitleBar extends _react.Component {
  constructor(props) {
    super(props);
    this.setDomNode = this.setDomNode.bind(this);
    this.handleScroll = this.handleScroll.bind(this);
    this.state = {
      docked: false
    };
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll, false); // eslint-disable-next-line react/no-did-mount-set-state

    this.setState({
      documentTitle: this.getDocumentTitle()
    });
  }

  componentDidUpdate(prevProps) {
    const node = this.domNode; // Update the document title, if necessary.

    const {
      updateDocumentTitle
    } = this.props;

    if (updateDocumentTitle) {
      const {
        title,
        aside
      } = this.props;
      const {
        title: prevTitle,
        aside: prevAside
      } = prevProps;

      if (title !== prevTitle || aside !== prevAside) {
        // eslint-disable-next-line react/no-did-update-set-state
        this.setState({
          documentTitle: this.getDocumentTitle()
        });
      }
    } // If the height of the title bar content changes while the title bar is docked, fire onDocked
    // in order to notify listeners of the new height.


    if (node && this.state.docked) {
      const contentNode = node.firstElementChild;

      if (contentNode.offsetHeight !== this.dockedHeight) {
        this.dockedHeight = contentNode.offsetHeight;
        const {
          onDocked
        } = this.props;

        if (onDocked) {
          onDocked(this.dockedHeight);
        }
      }
    }
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll, false);
  }

  getDocumentTitle() {
    const titleNode = this.domNode.querySelector('h1');
    const titleText = titleNode ? titleNode.textContent : null;
    const asideNode = this.domNode.querySelector('aside');
    const asideText = asideNode ? asideNode.textContent : null;
    return [titleText, asideText].filter(part => !!part).join(' | ');
  }

  setDomNode(ref) {
    this.domNode = ref;
  }

  handleScroll() {
    const {
      onDocked
    } = this.props;
    const node = this.domNode;
    if (!node) return;

    if (this.state.docked) {
      if (window.scrollY < node.offsetTop) {
        this.setState({
          docked: false
        });
      }
    } else if (window.scrollY >= node.offsetTop) {
      this.dockedHeight = node.offsetHeight;
      this.setState({
        docked: true
      });

      if (onDocked) {
        onDocked(this.dockedHeight);
      }
    }
  }

  renderDocumentTitle() {
    const {
      updateDocumentTitle
    } = this.props;

    if (!updateDocumentTitle) {
      return null;
    }

    const {
      documentTitle
    } = this.state;
    return _react.default.createElement(_reactHelmet.default, null, _react.default.createElement("title", null, documentTitle));
  }

  renderNav() {
    const {
      nav
    } = this.props;
    return nav;
  }

  renderTitle() {
    const {
      title
    } = this.props;
    return _react.default.createElement("h1", null, title);
  }

  renderAside() {
    const {
      aside
    } = this.props;

    if (aside !== null && typeof aside !== 'undefined') {
      return _react.default.createElement("aside", null, _react.default.createElement("h2", null, aside));
    }

    return null;
  }

  renderSubtitle() {
    const {
      subtitle
    } = this.props;

    if (subtitle !== null && typeof subtitle !== 'undefined') {
      return _react.default.createElement("div", {
        className: _Subtitle.default.common
      }, subtitle);
    }

    return null;
  }

  render() {
    const {
      docked
    } = this.state;
    const {
      icon,
      serviceType
    } = this.props;
    const className = (0, _classnames.default)(_TitleBar.default[serviceType], docked ? _TitleBar.default.docked : _TitleBar.default.common);
    const inlineStyle = docked ? {
      height: this.domNode.offsetHeight
    } : {};
    return _react.default.createElement("header", {
      className: className,
      ref: this.setDomNode,
      style: inlineStyle
    }, this.renderDocumentTitle(), _react.default.createElement("div", null, this.renderNav(), _react.default.createElement("div", null, icon, this.renderTitle(), this.renderAside()), this.renderSubtitle()));
  }

}

exports.default = TitleBar;
TitleBar.propTypes = propTypes;