react-mapfilter/esm/ReportView/ReportViewContent.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 _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
// @flow
import React, { useState, useMemo } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import getScrollBarWidth from 'get-scrollbar-width';
import { AutoSizer, List, CellMeasurer, CellMeasurerCache } from 'react-virtualized';
/*:: import type { Observation } from 'mapeo-schema'*/

// import ReportFeature from './ReportFeature'
import ReportPageContent from './ReportPageContent';
import ReportPaper from './ReportPaper';
import MapView from '../MapView/MapViewContent';
import { cm, inch } from '../utils/dom';
import { getLastImage, defaultGetPreset } from '../utils/helpers';
/*:: import type { PaperSize, CameraOptions, CommonViewContentProps } from '../types'*/

/*:: export type ReportViewContentProps = {
  /** Called with
   * [CameraOptions](https://docs.mapbox.com/mapbox-gl-js/api/#cameraoptions)
   * with properties `center`, `zoom`, `bearing`, `pitch` *-/
  onMapMove?: CameraOptions => any,
  /** Initial position of the map - an object with properties `center`, `zoom`,
   * `bearing`, `pitch`. If this is not set then the map will by default zoom to
   * the bounds of the observations. If you are going to unmount and re-mount
   * this component (e.g. within tabs) then you will want to use onMove to store
   * the position in state, and pass it as initialPosition for when the map
   * re-mounts. *-/
  initialMapPosition?: $Shape<CameraOptions>,
  /** Mapbox access token *-/
  mapboxAccessToken: string,
  /** Mapbox style url *-/
  mapStyle?: any
}*/

/*:: type Props = {
  ...$Exact<ReportViewContentProps>,
  ...$Exact<CommonViewContentProps>,
  /** Paper size for report *-/
  paperSize?: PaperSize,
  /** Render for printing (for screen display only visible observations are
   * rendered, for performance reasons) *-/
  print?: boolean
}*/

const BORDER_SIZE = 0.5 * inch();

const noop = () => {};

const ReportViewContent = ({
  observations,
  onClick = () => {},
  onMapMove,
  initialMapPosition,
  getPreset = defaultGetPreset,
  getMedia,
  paperSize = 'a4',
  print = false,
  mapboxAccessToken,
  mapStyle
}
/*: Props*/
) => {
  const classes = useStyles();
  const [mapPosition, setMapPosition] = useState();
  const scrollbarWidth = useMemo(() => getScrollBarWidth(), []);
  const cacheRef = React.useRef(new CellMeasurerCache({
    fixedWidth: true,
    minHeight: 200
  }));
  const cache = cacheRef.current;
  const paperWidthPx = paperSize === 'a4' ? 21 * cm() : 8.5 * inch();

  function getLastImageUrl(observation
  /*: Observation*/
  )
  /*: string | void*/
  {
    const lastImageAttachment = getLastImage(observation);
    if (!lastImageAttachment) return;
    const media = getMedia(lastImageAttachment, {
      width: paperWidthPx - 2 * BORDER_SIZE,
      height: paperWidthPx - 2 * BORDER_SIZE
    });
    if (media) return media.src;
  }

  function renderPage({
    index,
    key,
    style,
    parent
  }) {
    return /*#__PURE__*/React.createElement(CellMeasurer, {
      cache: cache,
      columnIndex: 0,
      key: key,
      parent: parent,
      rowIndex: index
    }, /*#__PURE__*/React.createElement("div", {
      style: style
    }, index === 0 ? renderMapPage({
      index,
      key
    }) : renderFeaturePage({
      index: index - 1,
      key
    })));
  }

  function renderMapPage({
    key
  }
  /*: { key?: string }*/
  = {}) {
    return /*#__PURE__*/React.createElement(ReportPaper, {
      key: key,
      paperSize: paperSize,
      classes: {
        content: classes.paperContentMap
      }
    }, /*#__PURE__*/React.createElement(MapView, {
      mapStyle: mapStyle,
      onClick: noop,
      getPreset: getPreset,
      observations: observations,
      getMedia: getMedia,
      initialMapPosition: initialMapPosition || mapPosition,
      onMapMove: onMapMove || setMapPosition,
      mapboxAccessToken: mapboxAccessToken,
      print: true
    }));
  }

  function renderFeaturePage({
    index,
    key
  }
  /*: { index: number, key?: string }*/
  ) {
    var _context;

    const observation = observations[index];
    const coords = typeof observation.lon === 'number' && typeof observation.lat === 'number' ? {
      longitude: observation.lon,
      latitude: observation.lat
    } : undefined;
    const createdAt = typeof observation.created_at === 'string' ? new Date(observation.created_at) : undefined;
    const preset = getPreset(observation) || {};

    const fields = _concatInstanceProperty(_context = preset.fields).call(_context, preset.additionalFields);

    return /*#__PURE__*/React.createElement(ReportPaper, {
      key: key,
      paperSize: paperSize,
      onClick: () => onClick(observation.id)
    }, /*#__PURE__*/React.createElement(ReportPageContent, {
      name: typeof preset.name === 'string' ? preset.name : undefined,
      createdAt: createdAt,
      coords: coords,
      fields: fields,
      imageSrc: getLastImageUrl(observation),
      tags: observation.tags,
      paperSize: paperSize
    }));
  }

  function renderVirtualList() {
    return /*#__PURE__*/React.createElement(AutoSizer, null, ({
      height,
      width
    }) => /*#__PURE__*/React.createElement(List, {
      className: classes.reportWrapper + ' ' + classes[paperSize],
      containerStyle: {
        overflowX: 'scroll'
      },
      height: height,
      width: width,
      rowCount: observations.length + 1
      /* for additional map page */
      ,
      rowRenderer: renderPage,
      deferredMeasurementCache: cache,
      rowHeight: cache.rowHeight,
      overscanRowCount: 3,
      estimatedRowSize: 200
      /* paperSize === 'a4' ? 29.7 * cm() : 11 * inch()} */

    }));
  }

  function renderPrintList() {
    return /*#__PURE__*/React.createElement(React.Fragment, null, renderMapPage(), _mapInstanceProperty(observations).call(observations, (_, index) => renderFeaturePage({
      index,
      key: index + ''
    })));
  }

  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.scrollWrapper
  }, print ? renderPrintList() : renderVirtualList()));
};

export default ReportViewContent;
const useStyles = makeStyles({
  root: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: 'rgba(236, 236, 236, 1)',
    '@media only print': {
      width: 'auto',
      height: 'auto',
      position: 'static',
      backgroundColor: 'inherit',
      display: 'block'
    }
  },
  reportWrapper: {
    '@media only print': {
      padding: 0,
      minWidth: 'auto'
    }
  },
  paperContentMap: {
    display: 'flex'
  },
  letter: {
    '&$reportWrapper': {// minWidth: 8.5 * inch()
    }
  },
  a4: {
    '&$reportWrapper': {// minWidth: 21 * cm()
    }
  },
  scrollWrapper: {
    flex: '1 1 auto',
    overflow: 'hidden',
    '@media only print': {
      overflow: 'auto',
      flex: 'initial',
      position: 'static'
    }
  },
  '@global': {
    '@media only print': {
      tr: {
        pageBreakInside: 'avoid'
      },
      '.d-print-none': {
        display: 'none'
      },
      '.mapboxgl-ctrl-group, .mapboxgl-ctrl-attrib': {
        display: 'none'
      }
    }
  }
});
//# sourceMappingURL=ReportViewContent.js.map