react-mapfilter/esm/ReportView/ReportPageContent.js

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

// @flow
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import FeatureHeader from '../internal/FeatureHeader';
import Image from '../internal/Image';
import DetailsTable from './DetailsTable';
import { cm, inch } from '../utils/dom';
/*:: import type { Coordinates, Field, JSONObject, PaperSize } from '../types'*/

const useStyles = makeStyles({
  imageWrapper: {
    width: '100%',
    height: '12cm',
    borderTop: '1px solid rgb(224, 224, 224)'
  },
  notes: {
    borderBottom: '1px solid rgb(224, 224, 224)',
    paddingBottom: 16
  }
});
/*:: type Props = {|
  name?: string,
  iconLabel?: string,
  iconColor?: string,
  coords?: Coordinates,
  createdAt?: Date,
  imageSrc?: string,
  fields: Array<Field>,
  tags?: JSONObject,
  paperSize: PaperSize
|}*/

const ReportPageContent = ({
  name,
  iconLabel,
  iconColor,
  coords,
  createdAt,
  imageSrc,
  fields,
  tags,
  paperSize
}
/*: Props*/
) => {
  const cx = useStyles();
  const notes = tags && (tags.note || tags.notes);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FeatureHeader, {
    name: name,
    iconLabel: iconLabel,
    iconColor: iconColor,
    coords: coords,
    createdAt: createdAt
  }), imageSrc && /*#__PURE__*/React.createElement("div", {
    className: cx.imageWrapper
  }, /*#__PURE__*/React.createElement(Image, {
    style: {
      width: '100%',
      height: '12cm'
    },
    src: imageSrc
  })), notes && /*#__PURE__*/React.createElement(Typography, {
    className: cx.notes
  }, notes), tags && /*#__PURE__*/React.createElement(DetailsTable, {
    fields: fields,
    tags: tags,
    width: paperSize === 'a4' ? 21 * cm() - inch() : 7.5 * inch()
  }));
};

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