react-mapfilter/commonjs/ReportView/ReportViewContent.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");

require("core-js/modules/es.function.name");

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

exports.default = void 0;

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

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

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

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

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

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

var _reactVirtualized = require("react-virtualized");

var _ReportPageContent = _interopRequireDefault(require("./ReportPageContent"));

var _ReportPaper = _interopRequireDefault(require("./ReportPaper"));

var _MapViewContent = _interopRequireDefault(require("../MapView/MapViewContent"));

var _dom = require("../utils/dom");

var _helpers = require("../utils/helpers");

// @flow
// import ReportFeature from './ReportFeature'
var BORDER_SIZE = 0.5 * (0, _dom.inch)();

var noop = function noop() {};

var ReportViewContent = function ReportViewContent(_ref) {
  var observations = _ref.observations,
      _ref$onClick = _ref.onClick,
      _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
      onMapMove = _ref.onMapMove,
      initialMapPosition = _ref.initialMapPosition,
      _ref$getPreset = _ref.getPreset,
      getPreset = _ref$getPreset === void 0 ? _helpers.defaultGetPreset : _ref$getPreset,
      getMedia = _ref.getMedia,
      _ref$paperSize = _ref.paperSize,
      paperSize = _ref$paperSize === void 0 ? 'a4' : _ref$paperSize,
      _ref$print = _ref.print,
      print = _ref$print === void 0 ? false : _ref$print,
      mapboxAccessToken = _ref.mapboxAccessToken,
      mapStyle = _ref.mapStyle;

  var classes = useStyles();

  var _useState = (0, _react.useState)(),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      mapPosition = _useState2[0],
      setMapPosition = _useState2[1];

  var scrollbarWidth = (0, _react.useMemo)(function () {
    return (0, _getScrollbarWidth.default)();
  }, []);

  var cacheRef = _react.default.useRef(new _reactVirtualized.CellMeasurerCache({
    fixedWidth: true,
    minHeight: 200
  }));

  var cache = cacheRef.current;
  var paperWidthPx = paperSize === 'a4' ? 21 * (0, _dom.cm)() : 8.5 * (0, _dom.inch)();

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

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

  function renderMapPage() {
    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
        key = _ref3.key;

    return /*#__PURE__*/_react.default.createElement(_ReportPaper.default, {
      key: key,
      paperSize: paperSize,
      classes: {
        content: classes.paperContentMap
      }
    }, /*#__PURE__*/_react.default.createElement(_MapViewContent.default, {
      mapStyle: mapStyle,
      onClick: noop,
      getPreset: getPreset,
      observations: observations,
      getMedia: getMedia,
      initialMapPosition: initialMapPosition || mapPosition,
      onMapMove: onMapMove || setMapPosition,
      mapboxAccessToken: mapboxAccessToken,
      print: true
    }));
  }

  function renderFeaturePage(_ref4) {
    var _context;

    var index = _ref4.index,
        key = _ref4.key;
    var observation = observations[index];
    var coords = typeof observation.lon === 'number' && typeof observation.lat === 'number' ? {
      longitude: observation.lon,
      latitude: observation.lat
    } : undefined;
    var createdAt = typeof observation.created_at === 'string' ? new Date(observation.created_at) : undefined;
    var preset = getPreset(observation) || {};
    var fields = (0, _concat.default)(_context = preset.fields).call(_context, preset.additionalFields);
    return /*#__PURE__*/_react.default.createElement(_ReportPaper.default, {
      key: key,
      paperSize: paperSize,
      onClick: function onClick() {
        return _onClick(observation.id);
      }
    }, /*#__PURE__*/_react.default.createElement(_ReportPageContent.default, {
      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.default.createElement(_reactVirtualized.AutoSizer, null, function (_ref5) {
      var height = _ref5.height,
          width = _ref5.width;
      return /*#__PURE__*/_react.default.createElement(_reactVirtualized.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.default.createElement(_react.default.Fragment, null, renderMapPage(), (0, _map.default)(observations).call(observations, function (_, index) {
      return renderFeaturePage({
        index: index,
        key: index + ''
      });
    }));
  }

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

var _default = ReportViewContent;
exports.default = _default;
var useStyles = (0, _styles.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