Merge pull request #5 from wojtekmaj/change/support-objects-as-parame…

…ters Change/support objects as parameters
wojtekmaj · Nov 12, 2016 · d4fe476 · d4fe476
2 parents c1d0688 + f468cde
commit d4fe476
Show file tree

Hide file tree

Showing 6 changed files with 190 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -1,24 +1,32 @@
-react-pdf
-=========
+# React-PDF
+Easily display PDF files in your React application.
 
-What is react-PDF?
-----
-
-A component for displaying PDF files using [pdf.js](http://mozilla.github.io/pdf.js).
-
-Demo
------
+## tl;dr
+* Install by executing `npm install --save react-pdf`.
+* Import by addding `import ReactPDF from 'react-pdf'`
+* Use by adding `<ReactPDF file="..." />`. `file` can be an URL, base64 content, Uint8Array, and more.
 
+## Demo
 Demo page is included in sample directory.
 
 [Online demo](http://projekty.wojtekmaj.pl/react-pdf/) is also available!
 
-Usage
------
+## Getting started
+### Prerequisites
+
+You'll need to have Node >= 4 on your machine.
+
+We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.
+
+Your project needs to use React 15.0.0 or later.
+
+### Installation
 
-Install with `npm install --save react-pdf`
+Add React-PDF to your project by executing `npm install --save react-pdf`.
 
-Use in your app:
+### Usage
+
+Here's an example of basic usage:
 
 ```js
 import ReactPDF from 'react-pdf';
@@ -48,16 +56,32 @@ class MyApp extends React.Component {
 }
 ```
 
-Check the sample drectory of this repository for a full working example.
+Check the sample directory of this repository for a full working example.
 
-License
--------
+## User guide
 
-The MIT License
+### Props
+
+|Prop name|Description|Example of usage|
+|----|----|----|
+|file|Defines what PDF should be displayed.<br />Its value can be an URL, a file (imported using `import ... from ...` or from file input form element), or an object with parameters (`url` - URL; `data` - data, preferably Uint8Array; `range` - PDFDataRangeTransport; `httpHeaders` - custom request headers, e.g. for authorization).|<ul><li>URL:<br />`file="http://example.com/sample.pdf"`</li><li>File:<br />`import sample from '../static/sample.pdf'` and then<br />`file={sample}`</li><li>Parameter object:<br />`file={{ url: 'http://example.com/sample.pdf', httpHeaders: { 'X-CustomHeader': '40359820958024350238508234' }}}`</ul>|
+|loading|Defines what the component should display while loading. Defaults to "Loading PDF…".|<ul><li>String:<br />`loading="Please wait!"`</li><li>React element:<Br />`loading={<div>Please wait!</div>}`</li><li>Function:<Br />`loading={this.renderLoader()}`</li></ul>|
+|error|Defines what the component should display in case of an error. Defaults to "Failed to load PDF file.".|<ul><li>String:<br />`error="An error occurred!"`</li><li>React element:<Br />`error={<div>An error occurred!</div>}`</li><li>Function:<Br />`error={this.renderError()}`</li></ul>|
+|pageIndex|Defines which page from PDF file should be displayed. Defaults to 0.|`pageIndex={2}`|
+|scale|Defines the scale in which PDF file should be rendered. Defaults to 1.0.|`scale={0.5}`|
+|onDocumentLoad|Function called when the document is successfully loaded to the memory.|`onDocumentLoad={({ total }) => alert('Loaded a file with ' + total + ' pages!')}`|
+|onDocumentError|Function called in case of an error while loading a document.||
+|onPageLoad|Function called when the page is successfully loaded to the memory.|`onPageLoad={({ pageIndex, pageNumber }) => alert('Now displaying a page number ' + pageNumber + '!')}`|
+|onPageRender|Function called when the page is successfully rendered on the screen.|`onPageLoad={() => alert('Rendered the page!')}`|
+|onPageError|Function called in case of an error while rendering a page.||
 
-Author
-------
+## License
+
+The MIT License
 
-Wojciech Maj <[email protected]>
+## Author
+Wojciech Maj<br />
+<[email protected]><br />
+[wojtekmaj.pl](http://wojtekmaj.pl)
 
-Based on an awesome work of Niklas Närhinen <[email protected]>
+This project wouldn't be possible without awesome work of Niklas Närhinen <[email protected]> who created its initial version and without Mozilla, author of [pdf.js](http://mozilla.github.io/pdf.js). Thank you!
diff --git a/es5/react-pdf.js b/es5/react-pdf.js
@@ -76,6 +76,8 @@ var ReactPDF = function (_Component) {
             if (_this.props.onPageRender && typeof _this.props.onPageLoad === 'function') {
                 _this.props.onPageRender();
             }
+        }, _this.isParameterObject = function (object) {
+            return (typeof object === 'undefined' ? 'undefined' : _typeof(object)) === 'object' && (object.url || object.data || object.range);
         }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
@@ -87,8 +89,16 @@ var ReactPDF = function (_Component) {
     }, {
         key: 'componentWillReceiveProps',
         value: function componentWillReceiveProps(newProps) {
-            if (newProps.file && newProps.file !== this.props.file) {
+            if (this.isParameterObject(newProps.file)) {
+                // File is a parameter object
+                if (newProps.file.url !== this.props.file.url || newProps.file.data !== this.props.file.data || newProps.file.range !== this.props.file.range) {
+                    this.handleFileLoad(newProps);
+                    return;
+                }
+            } else if (newProps.file && newProps.file !== this.props.file) {
+                // File is a normal object or not an object at all
                 this.handleFileLoad(newProps);
+                return;
             }
 
             if (this.state.pdf && typeof newProps.pageIndex !== 'undefined' && newProps.pageIndex !== this.props.pageIndex) {
@@ -116,6 +126,15 @@ var ReactPDF = function (_Component) {
                 page: null
             });
 
+            // File is a string
+            if (typeof file === 'string') {
+                if (window.location.protocol === 'file:') {
+                    console.warn('Loading PDF as base64 strings/URLs might not work on protocols other than HTTP/HTTPS. On Google Chrome, you can use --allow-file-access-from-files flag for debugging purposes.');
+                }
+                this.loadDocument(file);
+                return;
+            }
+
             // File is a file
             if (file instanceof File) {
                 var _ret2 = function () {
@@ -134,21 +153,26 @@ var ReactPDF = function (_Component) {
                 if ((typeof _ret2 === 'undefined' ? 'undefined' : _typeof(_ret2)) === "object") return _ret2.v;
             }
 
-            // File is a string
-            if (typeof file === 'string') {
-                if (window.location.protocol === 'file:') {
-                    console.warn('Loading PDF as base64 strings/URLs might not work on protocols other than HTTP/HTTPS.');
+            // File is a Uint8Array object or parameter object
+            if ((typeof file === 'undefined' ? 'undefined' : _typeof(file)) === 'object') {
+                if (this.isParameterObject(file)) {
+                    // File is a parameter object
+                    // Prevent from modifying props
+                    file = Object.assign({}, file);
                 }
+
                 this.loadDocument(file);
                 return;
             }
 
-            throw new Error('File is neither a File nor a string with base64/URL.');
+            throw new Error('Unrecognized input type.');
         }
     }, {
         key: 'loadDocument',
-        value: function loadDocument(source) {
-            PDFJS.getDocument(source).then(this.onDocumentLoad).catch(this.onDocumentError);
+        value: function loadDocument() {
+            var _PDFJS;
+
+            (_PDFJS = PDFJS).getDocument.apply(_PDFJS, arguments).then(this.onDocumentLoad).catch(this.onDocumentError);
         }
     }, {
         key: 'loadPage',
@@ -241,9 +265,13 @@ ReactPDF.defaultProps = {
 };
 
 ReactPDF.propTypes = {
-    content: _react.PropTypes.string,
     error: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
-    file: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object]),
+    file: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.instanceOf(File), _react.PropTypes.shape({
+        url: _react.PropTypes.string,
+        data: _react.PropTypes.object,
+        range: _react.PropTypes.object,
+        httpHeaders: _react.PropTypes.object
+    })]),
     loading: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
     onDocumentError: _react.PropTypes.func,
     onDocumentLoad: _react.PropTypes.func,

diff --git a/package.json b/package.json
@@ -5,10 +5,12 @@
   "main": "es5/react-pdf.js",
   "es6": "src/react-pdf.jsx",
   "scripts": {
-    "build": "babel src -d es5",
+    "build": "npm run build-source && npm run build-sample",
     "build-sample": "webpack",
+    "build-source": "babel src -d es5",
+    "prepublish": "npm run build && npm run build-sample",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "prepublish": "npm run build && npm run build-sample"
+    "watch": "webpack --watch"
   },
   "keywords": [
     "pdf",

diff --git a/sample/sample.js b/sample/sample.js
@@ -21667,6 +21667,8 @@
 	            if (_this.props.onPageRender && typeof _this.props.onPageLoad === 'function') {
 	                _this.props.onPageRender();
 	            }
+	        }, _this.isParameterObject = function (object) {
+	            return (typeof object === 'undefined' ? 'undefined' : _typeof(object)) === 'object' && (object.url || object.data || object.range);
 	        }, _temp), _possibleConstructorReturn(_this, _ret);
 	    }
 
@@ -21678,8 +21680,16 @@
 	    }, {
 	        key: 'componentWillReceiveProps',
 	        value: function componentWillReceiveProps(newProps) {
-	            if (newProps.file && newProps.file !== this.props.file) {
+	            if (this.isParameterObject(newProps.file)) {
+	                // File is a parameter object
+	                if (newProps.file.url !== this.props.file.url || newProps.file.data !== this.props.file.data || newProps.file.range !== this.props.file.range) {
+	                    this.handleFileLoad(newProps);
+	                    return;
+	                }
+	            } else if (newProps.file && newProps.file !== this.props.file) {
+	                // File is a normal object or not an object at all
 	                this.handleFileLoad(newProps);
+	                return;
 	            }
 
 	            if (this.state.pdf && typeof newProps.pageIndex !== 'undefined' && newProps.pageIndex !== this.props.pageIndex) {
@@ -21707,6 +21717,15 @@
 	                page: null
 	            });
 
+	            // File is a string
+	            if (typeof file === 'string') {
+	                if (window.location.protocol === 'file:') {
+	                    console.warn('Loading PDF as base64 strings/URLs might not work on protocols other than HTTP/HTTPS. On Google Chrome, you can use --allow-file-access-from-files flag for debugging purposes.');
+	                }
+	                this.loadDocument(file);
+	                return;
+	            }
+
 	            // File is a file
 	            if (file instanceof File) {
 	                var _ret2 = function () {
@@ -21725,21 +21744,26 @@
 	                if ((typeof _ret2 === 'undefined' ? 'undefined' : _typeof(_ret2)) === "object") return _ret2.v;
 	            }
 
-	            // File is a string
-	            if (typeof file === 'string') {
-	                if (window.location.protocol === 'file:') {
-	                    console.warn('Loading PDF as base64 strings/URLs might not work on protocols other than HTTP/HTTPS.');
+	            // File is a Uint8Array object or parameter object
+	            if ((typeof file === 'undefined' ? 'undefined' : _typeof(file)) === 'object') {
+	                if (this.isParameterObject(file)) {
+	                    // File is a parameter object
+	                    // Prevent from modifying props
+	                    file = Object.assign({}, file);
 	                }
+
 	                this.loadDocument(file);
 	                return;
 	            }
 
-	            throw new Error('File is neither a File nor a string with base64/URL.');
+	            throw new Error('Unrecognized input type.');
 	        }
 	    }, {
 	        key: 'loadDocument',
-	        value: function loadDocument(source) {
-	            PDFJS.getDocument(source).then(this.onDocumentLoad).catch(this.onDocumentError);
+	        value: function loadDocument() {
+	            var _PDFJS;
+
+	            (_PDFJS = PDFJS).getDocument.apply(_PDFJS, arguments).then(this.onDocumentLoad).catch(this.onDocumentError);
 	        }
 	    }, {
 	        key: 'loadPage',
@@ -21832,9 +21856,13 @@
 	};
 
 	ReactPDF.propTypes = {
-	    content: _react.PropTypes.string,
 	    error: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
-	    file: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object]),
+	    file: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.instanceOf(File), _react.PropTypes.shape({
+	        url: _react.PropTypes.string,
+	        data: _react.PropTypes.object,
+	        range: _react.PropTypes.object,
+	        httpHeaders: _react.PropTypes.object
+	    })]),
 	    loading: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
 	    onDocumentError: _react.PropTypes.func,
 	    onDocumentLoad: _react.PropTypes.func,

diff --git a/sample/sample.js.map b/sample/sample.js.map