react-mapfilter/esm/ReportView/PrintButton.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 _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
// @flow
import React from 'react';
import PrintIcon from '@material-ui/icons/Print';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import InputLabel from '@material-ui/core/InputLabel';
import Input from '@material-ui/core/Input';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import { defineMessages, FormattedMessage } from 'react-intl';
import ToolbarButton from '../internal/ToolbarButton';
/*:: import type { PaperSize } from '../types'*/

const messages = defineMessages({
  // Title of print settings dialog
  dialogTitle: {
    "id": "Nl8clw==",
    "defaultMessage": 'Print settings'
  },
  // Label for paper size selection field
  paperSize: {
    "id": "0eDMPQ==",
    "defaultMessage": 'Paper size'
  },
  // Button label to close print settings dialog
  close: {
    "id": "cVJ0Dg==",
    "defaultMessage": 'Close'
  },
  // Button label to print a report
  print: {
    "id": "krWEbA==",
    "defaultMessage": 'Print'
  }
});
/*:: type Props = {
  requestPrint: () => void,
  changePaperSize: (paperSize: PaperSize) => void,
  paperSize: PaperSize
}*/

/*:: type State = {
  dialogOpen: boolean
}*/

class PrintButton extends React.Component
/*:: <Props, State>*/
{
  constructor(...args) {
    super(...args);

    _defineProperty(this, "state", {
      dialogOpen: false
    });

    _defineProperty(this, "handleKeyDown", (event
    /*: SyntheticKeyboardEvent<HTMLElement>*/
    ) => {
      if (!(event.key === 'p' && event.metaKey)) return;
      event.preventDefault();
      window.addEventListener('keyup', this.handleKeyUp);
    });

    _defineProperty(this, "handleKeyUp", (event
    /*: SyntheticKeyboardEvent<HTMLElement>*/
    ) => {
      window.removeEventListener('keyup', this.handleKeyUp);

      if (this.state.dialogOpen) {
        this.props.requestPrint();
      } else {
        this.openDialog();
      }
    });

    _defineProperty(this, "openDialog", () => this.setState({
      dialogOpen: true
    }));

    _defineProperty(this, "closeDialog", () => this.setState({
      dialogOpen: false
    }));

    _defineProperty(this, "handleChangePaperSize", (e
    /*: SyntheticInputEvent<HTMLSelectElement>*/
    ) => {
      // $FlowFixMe - Flow doesn't recognize value being one of options
      const value
      /*: PaperSize*/
      = e.currentTarget.value;
      this.props.changePaperSize(value);
    });
  }

  render() {
    const {
      requestPrint,
      paperSize
    } = this.props;
    const {
      dialogOpen
    } = this.state;
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarButton, {
      onClick: this.openDialog
    }, /*#__PURE__*/React.createElement(PrintIcon, null), /*#__PURE__*/React.createElement(FormattedMessage, messages.print)), /*#__PURE__*/React.createElement(Dialog, {
      open: dialogOpen,
      onClose: this.closeDialog,
      fullWidth: true,
      maxWidth: "xs",
      className: "d-print-none"
    }, /*#__PURE__*/React.createElement(DialogTitle, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.dialogTitle)), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(FormControl, null, /*#__PURE__*/React.createElement(InputLabel, {
      htmlFor: "paper-size"
    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.paperSize)), /*#__PURE__*/React.createElement(Select, {
      native: true,
      value: paperSize,
      onChange: this.handleChangePaperSize,
      input: /*#__PURE__*/React.createElement(Input, {
        id: "paper-size"
      })
    }, /*#__PURE__*/React.createElement("option", {
      value: "a4"
    }, "A4 (210mm x 297mm)"), /*#__PURE__*/React.createElement("option", {
      value: "letter"
    }, "Letter (8.5\" x 11\")")))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
      onClick: this.closeDialog,
      color: "primary"
    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.close)), /*#__PURE__*/React.createElement(Button, {
      onClick: () => {
        this.closeDialog();
        requestPrint();
      },
      color: "primary"
    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.print)))));
  }

}

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