@scaleflex/widget-pdf-js 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 scaleflex
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,67 @@
+# `@scaleflex/widget-pdf-js`
+
+[![Plugins][plugins-image]](#plugins)
+[![Website][filerobot-image]][sfx-url]
+[![Version][filerobot-version]][version-url]
+[![Scaleflex team][made-by-image]][sfx-url]
+[![License][license-image]][license-url]
+[![CodeSandbox][codeSandbox-image]][codeSandbox-url]
+
+
+<div align='center'>
+<img title="Scaleflex Widget logo" alt="Scaleflex Widget logo" src="https://cdn.scaleflex.com/plugins/filerobot-widget/assets/filerobot_widget_logo_with_fire.png?vh=b2ff09" width="140"/>
+</div>
+
+The pdf-js plugin provides functionality for preview pdf pages in [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core).
+
+## Usage
+
+### NPM
+
+```bash
+npm install --save @scaleflex/widget-pdf-js
+```
+
+### YARN
+
+```bash
+yarn add @scaleflex/widget-pdf-js
+```
+
+then
+
+```js
+import PdfJs from '@scaleflex/widget-pdf-js'
+...
+...
+...
+scaleflexWidget.use(PdfJs)
+```
+
+### CDN
+
+The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.PdfJs`
+
+```js
+const PdfJs = window.ScaleflexWidget.PdfJs
+...
+...
+...
+scaleflexWidget.use(PdfJs)
+```
+
+<!-- Variables -->
+
+[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-pdf-js
+[license-url]: https://opensource.org/licenses/MIT
+[sfx-url]: https://www.scaleflex.com/
+[version-url]: https://www.npmjs.com/package/@scaleflex/widget-pdf-js
+[codeSandbox-url]: https://codesandbox.io/s/filerobot-widget-v3-c5l9th
+
+[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
+[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
+[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
+[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
+[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
+[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-pdf-js?label=Version&style=for-the-badge&logo=npm
+[codeSandbox-image]: https://img.shields.io/badge/CodeSandbox-black?style=for-the-badge&logo=CodeSandbox

package/lib/components/Footer/Footer.styled.js

@@ -0,0 +1,48 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { FV, PC } from '@scaleflex/widget-common';
+import { Arrow } from '@scaleflex/icons';
+import { IconButton, Input } from '@scaleflex/ui/core';
+import styled, { css } from 'styled-components';
+var Footer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 62px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: ", ";\n  padding: 0 24px;\n  padding-left: calc(24px - 10px);\n\n  ", "\n"])), function (_ref) {
+  var palette = _ref.theme.palette;
+  return palette[PC.BackgroundStateless];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", " {\n      height: 52px;\n      border-bottom: 1px solid ", ";\n    }\n  "])), theme.breakpoints.down('lg'), theme.palette[PC.BordersSecondary]);
+});
+var NumPagesLabel = styled.p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0;\n  white-space: nowrap;\n  color: ", ";\n  ", ";\n"])), function (_ref3) {
+  var palette = _ref3.theme.palette;
+  return palette[PC.TextSecondary];
+}, function (_ref4) {
+  var typography = _ref4.theme.typography;
+  return typography.font[FV.LabelMedium];
+});
+var PagesInput = styled(Input)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 48px;\n"])));
+var ControlsWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  column-gap: 8px;\n"])));
+var ZoomWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n"])));
+var ZoomControllersWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  width: fit-content;\n  align-items: center;\n  overflow-x: auto;\n"])));
+var ZoomButtons = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 8px;\n  border-radius: 4px;\n  height: 32px;\n  width: 130px;\n\n  span {\n    ", ";\n    color: ", ";\n    padding: 0 8px;\n    cursor: pointer;\n  }\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.typography.font[FV.LabelMedium];
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.palette[PC.TextSecondary];
+});
+var ZoomButton = styled(IconButton)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: inline-flex;\n"])));
+var ArrowIcon = styled(Arrow)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  transform: ", ";\n"])), function (_ref7) {
+  var $flip = _ref7.$flip;
+  return $flip ? 'scale(-1)' : 'none';
+});
+var Styled = {
+  Footer: Footer,
+  NumPagesLabel: NumPagesLabel,
+  PagesInput: PagesInput,
+  ControlsWrapper: ControlsWrapper,
+  ZoomWrapper: ZoomWrapper,
+  ZoomControllersWrapper: ZoomControllersWrapper,
+  ZoomButtons: ZoomButtons,
+  ZoomButton: ZoomButton,
+  ArrowIcon: ArrowIcon
+};
+export default Styled;

package/lib/components/Footer/ZoomControllers.js

@@ -0,0 +1,47 @@
+import { BTN_ZOOM_RATIO_PERCENTAGE, DEFAULT_ZOOM_RATIO, MAX_ZOOM_RATIO } from '@scaleflex/widget-explorer/lib/components/FileWindowPanel/Body/Body.constants';
+import { Minus, Plus, PositionCenter } from '@scaleflex/icons';
+import Styled from './Footer.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ZoomControllers = function ZoomControllers(_ref) {
+  var zoomRatio = _ref.zoomRatio,
+    setZoomRatio = _ref.setZoomRatio;
+  var zoomIn = function zoomIn() {
+    var nextZoomRatio = Math.min(zoomRatio + BTN_ZOOM_RATIO_PERCENTAGE, MAX_ZOOM_RATIO);
+    setZoomRatio(nextZoomRatio);
+  };
+  var zoomOut = function zoomOut() {
+    var nextZoomRatio = Math.min(Math.max(zoomRatio - BTN_ZOOM_RATIO_PERCENTAGE, BTN_ZOOM_RATIO_PERCENTAGE));
+    setZoomRatio(nextZoomRatio);
+  };
+  var resetZoom = function resetZoom() {
+    setZoomRatio(DEFAULT_ZOOM_RATIO);
+  };
+  return /*#__PURE__*/_jsxs(Styled.ZoomControllersWrapper, {
+    children: [/*#__PURE__*/_jsxs(Styled.ZoomButtons, {
+      children: [/*#__PURE__*/_jsx(Styled.ZoomButton, {
+        size: "lg",
+        color: "basic",
+        onClick: zoomOut,
+        children: /*#__PURE__*/_jsx(Minus, {})
+      }), /*#__PURE__*/_jsxs("span", {
+        onClick: resetZoom,
+        children: [parseInt(zoomRatio * 100), "%"]
+      }), /*#__PURE__*/_jsx(Styled.ZoomButton, {
+        size: "lg",
+        color: "basic",
+        onClick: zoomIn,
+        children: /*#__PURE__*/_jsx(Plus, {
+          size: 18
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Styled.ZoomButton, {
+      size: "lg",
+      color: "basic",
+      onClick: resetZoom,
+      children: /*#__PURE__*/_jsx(PositionCenter, {
+        size: 18
+      })
+    })]
+  });
+};
+export default ZoomControllers;

package/lib/components/Footer/index.js

@@ -0,0 +1,101 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { IconButton, TooltipV2 } from '@scaleflex/ui/core';
+import { useState } from 'react';
+import { useUpdateEffect } from '@scaleflex/widget-common/lib/hooks';
+import Styled from './Footer.styled';
+import ZoomControllers from './ZoomControllers';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Footer = function Footer(_ref) {
+  var i18n = _ref.i18n,
+    isLoading = _ref.isLoading,
+    numOfPages = _ref.numOfPages,
+    currentPage = _ref.currentPage,
+    setCurrentPage = _ref.setCurrentPage,
+    zoomRatio = _ref.zoomRatio,
+    setZoomRatio = _ref.setZoomRatio;
+  var isReachedPdfMaxPages = currentPage >= numOfPages;
+  var isReachedPdfMinPages = currentPage <= 1;
+  var _useState = useState(currentPage),
+    _useState2 = _slicedToArray(_useState, 2),
+    pdfPage = _useState2[0],
+    setPdfPage = _useState2[1];
+  useUpdateEffect(function () {
+    if (currentPage !== pdfPage) {
+      setPdfPage(currentPage);
+    }
+  }, [currentPage]);
+  var goPrevPage = function goPrevPage() {
+    if (isReachedPdfMinPages || isLoading) return;
+    var prevPage = currentPage - 1;
+    setCurrentPage(prevPage);
+  };
+  var goNextPage = function goNextPage() {
+    if (isReachedPdfMaxPages || isLoading) return;
+    var nextPage = currentPage + 1;
+    setCurrentPage(nextPage);
+  };
+  var handleChangePage = function handleChangePage(event) {
+    var pageNumber = parseInt(event.target.value, 10) || '';
+    var isValid = Number.isFinite(pageNumber);
+    if (isValid || !pageNumber) {
+      setPdfPage(pageNumber);
+    }
+  };
+  var handleSubmitPage = function handleSubmitPage(event) {
+    var keyCode = event.keyCode;
+    if (keyCode === 13) {
+      // Enter key
+      var validPageNumber = Math.min(Math.max(pdfPage, 1), numOfPages);
+      setPdfPage(validPageNumber);
+      setCurrentPage(validPageNumber);
+    }
+  };
+  return /*#__PURE__*/_jsxs(Styled.Footer, {
+    children: [/*#__PURE__*/_jsxs(Styled.ControlsWrapper, {
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        color: "basic",
+        size: "sm",
+        onClick: goPrevPage,
+        disabled: isLoading || isReachedPdfMinPages,
+        children: /*#__PURE__*/_jsx(Styled.ArrowIcon, {
+          size: 14,
+          $flip: true
+        })
+      }), /*#__PURE__*/_jsx(TooltipV2, {
+        position: "top",
+        title: i18n('pdfJsPageChangeInputTooltipHint'),
+        arrow: true,
+        children: /*#__PURE__*/_jsx(Styled.PagesInput, {
+          size: "sm",
+          onKeyDown: handleSubmitPage,
+          value: pdfPage || '',
+          disabled: isLoading || !(numOfPages > 1),
+          onChange: handleChangePage
+        })
+      }), /*#__PURE__*/_jsx(Styled.NumPagesLabel, {
+        children: i18n('pdfPreviewNumOfPages', {
+          count: numOfPages
+        })
+      }), /*#__PURE__*/_jsx(IconButton, {
+        color: "basic",
+        size: "sm",
+        onClick: goNextPage,
+        disabled: isLoading || isReachedPdfMaxPages,
+        children: /*#__PURE__*/_jsx(Styled.ArrowIcon, {
+          size: 14
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Styled.ZoomWrapper, {
+      children: /*#__PURE__*/_jsx(ZoomControllers, {
+        zoomRatio: zoomRatio,
+        setZoomRatio: setZoomRatio
+      })
+    })]
+  });
+};
+export default Footer;

package/lib/components/PdfPreview.js

@@ -0,0 +1,257 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useEffect, useRef, useState } from 'react';
+import { Skeleton } from '@scaleflex/ui/core';
+import { useIsUnMountedRef } from '@scaleflex/widget-common/lib/hooks';
+import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
+import Footer from './Footer';
+import Styled from './PdfPreview.styled';
+
+// pdfSource === pdf's link/path or file class/object's data (in-case of uploadable file)
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var PdfPreview = function PdfPreview(_ref) {
+  var pdfSource = _ref.pdfSource,
+    prepareDocument = _ref.prepareDocument,
+    i18n = _ref.i18n,
+    onError = _ref.onError;
+  var containerRef = useRef();
+  var canvasRef = useRef();
+  var mousePosition = useRef();
+  var cursorDisplacement = useRef();
+  var transformation = useRef();
+  var pdfLoadedDocument = useRef();
+  var isUnMountedRef = useIsUnMountedRef();
+  var pendingPageNumToRender = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMouseDown = _useState2[0],
+    setIsMouseDown = _useState2[1];
+  var _useState3 = useState(1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentPage = _useState4[0],
+    setCurrentPage = _useState4[1];
+  var _useState5 = useState(1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    zoomRatio = _useState6[0],
+    setZoomRatio = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    numOfPages = _useState8[0],
+    setNumOfPages = _useState8[1];
+  var _useState9 = useState(!pdfSource),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isLoading = _useState10[0],
+    setIsLoading = _useState10[1];
+  var loadPdfDocument = async function loadPdfDocument() {
+    if (!pdfSource) {
+      onError(i18n('pdfJsPdfPreviewErrorInvalidPath'));
+      return;
+    }
+    try {
+      setIsLoading(true);
+      var docSrc = typeof pdfSource === 'string' ? pdfSource : await pdfSource.arrayBuffer();
+      pdfLoadedDocument.current = prepareDocument(docSrc);
+      pdfLoadedDocument.current = await pdfLoadedDocument.current.promise;
+      var pdf = pdfLoadedDocument.current;
+      if (isUnMountedRef.current) {
+        return;
+      }
+      setNumOfPages(pdf.numPages);
+      changePage(1);
+    } catch (error) {
+      onError(error.message);
+    }
+  };
+  var changePage = async function changePage(pageNum) {
+    if (!pdfLoadedDocument.current || !pageNum) {
+      return;
+    }
+    try {
+      setCurrentPage(pageNum);
+      setIsLoading(true);
+
+      // For avoiding can't use the same canvas during multiple render operations error from pdfjs
+      // This might happen on changing the page while some current page being rendered (ex. clicking next/back arrows of pages multiple times)
+      if (pendingPageNumToRender.current) {
+        pendingPageNumToRender.current = pageNum;
+        return;
+      }
+      pendingPageNumToRender.current = pageNum;
+      var page = await pdfLoadedDocument.current.getPage(pageNum);
+      if (isUnMountedRef.current) {
+        return;
+      }
+      updateCanvas(page);
+      setIsLoading(false);
+    } catch (error) {
+      onError(error.message);
+    }
+  };
+  var updateCanvas = function updateCanvas(page) {
+    var _containerRef$current = containerRef.current,
+      containerWidth = _containerRef$current.offsetWidth,
+      containerHeight = _containerRef$current.offsetHeight;
+    var canvas = canvasRef.current;
+    var canvasContext = canvas.getContext('2d');
+    var viewport = page.getViewport({
+      scale: 1
+    });
+    var widthRatio = containerWidth / viewport.width;
+    var heightRatio = containerHeight / viewport.height;
+    canvas.width = Math.floor(viewport.width * devicePixelRatio * 2);
+    canvas.height = Math.floor(viewport.height * devicePixelRatio * 2);
+    if (widthRatio < heightRatio) {
+      canvas.style.width = Math.floor(viewport.width * widthRatio) + 'px';
+      canvas.style.height = Math.floor(viewport.height * widthRatio) + 'px';
+    } else {
+      canvas.style.width = Math.floor(viewport.width * heightRatio) + 'px';
+      canvas.style.height = Math.floor(viewport.height * heightRatio) + 'px';
+    }
+    var transform = [
+    // Transfrom Matrix
+    canvas.width / viewport.width, 0, 0, canvas.height / viewport.height, 0, 0];
+    var renderContext = {
+      canvasContext: canvasContext,
+      viewport: viewport,
+      transform: transform
+    };
+    page.render(renderContext).promise["finally"](function () {
+      var pageNum = pendingPageNumToRender.current;
+      pendingPageNumToRender.current = null;
+      if (pageNum && page.pageNumber !== pageNum) {
+        changePage(pageNum);
+      }
+    });
+  };
+  var setCursorPosition = function setCursorPosition(event) {
+    mousePosition.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+  };
+  var getCursorPositionInCanvas = function getCursorPositionInCanvas() {
+    var cursorPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      x: 0,
+      y: 0
+    };
+    var canvas = canvasRef.current;
+    var canvasRect = canvas.getBoundingClientRect();
+    return {
+      x: cursorPosition.x - canvasRect.left,
+      y: cursorPosition.y - canvasRect.top
+    };
+  };
+  var getMouseDisplacement = function getMouseDisplacement(event) {
+    var clientX = event.clientX,
+      clientY = event.clientY;
+    var _mousePosition = mousePosition.current || {};
+    var prevPosition = getCursorPositionInCanvas(_mousePosition);
+    var nextPosition = getCursorPositionInCanvas({
+      x: clientX,
+      y: clientY
+    });
+    return {
+      x: (nextPosition.x - prevPosition.x) / zoomRatio,
+      y: (nextPosition.y - prevPosition.y) / zoomRatio
+    };
+  };
+  var changeZoomRatio = function changeZoomRatio(newRatio) {
+    setZoomRatio(newRatio);
+    zoomCanvas(newRatio);
+  };
+  var zoomCanvas = function zoomCanvas() {
+    var currentZoomRatio = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    var mouseDisplacement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      x: 0,
+      y: 0
+    };
+    var container = containerRef.current;
+    var prevTransformation = transformation.current || {
+      x: 0,
+      y: 0
+    };
+    var scaledWidth = container.offsetWidth * currentZoomRatio;
+    var scaledHeight = container.offsetHeight * currentZoomRatio;
+    var nextTransformation = {
+      x: 0,
+      y: 0
+    };
+    if (currentZoomRatio > 1) {
+      nextTransformation = {
+        x: prevTransformation.x + mouseDisplacement.x,
+        y: prevTransformation.y + mouseDisplacement.y
+      };
+      var panningArea = {
+        x: (scaledWidth - container.offsetWidth) / (2 * currentZoomRatio),
+        y: (scaledHeight - container.offsetHeight) / (2 * currentZoomRatio)
+      };
+      nextTransformation = {
+        x: Math.min(Math.max(nextTransformation.x, -panningArea.x), panningArea.x),
+        y: Math.min(Math.max(nextTransformation.y, -panningArea.y), panningArea.y)
+      };
+    }
+    cursorDisplacement.current = nextTransformation;
+    container.style.transform = "scale(".concat(currentZoomRatio, ") translate(").concat(nextTransformation.x, "px, ").concat(nextTransformation.y, "px)");
+  };
+  var handleStartPanning = function handleStartPanning(event) {
+    if (zoomRatio > 1) {
+      setIsMouseDown(true);
+      setCursorPosition(event);
+    }
+  };
+  var handleReleasePanning = function handleReleasePanning() {
+    setIsMouseDown(false);
+    transformation.current = cursorDisplacement.current;
+  };
+  var handleMouseMove = function handleMouseMove(event) {
+    if (!isMouseDown) return;
+    var mouseDisplacement = getMouseDisplacement(event);
+    zoomCanvas(zoomRatio, mouseDisplacement);
+  };
+  useEffect(function () {
+    loadPdfDocument();
+    return function () {
+      var _pdfLoadedDocument$cu;
+      if ((_pdfLoadedDocument$cu = pdfLoadedDocument.current) !== null && _pdfLoadedDocument$cu !== void 0 && _pdfLoadedDocument$cu.destroy) {
+        handlePromise(pdfLoadedDocument.current.destroy());
+      }
+      setCurrentPage(1);
+      setZoomRatio(1);
+    };
+  }, [pdfSource]);
+  if (!pdfSource) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(Styled.Container, {
+    children: [/*#__PURE__*/_jsxs(Styled.PreviewExtraWrapper, {
+      children: [isLoading && /*#__PURE__*/_jsx(Skeleton, {
+        width: "100%",
+        height: "100%"
+      }), /*#__PURE__*/_jsx(Styled.PreviewContainer, {
+        ref: containerRef,
+        onMouseDown: handleStartPanning,
+        onMouseUp: handleReleasePanning,
+        onMouseLeave: handleReleasePanning,
+        $isMouseDown: isMouseDown,
+        $scale: zoomRatio || 1,
+        onMouseMove: handleMouseMove,
+        children: /*#__PURE__*/_jsx("canvas", {
+          ref: canvasRef
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Footer, {
+      i18n: i18n,
+      numOfPages: numOfPages,
+      isLoading: isLoading,
+      currentPage: currentPage,
+      setCurrentPage: changePage,
+      zoomRatio: zoomRatio,
+      setZoomRatio: changeZoomRatio
+    })]
+  });
+};
+export default PdfPreview;

package/lib/components/PdfPreview.styled.js

@@ -0,0 +1,43 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { css } from 'styled-components';
+import { IconButton as SfxIconButton } from '@scaleflex/ui/core';
+import { PC } from '@scaleflex/widget-common';
+import { Spinner as SfxSpinner } from '@scaleflex/icons';
+var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", " {\n      background-color: ", ";\n    }\n  "])), theme.breakpoints.down('lg'), theme.palette[PC.BackgroundActive]);
+});
+var PreviewExtraWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: calc(100% - (24px * 2));\n  max-width: calc(100% - (24px * 2));\n  height: calc(100% - 62px);\n  max-height: calc(100% - 62px);\n  overflow: hidden;\n  margin: 0 auto;\n  position: relative;\n  background-color: ", ";\n\n  ", "\n"])), function (_ref2) {
+  var palette = _ref2.theme.palette;
+  return palette[PC.BackgroundActive];
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", " {\n      height: calc(100% - 52px);\n      max-height: calc(100% - 52px);\n    }\n  "])), theme.breakpoints.down('lg'));
+});
+var PreviewContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  ", "\n\n  canvas {\n    margin: 0;\n    padding: 0;\n  }\n"])), function (_ref4) {
+  var $scale = _ref4.$scale,
+    $isMouseDown = _ref4.$isMouseDown;
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    transition: ", ";\n    cursor: ", ";\n  "])), $isMouseDown ? 'none' : 'transform 200ms linear', $scale > 1 ? 'grab' : 'default');
+});
+var IconButton = styled(SfxIconButton)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n  width: 40px;\n  height: 40px;\n  padding: 10px;\n  background-color: ", ";\n\n  ", "\n"])), function (_ref5) {
+  var palette = _ref5.theme.palette;
+  return palette[PC.Accent_1_8_Opacity];
+}, function (_ref6) {
+  var left = _ref6.left;
+  return left ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    left: 12px;\n  "]))) : css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    right: 12px;\n  "])));
+});
+var SpinnerWrapper = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: 100;\n  transform: translate(-50%, 50%);\n"])));
+var Spinner = styled(SfxSpinner)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  animation: spinner 1.2s linear infinite;\n  color: ", ";\n"])), function (_ref7) {
+  var palette = _ref7.theme.palette;
+  return palette[PC.AccentStateless];
+});
+var Styled = {
+  Container: Container,
+  PreviewExtraWrapper: PreviewExtraWrapper,
+  PreviewContainer: PreviewContainer,
+  IconButton: IconButton,
+  SpinnerWrapper: SpinnerWrapper,
+  Spinner: Spinner
+};
+export default Styled;

package/lib/defaultLocale.js

@@ -0,0 +1,6 @@
+export default {
+  pdfPreviewNumOfPages: 'of %{count} pages',
+  pdfJsPageChangeInputTooltipHint: 'Press enter after change',
+  pdfJsPdfPreviewErrorLabel: 'Unable to view this PDF document',
+  pdfJsPdfPreviewErrorInvalidPath: 'Invalid PDF document source provided'
+};