@agilemotion/oui-react-js 1.3.1 → 1.3.3

package/dist/components/layout/CollapsiblePanel.js

@@ -9,16 +9,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactstrap = require("reactstrap");
 
-var _reactBootstrap = require("react-bootstrap");
-
 var _MenuItem = _interopRequireDefault(require("material-ui/MenuItem"));
 
-var _styles = require("material-ui/styles");
-
 var _colors = require("material-ui/styles/colors");
 
-var _gridOn = _interopRequireDefault(require("material-ui/svg-icons/image/grid-on"));
-
 var _Utils = _interopRequireDefault(require("../../Utils"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/layout/Layout.js

@@ -21,6 +21,8 @@ var _HtmlPanel = _interopRequireDefault(require("../HtmlPanel"));
 
 var _SignatureTemplateDesigner = _interopRequireDefault(require("../signatures/SignatureTemplateDesigner"));
 
+var _TemplateDesigner = _interopRequireDefault(require("../TemplateDesigner"));
+
 var _AlertBar = _interopRequireDefault(require("../AlertBar"));
 
 var _TitleBar = _interopRequireDefault(require("../TitleBar"));
@@ -35,6 +37,10 @@ var _asyncMutex = require("async-mutex");
 
 var _DocumentViewer = _interopRequireDefault(require("../DocumentViewer"));
 
+var _SignaturePanel = _interopRequireDefault(require("../SignaturePanel"));
+
+var _Dialog = _interopRequireDefault(require("../Dialog"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -81,12 +87,14 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const loadingRef = _react.default.useRef(true);
 
   const mutex = new _asyncMutex.Mutex();
+  let keyCounter = 0;
 
   _react.default.useEffect(() => {
     props.handleFactory(props.config, api());
 
     if (initializing) {
       let layout = props.config;
+      layout.key = keyCounter++;
 
       if (!_Utils.default.isNull(layout.components)) {
         for (let i = 0; i < layout.components.length; i++) {
@@ -96,7 +104,7 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
             component.id = props.config.id + '_' + component.type + "_" + i;
           }
 
-          component.key = i;
+          component.key = keyCounter++;
         }
       }
 
@@ -220,6 +228,7 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     }) : component.type === 'htmlPanel' ? /*#__PURE__*/_react.default.createElement(_HtmlPanel.default, {
       config: component,
       handle: createComponentHandle(component),
+      viewId: props.viewId,
       ref: /*#__PURE__*/_react.default.createRef(),
       loadCompleteHandler: loadCompleteHandler
     }) : component.type === 'tree' ? /*#__PURE__*/_react.default.createElement(_Tree.Tree, {
@@ -258,6 +267,24 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       ref: /*#__PURE__*/_react.default.createRef(),
       viewId: props.viewId,
       loadCompleteHandler: loadCompleteHandler
+    }) : component.type === 'signaturePanel' ? /*#__PURE__*/_react.default.createElement(_SignaturePanel.default, {
+      config: component,
+      handle: createComponentHandle(component),
+      ref: /*#__PURE__*/_react.default.createRef(),
+      viewId: props.viewId,
+      loadCompleteHandler: loadCompleteHandler
+    }) : component.type === 'dialog' ? /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+      config: component,
+      handle: createComponentHandle(component),
+      ref: /*#__PURE__*/_react.default.createRef(),
+      viewId: props.viewId,
+      loadCompleteHandler: loadCompleteHandler
+    }) : component.type === 'templateDesigner' ? /*#__PURE__*/_react.default.createElement(_TemplateDesigner.default, {
+      config: component,
+      handle: createComponentHandle(component),
+      ref: /*#__PURE__*/_react.default.createRef(),
+      viewId: props.viewId,
+      loadCompleteHandler: loadCompleteHandler
     }) : /*#__PURE__*/_react.default.createElement("div", null, "Unsupported component type " + component.type);
   }
 
@@ -320,22 +347,22 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   };
 
   function getDefaultComponentContainerStyle(component) {
-    return {
-      width: _Utils.default.getComponentAttribute(component, 'width', '100%'),
+    return _Utils.default.mergeStyles({
+      width: '100%',
       height: '100%',
-      minWidth: _Utils.default.getComponentAttribute(component, 'minWidth', null),
-      minHeight: _Utils.default.getComponentAttribute(component, 'minHeight', 0)
-    };
+      minHeight: 0
+    }, component);
   }
 
   function getLayoutStyle(component, backgroundColor) {
-    let style = {
-      overflow: _Utils.default.getComponentAttribute(component, 'overflow', 'auto'),
+    let style = _Utils.default.mergeStyles({
+      overflow: 'auto',
+      border: 'none',
       minWidth: '128px',
       height: '100%',
-      margin: _Utils.default.getComponentAttribute(component, 'margin', 0),
-      padding: _Utils.default.getComponentAttribute(component, 'padding', 0)
-    };
+      margin: 0,
+      padding: 0
+    }, component);
 
     if (!_Utils.default.isNull(backgroundColor)) {
       style.backgroundColor = backgroundColor;
@@ -353,34 +380,37 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
 
     let height = _Utils.default.getComponentAttribute(layout, 'height', 'auto');
 
+    let margin = _Utils.default.getComponentAttribute(layout, 'margin', '0');
+
     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("div", {
       style: {
         margin: '0',
         height: height
       }
     }, layout.components.map(component => {
-      let style = _Utils.default.getComponentAttribute(component, 'style', null);
+      let className = _Utils.default.getComponentAttribute(component, 'className', null);
 
+      console.log(getDefaultComponentContainerStyle(component));
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "row-*-*",
         key: component.key
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "col-*-* ".concat(style),
-        style: style === null || style === 'none' ? getDefaultComponentContainerStyle(component) : null
+        className: "col-*-* ".concat(className),
+        style: className === null || className === 'none' ? getDefaultComponentContainerStyle(component) : null
       }, renderComponent(component)));
     })) : /*#__PURE__*/_react.default.createElement("div", {
-      className: "row-*-*",
+      className: "row",
       style: {
-        margin: '0',
+        margin: margin,
         height: height
       }
     }, layout.components.map(component => {
-      let style = _Utils.default.getComponentAttribute(component, 'style', null);
+      let className = _Utils.default.getComponentAttribute(component, 'className', null);
 
       return /*#__PURE__*/_react.default.createElement("div", {
         key: counter++,
-        className: "col-*-* ".concat(_Utils.default.getComponentAttribute(component, 'style', null)),
-        style: style === null || style === 'none' ? getDefaultComponentContainerStyle(component) : null
+        className: "col-*-* ".concat(_Utils.default.getComponentAttribute(component, 'className', null)),
+        style: className === null || className === 'none' ? getDefaultComponentContainerStyle(component) : null
       }, renderComponent(component));
     }));
   }

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;
 });