implemented sleek way to handle generating PDFs

2 files changed, 50 insertions, 0 deletions

diff --git a/src/components/Menu/Menu.scss b/src/components/Menu/Menu.scss
index cf9f7aa..93d6c5e 100644
--- a/src/components/Menu/Menu.scss
+++ b/src/components/Menu/Menu.scss
@@ -23,3 +23,14 @@
 .InvoiceInfoMenu {
   width: 60%;
 }
+
+.PDFViewer {
+  height: 95%;
+  width: 95%;
+
+  position: fixed;
+  top: 0; bottom: 0;
+  left: 0; right: 0;
+  margin: auto;
+  z-index: 3;
+}
diff --git a/src/components/Menu/SubmitMenu.tsx b/src/components/Menu/SubmitMenu.tsx
new file mode 100644
index 0000000..599b181
--- /dev/null
+++ b/src/components/Menu/SubmitMenu.tsx
@@ -0,0 +1,39 @@
+/*
+ * OpenBills - Self hosted browser app to generate and keep track of simple invoices
+ * Version - 0
+ * Licensed under the MIT license - https://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2021 Vidhu Kant Sharma
+*/
+
+import React, { useState, Dispatch, SetStateAction } from "react";
+import { PDFViewer } from '@react-pdf/renderer';
+import PrintableDoc from "./../Print/PrintableDoc";
+
+interface Props {
+  setVisibility: Dispatch<SetStateAction<boolean>> // this component's visibility
+}
+
+const TransportForm: React.FC<Props> = (props) => {
+  const [showPDF, setShowPDF] = useState<boolean>(false);
+  const hideSelf = () =>
+    props.setVisibility(false);
+
+  const closeOnBGClicked = (event: any) =>
+    event.target.className === "floatingMenuBG" && hideSelf();
+
+  return (
+    <div className={"floatingMenuBG"} onClick={closeOnBGClicked}>
+      {showPDF &&
+        <PDFViewer className={"PDFViewer"}>
+          <PrintableDoc/>
+        </PDFViewer>
+      }
+      <div className={"smallFloatingMenu TransportForm"} /*onSubmit={handleSubmit}*/>
+        <button onClick={() => setShowPDF(true)}>Generate PDF</button>
+      </div>
+    </div>
+  );
+}
+
+export default TransportForm;