ndla-ui/es/Masthead/Masthead.js

UI component library for NDLA.

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/**
 * Copyright (c) 2016-present, NDLA.
 *
 * This source code is licensed under the GPLv3 license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import BEMHelper from 'react-bem-helper';

import { DisplayOnPageYOffset } from '../Animation';

var classes = new BEMHelper({
  name: 'masthead',
  prefix: 'c-'
});

export var MastheadItem = function MastheadItem(_ref) {
  var children = _ref.children,
      className = _ref.className,
      left = _ref.left,
      right = _ref.right;

  var itemClassNames = classNames(_defineProperty({}, classes('left').className, left), _defineProperty({}, classes('right').className, right), className);

  return React.createElement(
    'div',
    { className: itemClassNames },
    children
  );
};

MastheadItem.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  right: PropTypes.bool,
  left: PropTypes.bool
};

MastheadItem.defaultProps = {
  right: false,
  left: false
};

var MastheadInfo = function MastheadInfo(_ref2) {
  var children = _ref2.children;
  return React.createElement(
    'div',
    classes('info'),
    React.createElement(
      'div',
      classes('info-content'),
      children
    )
  );
};

MastheadInfo.propTypes = {
  children: PropTypes.node.isRequired
};

export var Masthead = function Masthead(_ref3) {
  var children = _ref3.children,
      fixed = _ref3.fixed,
      infoContent = _ref3.infoContent,
      showLoaderWhenNeeded = _ref3.showLoaderWhenNeeded;
  return React.createElement(
    Fragment,
    null,
    React.createElement('div', classes('placeholder', { infoContent: infoContent })),
    React.createElement(
      'div',
      classes('', { fixed: fixed, infoContent: infoContent, showLoaderWhenNeeded: showLoaderWhenNeeded }),
      infoContent && React.createElement(
        DisplayOnPageYOffset,
        { yOffsetMin: 0, yOffsetMax: 90 },
        React.createElement(
          MastheadInfo,
          null,
          infoContent
        )
      ),
      React.createElement(
        'div',
        { className: 'u-1/1 ' + classes('content').className },
        children
      )
    )
  );
};

Masthead.propTypes = {
  children: PropTypes.node,
  fixed: PropTypes.bool,
  showLoaderWhenNeeded: PropTypes.bool,
  infoContent: PropTypes.node
};

Masthead.defaultProps = {
  showLoaderWhenNeeded: true
};

export default Masthead;