@agilemotion/oui-react-js 1.2.9 → 1.3.1

package/dist/ApplicationContext.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TEMPLATE_TOKEN_REGEX = exports.SYSTEM_EVENT = exports.AVATAR_LISTENER_TYPE = exports.APP_VARIABLE = void 0;
+exports.default = exports.LEGEND_ARROW_ICON = exports.TEMPLATE_TOKEN_REGEX = exports.SYSTEM_EVENT = exports.AVATAR_LISTENER_TYPE = exports.APP_VARIABLE = void 0;
 
 var _Observable = _interopRequireDefault(require("./event/Observable"));
 
@@ -41,6 +41,8 @@ const SYSTEM_EVENT = 'SYSTEM_EVENT';
 exports.SYSTEM_EVENT = SYSTEM_EVENT;
 const TEMPLATE_TOKEN_REGEX = new RegExp('(([$]{1}[{]{1})(([a-zA-Z0-9_$.@#{}[\\]]*)+){1}([}]{1}))+', 'g');
 exports.TEMPLATE_TOKEN_REGEX = TEMPLATE_TOKEN_REGEX;
+const LEGEND_ARROW_ICON = " <i class=\"fa fa-arrow-right fa-xs\" aria-hidden=\"true\" style='color:__COLOR__'></i> ";
+exports.LEGEND_ARROW_ICON = LEGEND_ARROW_ICON;
 
 class ApplicationContext {
   constructor() {
@@ -70,16 +72,16 @@ class ApplicationContext {
 
     _defineProperty(this, "updateAppBarTitle", (viewId, title) => {
       let view = this.getView(viewId);
+      let legendIconArrow = LEGEND_ARROW_ICON.replace('__COLOR__', this.props.secondaryColor);
+      let titleValue = '';
 
-      if (!view.popUp) {
-        let titleValue = '';
-
-        if (!title.match(_DynamicJS.TEMPLATE_REGEX)) {
-          titleValue = title;
-        } else {
-          titleValue = _DynamicJS.default.executeScript(viewId + 'Title', title, viewId);
-        }
+      if (!title.match(_DynamicJS.TEMPLATE_REGEX)) {
+        titleValue = title;
+      } else {
+        titleValue = _DynamicJS.default.executeScript(viewId + 'Title', title, viewId);
+      }
 
+      if (!view.popUp && this.graphs.length === 0) {
         var _iterator = _createForOfIteratorHelper(this.navHistory),
             _step;
 
@@ -109,7 +111,7 @@ class ApplicationContext {
             legendValue += "".concat(navHistoryElement.title);
 
             if (counter++ < this.navHistory.length - 1) {
-              legendValue += " <i class=\"fa fa-arrow-right fa-xs\" aria-hidden=\"true\" style='color:".concat(this.props.secondaryColor, "'></i> ");
+              legendValue += legendIconArrow;
             }
           }
         } catch (err) {
@@ -120,9 +122,21 @@ class ApplicationContext {
 
         legendValue += "</span>";
         this.props.appBarTitle = legendValue;
-        let property = {};
-        property.name = 'title';
-        property.value = legendValue;
+      } else if (!view.popUp) {
+        this.props.appBarTitle = "".concat(this.navHistory[0].title).concat(legendIconArrow, "<span>").concat(this.graphs[0].title, "</span>");
+        this.graphs[0].setCurrentNodeTitle(titleValue);
+      }
+
+      let property = {};
+      property.name = 'title';
+      property.value = this.props.appBarTitle;
+      let event = new _Event.default(this, SYSTEM_EVENT, property);
+
+      _Observable.default.fireEvent(_EventType.default.APPLICATION_CONTEXT_CHANGE, event);
+
+      if (!view.popUp && this.graphs.length > 0) {
+        property = {};
+        property.name = 'stepperTitle';
         let event = new _Event.default(this, SYSTEM_EVENT, property);
 
         _Observable.default.fireEvent(_EventType.default.APPLICATION_CONTEXT_CHANGE, event);
@@ -420,7 +434,38 @@ class ApplicationContext {
       let idToken = tokens[0];
 
       if (isComponent) {
-        return this.resolveComponentApi(expresionContent);
+        let value = this.resolveComponentApi(expresionContent);
+        let index = expression.indexOf('}.');
+
+        if (index > 0) {
+          let propertyChain = expression.substring(index + 2);
+          let props = propertyChain.split(".");
+
+          var _iterator11 = _createForOfIteratorHelper(props),
+              _step11;
+
+          try {
+            for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
+              const prop = _step11.value;
+
+              if (_Utils.default.isNull(value)) {
+                return null;
+              }
+
+              value = value[prop];
+
+              if (typeof value === 'function') {
+                value = value();
+              }
+            }
+          } catch (err) {
+            _iterator11.e(err);
+          } finally {
+            _iterator11.f();
+          }
+        }
+
+        return value;
       } else if (isLib) {
         if (idToken === 'view') {
           idToken = this.getCurrentView().config.id + '_lib';
@@ -569,7 +614,7 @@ class ApplicationContext {
   }
 
   getBaseApiUrl() {
-    return this.props.baseApiUrl;
+    return this.props.contextRoot + this.props.baseApiUrl;
   }
 
   setServiceApiPath(serviceApiPath) {
@@ -584,6 +629,14 @@ class ApplicationContext {
     this.props.uiConfigPath = uiConfigPath;
   }
 
+  setContextRoot(contextRoot) {
+    this.props.contextRoot = contextRoot;
+  }
+
+  getContextRoot() {
+    return this.props.contextRoot;
+  }
+
   getUIConfigPath() {
     return this.props.uiConfigPath;
   }
@@ -601,21 +654,21 @@ class ApplicationContext {
   }
 
   refreshUserAvatar(avatar) {
-    var _iterator11 = _createForOfIteratorHelper(this.listeners),
-        _step11;
+    var _iterator12 = _createForOfIteratorHelper(this.listeners),
+        _step12;
 
     try {
-      for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
-        const listener = _step11.value;
+      for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
+        const listener = _step12.value;
 
         if (listener.type === AVATAR_LISTENER_TYPE) {
           listener.handler(avatar);
         }
       }
     } catch (err) {
-      _iterator11.e(err);
+      _iterator12.e(err);
     } finally {
-      _iterator11.f();
+      _iterator12.f();
     }
   }
 
@@ -650,37 +703,38 @@ class ApplicationContext {
     if (isParent && !isPopup) {
       this.navHistory.splice(0, this.navHistory.length);
 
-      var _iterator12 = _createForOfIteratorHelper(this.views),
-          _step12;
+      var _iterator13 = _createForOfIteratorHelper(this.views),
+          _step13;
 
       try {
-        for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
-          const contextView = _step12.value;
+        for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) {
+          const contextView = _step13.value;
           this.closeView(contextView.handle.api.id, false);
         }
       } catch (err) {
-        _iterator12.e(err);
+        _iterator13.e(err);
       } finally {
-        _iterator12.f();
+        _iterator13.f();
       }
 
       this.getViewPortHistory().push("/switch");
-      let graph = new _Graph.default(_Utils.default.parseConfig(config));
-      graph.init();
-      this.graphs.push(graph);
     }
+
+    let graph = new _Graph.default(_Utils.default.parseConfig(config));
+    graph.init();
+    this.graphs.push(graph);
   }
 
   signalGraph(id, event) {
     if (this.graphs.length > 0) {
       let graphToSignal = this.graphs[0];
 
-      var _iterator13 = _createForOfIteratorHelper(this.graphs),
-          _step13;
+      var _iterator14 = _createForOfIteratorHelper(this.graphs),
+          _step14;
 
       try {
-        for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) {
-          const graph = _step13.value;
+        for (_iterator14.s(); !(_step14 = _iterator14.n()).done;) {
+          const graph = _step14.value;
 
           if (id === graph.id) {
             graphToSignal = graph;
@@ -688,9 +742,9 @@ class ApplicationContext {
           }
         }
       } catch (err) {
-        _iterator13.e(err);
+        _iterator14.e(err);
       } finally {
-        _iterator13.f();
+        _iterator14.f();
       }
 
       graphToSignal.signal(event);

package/dist/BasicApp.js

@@ -66,7 +66,7 @@ class BasicApp extends _react.Component {
     }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
       path: "/login",
       render: props => /*#__PURE__*/_react.default.createElement(_LoginBasic.default, {
-        url: location + this.props.authUrl + "/login",
+        url: location + this.props.contextRoot + this.props.authUrl + "/login",
         background: 'rgba(0, 0, 0, 0.65)',
         title: 'Business Agility',
         logo: this.props.logoUrl
@@ -74,7 +74,7 @@ class BasicApp extends _react.Component {
     }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
       path: "/forgot-password",
       render: () => /*#__PURE__*/_react.default.createElement(_ForgotPasswordBasic.default, {
-        url: location + this.props.authUrl + "/password/forgot",
+        url: location + this.props.contextRoot + this.props.authUrl + "/password/forgot",
         background: 'rgba(0, 0, 0, 0.65)',
         title: 'Business Agility',
         logo: this.props.logoUrl
@@ -82,7 +82,7 @@ class BasicApp extends _react.Component {
     }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
       path: "/reset-password",
       render: () => /*#__PURE__*/_react.default.createElement(_ResetPasswordBasic.default, {
-        url: location + this.props.authUrl + "/password/confirmForgot",
+        url: location + this.props.contextRoot + this.props.authUrl + "/password/confirmForgot",
         background: 'rgba(0, 0, 0, 0.65)',
         title: 'Business Agility',
         logo: this.props.logoUrl
@@ -90,7 +90,7 @@ class BasicApp extends _react.Component {
     }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
       path: "/change-password",
       render: () => /*#__PURE__*/_react.default.createElement(_ChangePasswordBasic.default, {
-        url: location + this.props.authUrl + "/password/challenge",
+        url: location + this.props.contextRoot + this.props.authUrl + "/password/challenge",
         background: 'rgba(0, 0, 0, 0.65)',
         title: 'Business Agility',
         logo: this.props.logoUrl

package/dist/BasicAppHome.js

@@ -66,11 +66,13 @@ class BasicAppHome extends _react.Component {
 
     _ApplicationContext.default.setUIConfigPath(this.props.uiConfigPath);
 
+    _ApplicationContext.default.setContextRoot(this.props.contextRoot);
+
     _ApplicationContext.default.setBaseApiUrl(this.props.baseApiUrl);
 
     _ApplicationContext.default.setFilesApiPath(this.props.filesApiPath);
 
-    this.props.getDashboardSettings(location + this.props.baseApiUrl + "/ui/setup");
+    this.props.getDashboardSettings(location + this.props.contextRoot + this.props.baseApiUrl + "/ui/setup");
   }
 
   componentDidUpdate(prevProps) {
@@ -80,7 +82,7 @@ class BasicAppHome extends _react.Component {
       });
 
       if (!this.state.tokenRefreshMonitorStarted && !_Utils.default.isNull(this.props.dashboardSettings)) {
-        _TokenManager.default.startTokenRefreshMonitor(location + this.props.authUrl + "/refresh", this.props.dashboardSettings.userName);
+        _TokenManager.default.startTokenRefreshMonitor(location + this.props.contextRoot + this.props.authUrl + "/refresh", this.props.dashboardSettings.userName);
 
         this.setState({
           tokenRefreshMonitorStarted: true

package/dist/RestUtils.js

@@ -43,7 +43,7 @@ const json = response => {
 
 class RestUtils {
   invokeRest(service, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage) {
-    let url = service.url.startsWith('http://') || service.url.startsWith('https://') ? service.url : location + "/agility".concat(service.url);
+    let url = service.url.startsWith('http://') || service.url.startsWith('https://') ? service.url : location + "".concat(_ApplicationContext.default.getContextRoot() + service.url);
     let requestBody = null;
 
     if (!_Utils.default.isNull(service.parameters)) {
@@ -114,7 +114,9 @@ class RestUtils {
                 if (parameterValue.type === 'MapObject') {
                   requestBody.type = 'MapEntityDto';
                 } else {
-                  requestBody.type = parameterValue.type;
+                  if (typeof requestBody === 'object') {
+                    requestBody.type = parameterValue.type;
+                  }
                 }
               }
             }
@@ -143,7 +145,12 @@ class RestUtils {
       contentType = headers['Content-Type'];
     }
 
-    if (requestBody !== null) {
+    if (requestBody !== null && service.method === 'GET') {
+      console.error("A request body parameter cannot be specified for a GET request");
+      return;
+    }
+
+    if (requestBody !== null || service.method === 'POST') {
       postData(url, response => {
         let responseData = !_Utils.default.isNull(response) ? response.data : null;
 
@@ -413,7 +420,7 @@ const postData = (url, successCallback, errorCallback, secure, data) => {
 exports.postData = postData;
 
 const sendRequest = (url, successCallback, errorCallback, secure, track) => {
-  instance.doFetch(url, successCallback, errorCallback, secure, null, null, null, null, null, _Utils.default.isNull(track) ? false : track);
+  instance.doFetch(url, successCallback, errorCallback, secure, null, null, null, null, null, track);
 };
 
 exports.sendRequest = sendRequest;

package/dist/assets/css/black-dashboard-react.css

@@ -78,8 +78,7 @@ body {
   font-weight: 400;
   line-height: 1.5;
   color: #525f7f;
-  text-align: left;
-  background-color: #1e1e2f; }
+  text-align: left; }
 
 [tabindex="-1"]:focus {
   outline: 0 !important; }

package/dist/assets/scss/black-dashboard-react/bootstrap/_reboot.scss

@@ -62,7 +62,6 @@ body {
   line-height: $line-height-base;
   color: $body-color;
   text-align: left; // 3
-  background-color: $body-bg; // 2
 }
 
 // Suppress the focus outline on elements that cannot be accessed via keyboard.

package/dist/components/DocumentView.css

@@ -0,0 +1,4 @@
+.react-pdf__Page__canvas {
+    margin: 0 auto;
+    height: auto !important;
+}

package/dist/components/DocumentViewer.js

@@ -7,10 +7,22 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactPdf = require("react-pdf");
-
 var _Utils = _interopRequireDefault(require("../Utils"));
 
+var _Observable = _interopRequireDefault(require("../event/Observable"));
+
+var _ApplicationContext = _interopRequireDefault(require("../ApplicationContext"));
+
+var _RestUtils = require("../RestUtils");
+
+var _ServiceCallActionHandler = _interopRequireDefault(require("../event/ServiceCallActionHandler"));
+
+var _DynamicJS = _interopRequireDefault(require("../DynamicJS"));
+
+require("./DocumentView.css");
+
+var _DocumentViewerComponent = _interopRequireDefault(require("./DocumentViewerComponent"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -25,49 +37,93 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-_reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.js");
-
-const DocumentViewer = props => {
-  const _React$useState = _react.default.useState(1),
-        _React$useState2 = _slicedToArray(_React$useState, 1),
-        pageNumber = _React$useState2[0];
+const DocumentViewer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const _React$useState = _react.default.useState(true),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        initializing = _React$useState2[0],
+        setInitializing = _React$useState2[1];
 
   const _React$useState3 = _react.default.useState(null),
         _React$useState4 = _slicedToArray(_React$useState3, 2),
-        numPages = _React$useState4[0],
-        setNumPages = _React$useState4[1];
+        value = _React$useState4[0],
+        setValue = _React$useState4[1];
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+
+    if (initializing) {
+      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
 
-  const onDocumentLoadSuccess = ({
-    numPages
-  }) => {
-    setNumPages(numPages);
+      _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
 
-    if (!_Utils.default.isNull(props.onDocumentLoadSuccess)) {
-      props.onDocumentLoadSuccess(numPages);
+      _Observable.default.addSystemSubscriptions(parsedConfig);
+
+      setInitializing(false);
+
+      if (!_Utils.default.isNull(props.loadCompleteHandler)) {
+        props.loadCompleteHandler(props.config.id);
+      }
     }
+  });
+
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+
+      loadData: actionConfig => {
+        if (!_Utils.default.isNull(actionConfig) && !_Utils.default.isNull(actionConfig.value)) {
+          let value = _ApplicationContext.default.isExpression(actionConfig.value) ? _ApplicationContext.default.resolveExpressionValue(actionConfig.value) : actionConfig.value; // TODO : set value
+        } else {
+          let service = !_Utils.default.isNull(props.config.dataService) ? props.config.dataService : actionConfig !== null ? actionConfig.dataService : null;
+          let componentValue = !_Utils.default.isNull(props.config.value) ? props.config.value : actionConfig !== null ? actionConfig.value : null;
+
+          if (!_Utils.default.isNull(service)) {
+            if (service.type === 'remoteObjectProxy') {
+              (0, _RestUtils.invokeRpc)(service, props.handle, props.viewId, result => {}, e => {}, parameter => {});
+            } else {
+              if (_Utils.default.isNull(actionConfig)) {
+                actionConfig = {};
+              }
+
+              actionConfig.service = service; // TODO : Implement the invalid paramenter callback
+
+              _ServiceCallActionHandler.default.execute(actionConfig, null, null, props.viewId, data => {
+                let file = {};
+                file.base64 = data.payloadBase64;
+                file.type = props.config.fileType;
+                setValue(file);
+              }, () => {});
+            }
+          } else {
+            if (!_Utils.default.isNull(componentValue)) {
+              if (_ApplicationContext.default.isExpression(componentValue)) {
+                let path = _Utils.default.getPropertyChainPath(componentValue);
+
+                if (!_Utils.default.isNull(path.valueObject)) {
+                  _Observable.default.addSystemGeneratedSubscription(props.viewId, props.config.id, () => {
+                    let value = _DynamicJS.default.executeScript("".concat(props.config.id, "ValueEvaluator"), componentValue);
+
+                    if (!_Utils.default.isNull(value)) {// TODO : set value
+                    }
+                  });
+                }
+              }
+            }
+          }
+        }
+      }
+    };
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", null, !_Utils.default.isNull(props.file) ? /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      border: "1px solid rgba(0, 0, 0, 0.23)",
-      borderRadius: "4px",
-      padding: "16px",
-      width: "calc(100% - 32px)"
-    }
-  }, props.file.type === "application/pdf" ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
-    width: "100px",
-    file: props.file.base64,
-    onLoadSuccess: onDocumentLoadSuccess
-  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
-    pageNumber: pageNumber
-  })), /*#__PURE__*/_react.default.createElement("p", null, "Page ", pageNumber, " of ", numPages)) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
-    src: props.file.base64,
-    style: {
-      width: "98%"
-    },
-    alt: ''
-  }), props.onDocumentLoadSuccess(1))) : null);
-};
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref
+  }, !_Utils.default.isNull(value) ? /*#__PURE__*/_react.default.createElement(_DocumentViewerComponent.default, {
+    file: value,
+    onDocumentLoadSuccess: () => {}
+  }) : null);
+}));
 
 var _default = DocumentViewer;
 exports.default = _default;

package/dist/components/DocumentViewerComponent.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactPdf = require("react-pdf");
+
+var _Utils = _interopRequireDefault(require("../Utils"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+_reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.js");
+
+const DocumentViewerComponent = props => {
+  const _React$useState = _react.default.useState(1),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        pageNumber = _React$useState2[0],
+        setPageNumber = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(null),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        numPages = _React$useState4[0],
+        setNumPages = _React$useState4[1];
+
+  const onDocumentLoadSuccess = ({
+    numPages
+  }) => {
+    setNumPages(numPages);
+
+    if (!_Utils.default.isNull(props.onDocumentLoadSuccess)) {
+      props.onDocumentLoadSuccess(numPages);
+    }
+  };
+
+  const changePage = offset => {
+    setPageNumber(pageNumber + offset);
+  };
+
+  const previousPage = () => {
+    changePage(-1);
+  };
+
+  const nextPage = () => {
+    changePage(1);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", null, !_Utils.default.isNull(props.file) ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      borderRadius: "4px",
+      padding: "16px",
+      margin: "16px",
+      width: "calc(100% - 32px)"
+    }
+  }, props.file.type === "application/pdf" ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
+    file: "data:application/pdf;base64," + props.file.base64,
+    onLoadSuccess: onDocumentLoadSuccess
+  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
+    pageNumber: pageNumber
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "Page ", pageNumber || (numPages ? 1 : "--"), " of", " ", numPages || "--"), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    disabled: pageNumber <= 1,
+    onClick: previousPage
+  }, "Previous"), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    disabled: pageNumber >= numPages,
+    onClick: nextPage
+  }, "Next"))) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
+    src: props.file.base64,
+    style: {
+      width: "98%"
+    },
+    alt: ''
+  }), props.onDocumentLoadSuccess(1))) : null);
+};
+
+var _default = DocumentViewerComponent;
+exports.default = _default;