ndla-ui/lib/Subject/SubjectCarousel.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);

var _reactBemHelper = require('react-bem-helper');

var _reactBemHelper2 = _interopRequireDefault(_reactBemHelper);

var _ndlaUtil = require('ndla-util');

var _ContentCard = require('../ContentCard');

var _ContentCard2 = _interopRequireDefault(_ContentCard);

var _Subject = require('./Subject');

var _Carousel = require('../Carousel');

var _Carousel2 = _interopRequireDefault(_Carousel);

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

var classes = (0, _reactBemHelper2.default)('c-subject-carousel');

var getSettings = function getSettings() {
  var maxCol = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
  return {
    slidesToShow: 5.5,
    slidesToScroll: 4,
    responsive: [{
      breakpoint: 3000,
      settings: { slidesToShow: maxCol || 7.5, slidesToScroll: 4 }
    }, {
      breakpoint: 1800,
      settings: {
        slidesToShow: maxCol && maxCol < 6 ? maxCol : 5.5,
        slidesToScroll: 4
      }
    }, {
      breakpoint: 1200,
      settings: {
        slidesToShow: maxCol && maxCol === 4 ? maxCol : 4.25,
        slidesToScroll: 3
      }
    }, {
      breakpoint: 1000,
      settings: { slidesToShow: 3.25, slidesToScroll: 3 }
    }, {
      breakpoint: 720,
      settings: { slidesToShow: 2.5, slidesToScroll: 2 }
    }, {
      breakpoint: 600,
      settings: { slidesToShow: 3.25, slidesToScroll: 2 }
    }, {
      breakpoint: 400,
      settings: { slidesToShow: 2.25, slidesToScroll: 2 }
    }]
  };
};

var SubjectCarousel = function SubjectCarousel(_ref) {
  var subjects = _ref.subjects,
      title = _ref.title,
      narrowScreen = _ref.narrowScreen,
      wideScreen = _ref.wideScreen;

  var slides = subjects.map(function (subject) {
    return _react2.default.createElement(
      'div',
      { key: 'slide-' + subject.id },
      _react2.default.createElement(_ContentCard2.default, {
        toLinkProps: subject.toLinkProps,
        heading: subject.title,
        description: subject.text,
        isFilm: subject.isFilm,
        type: subject.type,
        images: [{
          url: subject.image,
          types: Object.keys(_ndlaUtil.breakpoints)
        }]
      })
    );
  });

  var modifiers = { narrowScreen: narrowScreen, wideScreen: wideScreen };
  var settings = getSettings();

  if (wideScreen) {
    if (slides.length <= 4) {
      modifiers.center = true;
      settings = getSettings(4);
    } else if (slides.length === 5) {
      modifiers.center5Col = true;
      settings = getSettings(5);
    } else if (slides.length === 6) {
      settings = getSettings(6);
    }
  }

  return _react2.default.createElement(
    'section',
    classes('', modifiers),
    _react2.default.createElement(
      _Subject.SubjectSectionTitle,
      null,
      title
    ),
    _react2.default.createElement(
      _Carousel2.default,
      _extends({}, classes('slider'), { settings: settings }),
      slides
    )
  );
};

SubjectCarousel.propTypes = {
  subjects: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    id: _propTypes2.default.string.isRequired,
    title: _propTypes2.default.string.isRequired,
    text: _propTypes2.default.string.isRequired,
    image: _propTypes2.default.string,
    toLinkProps: _propTypes2.default.func.isRequired
  })),
  title: _propTypes2.default.string,
  narrowScreen: _propTypes2.default.bool,
  wideScreen: _propTypes2.default.bool
};

SubjectCarousel.defaultProps = {
  subjects: [],
  title: '',
  narrowScreen: false,
  wideScreen: false
};

exports.default = SubjectCarousel;