react-mapfilter/es5/components/FeatureDetail/MediaCarousel.js

These components are designed for viewing data in Mapeo. They share a common interface:

'use strict';

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

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

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _styles = require('@material-ui/core/styles');

var _IconButton = require('@material-ui/core/IconButton');

var _IconButton2 = _interopRequireDefault(_IconButton);

var _NavigateNext = require('@material-ui/icons/NavigateNext');

var _NavigateNext2 = _interopRequireDefault(_NavigateNext);

var _NavigateBefore = require('@material-ui/icons/NavigateBefore');

var _NavigateBefore2 = _interopRequireDefault(_NavigateBefore);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _Image = require('../Image');

var _Image2 = _interopRequireDefault(_Image);

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

var _Carousel2 = _interopRequireDefault(_Carousel);

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

var styles = {
  root: {
    position: 'relative',
    height: '100%',
    padding: '67% 0 0 0'
  },
  img: {
    width: '100%',
    height: '100%',
    top: 0,
    left: 0,
    position: 'absolute',
    objectFit: 'cover',
    transform: 'translate3d(0,0,0)'
  },
  widget: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    width: '100%',
    display: 'flex'
  },
  nextPrevWidget: {
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  dotsWidget: {
    alignItems: 'flex-end',
    justifyContent: 'center'
  },
  button: {
    color: 'white',
    zIndex: 400
  },
  dot: {
    zIndex: 400,
    width: '8px',
    height: '8px',
    borderRadius: '50%',
    backgroundColor: 'rgba(255,255,255,0.5)',
    margin: '10px 4px'
  },
  dotHighlight: {
    backgroundColor: 'rgba(255,255,255,1)'
  }
};

var NextPrevButtons = function NextPrevButtons(_ref) {
  var index = _ref.index,
      total = _ref.total,
      prevHandler = _ref.prevHandler,
      nextHandler = _ref.nextHandler,
      classes = _ref.classes,
      loop = _ref.loop;

  if (total < 2) return null;
  var showNext = total > 1 && (!!loop || index < total - 1);
  var showPrev = total > 1 && (!!loop || index > 0);
  return _react2.default.createElement(
    'div',
    { className: (0, _classnames2.default)(classes.widget, classes.nextPrevWidget) },
    _react2.default.createElement(
      'div',
      null,
      showPrev && _react2.default.createElement(
        _IconButton2.default,
        { onClick: prevHandler, className: classes.button },
        _react2.default.createElement(_NavigateBefore2.default, null)
      )
    ),
    _react2.default.createElement(
      'div',
      null,
      showNext && _react2.default.createElement(
        _IconButton2.default,
        { onClick: nextHandler, className: classes.button },
        _react2.default.createElement(_NavigateNext2.default, null)
      )
    )
  );
};

var Dots = function Dots(_ref2) {
  var index = _ref2.index,
      total = _ref2.total,
      prevHandler = _ref2.prevHandler,
      nextHandler = _ref2.nextHandler,
      classes = _ref2.classes,
      loop = _ref2.loop;
  return total > 1 && _react2.default.createElement(
    'div',
    { className: (0, _classnames2.default)(classes.widget, classes.dotsWidget) },
    Array(total).fill().map(function (_, i) {
      return _react2.default.createElement('div', { key: i, className: (0, _classnames2.default)(classes.dot, (0, _defineProperty3.default)({}, classes.dotHighlight, index === i)) });
    })
  );
};

var withStylesNextPrevButtons = (0, _styles.withStyles)(styles)(NextPrevButtons);
var withStylesDots = (0, _styles.withStyles)(styles)(Dots);

var MediaCarousel = function MediaCarousel(_ref3) {
  var media = _ref3.media,
      classes = _ref3.classes;
  return _react2.default.createElement(
    _Carousel2.default,
    {
      className: classes.root,
      widgets: [withStylesNextPrevButtons, withStylesDots],
      duration: 500,
      loop: true },
    media.map(function (m, i) {
      return _react2.default.createElement(_Image2.default, { key: i, className: classes.img, src: m.value });
    })
  );
};

MediaCarousel.propTypes = {
  media: _propTypes2.default.array,
  classes: _propTypes2.default.object.isRequired
};

MediaCarousel.defaultProps = {
  media: []
};

exports.default = (0, _styles.withStyles)(styles)(MediaCarousel);
//# sourceMappingURL=MediaCarousel.js.map