@lyra/base/lib/components/Document.js

Lyra plugin containing the base components and roles for a Lyra configuration

'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 _generateScriptLoader = require('../util/generateScriptLoader');

var _generateScriptLoader2 = _interopRequireDefault(_generateScriptLoader);

var _AppLoadingScreen = require('./AppLoadingScreen');

var _AppLoadingScreen2 = _interopRequireDefault(_AppLoadingScreen);

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

function assetUrl(staticPath, item) {
  const isAbsolute = item.path.match(/^https?:\/\//);
  if (isAbsolute) {
    return item.path;
  }

  const base = `${staticPath}/${item.path}`;
  if (!item.hash) {
    return base;
  }

  const hasQuery = base.indexOf('?') !== -1;
  const separator = hasQuery ? '&' : '?';
  return `${base}${separator}${item.hash}`;
}

function Document(props) {
  const basePath = props.basePath.replace(/\/+$/, '');
  const staticPath = `${basePath}${props.staticPath}`;

  const stylesheets = props.stylesheets.map(item => _react2.default.createElement('link', { key: item.path, rel: 'stylesheet', href: assetUrl(staticPath, item) }));

  const subresources = props.scripts.map(item => _react2.default.createElement('link', { key: item.path, rel: 'subresource', href: assetUrl(staticPath, item) }));

  const scripts = props.scripts.map(item => assetUrl(staticPath, item));
  const scriptLoader = (0, _generateScriptLoader2.default)(scripts);

  const favicons = props.favicons.map((item, index) => _react2.default.createElement('link', { key: item.path, rel: 'icon', href: assetUrl(staticPath, item) }));

  return _react2.default.createElement(
    'html',
    null,
    _react2.default.createElement(
      'head',
      null,
      _react2.default.createElement('meta', { charSet: props.charset }),
      _react2.default.createElement(
        'title',
        null,
        props.title
      ),
      _react2.default.createElement('meta', { name: 'viewport', content: props.viewport }),
      stylesheets,
      subresources,
      favicons
    ),
    _react2.default.createElement(
      'body',
      null,
      _react2.default.createElement(
        'div',
        { id: 'lyra' },
        _react2.default.createElement(_AppLoadingScreen2.default, { text: props.loading })
      ),
      _react2.default.createElement('script', { dangerouslySetInnerHTML: { __html: scriptLoader } })
    )
  );
}

const asset = _propTypes2.default.shape({
  path: _propTypes2.default.string.isRequired,
  hash: _propTypes2.default.string
});

Document.defaultProps = {
  basePath: '',
  charset: 'utf-8',
  title: 'Lyra',
  viewport: 'width=device-width, initial-scale=1',
  loading: 'Please wait…',
  staticPath: '/static',
  favicons: [{ path: 'favicon.ico' }],
  stylesheets: [],
  scripts: []
};

Document.propTypes = {
  basePath: _propTypes2.default.string,
  charset: _propTypes2.default.string,
  title: _propTypes2.default.string,
  viewport: _propTypes2.default.string,
  loading: _propTypes2.default.node,
  staticPath: _propTypes2.default.string,
  favicons: _propTypes2.default.arrayOf(asset),
  stylesheets: _propTypes2.default.arrayOf(asset),
  scripts: _propTypes2.default.arrayOf(asset)
};

exports.default = Document;