@logicamente.info/react-pdf-viewer/lib/Components/PDFViewer.js

A React PDF viewer component, bootstrap compatible, with controls based on PDF.js.

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _RenderPdf = _interopRequireDefault(require("./RenderPdf"));

var _NavigationBar = _interopRequireDefault(require("./NavigationBar"));

var _Loader = _interopRequireDefault(require("./Loader"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

var PDFViewer = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(PDFViewer, _React$Component);

  function PDFViewer(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.state = {
      page: _this.props.page,
      pages: 0,
      scale: _this.props.scale,
      defaultScale: _this.props.scale,
      rotationAngle: _this.props.rotationAngle,
      isReady: false
    };
    _this.getPageCount = _this.getPageCount.bind(_assertThisInitialized(_this));
    _this.handlePrevClick = _this.handlePrevClick.bind(_assertThisInitialized(_this));
    _this.handleNextClick = _this.handleNextClick.bind(_assertThisInitialized(_this));
    _this.handleZoomIn = _this.handleZoomIn.bind(_assertThisInitialized(_this));
    _this.handleResetZoom = _this.handleResetZoom.bind(_assertThisInitialized(_this));
    _this.handleZoomOut = _this.handleZoomOut.bind(_assertThisInitialized(_this));
    _this.handleRotateLeft = _this.handleRotateLeft.bind(_assertThisInitialized(_this));
    _this.handleResetRotation = _this.handleResetRotation.bind(_assertThisInitialized(_this));
    _this.handleRotateRight = _this.handleRotateRight.bind(_assertThisInitialized(_this));
    return _this;
  }

  var _proto = PDFViewer.prototype;

  _proto.getPageCount = function getPageCount(pages) {
    if (this.state.pages !== pages) {
      this.setState({
        pages: pages,
        isReady: true
      });
    }
  };

  _proto.handlePrevClick = function handlePrevClick() {
    if (this.state.page === 1) return;
    this.setState({
      page: this.state.page - 1
    });

    if (this.props.onPrevBtnClick) {
      this.props.onPrevBtnClick(this.state.page - 1);
    }
  };

  _proto.handleNextClick = function handleNextClick() {
    if (this.state.page === this.pages) return;
    this.setState({
      page: this.state.page + 1
    });

    if (this.props.onNextBtnClick) {
      this.props.onNextBtnClick(this.state.page + 1);
    }
  };

  _proto.handleZoomIn = function handleZoomIn() {
    var checkScale = this.props.maxScale;

    if (this.state.defaultScale > this.props.maxScale) {
      checkScale = this.state.defaultScale;
    }

    if (this.state.scale < checkScale) {
      this.setState({
        scale: this.state.scale + this.props.scaleStep
      });
    }

    if (this.props.onZoom) {
      this.props.onZoom(this.state.scale + this.props.scaleStep);
    }
  };

  _proto.handleResetZoom = function handleResetZoom() {
    this.setState({
      scale: this.state.defaultScale
    });

    if (this.props.onZoom) {
      this.props.onZoom(this.state.defaultScale);
    }
  };

  _proto.handleZoomOut = function handleZoomOut() {
    var checkScale = this.props.minScale;

    if (this.state.defaultScale < this.props.minScale) {
      checkScale = this.state.defaultScale;
    }

    if (this.state.scale > checkScale) {
      this.setState({
        scale: this.state.scale - this.props.scaleStep
      });
    }

    if (this.props.onZoom) {
      this.props.onZoom(this.state.scale - this.props.scaleStep);
    }
  };

  _proto.handleRotateLeft = function handleRotateLeft() {
    if (this.state.rotationAngle !== -90) {
      this.setState({
        rotationAngle: -90
      });
    }

    if (this.props.onRotation) {
      this.props.onRotation(-90);
    }
  };

  _proto.handleResetRotation = function handleResetRotation() {
    if (this.state.rotationAngle !== 0) {
      this.setState({
        rotationAngle: 0
      });
    }

    if (this.props.onRotation) {
      this.props.onRotation(0);
    }
  };

  _proto.handleRotateRight = function handleRotateRight() {
    if (this.state.rotationAngle !== 90) {
      this.setState({
        rotationAngle: 90
      });
    }

    if (this.props.onRotation) {
      this.props.onRotation(90);
    }
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        document = _this$props.document,
        withCredentials = _this$props.withCredentials,
        password = _this$props.password,
        loader = _this$props.loader,
        maxScale = _this$props.maxScale,
        minScale = _this$props.minScale,
        hideNavbar = _this$props.hideNavbar,
        hideZoom = _this$props.hideZoom,
        hideRotation = _this$props.hideRotation,
        navbarOnTop = _this$props.navbarOnTop,
        navigation = _this$props.navigation,
        css = _this$props.css,
        canvasCss = _this$props.canvasCss,
        onDocumentClick = _this$props.onDocumentClick,
        protectContent = _this$props.protectContent,
        watermark = _this$props.watermark,
        alert = _this$props.alert;
    var _this$state = this.state,
        page = _this$state.page,
        pages = _this$state.pages,
        scale = _this$state.scale,
        defaultScale = _this$state.defaultScale,
        rotationAngle = _this$state.rotationAngle;
    var NavigationElement = navigation;

    var pdf = /*#__PURE__*/_react["default"].createElement(_RenderPdf["default"], {
      document: document,
      withCredentials: withCredentials,
      password: password,
      pageNum: page,
      scale: scale,
      rotation: rotationAngle,
      pageCount: function pageCount(num) {
        return _this2.getPageCount(num);
      },
      protectContent: protectContent,
      watermark: watermark,
      alert: alert
    });

    var nav = null;

    if (!hideNavbar && pages > 0) {
      nav = !navigation || navigation && typeof navigation === 'object' ? /*#__PURE__*/_react["default"].createElement(_NavigationBar["default"], {
        page: page,
        pages: pages,
        scale: scale,
        defaultScale: defaultScale,
        maxScale: maxScale,
        minScale: minScale,
        rotationAngle: rotationAngle,
        hideZoom: hideZoom,
        hideRotation: hideRotation,
        css: navigation ? navigation.css : undefined,
        handleNextClick: this.handleNextClick,
        handlePrevClick: this.handlePrevClick,
        handleZoomIn: this.handleZoomIn,
        handleResetZoom: this.handleResetZoom,
        handleZoomOut: this.handleZoomOut,
        handleRotateLeft: this.handleRotateLeft,
        handleResetRotation: this.handleResetRotation,
        handleRotateRight: this.handleRotateRight
      }) : /*#__PURE__*/_react["default"].createElement(NavigationElement, {
        page: page,
        pages: pages,
        scale: scale,
        defaultScale: defaultScale,
        maxScale: maxScale,
        minScale: minScale,
        rotationAngle: rotationAngle,
        hideZoom: hideZoom,
        hideRotation: hideRotation,
        handleNextClick: this.handleNextClick,
        handlePrevClick: this.handlePrevClick,
        handleZoomIn: this.handleZoomIn,
        handleResetZoom: this.handleResetZoom,
        handleZoomOut: this.handleZoomOut,
        handleRotateLeft: this.handleRotateLeft,
        handleResetRotation: this.handleResetRotation,
        handleRotateRight: this.handleRotateRight
      });
    }

    return /*#__PURE__*/_react["default"].createElement("div", {
      className: css || 'container text-center'
    }, /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        display: this.state.isReady ? 'none' : 'block'
      }
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: canvasCss || '',
      style: canvasCss ? {} : {
        height: '1000px',
        overflow: 'auto'
      }
    }, loader || /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        display: this.state.isReady ? 'd-block' : 'd-none'
      }
    }, navbarOnTop ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, nav), /*#__PURE__*/_react["default"].createElement("div", {
      className: canvasCss || '',
      style: canvasCss ? {} : {
        height: '1000px',
        overflow: 'auto'
      },
      onClick: onDocumentClick
    }, pdf)) : /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
      className: canvasCss || '',
      style: canvasCss ? {} : {
        height: '1000px',
        overflow: 'auto'
      },
      onClick: onDocumentClick
    }, pdf), /*#__PURE__*/_react["default"].createElement("div", null, nav))));
  };

  return PDFViewer;
}(_react["default"].Component);

PDFViewer.propTypes = process.env.NODE_ENV !== "production" ? {
  document: _propTypes["default"].shape({
    url: _propTypes["default"].string,
    // File path
    base64: _propTypes["default"].string // PDF file encoded in base64

  }).isRequired,
  withCredentials: _propTypes["default"].bool,
  password: _propTypes["default"].string,
  loader: _propTypes["default"].node,
  page: _propTypes["default"].number,
  scale: _propTypes["default"].number,
  scaleStep: _propTypes["default"].number,
  maxScale: _propTypes["default"].number,
  minScale: _propTypes["default"].number,
  css: _propTypes["default"].string,
  canvasCss: _propTypes["default"].string,
  rotationAngle: _propTypes["default"].number,
  onDocumentClick: _propTypes["default"].func,
  onPrevBtnClick: _propTypes["default"].func,
  onNextBtnClick: _propTypes["default"].func,
  onZoom: _propTypes["default"].func,
  onRotation: _propTypes["default"].func,
  hideNavbar: _propTypes["default"].bool,
  navbarOnTop: _propTypes["default"].bool,
  hideZoom: _propTypes["default"].bool,
  hideRotation: _propTypes["default"].bool,
  protectContent: _propTypes["default"].bool,
  watermark: _propTypes["default"].shape({
    text: _propTypes["default"].string,
    diagonal: _propTypes["default"].bool,
    opacity: _propTypes["default"].string,
    size: _propTypes["default"].string,
    color: _propTypes["default"].string
  }),
  alert: _propTypes["default"].any,
  navigation: _propTypes["default"].oneOfType([// Can be an object with css classes or react elements to be rendered
  _propTypes["default"].shape({
    css: _propTypes["default"].shape({
      navbarWrapper: _propTypes["default"].string,
      zoomOutBtn: _propTypes["default"].string,
      resetZoomBtn: _propTypes["default"].string,
      zoomInBtn: _propTypes["default"].string,
      previousPageBtn: _propTypes["default"].string,
      pageIndicator: _propTypes["default"].string,
      nextPageBtn: _propTypes["default"].string,
      rotateLeftBtn: _propTypes["default"].string,
      resetRotationBtn: _propTypes["default"].string,
      rotateRightBtn: _propTypes["default"].string
    })
  }), // Or a full navigation component
  _propTypes["default"].any])
} : {};
PDFViewer.defaultProps = {
  page: 1,
  withCredentials: false,
  password: '',
  defaultScale: 1,
  scale: 1,
  scaleStep: 1,
  maxScale: 3,
  minScale: 1,
  rotationAngle: 0,
  hideNavbar: false,
  hideZoom: false,
  hideRotation: false,
  navbarOnTop: false
};
var _default = PDFViewer;
exports["default"] = _default;
module.exports = exports.default;