ndla-ui/es/Subject/SubjectCarousel.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';

import ContentCard from '../ContentCard';
import { SubjectSectionTitle } from './Subject';
import Carousel from '../Carousel';

var classes = BEMHelper('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 React.createElement(
      'div',
      { key: 'slide-' + subject.id },
      React.createElement(ContentCard, {
        toLinkProps: subject.toLinkProps,
        heading: subject.title,
        description: subject.text,
        isFilm: subject.isFilm,
        type: subject.type,
        images: [{
          url: subject.image,
          types: Object.keys(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 React.createElement(
    'section',
    classes('', modifiers),
    React.createElement(
      SubjectSectionTitle,
      null,
      title
    ),
    React.createElement(
      Carousel,
      _extends({}, classes('slider'), { settings: settings }),
      slides
    )
  );
};

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

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

export default SubjectCarousel;