ndla-ui/es/BackgroundImage/BackgroundImage.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; };

import React from 'react';
import PropTypes from 'prop-types';
import BEMHelper from 'react-bem-helper';

import { breakpoints } from 'ndla-util';

var classes = BEMHelper('c-background-image');

var BackgroundImage = function BackgroundImage(_ref) {
  var images = _ref.images,
      showOverlay = _ref.showOverlay;
  return React.createElement(
    'div',
    classes('', showOverlay),
    images && images.map(function (image) {
      return image.types.map(function (type) {
        return React.createElement('div', _extends({
          key: '' + image.url + type
        }, classes('background', type), {
          style: { backgroundImage: 'url(' + image.url + ')' }
        }));
      });
    })
  );
};

BackgroundImage.propTypes = {
  showOverlay: PropTypes.bool,
  className: PropTypes.string,
  images: PropTypes.arrayOf(PropTypes.shape({
    url: PropTypes.string.isRequired,
    types: PropTypes.arrayOf(PropTypes.oneOf(Object.keys(breakpoints))).isRequired
  })).isRequired
};

BackgroundImage.defaultProps = {
  showOverlay: false
};

export default BackgroundImage;