backpack-ui/dist/components/tallCarousel/index.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

var _defineProperty2 = require("babel-runtime/helpers/defineProperty");

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _mediaQueries;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _reactSlick = require("react-slick");

var _reactSlick2 = _interopRequireDefault(_reactSlick);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _mq = require("../../styles/mq");

var _mq2 = _interopRequireDefault(_mq);

var _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

var _typography = require("../../styles/typography");

var _zIndex = require("../../styles/zIndex");

var _zIndex2 = _interopRequireDefault(_zIndex);

var _color = require("../../utils/color");

var _paginatorButton = require("../paginatorButton");

var _paginatorButton2 = _interopRequireDefault(_paginatorButton);

var _slideTall = require("../slideTall");

var _slideTall2 = _interopRequireDefault(_slideTall);

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

var styles = {
  width: "120%",
  marginLeft: "-17%",
  ".TallCarousel-slide": {
    display: "block",
    color: _colors2.default.bgPrimary,
    maxHeight: "520px",
    height: "69vw",
    position: "relative"
  },
  ".TallCarousel-slide > div": {
    width: "99%",
    margin: "0 auto"
  },
  ".TallCarousel-slide p": {
    position: "absolute",
    fontWeight: _typography.fontWeightMedium,
    letterSpacing: "-0.08px",
    fontSize: "12px",
    bottom: "16px",
    left: "16px"
  },
  ".slick-list": {
    overflow: "visible"
  },
  mediaQueries: (_mediaQueries = {}, (0, _defineProperty3.default)(_mediaQueries, "(min-width: " + _mq2.default.min[600] + ")", {
    marginLeft: " -10%",
    ".TallCarousel-slide": {
      height: "50vw"
    }
  }), (0, _defineProperty3.default)(_mediaQueries, "(max-width: " + _mq2.default.max[840] + ")", {
    overflow: "hidden"
  }), (0, _defineProperty3.default)(_mediaQueries, "(min-width: " + _mq2.default.min[840] + ")", {
    width: "100%",
    marginLeft: "0",
    ".TallCarousel-slide": {
      height: "38vw"
    },
    ".TallCarousel-slide > div": {
      width: "100%",
      margin: "initial"
    },
    ".TallCarousel-slide p": {
      fontSize: "16px",
      bottom: "24px",
      left: "32px"
    },
    ".slick-list": {
      overflow: "hidden",
      padding: "60px 0 110px",
      marginTop: "-60px",
      marginBottom: "-110px"
    },
    ".slick-slide": {
      boxShadow: "none",
      zIndex: _zIndex2.default.middle,
      transition: "box-shadow " + _timing2.default.default + " ease, transform " + _timing2.default.default + " ease, z-index " + _timing2.default.default + " ease"
    },
    ".PaginatorButton": {
      zIndex: _zIndex2.default.top,
      color: _colors2.default.bgDark
    },
    ".PaginatorButton svg": {
      position: "relative",
      left: "-10px",
      top: "-5px"
    },
    ".slick-slide:hover": {
      zIndex: _zIndex2.default.top - 1,
      transform: "scale(1.03)",
      boxShadow: "0px 28px 81px -7px rgba(" + (0, _color.rgb)(_colors2.default.shadowPrimary) + ", 0.44)"
    }
  }), _mediaQueries)
};

var TallCarousel = function TallCarousel(_ref) {
  var slides = _ref.slides,
      settings = _ref.settings,
      customSettings = _ref.customSettings;

  var renderPaginator = function renderPaginator(direction) {
    return _react2.default.createElement(_paginatorButton2.default, {
      direction: direction,
      align: "vertical",
      offset: true
    });
  };

  return _react2.default.createElement(
    "div",
    { className: "TallCarousel" },
    _react2.default.createElement(_radium.Style, {
      scopeSelector: ".TallCarousel",
      rules: styles
    }),
    _react2.default.createElement(
      _reactSlick2.default,
      (0, _extends3.default)({}, settings, customSettings, {
        prevArrow: renderPaginator("left"),
        nextArrow: renderPaginator("right")
      }),
      slides.map(_slideTall2.default)
    )
  );
};

TallCarousel.propTypes = {
  slides: _propTypes2.default.arrayOf(_propTypes2.default.object),
  settings: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.bool, _propTypes2.default.object, _propTypes2.default.array])),
  customSettings: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.bool, _propTypes2.default.object, _propTypes2.default.array]))
};

TallCarousel.defaultProps = {
  // React Slick settings
  settings: {
    accessibility: true,
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 4,
    initialSlide: 0,
    centerMode: false,
    arrows: true,
    responsive: [{
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        initialSlide: 1,
        centerMode: true,
        arrows: false,
        infinite: true,
        draggable: true
      }
    }, {
      breakpoint: 840,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        initialSlide: 1,
        centerMode: true,
        arrows: false,
        infinite: true,
        draggable: true
      }
    }]
  }
};

exports.default = (0, _radium2.default)(TallCarousel);