ndla-ui/lib/Image/LazyLoadImage.js

UI component library for NDLA.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } /**
                                                                                                                                                                                                                              * Copyright (c) 2017-present, NDLA.
                                                                                                                                                                                                                              *
                                                                                                                                                                                                                              * This source code is licensed under the GPLv3 license found in the
                                                                                                                                                                                                                              * LICENSE file in the root directory of this source tree.
                                                                                                                                                                                                                              *
                                                                                                                                                                                                                              */

// Lazyload image with lazysizes (https://github.com/aFarkas/lazysizes)
var LazyLoadImage = function LazyLoadImage(_ref) {
  var alt = _ref.alt,
      src = _ref.src,
      srcSet = _ref.srcSet,
      lazyLoadSrc = _ref.lazyLoadSrc,
      sizes = _ref.sizes,
      rest = _objectWithoutProperties(_ref, ['alt', 'src', 'srcSet', 'lazyLoadSrc', 'sizes']);

  return [_react2.default.createElement(
    'noscript',
    { key: 'noscript' },
    _react2.default.createElement('img', _extends({ alt: alt, src: '' + src, srcSet: srcSet, sizes: sizes }, rest))
  ), _react2.default.createElement('img', _extends({
    alt: alt,
    key: 'img',
    style: { width: '100%' },
    className: 'lazyload',
    src: lazyLoadSrc,
    'data-src': src,
    'data-src-set': srcSet,
    'data-sizes': sizes
  }, rest))];
};

LazyLoadImage.propTypes = {
  alt: _propTypes2.default.string.isRequired,
  src: _propTypes2.default.string.isRequired,
  sizes: _propTypes2.default.string,
  contentType: _propTypes2.default.string,
  srcSet: _propTypes2.default.string,
  lazyLoadSrc: _propTypes2.default.string.isRequired
};

exports.default = LazyLoadImage;