ndla-ui/lib/Masthead/Masthead.js

UI component library for NDLA.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Masthead = exports.MastheadItem = undefined;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _reactBemHelper = require('react-bem-helper');

var _reactBemHelper2 = _interopRequireDefault(_reactBemHelper);

var _Animation = require('../Animation');

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

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.
                                                                                                                                                                                                                   *
                                                                                                                                                                                                                   */

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

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

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

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

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

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

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

MastheadInfo.propTypes = {
  children: _propTypes2.default.node.isRequired
};

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

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

Masthead.defaultProps = {
  showLoaderWhenNeeded: true
};

exports.default = Masthead;