@agilemotion/oui-react-js 1.3.2 → 1.3.3

package/dist/components/layout/View.css

@@ -0,0 +1,43 @@
+.view {
+    padding: 0 32px;
+    background-color: #ffffff;
+}
+
+/* Smartphones (landscape); */
+@media only screen and (min-device-width : 361px) and (max-device-width : 480px) {
+    .view {
+        padding: 0 16px;
+    }
+}
+
+/* Smartphones (portrait); */
+@media only screen and (min-device-width : 280px) and (max-device-width : 360px) {
+    .view {
+        padding: 0 16px;
+    }
+}
+
+/* iPads (portrait and landscape); */
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
+    .view {
+        padding: 0 24px;
+    }
+}
+
+/* iPad 3 */
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
+    .view {
+        padding: 0 24px;
+    }
+}
+
+/* small desktop screens */
+@media only screen and (max-width : 600px) {
+}
+
+/* low resolution desktop */
+@media only screen and (max-width : 1200px) {
+    .view {
+
+    }
+}

package/dist/components/layout/View.js

@@ -11,8 +11,6 @@ var _Utils = _interopRequireDefault(require("../../Utils"));
 
 var _Observable = _interopRequireDefault(require("../../event/Observable"));
 
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
-
 var _Layout = require("./Layout");
 
 var _ApplicationContext = _interopRequireDefault(require("../../ApplicationContext"));
@@ -27,6 +25,8 @@ var _DynamicJS = _interopRequireWildcard(require("./../../DynamicJS"));
 
 var _DynamicLib = _interopRequireDefault(require("../../js/DynamicLib"));
 
+require("./View.css");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -54,7 +54,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 const View = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const _React$useState = _react.default.useState({}),
         _React$useState2 = _slicedToArray(_React$useState, 1),
-        layoutHandles = _React$useState2[0];
+        layoutHandle = _React$useState2[0];
 
   const _React$useState3 = _react.default.useState({}),
         _React$useState4 = _slicedToArray(_React$useState3, 1),
@@ -134,13 +134,8 @@ const View = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
     props.handle.api = api();
 
     if (initializing) {
-      for (let i = 0; i < props.config.layouts.length; i++) {
-        let layout = props.config.layouts[i];
-        layout.key = i;
-
-        if (_Utils.default.isNull(layout.id)) {
-          layout.id = props.config.id + '_' + i;
-        }
+      if (_Utils.default.isNull(props.config.layout.id)) {
+        props.config.layout.id = props.config.id + '_layout';
       }
 
       let parsedConfig = _Utils.default.parseConfig(props.config, props.config.id);
@@ -175,13 +170,13 @@ const View = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
 
   function _loadCompleteHandler() {
     _loadCompleteHandler = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(id) {
-      var release, currentView, allLoaded, i, layout, properties, _iterator6, _step6, property, children, _iterator7, _step7, child, data, event;
+      var release, currentView, children, _iterator4, _step4, child, data, event;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             if (!(loadingRef.current === true)) {
-              _context.next = 22;
+              _context.next = 6;
               break;
             }
 
@@ -192,120 +187,74 @@ const View = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
             release = _context.sent;
             currentView = _ApplicationContext.default.getCurrentView();
 
-            if (!(props.config.id === currentView.config.id)) {
-              _context.next = 22;
-              break;
-            }
-
-            _context.prev = 6;
-            loadedComponents.push(id);
-            allLoaded = true;
-            i = 0;
-
-          case 10:
-            if (!(i < props.config.layouts.length)) {
-              _context.next = 18;
-              break;
-            }
-
-            layout = props.config.layouts[i];
-
-            if (loadedComponents.includes(layout.id)) {
-              _context.next = 15;
-              break;
-            }
-
-            allLoaded = false;
-            return _context.abrupt("break", 18);
-
-          case 15:
-            i++;
-            _context.next = 10;
-            break;
-
-          case 18:
-            if (allLoaded === true) {
-              properties = Object.getOwnPropertyNames(layoutHandles);
-              _iterator6 = _createForOfIteratorHelper(properties);
-
+            if (props.config.id === currentView.config.id) {
               try {
-                for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-                  property = _step6.value;
-                  layout = layoutHandles[property];
-                  children = layout.api.getChildren();
-                  _iterator7 = _createForOfIteratorHelper(children);
+                loadedComponents.push(id);
+
+                if (loadedComponents.includes(props.config.layout.id)) {
+                  children = layoutHandle.api.getChildren();
+                  _iterator4 = _createForOfIteratorHelper(children);
 
                   try {
-                    for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
-                      child = _step7.value;
+                    for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+                      child = _step4.value;
 
                       if (!_Utils.default.isNull(child.api) && !_Utils.default.isNull(child.api.refresh)) {
                         child.api.refresh();
                       }
                     }
                   } catch (err) {
-                    _iterator7.e(err);
+                    _iterator4.e(err);
                   } finally {
-                    _iterator7.f();
+                    _iterator4.f();
                   }
-                }
-              } catch (err) {
-                _iterator6.e(err);
-              } finally {
-                _iterator6.f();
-              }
 
-              if (!props.config.title.match(_DynamicJS.TEMPLATE_REGEX) || props.config.title.includes("@#{view}")) {
-                _ApplicationContext.default.updateAppBarTitle(props.config.id, props.config.title);
-              }
+                  if (!props.config.title.match(_DynamicJS.TEMPLATE_REGEX) || props.config.title.includes("@#{view}")) {
+                    _ApplicationContext.default.updateAppBarTitle(props.config.id, props.config.title);
+                  }
 
-              data = {};
-              data.viewId = props.config.id;
-              event = new _Event.default(props.handle, props.config.id, data);
+                  data = {};
+                  data.viewId = props.config.id;
+                  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);
 
-              loadingRef.current = false;
-            }
+                  loadingRef.current = false;
 
-          case 19:
-            _context.prev = 19;
-            release();
-            return _context.finish(19);
+                  if (props.loadCallback) {
+                    props.loadCallback();
+                  }
+                }
+              } finally {
+                release();
+              }
+            }
 
-          case 22:
+          case 6:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[6,, 19, 22]]);
+      }, _callee);
     }));
     return _loadCompleteHandler.apply(this, arguments);
   }
 
   const createLayoutHandle = (layout, api) => {
-    if (_Utils.default.isNull(layoutHandles[layout.id])) {
-      let handle = {};
-      layoutHandles[layout.id] = handle;
-      handle.api = api;
-      return handle;
-    }
-
-    return layoutHandles[layout.id];
+    layoutHandle.api = api;
+    return layoutHandle;
   };
 
-  function render(layouts) {
-    return layouts.map(layout => {
-      return /*#__PURE__*/_react.default.createElement(_Layout.Layout, {
-        ref: /*#__PURE__*/_react.default.createRef(),
-        handleFactory: (layout, api) => {
-          createLayoutHandle(layout, api);
-        },
-        key: layout.key,
-        config: layout,
-        viewId: props.config.id,
-        loadCompleteHandler: loadCompleteHandler,
-        parent: true
-      });
+  function render(layout) {
+    return /*#__PURE__*/_react.default.createElement(_Layout.Layout, {
+      ref: /*#__PURE__*/_react.default.createRef(),
+      handleFactory: (layout, api) => {
+        createLayoutHandle(layout, api);
+      },
+      key: layout.key,
+      config: layout,
+      viewId: props.config.id,
+      loadCompleteHandler: loadCompleteHandler,
+      parent: true
     });
   }
 
@@ -317,36 +266,21 @@ const View = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
       },
 
       get model() {
-        let properties = Object.getOwnPropertyNames(layoutHandles);
+        let children = layoutHandle.api.getChildren();
 
-        var _iterator2 = _createForOfIteratorHelper(properties),
+        var _iterator2 = _createForOfIteratorHelper(children),
             _step2;
 
         try {
           for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-            const property = _step2.value;
-            let layout = layoutHandles[property];
-            let children = layout.api.getChildren();
+            const child = _step2.value;
 
-            var _iterator3 = _createForOfIteratorHelper(children),
-                _step3;
+            if (!_Utils.default.isNull(child.api)) {
+              let valueGetter = !_Utils.default.isNull(child.api.model) ? child.api.model : !_Utils.default.isNull(child.api.getValue) ? child.api.getValue : child.api.value;
 
-            try {
-              for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-                const child = _step3.value;
-
-                if (!_Utils.default.isNull(child.api)) {
-                  let valueGetter = !_Utils.default.isNull(child.api.getValue) ? child.api.getValue : child.api.value;
-
-                  if (!_Utils.default.isNull(valueGetter)) {
-                    model[child.api.id] = typeof valueGetter === 'function' ? valueGetter() : valueGetter;
-                  }
-                }
+              if (!_Utils.default.isNull(valueGetter)) {
+                model[child.api.id] = typeof valueGetter === 'function' ? valueGetter() : valueGetter;
               }
-            } catch (err) {
-              _iterator3.e(err);
-            } finally {
-              _iterator3.f();
             }
           }
         } catch (err) {
@@ -359,43 +293,27 @@ const View = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
       },
 
       getChild: id => {
-        let properties = Object.getOwnPropertyNames(layoutHandles);
-
-        var _iterator4 = _createForOfIteratorHelper(properties),
-            _step4;
-
-        try {
-          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-            const property = _step4.value;
-            let layout = layoutHandles[property];
-
-            if (id === layout.api.id) {
-              return layout;
-            }
+        if (id === layoutHandle.api.id) {
+          return layoutHandle;
+        }
 
-            let children = layout.api.getChildren();
+        let children = layoutHandle.api.getChildren();
 
-            var _iterator5 = _createForOfIteratorHelper(children),
-                _step5;
+        var _iterator3 = _createForOfIteratorHelper(children),
+            _step3;
 
-            try {
-              for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-                const child = _step5.value;
+        try {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            const child = _step3.value;
 
-                if (!_Utils.default.isNull(child.api) && id === child.api.id) {
-                  return child;
-                }
-              }
-            } catch (err) {
-              _iterator5.e(err);
-            } finally {
-              _iterator5.f();
+            if (!_Utils.default.isNull(child.api) && id === child.api.id) {
+              return child;
             }
           }
         } catch (err) {
-          _iterator4.e(err);
+          _iterator3.e(err);
         } finally {
-          _iterator4.f();
+          _iterator3.f();
         }
 
         return null;
@@ -408,19 +326,21 @@ const View = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
       },
       getModelValue: key => {
         return model[key];
+      },
+      loaded: () => {
+        return !loadingRef.current;
       }
     };
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
+    className: 'view',
     ref: ref,
-    style: {
+    style: _Utils.default.mergeStyles({
       minWidth: '128px',
-      height: '100%',
-      margin: _Utils.default.getComponentAttribute(props.config, 'margin', 0),
-      padding: _Utils.default.getComponentAttribute(props.config, 'padding', 0)
-    }
-  }, initializing === false ? render(props.config.layouts) : null);
+      height: '100%'
+    }, props.config)
+  }, initializing === false ? render(props.config.layout) : null);
 }), () => {
   return true;
 });

package/dist/components/layout/ViewPort.js

@@ -15,7 +15,7 @@ var _Utils = _interopRequireDefault(require("../../Utils"));
 
 var _ApplicationContext = _interopRequireDefault(require("../../ApplicationContext"));
 
-var _ConfirmationDialog = _interopRequireDefault(require("../ConfirmationDialog"));
+var _ConfirmationDialog = require("../ConfirmationDialog");
 
 var _PopupView = _interopRequireDefault(require("../PopupView"));
 
@@ -23,16 +23,20 @@ var _Dashboard = _interopRequireDefault(require("../../view/Dashboard"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 class ViewPort extends _react.default.PureComponent {
   constructor(props) {
     super(props);
 
+    _defineProperty(this, "openPopupView", view => {
+      this.popupViewController.open(view);
+    });
+
+    _defineProperty(this, "closePopupView", () => {
+      this.popupViewController.close();
+    });
+
     _defineProperty(this, "renderView", routerProps => {
       let viewId = routerProps.match.params.id;
 
@@ -49,47 +53,28 @@ class ViewPort extends _react.default.PureComponent {
       }) : null;
     });
 
-    this.state = {
-      popupView: null,
-      confirmDialogOpen: false,
-      confirmDialogMessage: null,
-      confirmHandler: result => {
-        this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
-          confirmDialogOpen: false
-        }));
-        this.state.confirmDialogResultCallback(result);
-      }
-    };
-  }
-
-  openDialog(message, resultCallback) {
-    if (this.state.confirmDialogOpen) {
-      console.error("There is already a confirm dialog open");
-    } else {
-      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
-        confirmDialogOpen: true,
-        confirmDialogMessage: message,
-        confirmDialogResultCallback: resultCallback
-      }));
-    }
-  }
-
-  openPopupView(view) {
-    this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
-      popupView: view
-    }));
+    this.confirmationDialogController = {};
+    this.popupViewController = {};
   }
+  /*openDialog(message, resultCallback) {
+      if (this.state.confirmDialogOpen) {
+          console.error("There is already a confirm dialog open");
+      } else {
+          this.setState({
+              ...this.state, confirmDialogOpen: true, confirmDialogMessage: message,
+              confirmDialogResultCallback: resultCallback
+          });
+      }
+  };*/
 
-  closePopupView() {
-    this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
-      popupView: null
-    }));
-  }
 
   componentDidMount() {
+    this.confirmationDialogController.openPopupView = this.openPopupView;
+    this.confirmationDialogController.closePopupView = this.closePopupView;
+
     _ApplicationContext.default.setViewPortHistory(this.props.history);
 
-    _ApplicationContext.default.setConfirmDialogHandler(this);
+    _ApplicationContext.default.setConfirmDialogHandler(this.confirmationDialogController);
 
     let defaultRoute = !_Utils.default.isNull(this.props.defaultView) ? this.props.defaultView : "/view/dashboard";
     this.props.history.push(defaultRoute);
@@ -100,16 +85,13 @@ class ViewPort extends _react.default.PureComponent {
       style: {
         height: _Utils.default.isNull(this.props.height) ? 'calc(100vh - 90px)' : this.props.height
       }
-    }, this.state.popupView !== null ? /*#__PURE__*/_react.default.createElement(_PopupView.default, {
-      open: this.state.popupView !== null,
-      view: this.state.popupView
-    }) : null, /*#__PURE__*/_react.default.createElement(_ConfirmationDialog.default, {
-      open: this.state.confirmDialogOpen,
-      message: this.state.confirmDialogMessage,
-      handler: this.state.confirmHandler
+    }, /*#__PURE__*/_react.default.createElement(_PopupView.default, {
+      controller: this.popupViewController
     }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
       path: "/view/:id",
       render: routerProps => this.renderView(routerProps)
+    }), /*#__PURE__*/_react.default.createElement(_ConfirmationDialog.ConfirmationDialog, {
+      controller: this.confirmationDialogController
     }));
   }
 

package/dist/components/navbars/HomeNavbar.js

@@ -23,6 +23,10 @@ var _Utils = _interopRequireDefault(require("../../Utils"));
 
 var _ActionHandlers = _interopRequireDefault(require("../../event/ActionHandlers"));
 
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+var _colors = require("material-ui/styles/colors");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -175,7 +179,16 @@ class HomeNavbar extends _react.default.Component {
       style: {
         background: this.props.themeTextColor
       }
-    })), " ", /*#__PURE__*/_react.default.createElement(_reactstrap.Collapse, {
+    })), " ", /*#__PURE__*/_react.default.createElement("div", {
+      className: "col-*-*",
+      style: {
+        height: '48px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: '80px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Collapse, {
       navbar: true,
       isOpen: this.state.collapseOpen
     }, /*#__PURE__*/_react.default.createElement(_reactstrap.Nav, {
@@ -192,12 +205,24 @@ class HomeNavbar extends _react.default.Component {
       "data-toggle": "dropdown",
       nav: true,
       onClick: e => e.preventDefault()
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "photo"
+    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      "aria-controls": "menu-list-grow",
+      style: {
+        borderColor: _colors.grey800,
+        width: '40px',
+        height: '40px',
+        padding: '0'
+      },
+      "aria-haspopup": "true"
     }, /*#__PURE__*/_react.default.createElement("img", {
       alt: "...",
-      src: this.state.avatar
-    }), " "), " ", /*#__PURE__*/_react.default.createElement("b", {
+      src: this.state.avatar,
+      width: '36px',
+      height: '36px',
+      style: {
+        borderRadius: '50%'
+      }
+    })), " ", /*#__PURE__*/_react.default.createElement("b", {
       className: "caret d-none d-lg-block d-xl-block"
     }), /*#__PURE__*/_react.default.createElement("p", {
       className: "d-lg-none"
@@ -220,7 +245,7 @@ class HomeNavbar extends _react.default.Component {
       onClick: this.props.logoutCallBack
     }, " ", "Log out", " "), " "), " "), " "), " ", /*#__PURE__*/_react.default.createElement("li", {
       className: "separator d-lg-none"
-    })), " "), " "), " "), " ", /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+    })), " "), " "))), " "), " ", /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
       modalClassName: "modal-search",
       isOpen: this.state.modalSearch,
       toggle: this.toggleModalSearch

package/dist/components/navbars/PortalNavbar.css

@@ -17,9 +17,9 @@
 .portal-navbar-toolbar {
     display: inline-block;
     text-align: left;
-    width: 55%;
+    width: 56%;
     height: 48px;
-    margin-left: 72px;
+    padding-left: 72px;
 }
 
 .spacer {