ndla-ui/lib/Image/Image.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 _defined = require('defined');

var _defined2 = _interopRequireDefault(_defined);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _LazyLoadImage = require('./LazyLoadImage');

var _LazyLoadImage2 = _interopRequireDefault(_LazyLoadImage);

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

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 = (0, _defined2.default)(rest.srcSet, getSrcSet(src, crop, focalPoint));
  var sizes = (0, _defined2.default)(rest.sizes, '(min-width: 1024px) 1024px, 100vw'); // min-width === inuit-wrapper-width
  var fallbackWidth = (0, _defined2.default)(rest.fallbackWidth, 1024);
  var queryString = makeSrcQueryString(fallbackWidth, crop, focalPoint);

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

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

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

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

exports.default = Image;