chore upgrade react-pdf deps

xcarpentier · Jan 6, 2020 · 3a98375 · 3a98375
1 parent fe03ecd
commit 3a98375
Show file tree

Hide file tree

Showing 15 changed files with 200 additions and 402 deletions.
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
   "devDependencies": {
     "@types/js-base64": "2.3.1",
     "@types/react": "16.9.17",
+    "@types/react-dom": "16.9.4",
     "@types/react-native": "0.60.28",
     "babel-preset-expo": "^8.0.0",
     "crypto": "1.0.1",

diff --git a/react-pdf/.babelrc b/react-pdf/.babelrc
@@ -1,16 +1,15 @@
 {
   "presets": [
     [
-      "env",
+      "@babel/env",
       {
         "modules": false
       }
     ],
-    "stage-2",
-    "react"
+    "@babel/react"
   ],
   "plugins": [
-    "transform-runtime",
-    "transform-class-properties"
+    ["@babel/plugin-transform-runtime", { "corejs": 2 }],
+    "@babel/plugin-proposal-class-properties"
   ]
 }
diff --git a/react-pdf/Reader.jsx → react-pdf/Reader.tsx b/react-pdf/Reader.jsx → react-pdf/Reader.tsx
@@ -1,24 +1,39 @@
-import React, { Component } from 'react'
+import * as React from 'react'
 import { render } from 'react-dom'
-import { Page, setOptions, Document } from 'react-pdf'
+import { Page, Document, pdfjs } from 'react-pdf'
 import raf, { cancel } from 'raf'
+import Down from './components/down'
 import Plus from './components/Plus'
 import Minus from './components/Minus'
-import Down from './components/down'
 import Up from './components/up'
 import './Reader.less'
 
 const ReactContainer = document.querySelector('#react-container')
 
-setOptions({
-  workerSrc:
-    'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.305/pdf.worker.min.js',
-  disableWorker: false,
-  cMapUrl: 'https://github.com/mozilla/pdfjs-dist/raw/master/cmaps/',
+const PDFJS = pdfjs as any
+
+PDFJS.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDFJS.version}/pdf.worker.js`
+const options = {
+  cMapUrl: `//cdn.jsdelivr.net/npm/pdfjs-dist@${PDFJS.version}/cmaps/`,
   cMapPacked: true,
-})
+}
+
+interface State {
+  numPages?: number
+  currentPage: number
+  ready: boolean
+  pageLoaded: boolean
+  pageRendered: boolean
+  getText: boolean
+  scale: number
+  cached?: boolean
+}
 
-class Reader extends Component {
+interface Props {
+  file: any
+}
+
+class Reader extends React.Component<Props, State> {
   state = {
     numPages: null,
     currentPage: 1,
@@ -32,7 +47,9 @@ class Reader extends Component {
   MAX_SCALE = 2
   __zoomEvent = false
 
-  pageRefs = new Map()
+  pageRefs = new Map<number, any>()
+  pageImages = new Map<number, any>()
+  _doc: any
 
   onDocumentLoadSuccess = ({ numPages }) => {
     this.setState({ numPages })
@@ -41,9 +58,9 @@ class Reader extends Component {
   onError = error =>
     window.alert('Error while loading document! \n' + error.message)
 
-  cache = pageKey => {
-    if (!this.pageImgs.has(pageKey)) {
-      this.pageImgs.set(
+  cache = (pageKey: number) => {
+    if (!this.pageImages.has(pageKey)) {
+      this.pageImages.set(
         pageKey,
         this.pageRefs.get(pageKey).children[0].toDataURL('image/png'),
       )
@@ -65,7 +82,6 @@ class Reader extends Component {
   }
 
   zOut = () => {
-    console.log(this.state.scale)
     if (this.state.scale >= 0.75) {
       // min scale out is 0.5 and defaults @ 0.75
       this.__zoomEvent = true
@@ -76,7 +92,6 @@ class Reader extends Component {
   }
 
   zIn = () => {
-    console.log(this.state.scale)
     if (this.state.scale <= this.MAX_SCALE - 0.25) {
       this.__zoomEvent = true
       this.setState(previousState => ({
@@ -90,14 +105,15 @@ class Reader extends Component {
     if (currentPage > 1) {
       const target = currentPage - 1
       this.setState({ currentPage: target })
-      if (!this.pageImgs.has(target)) {
+      if (!this.pageImages.has(target)) {
         this.setState({
           pageLoaded: false,
           pageRendered: false,
           getText: false,
         })
       }
     }
+    // @ts-ignore
     cancel(this.up)
   }
 
@@ -106,14 +122,15 @@ class Reader extends Component {
     if (currentPage < numPages) {
       const target = currentPage + 1
       this.setState({ currentPage: target })
-      if (!this.pageImgs.has(target)) {
+      if (!this.pageImages.has(target)) {
         this.setState({
           pageLoaded: false,
           pageRendered: false,
           getText: false,
         })
       }
     }
+    // @ts-ignore
     cancel(this.down)
   }
 
@@ -127,22 +144,8 @@ class Reader extends Component {
     raf(this.down)
   }
 
-  renderLoader = () => (
-    <div
-      style={{
-        width: window.innerWidth,
-        height: window.innerHeight,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <p style={{ color: '#fff' }}>Loading...</p>
-    </div>
-  )
-
   renderImage = pageNumber => (
-    <img src={this.pageImgs.get(pageNumber)} style={{ width: '100%' }} />
+    <img src={this.pageImages.get(pageNumber)} style={{ width: '100%' }} />
   )
 
   onPageReadyToCache = pageStatus => {
@@ -166,7 +169,6 @@ class Reader extends Component {
         pageNumber={pageNumber}
         onLoadError={this.onError}
         onRenderError={this.onError}
-        renderAnnotations={false}
         onGetTextError={this.onError}
         onRenderSuccess={() => this.onPageReadyToCache({ pageRendered: true })}
         onGetTextSuccess={() => this.onPageReadyToCache({ getText: true })}
@@ -176,43 +178,41 @@ class Reader extends Component {
   }
 
   render() {
-    const { numPages, currentPage, cached, ready } = this.state
-    const { file } = this.props
+    const { numPages, currentPage } = this.state
     return (
-      <div className="Reader">
-        <div className="Reader__container">
-          <div className="Reader__container__document">
+      <div className='Reader'>
+        <div className='Reader__container'>
+          <div className='Reader__container__document'>
             <Document
               loading={' '}
               inputRef={ref => (this._doc = ref)}
               file={file}
               onLoadSuccess={this.onDocumentLoadSuccess}
               onLoadError={this.onError}
               onSourceError={this.onError}
+              {...{ options }}
             >
               {this.renderPage(currentPage)}
             </Document>
           </div>
 
-          {!cached && this.renderLoader()}
-
           {numPages && (
-            <div className="Reader__container__numbers">
-              <div className="Reader__container__numbers__content">
+            <div className='Reader__container__numbers'>
+              <div className='Reader__container__numbers__content'>
                 {currentPage} / {numPages}
               </div>
             </div>
           )}
 
-          <div className="Reader__container__zoom_container">
+          <div className='Reader__container__zoom_container'>
             <div
-              className="Reader__container__zoom_container__button"
+              className='Reader__container__zoom_container__button'
               onClick={this.zoomIn}
             >
               <Plus />
             </div>
             <div
-              className="Reader__container__zoom_container__button"
+              className='Reader__container__zoom_container__button'
               onClick={this.zoomOut}
             >
               <Minus />
@@ -221,7 +221,7 @@ class Reader extends Component {
 
           <div className={'Reader__container__navigate'}>
             <div
-              className="Reader__container__navigate__arrow"
+              className='Reader__container__navigate__arrow'
               style={
                 currentPage === 1 ? { color: 'rgba(255,255,255,0.2)' } : {}
               }
@@ -230,7 +230,7 @@ class Reader extends Component {
               <Up />
             </div>
             <div
-              className="Reader__container__navigate__arrow"
+              className='Reader__container__navigate__arrow'
               style={
                 currentPage === numPages
                   ? { color: 'rgba(255,255,255,0.2)' }

diff --git a/react-pdf/components/Minus.jsx b/react-pdf/components/Minus.jsx
diff --git a/react-pdf/components/Minus.tsx b/react-pdf/components/Minus.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+export default () => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    fill='none'
+    stroke='currentColor'
+    strokeWidth='2'
+    strokeLinecap='round'
+    strokeLinejoin='round'
+    className=''
+  >
+    <line x1='5' y1='12' x2='19' y2='12' />
+  </svg>
+)
diff --git a/react-pdf/components/Plus.jsx b/react-pdf/components/Plus.jsx
diff --git a/react-pdf/components/Plus.tsx b/react-pdf/components/Plus.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+export default () => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    fill='none'
+    stroke='currentColor'
+    strokeWidth='2'
+    strokeLinecap='round'
+    strokeLinejoin='round'
+    className=''
+  >
+    <polyline points='5 12 19 12' />
+    <polyline points='12 5 12 19' />
+  </svg>
+)
diff --git a/react-pdf/components/down.js b/react-pdf/components/down.js
diff --git a/react-pdf/components/down.tsx b/react-pdf/components/down.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+export default () => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    fill='none'
+    stroke='currentColor'
+    strokeWidth='2'
+    strokeLinecap='round'
+    strokeLinejoin='round'
+    className='feather feather-arrow-down'
+  >
+    <line x1='12' y1='5' x2='12' y2='19' />
+    <polyline points='19 12 12 19 5 12' />
+  </svg>
+)
diff --git a/react-pdf/components/up.js b/react-pdf/components/up.js