react-file-viewer-v2 - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/components/drivers/PDFViewer/PDFPage.d.ts

 /// <reference types="react" />
 import { PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api';
-import './styles.module.css';
 interface IPDFPageProps {
@@ -5,0 +4,0 @@ pdf: PDFDocumentProxy;

dist/index.js

@@ -61,2 +61,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
         }).then(function (result) {
+          console.log(result);
           var docEl = document.createElement('div');
@@ -81,3 +82,3 @@ docEl.innerHTML = result.value;
     style: {
-      padding: '30px',
+      padding: '40px',
       background: 'white',
@@ -163,2 +164,66 @@ boxShadow: '0 3px 10px rgb(0 0 0 / 0.2)'
 
+var _path;
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function SvgZoom(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    "data-name": "Layer 1",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "#005bac",
+    viewBox: "0 0 122.88 122.88"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M42.31 0a42.31 42.31 0 0135.21 65.75l8.56 8.56.09-.09a5.38 5.38 0 017.59 0l27.55 27.55a5.39 5.39 0 010 7.59l-12 12a5.39 5.39 0 01-7.59 0l-27.5-27.6a5.38 5.38 0 010-7.59l.09-.09-8.56-8.56A42.31 42.31 0 1142.31 0zM25.19 37H37V25.19h10.79V37h11.64v10.79H47.79v11.64H37V47.79H25.19V37zM42.31 9.5A32.81 32.81 0 119.5 42.31 32.81 32.81 0 0142.31 9.5z",
+    fillRule: "evenodd"
+  })));
+}
+
+var _path$1;
+
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$1.apply(this, arguments);
+}
+
+function SvgZoomOut(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    "data-name": "Layer 1",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "#005bac",
+    viewBox: "0 0 122.88 122.88"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    d: "M42.31 0a42.31 42.31 0 0135.21 65.75l8.56 8.56.09-.09a5.38 5.38 0 017.59 0l27.55 27.55a5.39 5.39 0 010 7.59l-12 12a5.39 5.39 0 01-7.59 0l-27.5-27.6a5.38 5.38 0 010-7.59l.09-.09-8.56-8.56A42.31 42.31 0 1142.31 0zM25.19 37h34.24v10.79H25.19V37zM42.31 9.5A32.81 32.81 0 119.5 42.31 32.81 32.81 0 0142.31 9.5z",
+    fillRule: "evenodd"
+  })));
+}
+
 var INCREASE_PERCENTAGE = 0.2;
@@ -197,6 +262,2 @@ pdf.GlobalWorkerOptions.workerSrc = pdfjsWorker;
 
-  var resetZoom = function resetZoom() {
-    setZoom(0);
-  };
-
   React.useLayoutEffect(function () {
@@ -229,3 +290,2 @@ var _container$current;
     var index = props.index;
-    console.log(index);
     return React.createElement("div", {
@@ -253,3 +313,3 @@ ref: ref,
     onClick: increaseZoom
-  }, React.createElement("a", {
+  }, React.createElement("div", {
     style: {
@@ -268,16 +328,17 @@ cursor: 'default',
       zIndex: 1,
-      bottom: '90px',
-      right: '20px',
-      fontSize: '20px',
-      fontWeight: 'bold'
+      bottom: '80px',
+      right: '20px'
     }
-  }, "+")), React.createElement("div", {
+  }, React.createElement(SvgZoom, {
+    style: {
+      width: 20,
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    }
+  }))), React.createElement("div", {
     className: 'view-control',
-    onClick: resetZoom
-  }, React.createElement("i", {
-    className: 'zoom-reset'
-  })), React.createElement("div", {
-    className: 'view-control',
     onClick: reduceZoom
-  }, React.createElement("a", {
+  }, React.createElement("div", {
     style: {
@@ -297,7 +358,13 @@ cursor: 'default',
       bottom: '30px',
-      right: '20px',
-      fontSize: '20px',
-      fontWeight: 'bold'
+      right: '20px'
     }
-  }, "-"))), React.createElement("div", {
+  }, React.createElement(SvgZoomOut, {
+    style: {
+      width: 20,
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    }
+  })))), React.createElement("div", {
     ref: container,
@@ -309,3 +376,3 @@ style: {
       display: 'flex',
-      flexDirection: 'column',
+      flexDirection: 'row',
       paddingLeft: 10
@@ -382,3 +449,3 @@ }
     onClick: increaseZoom
-  }, React.createElement("a", {
+  }, React.createElement("div", {
     style: {
@@ -397,11 +464,17 @@ cursor: 'default',
       zIndex: 1,
-      bottom: '90px',
-      right: '20px',
-      fontSize: '20px',
-      fontWeight: 'bold'
+      bottom: '80px',
+      right: '20px'
     }
-  }, "+")), React.createElement("div", {
+  }, React.createElement(SvgZoom, {
+    style: {
+      width: 20,
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    }
+  }))), React.createElement("div", {
     className: 'view-control',
     onClick: reduceZoom
-  }, React.createElement("a", {
+  }, React.createElement("div", {
     style: {
@@ -421,7 +494,13 @@ cursor: 'default',
       bottom: '30px',
-      right: '20px',
-      fontSize: '20px',
-      fontWeight: 'bold'
+      right: '20px'
     }
-  }, "-")), React.createElement("canvas", {
+  }, React.createElement(SvgZoomOut, {
+    style: {
+      width: 20,
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    }
+  }))), React.createElement("canvas", {
     ref: canvasRef,
@@ -428,0 +507,0 @@ width: '500',

dist/index.modern.js

@@ -59,2 +59,3 @@ import { createElement, useState, useEffect, useRef, useLayoutEffect, useMemo, forwardRef } from 'react';
         }).then(function (result) {
+          console.log(result);
           var docEl = document.createElement('div');
@@ -79,3 +80,3 @@ docEl.innerHTML = result.value;
     style: {
-      padding: '30px',
+      padding: '40px',
       background: 'white',
@@ -161,2 +162,66 @@ boxShadow: '0 3px 10px rgb(0 0 0 / 0.2)'
 
+var _path;
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function SvgZoom(props) {
+  return /*#__PURE__*/createElement("svg", _extends({
+    "data-name": "Layer 1",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "#005bac",
+    viewBox: "0 0 122.88 122.88"
+  }, props), _path || (_path = /*#__PURE__*/createElement("path", {
+    d: "M42.31 0a42.31 42.31 0 0135.21 65.75l8.56 8.56.09-.09a5.38 5.38 0 017.59 0l27.55 27.55a5.39 5.39 0 010 7.59l-12 12a5.39 5.39 0 01-7.59 0l-27.5-27.6a5.38 5.38 0 010-7.59l.09-.09-8.56-8.56A42.31 42.31 0 1142.31 0zM25.19 37H37V25.19h10.79V37h11.64v10.79H47.79v11.64H37V47.79H25.19V37zM42.31 9.5A32.81 32.81 0 119.5 42.31 32.81 32.81 0 0142.31 9.5z",
+    fillRule: "evenodd"
+  })));
+}
+
+var _path$1;
+
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$1.apply(this, arguments);
+}
+
+function SvgZoomOut(props) {
+  return /*#__PURE__*/createElement("svg", _extends$1({
+    "data-name": "Layer 1",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "#005bac",
+    viewBox: "0 0 122.88 122.88"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/createElement("path", {
+    d: "M42.31 0a42.31 42.31 0 0135.21 65.75l8.56 8.56.09-.09a5.38 5.38 0 017.59 0l27.55 27.55a5.39 5.39 0 010 7.59l-12 12a5.39 5.39 0 01-7.59 0l-27.5-27.6a5.38 5.38 0 010-7.59l.09-.09-8.56-8.56A42.31 42.31 0 1142.31 0zM25.19 37h34.24v10.79H25.19V37zM42.31 9.5A32.81 32.81 0 119.5 42.31 32.81 32.81 0 0142.31 9.5z",
+    fillRule: "evenodd"
+  })));
+}
+
 var INCREASE_PERCENTAGE = 0.2;
@@ -195,6 +260,2 @@ GlobalWorkerOptions.workerSrc = pdfjsWorker;
 
-  var resetZoom = function resetZoom() {
-    setZoom(0);
-  };
-
   useLayoutEffect(function () {
@@ -227,3 +288,2 @@ var _container$current;
     var index = props.index;
-    console.log(index);
     return createElement("div", {
@@ -251,3 +311,3 @@ ref: ref,
     onClick: increaseZoom
-  }, createElement("a", {
+  }, createElement("div", {
     style: {
@@ -266,16 +326,17 @@ cursor: 'default',
       zIndex: 1,
-      bottom: '90px',
-      right: '20px',
-      fontSize: '20px',
-      fontWeight: 'bold'
+      bottom: '80px',
+      right: '20px'
     }
-  }, "+")), createElement("div", {
+  }, createElement(SvgZoom, {
+    style: {
+      width: 20,
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    }
+  }))), createElement("div", {
     className: 'view-control',
-    onClick: resetZoom
-  }, createElement("i", {
-    className: 'zoom-reset'
-  })), createElement("div", {
-    className: 'view-control',
     onClick: reduceZoom
-  }, createElement("a", {
+  }, createElement("div", {
     style: {
@@ -295,7 +356,13 @@ cursor: 'default',
       bottom: '30px',
-      right: '20px',
-      fontSize: '20px',
-      fontWeight: 'bold'
+      right: '20px'
     }
-  }, "-"))), createElement("div", {
+  }, createElement(SvgZoomOut, {
+    style: {
+      width: 20,
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    }
+  })))), createElement("div", {
     ref: container,
@@ -307,3 +374,3 @@ style: {
       display: 'flex',
-      flexDirection: 'column',
+      flexDirection: 'row',
       paddingLeft: 10
@@ -380,3 +447,3 @@ }
     onClick: increaseZoom
-  }, createElement("a", {
+  }, createElement("div", {
     style: {
@@ -395,11 +462,17 @@ cursor: 'default',
       zIndex: 1,
-      bottom: '90px',
-      right: '20px',
-      fontSize: '20px',
-      fontWeight: 'bold'
+      bottom: '80px',
+      right: '20px'
     }
-  }, "+")), createElement("div", {
+  }, createElement(SvgZoom, {
+    style: {
+      width: 20,
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    }
+  }))), createElement("div", {
     className: 'view-control',
     onClick: reduceZoom
-  }, createElement("a", {
+  }, createElement("div", {
     style: {
@@ -419,7 +492,13 @@ cursor: 'default',
       bottom: '30px',
-      right: '20px',
-      fontSize: '20px',
-      fontWeight: 'bold'
+      right: '20px'
     }
-  }, "-")), createElement("canvas", {
+  }, createElement(SvgZoomOut, {
+    style: {
+      width: 20,
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    }
+  }))), createElement("canvas", {
     ref: canvasRef,
@@ -426,0 +505,0 @@ width: '500',

package.json

 {
   "name": "react-file-viewer-v2",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Extendable file viewer for web",
@@ -39,3 +39,2 @@ "author": "javier-mora",
     "@typescript-eslint/parser": "^2.26.0",
-    "microbundle-crl": "^0.13.10",
     "babel-eslint": "^10.0.3",
@@ -54,2 +53,3 @@ "cross-env": "^7.0.2",
     "gh-pages": "^2.2.0",
+    "microbundle-crl": "^0.13.10",
     "npm-run-all": "^4.1.5",
@@ -60,3 +60,4 @@ "prettier": "^2.0.4",
     "react-scripts": "^3.4.1",
-    "typescript": "^3.7.5"
+    "typescript": "^3.7.5",
+    "typescript-plugin-css-modules": "^3.4.0"
   },
@@ -63,0 +64,0 @@ "files": [

New alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

108544

11.55%

Number of package files

24

33.33%

Lines of code

1263

12.37%

Worsened metrics

Dev dependency count

30

3.45%

Number of low supply chain risk alerts

2

100%

No dependency changes