3.0.2

changelog.md

@@ -1,3 +1,7 @@
+3.0.2
+============================================
+- Added PdfView
+
 3.0.1
 ============================================
 - Fix SSR

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prisma-cms/boilerplate",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Opensource framework CMS powered by GraphQL, Prisma, MySQL, React & Apollo GraphQL",
   "private": false,
   "scripts": {
@@ -57,6 +57,7 @@
     "prisma-binding": "^2.1.6",
     "react-apollo": "^2.2.3",
     "react-number-format": "^4.0.6",
+    "react-pdf": "^4.0.5",
     "urijs": "^1.19.1",
     "xml-writer": "^1.7.0"
   },

src/components/Renderer/pages/Root/components/PdfView/index.js

@@ -0,0 +1,188 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+
+import EditorComponent from "@prisma-cms/front-editor/lib/components/App/components/";
+
+
+import { Document, Page } from 'react-pdf';
+import { Button } from 'material-ui';
+import { Typography } from 'material-ui';
+
+
+class PdfView extends EditorComponent {
+
+  static defaultProps = {
+    ...EditorComponent.defaultProps,
+    pages: 1,
+    page_width: 800,
+    scale: 1,
+    show_pages: true,
+    style: {
+      ...EditorComponent.defaultProps.style,
+      overflow: "auto",
+      maxWidth: 805,
+      marginLeft: "auto",
+      marginRight: "auto",
+    }
+  }
+
+  static Name = "PdfView"
+
+
+  constructor(props) {
+
+    super(props);
+
+    this.state = {
+      ...this.state,
+      numPages: null,
+      pageNumber: 1,
+      showAll: false,
+    }
+
+  }
+
+  onDocumentLoadSuccess(state) {
+
+    const {
+      numPages,
+    } = state;
+
+    this.setState({
+      numPages,
+    });
+  }
+
+  renderPanelView() {
+
+    const {
+      classes,
+    } = this.getEditorContext();
+
+    return super.renderPanelView(<div
+      className={classes.panelButton}
+    >
+      PdfView
+    </div>);
+  }
+
+
+  renderChildren() {
+
+    // return <MyApp />
+
+    const {
+      pageNumber,
+      numPages,
+      showAll,
+    } = this.state;
+
+    const {
+      pages,
+      src: file,
+      page_width,
+      scale,
+      show_pages,
+      ...other
+    } = this.getComponentProps(this);
+
+
+    const {
+      inEditMode,
+    } = this.getEditorContext();
+
+
+    if (!file) {
+
+      if (inEditMode) {
+        return <Typography
+          color="error"
+        >
+          src property required
+        </Typography>
+      }
+      else {
+        return null;
+      }
+
+    }
+
+
+    let pagesList = [];
+
+    if (pageNumber > 0) {
+
+      for (var i = pageNumber; i < numPages; i++) {
+
+        pagesList.push(<Page
+          key={i}
+          pageNumber={i}
+          {...this.getPageProps()}
+        />);
+
+        if (!showAll && pages > 0 && pagesList.length >= pages) {
+          break;
+        }
+
+      }
+
+    }
+
+    return <Fragment>
+
+      <Document
+        file={file}
+        onLoadSuccess={state => this.onDocumentLoadSuccess(state)}
+        {...this.getDocumentProps()}
+      >
+        {pagesList}
+      </Document>
+
+      {show_pages && !showAll ?
+        <div
+          style={{
+            textAlign: "center",
+          }}
+        >
+          Page {pageNumber} of {numPages}. <Button
+            size="small"
+            onClick={event => {
+              this.setState({
+                showAll: true,
+              });
+            }}
+          >
+            Show all
+          </Button>
+        </div>
+        : null
+      }
+
+    </Fragment>
+
+  }
+
+
+  getDocumentProps() {
+    return {};
+  }
+
+
+  getPageProps() {
+
+    const {
+      page_width: width,
+      scale,
+    } = this.getComponentProps(this);
+
+    return {
+      width,
+      scale,
+    }
+
+  }
+
+}
+
+export default PdfView;

src/components/Renderer/pages/Root/index.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import PrismaCmsComponent from "@prisma-cms/component";
 import RootConnector from '@prisma-cms/front-editor/lib/components/Root';
 import UserPage from './components/pages/Users/User';
+import PdfView from './components/PdfView';
 
 
 
@@ -19,6 +20,7 @@ class RootPage extends PrismaCmsComponent {
     return <RootConnector
       CustomComponents={CustomComponents.concat([
         UserPage,
+        PdfView,
       ])}
       {...other}
     />

src/setupProxy.js

@@ -7,6 +7,10 @@ const cwd = process.cwd();
 
 module.exports = function (app) {
 
+  app.get("/pdf.worker.js", (req, res, next) => {
+    res.sendFile(`${cwd}/node_modules/pdfjs-dist/build/pdf.worker.min.js`);
+  });
+
   app.get("/voyager.worker.js", (req, res, next) => {
     res.sendFile(`${cwd}/node_modules/@prisma-cms/graphql-voyager/dist/voyager.worker.js`);
   });