chore: support PDF

README.md

@@ -70,8 +70,8 @@ I'm sorry, ssr is not currently supported in `3.x`, it will be fixed in `4.0`.
 |--------------|--------------|---------|-----------------------------|----------|
 | visible      | string       |  false  | Viewer visible             | true |
 | onClose      | function       |  -      | Specify a function that will be called when Visible close   | true |
-| images       | [ImageDecorator](#imagedecorator)[]     | []      | image source array | true  |
-| activeIndex  | number       | 0       | active image index | false |
+| files       | [FileDecorator](#filedecorator)[]     | []      | file source array | true  |
+| activeIndex  | number       | 0       | active file index | false |
 | zIndex       | number       | 1000    | Viewer css z-index | false |
 | container    | HTMLElement  | null    | set parent node(inline mode) | false |
 | drag         | boolean      | true    | whether to drag image | false |
@@ -95,7 +95,7 @@ I'm sorry, ssr is not currently supported in `3.x`, it will be fixed in `4.0`.
 | noResetZoomAfterChange | boolean | false | preserve zoom after image change | false |
 | noLimitInitializationSize | boolean | false | no limit image initialization size | false |
 | defaultScale | number | 1 | set default scale | false |
-| onChange | (activeImage: [ImageDecorator](#imagedecorator), index: number) => void | - | callback when image change | false |
+| onChange | (activeFile: [FileDecorator](#filedecorator), index: number) => void | - | callback when file change | false |
 | loop         | boolean      |  true   | whether enable image loop | false |
 | disableMouseZoom   | boolean      |  false   | whether disable mouse zoom | false |
 | downloadInNewWindow | boolean | false | whether to download in a new window | false |
@@ -106,13 +106,13 @@ I'm sorry, ssr is not currently supported in `3.x`, it will be fixed in `4.0`.
 | minScale   | number    |  0.1  | minimum scaling | false |
 | exportFileName | string | 'exportFile' | customize download's filename | false |
 
-### ImageDecorator
+### FileDecorator
 
 | props       | type         | default | description                 | required |
 |-------------|--------------|---------|-----------------------------|----------|
-| src  | string  |  -  | image source | true |
-| alt  | string  |  -  | image description | false |
-| downloadUrl  | string  |  -  | image downlaod url | false |
+| src  | string  |  -  | file source | true |
+| alt  | string  |  -  | file description | false |
+| downloadUrl  | string  |  -  | file downlaod url | false |
 | defaultSize  | [ViewerImageSize](#viewerimagesize)  |  -  | image size | false |
 
 ### ViewerImageSize

demo/index.less

@@ -83,7 +83,7 @@ ul, li {
   padding: 1px;
 }
 
-.img-item > img {
+.img-item > * {
   width: 100%;
   height: 100%;
   cursor: pointer;

demo/index.tsx

@@ -1,13 +1,21 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import Viewer from '../src/Viewer';
-const img2 = require('./images/landscape2.jpg');
-const img = require('./images/landscape.jpg');
-const img3 = require('./images/tibet-6.jpg');
-const img4 = require('./images/image4.jpg');
+const img2 = require('./images/landscape2.jpg').default;
+const img = require('./images/landscape.jpg').default;
+const img3 = require('./images/tibet-6.jpg').default;
+const img4 = require('./images/image4.jpg').default;
+const pdf = require('./pdf/sample-local-pdf.pdf').default;
 import './index.less';
 import classNames from 'classnames';
 import { Button, List, Checkbox } from 'antd';
+
+import { pdfjs, Document, Page } from 'react-pdf';
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.mjs',
+  import.meta.url,
+).toString();
+
 const ButtonGroup = Button.Group;
 
 interface State {
@@ -134,7 +142,7 @@ class App extends React.Component<any, Partial<State>> {
   }
 
   render() {
-    let images = [{
+    let files = [{
       src: img,
       alt: 'lake',
       downloadUrl: '',
@@ -150,6 +158,9 @@ class App extends React.Component<any, Partial<State>> {
       src: img4,
       alt: '',
       downloadUrl: '',
+    }, {
+      src: pdf,
+      alt: 'Sample pdf'
     }];
 
     let inline = this.state.mode === 'inline';
@@ -242,15 +253,27 @@ class App extends React.Component<any, Partial<State>> {
             </div>
             <div className="img-list-wrap">
               <div className={imgListClass}>
-                {images.map((item, index) => {
+                {files.map((item, index) => {
                   return (
-                    <div key={index.toString()} className="img-item">
-                      <img src={item.src} onClick={() => {
+                    <div 
+                      key={index.toString()} 
+                      className="img-item"
+                      onClick={() => {
                         this.setState({
                           visible: true,
                           activeIndex: index,
                         });
-                      }}/>
+                      }}
+                    >
+                      {
+                        item.src.includes('.pdf')
+                        ? <div style={{ display: 'flex', justifyContent: 'center' }}>
+                          <Document file={item.src}>
+                            <Page pageNumber={1} width={150} scale={0.75} renderTextLayer={false} />
+                          </Document>
+                          </div>
+                        : <img src={item.src} />
+                      }
                     </div>
                   );
                 })}
@@ -263,16 +286,16 @@ class App extends React.Component<any, Partial<State>> {
           onClose={() => {
             this.setState({ visible: false });
           }}
-          images={images}
+          files={files}
           activeIndex={this.state.activeIndex}
           container={inline ? this.container : null}
           downloadable
           customToolbar={(toolbars) => {
             return toolbars.concat([{
               key: 'test',
               render: <div>C</div>,
-              onClick: (activeImage) => {
-                console.log(activeImage);
+              onClick: (activeFile) => {
+                console.log(activeFile);
               },
             }]);
           }}

gulpfile.js

@@ -16,6 +16,7 @@ gulp.task('default', () => {
     '!src/__tests__/**/*.tsx',
   ]).pipe(ts({
     target: 'es6',
+    module: 'es2020',
     jsx: 'preserve',
     moduleResolution: 'node',
     declaration: true,