react-mapfilter/esm/ObservationDialog/MediaCarousel.js

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

import "core-js/modules/es.array.iterator";
import "core-js/modules/web.dom-collections.iterator";
import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/fill";
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
// @flow
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
import NavigateNextIcon from '@material-ui/icons/NavigateNext';
import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
import clsx from 'clsx';
import SwipeableViews from 'react-swipeable-views';
import AutoSizer from 'react-virtualized-auto-sizer';
const 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)'
  }
};
const useStyles = makeStyles(styles);

const NextPrevButtons = ({
  index,
  total,
  onChangeIndex
}) => {
  const cx = useStyles();
  if (total <= 1) return null;
  const showNext = total > 1 && index < total - 1;
  const showPrev = total > 1 && index > 0;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: cx.buttonPrevContainer
  }, showPrev && /*#__PURE__*/React.createElement(IconButton, {
    onClick: () => onChangeIndex(index - 1),
    className: cx.button
  }, /*#__PURE__*/React.createElement(NavigateBeforeIcon, null))), /*#__PURE__*/React.createElement("div", {
    className: cx.buttonNextContainer
  }, showNext && /*#__PURE__*/React.createElement(IconButton, {
    onClick: () => onChangeIndex(index + 1),
    className: cx.button
  }, /*#__PURE__*/React.createElement(NavigateNextIcon, null))));
};

const Dots = ({
  index,
  total,
  onChangeIndex
}
/*: {
  index: number,
  total: number,
  onChangeIndex: (index: number) => any
}*/
) => {
  var _context, _context2;

  const cx = useStyles();
  if (total <= 1) return null;
  return /*#__PURE__*/React.createElement("div", {
    className: cx.dotsWidget
  }, _mapInstanceProperty(_context = _fillInstanceProperty(_context2 = Array(total)).call(_context2)).call(_context, (_, i) => /*#__PURE__*/React.createElement("div", {
    key: i,
    role: "button",
    className: clsx(cx.dot, {
      [cx.dotHighlight]: index === i
    }),
    onClick: () => onChangeIndex(i)
  })));
};

const MediaItem = ({
  src,
  type,
  width,
  height
}
/*: {
  src: string,
  type: 'image',
  width: number,
  height: number
}*/
) => /*#__PURE__*/React.createElement("div", {
  style: {
    width,
    height,
    position: 'relative'
  }
}, /*#__PURE__*/React.createElement("img", {
  style: {
    width,
    height,
    objectFit: 'contain',
    display: 'block'
  },
  src: src
}));

const MediaCarousel = ({
  items,
  style,
  initialIndex,
  className
}
/*: {
  /** Array of media items to show, only type=`image` is currently supported *-/
  items: Array<{ type: 'image', src: string }>,
  style?: {},
  /** Initial index of image to show *-/
  initialIndex?: number,
  className?: string
}*/
) => {
  const [index, setIndex] = useState( // Initially display the *last* image unless initialIndex is set
  initialIndex === undefined ? items.length - 1 : initialIndex);
  const cx = useStyles();
  return /*#__PURE__*/React.createElement("div", {
    style: style,
    className: clsx(cx.container, className)
  }, /*#__PURE__*/React.createElement(AutoSizer, {
    style: {
      width: '100%',
      height: '100%'
    }
  }, ({
    width,
    height
  }) => /*#__PURE__*/React.createElement(SwipeableViews, {
    enableMouseEvents: true,
    index: index,
    onChangeIndex: setIndex
  }, _mapInstanceProperty(items).call(items, ({
    src,
    type
  }, idx) => /*#__PURE__*/React.createElement(MediaItem, {
    key: idx,
    src: src,
    type: type,
    width: width,
    height: height
  })))), /*#__PURE__*/React.createElement(Dots, {
    index: index,
    total: items.length,
    onChangeIndex: setIndex
  }), /*#__PURE__*/React.createElement(NextPrevButtons, {
    index: index,
    total: items.length,
    onChangeIndex: setIndex
  }));
};

export default MediaCarousel;
//# sourceMappingURL=MediaCarousel.js.map