backpack-ui/dist/components/photoGallery/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 _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 _reactPhotoswipe = require("react-photoswipe");

var _styles = require("./styles");

var _styles2 = _interopRequireDefault(_styles);

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

function markup(htmlContent) {
  return {
    __html: htmlContent
  };
}

var uiOptions = {
  timeToIdle: 0,
  timeToIdleOutside: 0,
  closeEl: true,
  captionEl: true,
  fullscreenEl: false,
  zoomEl: false,
  shareEl: false,
  counterEl: false,
  arrowEl: true,
  preloaderEl: false
};

var PhotoGallery = function PhotoGallery(_ref) {
  var photos = _ref.photos,
      options = _ref.options,
      isOpen = _ref.isOpen,
      onClose = _ref.onClose,
      beforeChange = _ref.beforeChange,
      afterChange = _ref.afterChange,
      style = _ref.style;
  return _react2.default.createElement(
    "div",
    { className: "PhotoGallery", style: style },
    _react2.default.createElement("style", { dangerouslySetInnerHTML: markup(_styles2.default) }),
    _react2.default.createElement(_reactPhotoswipe.PhotoSwipe, {
      isOpen: isOpen,
      items: photos,
      options: (0, _extends3.default)({}, options, uiOptions),
      onClose: onClose,
      beforeChange: beforeChange,
      afterChange: afterChange
    })
  );
};

PhotoGallery.propTypes = {
  photos: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    src: _propTypes2.default.string,
    w: _propTypes2.default.number,
    h: _propTypes2.default.number,
    title: _propTypes2.default.string
  })).isRequired,
  options: _propTypes2.default.shape({
    index: _propTypes2.default.number,
    getThumbBoundsFn: _propTypes2.default.func,
    showHideOpacity: _propTypes2.default.bool,
    showAnimationDuration: _propTypes2.default.number,
    hideAnimationDuration: _propTypes2.default.number,
    bgOpacity: _propTypes2.default.number,
    spacing: _propTypes2.default.number,
    allowPanToNext: _propTypes2.default.bool,
    maxSpreadZoom: _propTypes2.default.number,
    getDoubleTapZoom: _propTypes2.default.func,
    loop: _propTypes2.default.bool,
    pinchToClose: _propTypes2.default.bool,
    closeOnScroll: _propTypes2.default.bool,
    closeOnVerticalDrag: _propTypes2.default.bool,
    mouseUsed: _propTypes2.default.bool,
    escKey: _propTypes2.default.bool,
    arrowKeys: _propTypes2.default.bool,
    history: _propTypes2.default.bool,
    galleryUID: _propTypes2.default.number,
    galleryPIDs: _propTypes2.default.bool,
    errorMsg: _propTypes2.default.string,
    preload: _propTypes2.default.arrayOf(_propTypes2.default.number),
    mainClass: _propTypes2.default.string,
    getNumItemsFn: _propTypes2.default.func,
    focus: _propTypes2.default.bool,
    isClickableElement: _propTypes2.default.func,
    modal: _propTypes2.default.bool
  }),
  isOpen: _propTypes2.default.bool,
  onClose: _propTypes2.default.func,
  beforeChange: _propTypes2.default.func,
  afterChange: _propTypes2.default.func,
  style: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.object]))
};

PhotoGallery.defaultProps = {
  options: {
    index: 0,
    showHideOpacity: false,
    showAnimationDuration: 333,
    hideAnimationDuration: 333,
    bgOpacity: 1,
    spacing: 0.12,
    allowPanToNext: true,
    maxSpreadZoom: 2,
    loop: true,
    pinchToClose: true,
    closeOnScroll: true,
    closeOnVerticalDrag: true,
    mouseUsed: false,
    escKey: true,
    arrowKeys: true,
    history: true,
    galleryUID: 1,
    galleryPIDs: false,
    preload: [1, 1],
    focus: true,
    modal: true
  },
  isOpen: false
};

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