react-mapfilter/commonjs/ObservationDialog/MediaCarousel.js

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));

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

var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));

var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));

var _react = _interopRequireWildcard(require("react"));

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

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

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

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

var _clsx2 = _interopRequireDefault(require("clsx"));

var _reactSwipeableViews = _interopRequireDefault(require("react-swipeable-views"));

var _reactVirtualizedAutoSizer = _interopRequireDefault(require("react-virtualized-auto-sizer"));

// @flow
var styles = {
  container: {
    backgroundColor: 'black',
    position: 'relative'
  },
  widget: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    width: '100%',
    display: 'flex'
  },
  buttonPrevContainer: {
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    display: 'flex',
    alignItems: 'center',
    pointerEvents: 'none'
  },
  buttonNextContainer: {
    position: 'absolute',
    right: 0,
    top: 0,
    bottom: 0,
    display: 'flex',
    alignItems: 'center',
    pointerEvents: 'none'
  },
  dotsWidget: {
    position: 'absolute',
    bottom: 0,
    width: '100%',
    display: 'flex',
    alignItems: 'flex-end',
    justifyContent: 'center',
    marginBottom: 6,
    pointerEvents: 'none'
  },
  button: {
    color: 'white',
    zIndex: 400,
    pointerEvents: 'auto',
    '&:hover': {
      cursor: 'pointer',
      backgroundColor: 'rgba(0, 0, 0, 0.35)'
    }
  },
  dot: {
    zIndex: 400,
    width: '12px',
    height: '12px',
    borderRadius: '50%',
    backgroundClip: 'content-box',
    border: 'solid 4px transparent',
    backgroundColor: 'rgba(255,255,255,0.5)',
    pointerEvents: 'auto',
    '&:hover': {
      cursor: 'pointer'
    }
  },
  dotHighlight: {
    backgroundColor: 'rgba(255,255,255,1)'
  }
};
var useStyles = (0, _styles.makeStyles)(styles);

var NextPrevButtons = function NextPrevButtons(_ref) {
  var index = _ref.index,
      total = _ref.total,
      onChangeIndex = _ref.onChangeIndex;
  var cx = useStyles();
  if (total <= 1) return null;
  var showNext = total > 1 && index < total - 1;
  var showPrev = total > 1 && index > 0;
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: cx.buttonPrevContainer
  }, showPrev && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
    onClick: function onClick() {
      return onChangeIndex(index - 1);
    },
    className: cx.button
  }, /*#__PURE__*/_react.default.createElement(_NavigateBefore.default, null))), /*#__PURE__*/_react.default.createElement("div", {
    className: cx.buttonNextContainer
  }, showNext && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
    onClick: function onClick() {
      return onChangeIndex(index + 1);
    },
    className: cx.button
  }, /*#__PURE__*/_react.default.createElement(_NavigateNext.default, null))));
};

var Dots = function Dots(_ref2) {
  var _context, _context2;

  var index = _ref2.index,
      total = _ref2.total,
      onChangeIndex = _ref2.onChangeIndex;
  var cx = useStyles();
  if (total <= 1) return null;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: cx.dotsWidget
  }, (0, _map.default)(_context = (0, _fill.default)(_context2 = Array(total)).call(_context2)).call(_context, function (_, i) {
    return /*#__PURE__*/_react.default.createElement("div", {
      key: i,
      role: "button",
      className: (0, _clsx2.default)(cx.dot, (0, _defineProperty2.default)({}, cx.dotHighlight, index === i)),
      onClick: function onClick() {
        return onChangeIndex(i);
      }
    });
  }));
};

var MediaItem = function MediaItem(_ref3) {
  var src = _ref3.src,
      type = _ref3.type,
      width = _ref3.width,
      height = _ref3.height;
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      width: width,
      height: height,
      position: 'relative'
    }
  }, /*#__PURE__*/_react.default.createElement("img", {
    style: {
      width: width,
      height: height,
      objectFit: 'contain',
      display: 'block'
    },
    src: src
  }));
};

var MediaCarousel = function MediaCarousel(_ref4) {
  var items = _ref4.items,
      style = _ref4.style,
      initialIndex = _ref4.initialIndex,
      className = _ref4.className;

  var _useState = (0, _react.useState)( // Initially display the *last* image unless initialIndex is set
  initialIndex === undefined ? items.length - 1 : initialIndex),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      index = _useState2[0],
      setIndex = _useState2[1];

  var cx = useStyles();
  return /*#__PURE__*/_react.default.createElement("div", {
    style: style,
    className: (0, _clsx2.default)(cx.container, className)
  }, /*#__PURE__*/_react.default.createElement(_reactVirtualizedAutoSizer.default, {
    style: {
      width: '100%',
      height: '100%'
    }
  }, function (_ref5) {
    var width = _ref5.width,
        height = _ref5.height;
    return /*#__PURE__*/_react.default.createElement(_reactSwipeableViews.default, {
      enableMouseEvents: true,
      index: index,
      onChangeIndex: setIndex
    }, (0, _map.default)(items).call(items, function (_ref6, idx) {
      var src = _ref6.src,
          type = _ref6.type;
      return /*#__PURE__*/_react.default.createElement(MediaItem, {
        key: idx,
        src: src,
        type: type,
        width: width,
        height: height
      });
    }));
  }), /*#__PURE__*/_react.default.createElement(Dots, {
    index: index,
    total: items.length,
    onChangeIndex: setIndex
  }), /*#__PURE__*/_react.default.createElement(NextPrevButtons, {
    index: index,
    total: items.length,
    onChangeIndex: setIndex
  }));
};

var _default = MediaCarousel;
exports.default = _default;
//# sourceMappingURL=MediaCarousel.js.map