ndla-ui/es/Image/Image.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 defined from 'defined';
import PropTypes from 'prop-types';
import LazyLoadImage from './LazyLoadImage';

var makeSrcQueryString = function makeSrcQueryString(width, crop, focalPoint) {
  var cropParams = crop ? '&cropStartX=' + crop.startX + '&cropEndX=' + crop.endX + '&cropStartY=' + crop.startY + '&cropEndY=' + crop.endY : '';
  var focalPointParams = focalPoint ? '&focalX=' + focalPoint.x + '&focalY=' + focalPoint.y : '';

  return 'width=' + width + cropParams + focalPointParams;
};

var getSrcSet = function getSrcSet(src, crop, focalPoint) {
  var widths = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];
  return widths.map(function (width) {
    return src + '?' + makeSrcQueryString(width, crop, focalPoint) + ' ' + width + 'w';
  }).join(', ');
};

var Image = function Image(_ref) {
  var alt = _ref.alt,
      src = _ref.src,
      lazyLoad = _ref.lazyLoad,
      lazyLoadSrc = _ref.lazyLoadSrc,
      crop = _ref.crop,
      focalPoint = _ref.focalPoint,
      contentType = _ref.contentType,
      rest = _objectWithoutProperties(_ref, ['alt', 'src', 'lazyLoad', 'lazyLoadSrc', 'crop', 'focalPoint', 'contentType']);

  var srcSet = defined(rest.srcSet, getSrcSet(src, crop, focalPoint));
  var sizes = defined(rest.sizes, '(min-width: 1024px) 1024px, 100vw'); // min-width === inuit-wrapper-width
  var fallbackWidth = defined(rest.fallbackWidth, 1024);
  var queryString = makeSrcQueryString(fallbackWidth, crop, focalPoint);

  if (contentType && contentType === 'image/gif') {
    return React.createElement('img', _extends({ alt: alt, src: '' + src }, rest));
  }

  if (lazyLoad) {
    return React.createElement(LazyLoadImage, {
      alt: alt,
      src: src + '?' + queryString,
      srcSet: srcSet,
      sizes: sizes,
      lazyLoadSrc: lazyLoadSrc
    });
  }

  return React.createElement('img', _extends({
    alt: alt,
    srcSet: srcSet,
    sizes: sizes,
    src: src + '?' + queryString
  }, rest));
};

Image.propTypes = {
  alt: PropTypes.string.isRequired,
  src: PropTypes.string.isRequired,
  sizes: PropTypes.string,
  fallbackWidth: PropTypes.number,
  contentType: PropTypes.string,
  srcSet: PropTypes.string,
  lazyLoad: PropTypes.bool,
  lazyLoadSrc: PropTypes.string,
  crop: PropTypes.shape({
    startX: PropTypes.number.isRequired,
    startY: PropTypes.number.isRequired,
    endX: PropTypes.number.isRequired,
    endY: PropTypes.number.isRequired
  }),
  focalPoint: PropTypes.shape({
    x: PropTypes.number.isRequired,
    y: PropTypes.number.isRequired
  })
};

export default Image;