react-mapfilter/commonjs/MediaView/ImageGrid.js

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

"use strict";

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

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

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

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

exports.default = void 0;

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

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

var _reactWindow = require("react-window");

var _getScrollbarWidth = _interopRequireDefault(require("get-scrollbar-width"));

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

// @flow
var useStyles = (0, _styles.makeStyles)({
  image: {
    border: '1px solid white',
    boxSizing: 'border-box',
    display: 'block',
    height: '100%',
    objectFit: 'cover',
    width: '100%',
    cursor: 'pointer',
    backgroundColor: 'rgb(240, 240, 240)'
  }
});
/*:: type Props = {
  /** Array of image attachments to render. Each attachment should have an id
   * and and observationId, which points to the parent observation *-/
  images: Array<{
    index: number,
    src: string,
    observationId: $ElementType<Observation, 'id'>
  }>,
  /** Called with id of observation clicked and index of the attachment clicked *-/
  onImageClick: (observationId: string, index?: number) => void,
  /** Optional default size for grid items *-/
  defaultSize?: number
}*/

/**
 * Renders a grid of images
 */
var ImageGrid = function ImageGrid(_ref) {
  var images = _ref.images,
      onImageClick = _ref.onImageClick,
      _ref$defaultSize = _ref.defaultSize,
      defaultSize = _ref$defaultSize === void 0 ? 200 : _ref$defaultSize;
  var scrollbarWidth = (0, _react.useMemo)(function () {
    return (0, _getScrollbarWidth.default)();
  }, []);
  var classes = useStyles();
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      width: '100%',
      height: '100%',
      position: 'absolute'
    }
  }, /*#__PURE__*/_react.default.createElement(_reactVirtualizedAutoSizer.default, null, function (_ref2) {
    var height = _ref2.height,
        width = _ref2.width;
    var columnsCount = Math.floor(width / defaultSize);
    var rowsCount = Math.ceil(images.length / columnsCount);
    var cellSize = width / columnsCount;
    var overflow = cellSize * rowsCount > height;

    if (overflow && scrollbarWidth) {
      cellSize = (width - scrollbarWidth) / columnsCount;
    }

    return /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeGrid, {
      columnCount: columnsCount,
      columnWidth: cellSize,
      height: height,
      rowCount: rowsCount,
      rowHeight: cellSize,
      width: width
    }, function (_ref3) {
      var columnIndex = _ref3.columnIndex,
          rowIndex = _ref3.rowIndex,
          style = _ref3.style;
      var image = images[rowIndex * columnsCount + columnIndex];
      if (!image) return null;
      return /*#__PURE__*/_react.default.createElement("img", {
        key: rowIndex * columnsCount + columnIndex,
        src: image.src,
        className: classes.image,
        style: style,
        onClick: function onClick() {
          return onImageClick(image.observationId, image.index);
        }
      });
    });
  }));
};

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