react-mapfilter/esm/MediaView/MediaViewContent.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 _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
// @flow
import React, { useMemo } from 'react';
import ImageGrid from './ImageGrid';
import { isImageAttachment } from '../utils/helpers';
/*:: import type { CommonViewContentProps } from '../types'*/

/**
 * Displays a grid of all photos attached to observations.
 */
const MediaViewContent = ({
  observations,
  onClick,
  getMedia
}
/*: CommonViewContentProps*/
) => {
  const images = useMemo(() => {
    const images = [];

    const sortedObservations = _sortInstanceProperty(observations).call(observations, (a, b) => {
      return a.created_at > b.created_at ? -1 : a.created_at < b.created_at ? 1 : 0;
    });

    for (const obs of sortedObservations) {
      const attachments = obs.attachments || [];

      for (let i = 0; i < attachments.length; i++) {
        // Only return attachments with images
        if (!isImageAttachment(attachments[i])) continue; // check we can actually get an image src for each one before adding it

        const media = getMedia(attachments[i], {
          width: 200,
          height: 200
        });
        if (media) images.push({
          index: i,
          src: media.src,
          observationId: obs.id
        });
      }
    }

    return images;
  }, [observations, getMedia]);
  return /*#__PURE__*/React.createElement(ImageGrid, {
    images: images,
    onImageClick: onClick
  });
};

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