@agilemotion/oui-react-js 1.3.9 → 1.4.0

package/dist/components/form/UploadField.js

@@ -17,7 +17,7 @@ var _DocumentViewer = _interopRequireDefault(require("../DocumentViewer"));
 
 var _Utils = _interopRequireDefault(require("../../Utils"));
 
-var _ApplicationContext = _interopRequireDefault(require("./../../ApplicationContext"));
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 
 var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 
@@ -25,6 +25,12 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _reactPromiseTracker = require("react-promise-tracker");
 
+var _Event = _interopRequireDefault(require("../../event/Event"));
+
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+
+var _EventType = _interopRequireDefault(require("../../event/EventType"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -45,9 +51,10 @@ const status = response => {
   if (response.ok) {
     return Promise.resolve(response);
   } else {
-    let error = new Error(response.statusText);
-    error.code = response.status;
-    return Promise.reject(error);
+    return Promise.reject({
+      code: response.status,
+      message: response.statusText
+    });
   }
 };
 
@@ -60,12 +67,10 @@ const location = window.location.protocol + "//" + window.location.hostname;
 const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [viewerFile, setViewerFile] = _react.default.useState(!_Utils.default.isNull(props.initialFile) ? props.initialFile : null);
 
-  const [valueMode, setValueMode] = _react.default.useState(_Utils.default.getComponentAttribute(props.config, 'valueMode', 'base64'));
+  const [payloadStorageMode, setPayloadStorageMode] = _react.default.useState(props.config.payloadStorageMode || 'base64');
 
   const [files, setFiles] = _react.default.useState(!_Utils.default.isNull(props.initialFile) ? [props.initialFile] : null);
 
-  const [cacheId, setCacheId] = _react.default.useState(!_Utils.default.isNull(props.base.value) ? props.base.value.documentRepositoryCacheId : null);
-
   const [loading, setLoading] = _react.default.useState(true);
 
   const [nullable] = _react.default.useState(_Utils.default.isNull(props.config.validator) || props.config.validator.nullable === true);
@@ -86,22 +91,104 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
 
   const [errorMessage, setErrorMessage] = _react.default.useState("");
 
+  const cacheId = _react.default.useRef(!_Utils.default.isNull(props.base.value) ? props.base.value.documentRepositoryCacheId : null);
+
   const base = props.base;
 
   _react.default.useEffect(() => {
-    setViewerFile(props.initialFile);
-  }, [props.initialFile]);
+    return () => {
+      if (cacheId.current) {//remove().catch((e) => {});
+      }
+    };
+  }, []);
 
   _react.default.useEffect(() => {
-    if (!_Utils.default.isNull(props.valueMode)) {
-      setValueMode(props.valueMode);
-    }
-  }, [props.valueMode]);
+    setViewerFile(props.initialFile);
+  }, [props.initialFile]);
 
   const handleViewerLoad = numPages => {
     setLoading(false);
   };
 
+  const upload = (metadata, file, reader) => {
+    let uploadUrl = _Utils.default.getComponentAttribute(props.config, 'uploadUrl', null);
+
+    if (uploadUrl === null) {
+      uploadUrl = _ApplicationManager.default.getContextRoot() + "/docs/api/v1/manager/upload/save";
+    }
+
+    let payloadStorageMode = props.config.payloadStorageMode;
+
+    if (payloadStorageMode === 'post') {
+      const accessToken = sessionStorage.getItem("accessToken");
+      const idToken = sessionStorage.getItem("idToken");
+      let data = new FormData();
+      metadata.correlationId = props.viewId + "." + props.config.id;
+      data.append("metadata", JSON.stringify(metadata));
+      data.append("file", file);
+      let fetchConfig = {
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json',
+          'Authorization': 'Bearer ' + accessToken,
+          'idToken': idToken
+        },
+        body: data
+      };
+      let url = location + uploadUrl;
+      (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
+        metadata.documentRepositoryId = !_Utils.default.isNull(base.value) ? base.value.documentRepositoryId : null;
+        metadata.documentRepositoryCacheId = data;
+        cacheId.current = data;
+        base.handleValueChange(metadata);
+      }).catch(e => {
+        if (e.code === 401) {
+          _ApplicationManager.default.clear();
+
+          _ApplicationManager.default.getApplicationHistory().push('/login');
+        }
+
+        let message = {
+          messageType: 'ERROR',
+          message: 'An error has accurred while uploading file'
+        };
+        let event = new _Event.default(_ApplicationManager.default, props.viewId, message);
+
+        _Observable.default.fireEvent(_EventType.default.MESSAGE_ARRIVED, event);
+      }));
+    } else {
+      metadata.payload = reader.result;
+      base.handleValueChange(metadata);
+    }
+  };
+
+  const remove = () => {
+    return new Promise((resolve, reject) => {
+      const accessToken = sessionStorage.getItem("accessToken");
+      const idToken = sessionStorage.getItem("idToken");
+      let fetchConfig = {
+        method: 'GET',
+        headers: {
+          'Accept': 'application/json',
+          'Authorization': 'Bearer ' + accessToken,
+          'idToken': idToken
+        }
+      };
+      let url = location + _ApplicationManager.default.getContextRoot() + '/docs/api/v1/manager/upload/remove/' + cacheId.current;
+      (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(() => {
+        resolve();
+      }).catch(e => {
+        if (e.code === 401) {
+          _ApplicationManager.default.clear();
+
+          _ApplicationManager.default.getApplicationHistory().push('/login');
+        } else {
+          reject(e);
+        }
+      }));
+    });
+  };
+
   const handleChange = () => event => {
     let files = event.target.files;
     var allFiles = [];
@@ -139,44 +226,6 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
         }
       };
 
-      const upload = (metadata, file, uploadUrl) => {
-        let uploadMode = _Utils.default.getComponentAttribute(props.config, "uploadMode", "POST");
-
-        if (uploadMode === 'POST') {
-          const accessToken = sessionStorage.getItem("accessToken");
-          const idToken = sessionStorage.getItem("idToken");
-          let data = new FormData();
-          metadata.correlationId = props.viewId + "." + props.config.id;
-          data.append("metadata", JSON.stringify(metadata));
-          data.append("file", file);
-          let fetchConfig = {
-            method: 'POST',
-            headers: {
-              'Accept': 'application/json',
-              'Authorization': 'Bearer ' + accessToken,
-              'idToken': idToken
-            },
-            body: data
-          };
-          let url = location + uploadUrl;
-          (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
-            metadata.documentRepositoryId = !_Utils.default.isNull(base.value) ? base.value.documentRepositoryId : null;
-            metadata.documentRepositoryCacheId = data;
-            setCacheId(data);
-            base.handleValueChange(metadata);
-          }).catch(e => {
-            if (e.code === 401) {
-              _ApplicationContext.default.clear();
-
-              _ApplicationContext.default.getApplicationHistory().push('/login');
-            }
-          }));
-        } else {
-          metadata.payloadBase64 = reader.result;
-          base.handleValueChange(metadata);
-        }
-      };
-
       reader.onloadend = () => {
         if (!_Utils.default.isNull(props.form)) {
           let fileMetaData = {};
@@ -189,8 +238,8 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
             fileMetaData.documentRepositoryId = base.value.documentRepositoryId;
           }
 
-          if ('base64' === valueMode) {
-            fileMetaData.url = allFiles[0].base64;
+          if ('base64' === payloadStorageMode) {
+            fileMetaData.payload = allFiles[0].base64;
             base.handleValueChange(fileMetaData);
           } else {
             fileMetaData.correlationId = props.config.id;
@@ -199,13 +248,14 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
             file.correlationId = fileMetaData.correlationId;
             file.content = allFiles[0].file;
 
-            let uploadUrl = _Utils.default.getComponentAttribute(props.config, 'uploadUrl', null);
-
-            if (uploadUrl === null) {
-              uploadUrl = "/docs/manager/upload/save";
+            if (cacheId.current) {
+              remove().then(() => {
+                cacheId.current = null;
+                upload(fileMetaData, allFiles[0].file, reader);
+              }).catch(e => {});
+            } else {
+              upload(fileMetaData, allFiles[0].file, reader);
             }
-
-            upload(fileMetaData, allFiles[0].file, uploadUrl);
           }
         }
       };
@@ -242,7 +292,7 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
       backgroundColor: 'transparent',
       border: base.hasError ? "1px solid #f44336" : null,
       color: base.hasError ? "#f44336" : null,
-      backgroundImage: !_Utils.default.isNull(viewerFile) ? "url(".concat(viewerFile.base64, ")") : !_Utils.default.isNull(base.value) ? "url(".concat(location + _ApplicationContext.default.getContextRoot() + '/docs/api/v1/manager/download/' + base.value.documentRepositoryId + '?access_token=' + sessionStorage.getItem("accessToken") + '&idToken=' + sessionStorage.getItem("idToken"), ")") : "url(".concat(require('./' + _Utils.default.getComponentAttribute(props.config, 'defaultImage', 'default-avatar.png')), ")")
+      backgroundImage: !_Utils.default.isNull(viewerFile) ? "url(".concat(viewerFile.base64, ")") : !_Utils.default.isNull(base.value) ? "url(".concat(location + _ApplicationManager.default.getContextRoot() + '/docs/api/v1/manager/download/' + base.value.documentRepositoryId + '?access_token=' + sessionStorage.getItem("accessToken") + '&idToken=' + sessionStorage.getItem("idToken"), ")") : "url(".concat(require('./' + _Utils.default.getComponentAttribute(props.config, 'defaultImage', 'default-avatar.png')), ")")
     }
   })), base.hasError ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -266,7 +316,7 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
       padding: "0 8px"
     }
   }, base.errorMessage)) : null), /*#__PURE__*/_react.default.createElement("label", null, !_Utils.default.isNull(base.value) ? _Utils.default.isNull(base.value.id) ? base.value.name : /*#__PURE__*/_react.default.createElement("a", {
-    href: location + _ApplicationContext.default.getContextRoot() + '/docs/api/v1/manager/download/' + base.value.documentRepositoryId + '?access_token=' + sessionStorage.getItem("accessToken") + '&idToken=' + sessionStorage.getItem("idToken"),
+    href: location + _ApplicationManager.default.getContextRoot() + '/docs/api/v1/manager/download/' + base.value.documentRepositoryId + '?access_token=' + sessionStorage.getItem("accessToken") + '&idToken=' + sessionStorage.getItem("idToken"),
     target: '_blank'
   }, base.value.name) : null), !base.disabled && nullable && base.value ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     "aria-controls": "menu-list-grow",
@@ -275,6 +325,10 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
     onClick: () => {
       base.handleValueChange(null);
       document.getElementById("contained-button-file-".concat(props.config.id)).value = null;
+
+      if (cacheId.current) {
+        remove().then(() => cacheId.current = null).catch(e => {});
+      }
     }
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'DELETE'
@@ -296,53 +350,6 @@ const UploadField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defaul
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle,
     valueParser: (value, inbound) => {
-      if (inbound) {
-        clearTrigger.current = !clearTrigger.current;
-
-        if (!_Utils.default.isNull(value)) {
-          let val = value; // TODO : Support multiple file upload
-
-          if (_Utils.default.getComponentAttribute(props.config, 'multiple', false)) {
-            if (typeof value.length !== 'undefined' && value.length > 0) {
-              val = value[0];
-            } else {
-              if (value.documentRepositoryId) {
-                return value;
-              }
-
-              return null;
-            }
-          }
-
-          if (val.map) {
-            val = val.map;
-          }
-
-          let fileMetaData = {};
-          fileMetaData.name = !_Utils.default.isNull(val.label) ? val.label : val.name;
-          fileMetaData.id = val.id;
-          fileMetaData.type = val.type;
-          fileMetaData.size = val.size;
-          fileMetaData.documentRepositoryId = !_Utils.default.isNull(val.key) ? val.key : val.documentRepositoryId;
-          fileMetaData.documentRepositoryCacheId = val.documentRepositoryCacheId;
-
-          if (!_Utils.default.isNull(val.url)) {
-            let file = {};
-            file.base64 = val.url;
-            setFile(file);
-          }
-
-          return fileMetaData;
-        }
-      } else {
-        // TODO : Support multiple file upload
-        if (_Utils.default.getComponentAttribute(props.config, 'multiple', false)) {
-          let valArray = [];
-          valArray.push(value);
-          return valArray;
-        }
-      }
-
       return value;
     },
     valueChangeCallback: value => {

package/dist/components/layout/Layout.js

@@ -43,6 +43,12 @@ var _Video = _interopRequireDefault(require("../media/Video"));
 
 var _VCRoom = _interopRequireDefault(require("../media/VCRoom"));
 
+var _VideoPlayer = _interopRequireDefault(require("../media/VideoPlayer"));
+
+var _Portlet = _interopRequireDefault(require("../Portlet"));
+
+var _TabPanel = _interopRequireDefault(require("../TabPanel"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -63,11 +69,19 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   });
 
   _react.default.useEffect(() => {
+    if (props.tableRow) {
+      var _props$tableRow$id;
+
+      props.config.id = props.config.id + '_' + ((_props$tableRow$id = props.tableRow.id) === null || _props$tableRow$id === void 0 ? void 0 : _props$tableRow$id.replaceAll('-', ''));
+    }
+
+    props.handle.api = api();
+
     let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
 
     _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
 
-    _Observable.default.addSystemSubscriptions(parsedConfig);
+    _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
 
     if (!_Utils.default.isNull(parsedConfig.visible)) {
       setVisible(_Utils.default.evaluateBooleanExpression(parsedConfig.visible, props.config.id));
@@ -112,7 +126,7 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     }
   };
 
-  function renderComponent(component) {
+  function renderComponent(component, index) {
     if (_Utils.default.isNull(component.id)) {
       return null;
     } else {
@@ -120,24 +134,43 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         handle: createComponentHandle(component),
         config: component,
         ref: /*#__PURE__*/_react.default.createRef(),
+        tableRow: props.tableRow,
+        key: index,
         viewId: props.viewId
       }) : component.type === 'toolbar' ? /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
         config: component,
         handle: createComponentHandle(component),
+        tableRow: props.tableRow,
+        key: index,
+        ref: /*#__PURE__*/_react.default.createRef(),
+        viewId: props.viewId
+      }) : component.type === 'tab' ? /*#__PURE__*/_react.default.createElement(_TabPanel.default, {
+        config: component,
+        handle: createComponentHandle(component),
+        tableRow: props.tableRow,
+        key: index,
         ref: /*#__PURE__*/_react.default.createRef(),
         viewId: props.viewId
       }) : component.type === 'dataGrid' ? /*#__PURE__*/_react.default.createElement(_DataGrid.DataGrid, {
         config: component,
         handle: createComponentHandle(component),
         ref: /*#__PURE__*/_react.default.createRef(),
+        key: index,
         viewId: props.viewId
       }) : component.type === 'form' ? /*#__PURE__*/_react.default.createElement(_Form.default, {
         config: component,
         handle: createComponentHandle(component),
         ref: /*#__PURE__*/_react.default.createRef(),
+        key: index,
         viewId: props.viewId,
         className: 'defaultForm'
       }) : component.type === 'htmlPanel' ? /*#__PURE__*/_react.default.createElement(_HtmlPanel.default, {
+        config: component,
+        handle: createComponentHandle(component),
+        viewId: props.viewId,
+        key: index,
+        ref: /*#__PURE__*/_react.default.createRef()
+      }) : component.type === 'portlet' ? /*#__PURE__*/_react.default.createElement(_Portlet.default, {
         config: component,
         handle: createComponentHandle(component),
         viewId: props.viewId,
@@ -146,61 +179,78 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         config: component,
         handle: createComponentHandle(component),
         ref: /*#__PURE__*/_react.default.createRef(),
+        key: index,
         viewId: props.viewId
       }) : component.type === 'titleBar' ? /*#__PURE__*/_react.default.createElement(_TitleBar.default, {
         config: component,
         handle: createComponentHandle(component),
         ref: /*#__PURE__*/_react.default.createRef(),
+        key: index,
         viewId: props.viewId
       }) : component.type === 'stepperTitleBar' ? /*#__PURE__*/_react.default.createElement(_StepperTitleBar.default, {
         config: component,
         handle: createComponentHandle(component),
         ref: /*#__PURE__*/_react.default.createRef(),
+        key: index,
         viewId: props.viewId
       }) : component.type === 'alertBar' ? /*#__PURE__*/_react.default.createElement(_AlertBar.default, {
         config: component,
         handle: createComponentHandle(component),
         ref: /*#__PURE__*/_react.default.createRef(),
+        key: index,
         viewId: props.viewId
       }) : component.type === 'signatureTemplateDesigner' ? /*#__PURE__*/_react.default.createElement(_SignatureTemplateDesigner.default, {
         config: component,
         handle: createComponentHandle(component),
         ref: /*#__PURE__*/_react.default.createRef(),
+        key: index,
         viewId: props.viewId
       }) : component.type === 'documentViewer' ? /*#__PURE__*/_react.default.createElement(_DocumentViewer.default, {
         config: component,
         handle: createComponentHandle(component),
         ref: /*#__PURE__*/_react.default.createRef(),
+        key: index,
         viewId: props.viewId
       }) : component.type === 'vcRoom' ? /*#__PURE__*/_react.default.createElement(_VCRoom.default, {
         config: component,
         handle: createComponentHandle(component),
         ref: /*#__PURE__*/_react.default.createRef(),
+        key: index,
         viewId: props.viewId
       }) : component.type === 'userVideo' ? /*#__PURE__*/_react.default.createElement(_Video.default, {
         config: component,
         handle: createComponentHandle(component),
         ref: /*#__PURE__*/_react.default.createRef(),
+        key: index,
+        viewId: props.viewId
+      }) : component.type === 'videoPlayer' ? /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, {
+        config: component,
+        handle: createComponentHandle(component),
+        ref: /*#__PURE__*/_react.default.createRef(),
+        key: index,
         viewId: props.viewId
       }) : component.type === 'signaturePanel' ? /*#__PURE__*/_react.default.createElement(_SignaturePanel.default, {
         config: component,
         handle: createComponentHandle(component),
         ref: /*#__PURE__*/_react.default.createRef(),
+        key: index,
         viewId: props.viewId
       }) : component.type === 'dialog' ? /*#__PURE__*/_react.default.createElement(_Dialog.default, {
         config: component,
         handle: createComponentHandle(component),
         ref: /*#__PURE__*/_react.default.createRef(),
+        key: index,
         viewId: props.viewId
       }) : component.type === 'calendar' ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
         config: component,
         handle: createComponentHandle(component),
-        ref: /*#__PURE__*/_react.default.createRef(),
+        key: index,
         viewId: props.viewId
       }) : component.type === 'templateDesigner' ? /*#__PURE__*/_react.default.createElement(_TemplateDesigner.default, {
         config: component,
         handle: createComponentHandle(component),
         ref: /*#__PURE__*/_react.default.createRef(),
+        key: index,
         viewId: props.viewId
       }) : /*#__PURE__*/_react.default.createElement("div", null, 'Unsupported component type ' + component.type);
     }
@@ -266,11 +316,14 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       minWidth: '128px',
       width: 'auto',
       height: 'auto',
-      display: visible ? 'block' : 'none',
       margin: 0,
       padding: 0
     }, component);
 
+    if (!visible) {
+      style.display = 'none';
+    }
+
     if (!_Utils.default.isNull(backgroundColor)) {
       style.backgroundColor = backgroundColor;
     }
@@ -280,35 +333,35 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
 
   function render(layout) {
     setMissingComponentIds();
-    let counter = 0;
+    let counter = 10000;
     return _Utils.default.isNull(layout.components) || layout.components.length === 0 ? /*#__PURE__*/_react.default.createElement("div", null, "I am a dum empty Layout") : layout.orientation === 'VERTICAL' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, layout.components.map((component, index) => {
-      return component.type === 'layout' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderComponent(component)) : /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: index
-      }, renderComponent(component));
+      }, renderComponent(component, null));
     })) : /*#__PURE__*/_react.default.createElement("div", {
       style: {
         display: 'table',
         width: '100%',
         height: '100%'
       }
-    }, layout.components.map(component => {
+    }, layout.components.map((component, index) => {
       let className = _Utils.default.getComponentAttribute(component, 'className', '');
 
-      return component.type === 'layout' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderComponent(component)) : /*#__PURE__*/_react.default.createElement("div", {
-        key: counter++,
+      return component.type === 'layout' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderComponent(component, index)) : /*#__PURE__*/_react.default.createElement("div", {
+        key: index,
         style: {
           display: 'table-cell',
           height: '100%',
           verticalAlign: 'middle'
         },
         className: "".concat(className)
-      }, renderComponent(component));
+      }, renderComponent(component, null));
     }));
   }
 
   return /*#__PURE__*/_react.default.createElement("div", {
     id: props.config.id,
-    style: _Utils.default.mergeStyles(getLayoutStyle(props.config, 'transparent'), props.config),
+    style: getLayoutStyle(props.config, 'transparent'),
     className: "".concat(_Utils.default.getComponentAttribute(props.config, 'className', null))
   }, render(props.config));
 });

package/dist/components/layout/View.css

@@ -1,6 +1,7 @@
 .view {
     padding: 0 32px;
     background-color: #ffffff;
+    border-radius: 4px;
 }
 
 .no-margin {

package/dist/components/layout/View.js

@@ -13,7 +13,7 @@ var _Observable = _interopRequireDefault(require("../../event/Observable"));
 
 var _Layout = require("./Layout");
 
-var _ApplicationContext = _interopRequireDefault(require("../../ApplicationContext"));
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 
 var _Event = _interopRequireDefault(require("../../event/Event"));
 
@@ -43,7 +43,7 @@ const View = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
   function registerInlineScriptLibraries() {
     if (!_Utils.default.isNull(props.config.lib)) {
       let libName = props.config.id + '_lib';
-      let lib = new _DynamicLib.default(_ApplicationContext.default); // TODO : Write a more generic script parser
+      let lib = new _DynamicLib.default(_ApplicationManager.default); // TODO : Write a more generic script parser
 
       for (const script of props.config.lib.scripts) {
         if (script.lines.length > 0) {
@@ -82,7 +82,7 @@ const View = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
         }
       }
 
-      _ApplicationContext.default.registerLibrary(libName, lib);
+      _ApplicationManager.default.registerLibrary(libName, lib);
     }
   }
 
@@ -123,40 +123,37 @@ const View = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
 
     _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.config.id);
 
-    _Observable.default.addSystemSubscriptions(parsedConfig);
+    _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
 
     registerInlineScriptLibraries();
+    let children = layoutHandle.api.getChildren();
 
-    let currentView = _ApplicationContext.default.getCurrentView();
-
-    if (props.config.id === currentView.config.id) {
-      let children = layoutHandle.api.getChildren();
-
-      for (const child of children) {
-        if (!_Utils.default.isNull(child.api) && !_Utils.default.isNull(child.api.refresh)) {
-          child.api.refresh();
-        }
+    for (const child of children) {
+      if (!_Utils.default.isNull(child.api) && !_Utils.default.isNull(child.api.refresh)) {
+        child.api.refresh();
       }
+    }
 
-      _ApplicationContext.default.updateAppBarTitle(props.config.id, props.config.title);
+    _ApplicationManager.default.updateAppBarTitle(parsedConfig.id, parsedConfig.title);
 
-      let data = {};
-      data.viewId = props.config.id;
-      let event = new _Event.default(props.handle, props.config.id, data);
+    let data = {};
+    data.viewId = props.config.id;
+    let event = new _Event.default(props.handle, props.config.id, data);
 
-      _Observable.default.fireEvent(_EventType.default.COMPONENT_LOAD, event);
+    _Observable.default.fireEvent(_EventType.default.COMPONENT_LOAD, event);
 
-      if (props.loadCallback) {
-        props.loadCallback();
-      }
+    if (props.loadCallback) {
+      props.loadCallback();
     }
+
+    return () => {
+      _Observable.default.clearEventListeners(props.config.id);
+    };
   }, []);
 
   function render(layout) {
     return /*#__PURE__*/_react.default.createElement(_Layout.Layout, {
-      ref: /*#__PURE__*/_react.default.createRef(),
       handle: layoutHandle,
-      key: layout.key,
       config: layout,
       viewId: props.config.id,
       parent: true

package/dist/components/layout/ViewContainer.css

@@ -0,0 +1,3 @@
+.window-container {
+  z-index: 1 !important;
+}