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

Lonely Planet's Components

"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 _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

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

var _reactSlick2 = _interopRequireDefault(_reactSlick);

var _kebabCase = require("lodash/kebabCase");

var _kebabCase2 = _interopRequireDefault(_kebabCase);

var _settings = require("../../../settings.json");

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

var _paginatorButton2 = _interopRequireDefault(_paginatorButton);

var _expandButton = require("../expandButton");

var _expandButton2 = _interopRequireDefault(_expandButton);

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

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

var _ = { kebabCase: _kebabCase2.default };

var propTypes = {
  /**
   * Array of image paths
   */
  images: _react.PropTypes.array.isRequired,

  /**
   * Width and height of the image
   */
  imageSize: _react.PropTypes.array.isRequired,

  /**
   * Function called to go to the next slide; click handler is set via the
   * react-slick module
   * https://github.com/akiran/react-slick/blob/master/README.md#custom-nextprev-arrows
   */
  onNext: _react.PropTypes.func.isRequired,

  /**
   * Function called to go to the previous slide; click handler is set via the
   * react-slick module
   * https://github.com/akiran/react-slick/blob/master/README.md#custom-nextprev-arrows
   */
  onPrev: _react.PropTypes.func.isRequired,

  /**
   * Index of the starting slide; pass "null" to hide the buttonLabel
   */
  index: _react.PropTypes.number.isRequired,

  /**
   * Options for react-slick module
   * https://github.com/akiran/react-slick/blob/master/README.md
   */
  options: _react.PropTypes.object,

  /**
   * Function called to expand the full-screen gallery
   */
  onExpand: _react.PropTypes.func,

  /**
   * Callback function called before the current index changes
   */
  beforeChange: _react.PropTypes.func,

  /**
   * Callback function called after the current index changes
   */
  afterChange: _react.PropTypes.func,

  /**
   * Whether or not to hide prev and next buttons
   */
  hideNavigation: _react.PropTypes.bool
};

var defaultProps = {
  images: [],

  imageSize: [],

  onNext: function onNext() {},

  onPrev: function onPrev() {},

  index: 0,

  options: {
    dots: false,
    infinite: true,
    speed: 400,
    slidesToShow: 1,
    slidesToScroll: 1
  },

  onExpand: null,

  beforeChange: null,

  afterChange: null,

  hideNavigation: false
};

var styles = {
  container: {
    base: {
      backgroundColor: _settings.color.gray,
      position: "relative"
    }
  },

  image: {
    base: {
      display: "block",
      width: "100%"
    },

    hidden: {
      opacity: 0
    }
  },

  expandButton: {
    base: {
      bottom: "12px",
      position: "absolute",
      right: "12px"
    }
  },

  paginationLabel: {
    base: {
      backgroundColor: "rgba(" + (0, _color.rgb)(_settings.color.black) + ", .6)",
      borderRadius: "1em",
      color: _settings.color.white,
      display: "block",
      fontSize: "8px",
      fontWeight: 600,
      lineHeight: 1,
      padding: 5 / 8 + "em " + 7.5 / 8 + "em " + 3 / 8 + "em",
      width: "auto"
    }
  }
};

function ImageCarousel(_ref) {
  var images = _ref.images;
  var onNext = _ref.onNext;
  var onPrev = _ref.onPrev;
  var index = _ref.index;
  var options = _ref.options;
  var imageSize = _ref.imageSize;
  var onExpand = _ref.onExpand;
  var beforeChange = _ref.beforeChange;
  var afterChange = _ref.afterChange;
  var hideNavigation = _ref.hideNavigation;

  var buttonLabel = index !== null && images.length > 1 ? index + 1 + " / " + images.length : "";

  var parseImages = images.map(function (image) {
    return _react2.default.createElement(
      "div",
      { key: _.kebabCase(image) },
      _react2.default.createElement("div", {
        style: {
          backgroundImage: "url(" + image.replace(/ /g, "%20") + ")",
          backgroundPosition: "center",
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover",
          paddingBottom: imageSize[1] / imageSize[0] * 100 + "%",
          width: "100%"
        }
      })
    );
  }

  // in case we want to roll back to images instead of backgrounds

  // return (
  //   <img
  //     key={_.kebabCase(image)}
  //     src={image}
  //     alt=""
  //   />
  // );
  );

  return images.length > 1 && _react2.default.createElement(
    "div",
    {
      className: "ImageCarousel",
      style: styles.container.base
    },
    _react2.default.createElement(
      _reactSlick2.default,
      _extends({}, options, {
        beforeChange: beforeChange,
        afterChange: afterChange,
        prevArrow: !hideNavigation && _react2.default.createElement(_paginatorButton2.default, {
          direction: "left",
          align: "vertical",
          onClick: onPrev,
          offset: true
        }),
        nextArrow: !hideNavigation && _react2.default.createElement(_paginatorButton2.default, {
          direction: "right",
          align: "vertical",
          onClick: onNext,
          offset: true
        })
      }),
      parseImages
    ),
    onExpand && _react2.default.createElement(
      "div",
      {
        className: "ImageCarousel-expandButton",
        style: styles.expandButton.base
      },
      _react2.default.createElement(_expandButton2.default, {
        onClick: onExpand,
        label: buttonLabel
      })
    ),
    !onExpand && buttonLabel && _react2.default.createElement(
      "div",
      {
        className: "ImageCarousel-expandButton",
        style: styles.expandButton.base
      },
      _react2.default.createElement(
        "div",
        { style: styles.paginationLabel.base },
        buttonLabel
      )
    )
  );
}

ImageCarousel.propTypes = propTypes;
ImageCarousel.defaultProps = defaultProps;
ImageCarousel.displayName = "ImageCarousel";
ImageCarousel.styles = styles;

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