ndla-ui/es/Image/LazyLoadImage.js

UI component library for NDLA.

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; };

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

import React from 'react';
import PropTypes from 'prop-types';

// 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 [React.createElement(
    'noscript',
    { key: 'noscript' },
    React.createElement('img', _extends({ alt: alt, src: '' + src, srcSet: srcSet, sizes: sizes }, rest))
  ), React.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: PropTypes.string.isRequired,
  src: PropTypes.string.isRequired,
  sizes: PropTypes.string,
  contentType: PropTypes.string,
  srcSet: PropTypes.string,
  lazyLoadSrc: PropTypes.string.isRequired
};

export default LazyLoadImage;