react-mapfilter/commonjs/ReportView/ReportPaper.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 _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));

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

var _insertCss = _interopRequireDefault(require("insert-css"));

var _clsx = _interopRequireDefault(require("clsx"));

// @flow
var useStyles = (0, _styles.makeStyles)({
  container: {
    padding: 20,
    pageBreakAfter: 'always',
    position: 'relative',
    '@media only print': {
      padding: 0
    },
    '&:last-child': {
      pageBreakAfter: 'avoid !important'
    },
    boxSizing: 'border-box'
  },
  paper: {
    position: 'relative',
    overflow: 'hidden',
    // backgroundColor: 'rgb(245,245,245)',
    '@media only print': {
      boxShadow: 'none !important',
      borderRadius: '0 !important',
      margin: 0,
      overflow: 'auto',
      '&:after': {
        display: 'none'
      }
    },
    '&:after': {
      // Hides the page-break <hr> if it appears within the bottom-margin
      content: "''",
      position: 'absolute',
      backgroundColor: 'rgb(255,255,255)',
      width: '100%',
      height: '0.5in',
      bottom: 0
    }
  },
  pageBreak: {
    position: 'absolute',
    left: 0,
    width: '100%',
    border: 'none',
    margin: 0,
    borderBottom: '3px dashed rgba(200,200,200, 0.75)',
    '@media only print': {
      display: 'none'
    }
  },
  content: {
    position: 'relative',
    margin: '0.5in',
    backgroundColor: 'white',
    '@media only print': {
      margin: 0,
      outline: 'none'
    }
  },
  letter: {
    '&$paper': {
      minWidth: '8.5in',
      maxWidth: '8.5in',
      '@media only print': {
        /* for some reason we need to substract 2px for a perfect fit */
        width: 'calc(8.5in - 1in - 2px)',
        minWidth: 'calc(8.5in - 1in - 2px)',
        maxWidth: 'calc(8.5in - 1in - 2px)'
      }
    },
    '& $pageBreak': {
      top: '10.5in'
    },
    '&$content': {
      minHeight: '10in',
      '@media only print': {
        minHeight: 'calc(11in - 1in - 2px)'
      }
    }
  },
  a4: {
    '&$paper': {
      minWidth: '210mm',
      maxWidth: '210mm',
      '@media only print': {
        /* for some reason we need to substract 2px for a perfect fit */
        width: 'calc(210mm - 1in - 2px)',
        minWidth: 'calc(210mm - 1in - 2px)',
        maxWidth: 'calc(210mm - 1in - 2px)'
      }
    },
    '& $pageBreak': {
      top: 'calc(297mm - 0.5in)'
    },
    '&$content': {
      minHeight: 'calc(297mm - 1in)',
      '@media only print': {
        minHeight: 'calc(297mm - 1in - 2px)'
      }
    }
  },
  '@global': {
    '@media only print': {
      body: {
        margin: 0,
        padding: 0
      }
    }
  }
});
/*:: type Props = {
  // Called when page is clicked
  onClick?: (event: SyntheticMouseEvent<HTMLElement>) => void,
  paperSize: 'a4' | 'letter',
  children: React.Node,
  style?: Object,
  classes?: Object
}*/

var ReportPaper = function ReportPaper(_ref) {
  var onClick = _ref.onClick,
      paperSize = _ref.paperSize,
      children = _ref.children,
      style = _ref.style,
      _ref$classes = _ref.classes,
      classes = _ref$classes === void 0 ? {} : _ref$classes;
  var cx = useStyles(); // This is global to the app - we add this once for every time the paper size
  // changes, but only once. CSS header will grow, but should be ok unless the
  // user changes paper size hundreds of times without reloading the appp

  React.useMemo(function () {
    return (0, _insertCss.default)("@page {margin: 0.5in; size: ".concat(paperSize, ";}"));
  }, [paperSize]);
  return /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)(cx.container, classes.container),
    style: style
  }, /*#__PURE__*/React.createElement(_Paper.default, {
    className: (0, _clsx.default)(cx.paper, cx[paperSize], classes.paper),
    style: onClick ? {
      cursor: 'pointer'
    } : null,
    onClick: onClick,
    elevation: 1
  }, /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)(cx.content, cx[paperSize], classes.content)
  }, children), /*#__PURE__*/React.createElement("hr", {
    className: cx.pageBreak
  })));
};

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