fix: print dialog using react-pdf

Author: okdistribute

src/ReportView/PrintButton.js

@@ -2,10 +2,6 @@
 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'
@@ -33,15 +29,7 @@ type Props = {
   paperSize: PaperSize
 }
 
-type State = {
-  dialogOpen: boolean
-}
-
 class PrintButton extends React.Component<Props, State> {
-  state = {
-    dialogOpen: false
-  }
-
   handleKeyDown = (event: SyntheticKeyboardEvent<HTMLElement>) => {
     if (!(event.key === 'p' && event.metaKey)) return
     event.preventDefault()
@@ -50,70 +38,22 @@ class PrintButton extends React.Component<Props, State> {
 
   handleKeyUp = (event: SyntheticKeyboardEvent<HTMLElement>) => {
     window.removeEventListener('keyup', this.handleKeyUp)
-    if (this.state.dialogOpen) {
-      this.props.requestPrint()
-    } else {
-      this.openDialog()
-    }
+    this.props.requestPrint()
   }
 
-  openDialog = () => this.setState({ dialogOpen: true })
-
-  closeDialog = () => this.setState({ dialogOpen: false })
-
   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 (
       <React.Fragment>
         <ToolbarButton onClick={this.openDialog}>
           <PrintIcon />
           <FormattedMessage {...messages.print} />
         </ToolbarButton>
-        <Dialog
-          open={dialogOpen}
-          onClose={this.closeDialog}
-          fullWidth
-          maxWidth="xs"
-          className="d-print-none">
-          <DialogTitle>
-            <FormattedMessage {...messages.dialogTitle} />
-          </DialogTitle>
-          <DialogContent>
-            <FormControl>
-              <InputLabel htmlFor="paper-size">
-                <FormattedMessage {...messages.paperSize} />
-              </InputLabel>
-              <Select
-                native
-                value={paperSize}
-                onChange={this.handleChangePaperSize}
-                input={<Input id="paper-size" />}>
-                <option value="a4">A4 (210mm x 297mm)</option>
-                <option value="letter">Letter (8.5&quot; x 11&quot;)</option>
-              </Select>
-            </FormControl>
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={this.closeDialog} color="primary">
-              <FormattedMessage {...messages.close} />
-            </Button>
-            <Button
-              onClick={() => {
-                this.closeDialog()
-                requestPrint()
-              }}
-              color="primary">
-              <FormattedMessage {...messages.print} />
-            </Button>
-          </DialogActions>
-        </Dialog>
       </React.Fragment>
     )
   }

src/ReportView/ReportView.js

@@ -3,6 +3,10 @@ import React, { useState, useLayoutEffect, useMemo } from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 import { PDFViewer } from '@react-pdf/renderer'
 
+import {
+  PDFDownloadLink
+} from '@react-pdf/renderer'
+
 import ReportViewPDF, {
   type ReportViewPDFProps
 } from '../ReportViewPDF/ReportView'
@@ -101,28 +105,31 @@ const ReportView = ({
             )
           }
         }
+
+        var PDF = () => <ReportViewPDF
+          observations={filteredObservations}
+          getPreset={getPresetWithFilteredFields}
+          getMedia={getMedia}
+          paperSize={paperSize}
+          print={print}
+          {...otherProps}
+        />
+
         return (
           <div className={cx.root}>
             <Toolbar>
-              <PrintButton
-                requestPrint={() => setPrint(true)}
-                changePaperSize={newSize => setPaperSize(newSize)}
-                paperSize={paperSize}
-              />
+              <PDFDownloadLink
+                document={<PDF />}
+                filename={Date.now() + ".pdf"}>
+                  {({ blob, url, loading, error }) =>  !loading && <PrintButton />}
+              </PDFDownloadLink>
               <HideFieldsButton
                 fieldState={fieldState}
                 onFieldStateUpdate={setFieldState}
               />
             </Toolbar>
             <PDFViewer width="100%" height="100%">
-              <ReportViewPDF
-                observations={filteredObservations}
-                getPreset={getPresetWithFilteredFields}
-                getMedia={getMedia}
-                paperSize={paperSize}
-                print={print}
-                {...otherProps}
-              />
+              <PDF />
             </PDFViewer>
           </div>
         )

src/ReportViewPDF/ReportView.js

@@ -198,7 +198,9 @@ export default ReportViewPDF
 const styles = StyleSheet.create({
   page: {
     backgroundColor: 'white',
-    padding: '15mm',
+    paddingTop: 65,
+    paddingBottom: 35,
+    paddingHorizontal: 35,
     flexDirection: 'row'
   },
   pageContent: {
@@ -269,5 +271,7 @@ const styles = StyleSheet.create({
   },
   fieldValue: {
     fontSize: 12
+  },
+  header: {
   }
 })