@agilemotion/oui-react-js 1.3.3 → 1.3.5

package/dist/components/TemplateItemEventHandler.js

@@ -48,7 +48,7 @@ class TemplateItemEventHandler {
       event.preventDefault();
     });
 
-    _defineProperty(this, "initDragAndDrop", () => {
+    _defineProperty(this, "initDragAndDrop", (selectionHandler, container) => {
       this.dragOffset = {};
       setTimeout(() => {
         let elements = document.getElementsByClassName("dropTarget");
@@ -68,9 +68,29 @@ class TemplateItemEventHandler {
           _iterator.f();
         }
       }, 2000);
-      document.addEventListener("mousedown", this.handleMouseDown);
-      document.addEventListener("mouseup", this.handleMouseUp);
-      document.addEventListener("mousemove", this.handleMouseMove);
+      container.addEventListener("mousedown", this.handleMouseDown);
+      container.addEventListener("mouseup", event => this.handleMouseUp(event, selectionHandler));
+      container.addEventListener("mousemove", this.handleMouseMove);
+      let parent = document.getElementsByClassName('__sys_placeholders')[0];
+      let placeHolders = document.getElementsByClassName('_draggable_');
+      let dropTarget = this.getDropTarget(parent);
+
+      var _iterator2 = _createForOfIteratorHelper(placeHolders),
+          _step2;
+
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          const placeHolder = _step2.value;
+          placeHolder.addEventListener('mousemove', event => this.handleItemMouseMove(event, parent), false);
+          placeHolder.addEventListener('mouseout', this.handleItemMouseOut, false);
+          placeHolder.addEventListener('mouseup', event => this.handleItemMouseClick(placeHolder, placeHolder.id, selectionHandler), false);
+          placeHolder.addEventListener('dragend', event => this.handleItemDrop(event, document.getElementsByClassName('dropTarget')[0]), false);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
     });
 
     _defineProperty(this, "handleMouseMove", event => {
@@ -81,7 +101,7 @@ class TemplateItemEventHandler {
       this.mouseDown = true;
     });
 
-    _defineProperty(this, "handleMouseUp", event => {
+    _defineProperty(this, "handleMouseUp", (event, selectionHandler) => {
       this.mouseDown = false;
       this.currentResizeNode = null;
       document.body.style.cursor = "default";
@@ -90,6 +110,7 @@ class TemplateItemEventHandler {
         this.resetBorders();
         this.selectedNode = null;
         this.selectedNodeInitPosition = null;
+        selectionHandler(null);
       }
 
       this.tableItemPreResizeWidth = null;
@@ -104,24 +125,15 @@ class TemplateItemEventHandler {
       let width = props.width;
       let height = props.height;
       let parent = event.target;
-      let dropTarget = null;
-
-      while (parent) {
-        if (parent.className === 'dropTarget') {
-          dropTarget = parent;
-          break;
-        }
-
-        parent = parent.parentElement;
-      }
+      let dropTarget = document.getElementsByClassName('dropTarget')[0]; //this.getDropTarget(parent);
 
       if (dropTarget) {
         let container = document.getElementById('templateContainer');
         let node = document.createElement("div");
         node.id = props.id;
         node.style.lineHeight = event.target.style.lineHeight;
-        node.style.left = event.clientX - dropTarget.offsetLeft + 'px';
-        node.style.top = container.scrollTop + event.clientY - dropTarget.offsetTop + 'px';
+        node.style.left = (props.left ? props.left : event.clientX - dropTarget.offsetLeft) + 'px';
+        node.style.top = (props.top ? props.top : container.scrollTop + event.clientY - dropTarget.offsetTop) + 'px';
         node.style.border = '2px dashed green';
         node.className = "_draggable_";
         node.setAttribute("draggable", true);
@@ -159,6 +171,7 @@ class TemplateItemEventHandler {
     });
 
     _defineProperty(this, "handleItemDrop", (event, target) => {
+      console.log("\n\n\n\nclientY : " + event.clientY + " offsetTop : " + target.offsetTop + " dragOffset.y : " + this.dragOffset.y);
       event.target.style.left = event.clientX - target.offsetLeft - this.dragOffset.x + 'px';
       event.target.style.top = event.clientY - target.offsetTop - this.dragOffset.y + 'px';
       event.preventDefault();
@@ -173,61 +186,64 @@ class TemplateItemEventHandler {
       //console.log(this.mouseDown + " : " + node + " : " + this.resizingTableColumn);
       if (this.mouseDown && node) {
         let container = document.getElementById('templateContainer');
-        let mouseX = event.clientX - this.resizingItemParent.offsetLeft + container.scrollLeft;
-        let mouseY = event.clientY - this.resizingItemParent.offsetTop + container.scrollTop;
-        let resizeSpec = {
-          leftOffset: 0,
-          rightOffset: 0,
-          topOffset: 0,
-          bottomOffset: 0
-        };
-
-        if (this.boundCheckLeft) {
-          let widthDiff = mouseX - parse(node.style.left);
-          let newWidth = parse(node.style.width) - widthDiff; //console.log("\n\n\n SETTING SPEC LEFT : " + this.selectedNodeInitPosition.left);
-
-          resizeSpec.leftOffset = mouseX - this.selectedNodeInitPosition.left;
-
-          if (newWidth >= 20) {
-            node.style.width = newWidth + 'px';
-            node.style.left = mouseX + 'px';
+
+        if (container) {
+          let mouseX = event.clientX - this.resizingItemParent.offsetLeft + container.scrollLeft;
+          let mouseY = event.clientY - this.resizingItemParent.offsetTop + container.scrollTop;
+          let resizeSpec = {
+            leftOffset: 0,
+            rightOffset: 0,
+            topOffset: 0,
+            bottomOffset: 0
+          };
+
+          if (this.boundCheckLeft) {
+            let widthDiff = mouseX - parse(node.style.left);
+            let newWidth = parse(node.style.width) - widthDiff; //console.log("\n\n\n SETTING SPEC LEFT : " + this.selectedNodeInitPosition.left);
+
+            resizeSpec.leftOffset = mouseX - this.selectedNodeInitPosition.left;
+
+            if (newWidth >= 20) {
+              node.style.width = newWidth + 'px';
+              node.style.left = mouseX + 'px';
+            }
           }
-        }
 
-        if (this.boundCheckRight) {
-          let newWidth = mouseX - parse(node.style.left);
-          resizeSpec.rightOffset = newWidth - this.selectedNodeInitPosition.width;
+          if (this.boundCheckRight) {
+            let newWidth = mouseX - parse(node.style.left);
+            resizeSpec.rightOffset = newWidth - this.selectedNodeInitPosition.width;
 
-          if (newWidth >= 20) {
-            node.style.width = newWidth + 'px';
+            if (newWidth >= 20) {
+              node.style.width = newWidth + 'px';
+            }
           }
-        }
 
-        if (this.boundCheckTop) {
-          let heightDiff = mouseY - parse(node.style.top);
-          let newHeight = parse(node.style.height) - heightDiff;
-          resizeSpec.topOffset = mouseY - this.selectedNodeInitPosition.top;
+          if (this.boundCheckTop) {
+            let heightDiff = mouseY - parse(node.style.top);
+            let newHeight = parse(node.style.height) - heightDiff;
+            resizeSpec.topOffset = mouseY - this.selectedNodeInitPosition.top;
 
-          if (newHeight >= 20) {
-            node.style.height = newHeight + 'px';
-            node.style.top = mouseY + 'px';
+            if (newHeight >= 20) {
+              node.style.height = newHeight + 'px';
+              node.style.top = mouseY + 'px';
+            }
+
+            resizeSpec.topResized = true;
           }
 
-          resizeSpec.topResized = true;
-        }
+          if (this.boundCheckBottom) {
+            let newHeight = mouseY - parse(node.style.top);
+            resizeSpec.bottomOffset = newHeight - this.selectedNodeInitPosition.height;
 
-        if (this.boundCheckBottom) {
-          let newHeight = mouseY - parse(node.style.top);
-          resizeSpec.bottomOffset = newHeight - this.selectedNodeInitPosition.height;
+            if (newHeight >= 20) {
+              node.style.height = newHeight + 'px';
+            }
 
-          if (newHeight >= 20) {
-            node.style.height = newHeight + 'px';
+            resizeSpec.bottomResized = true;
           }
 
-          resizeSpec.bottomResized = true;
+          this.resizeTables(node, resizeSpec);
         }
-
-        this.resizeTables(node, resizeSpec);
       }
     });
 
@@ -264,18 +280,18 @@ class TemplateItemEventHandler {
     _defineProperty(this, "resetBorders", () => {
       let items = document.getElementsByClassName("_draggable_");
 
-      var _iterator2 = _createForOfIteratorHelper(items),
-          _step2;
+      var _iterator3 = _createForOfIteratorHelper(items),
+          _step3;
 
       try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          const item = _step2.value;
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          const item = _step3.value;
           item.style.border = 'none';
         }
       } catch (err) {
-        _iterator2.e(err);
+        _iterator3.e(err);
       } finally {
-        _iterator2.f();
+        _iterator3.f();
       }
     });
 
@@ -295,10 +311,26 @@ class TemplateItemEventHandler {
       node.style.border = '2px dashed green';
       this.selectedNode = node;
       this.setSelectedInitNodePos();
-      selectionHandler(id);
+      selectionHandler(id, node);
     });
   }
 
+  getDropTarget(node) {
+    let parent = node;
+    let dropTarget = null;
+
+    while (parent) {
+      if (parent.className === 'dropTarget') {
+        dropTarget = parent;
+        break;
+      }
+
+      parent = parent.parentElement;
+    }
+
+    return dropTarget;
+  }
+
   resizeTables(node, spec) {
     let tables = node.getElementsByClassName('_item_table');
     let table = tables && tables.length > 0 ? tables[0] : null;
@@ -318,12 +350,12 @@ class TemplateItemEventHandler {
         let newWidth;
         let resized = true;
 
-        var _iterator3 = _createForOfIteratorHelper(lastCols),
-            _step3;
+        var _iterator4 = _createForOfIteratorHelper(lastCols),
+            _step4;
 
         try {
-          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-            const lastCol = _step3.value;
+          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+            const lastCol = _step4.value;
 
             if (!this.lastColItemPreResizeWidth) {
               this.lastColItemPreResizeWidth = parse(lastCol.style.width);
@@ -339,9 +371,9 @@ class TemplateItemEventHandler {
             }
           }
         } catch (err) {
-          _iterator3.e(err);
+          _iterator4.e(err);
         } finally {
-          _iterator3.f();
+          _iterator4.f();
         }
 
         if (resized) {
@@ -354,12 +386,12 @@ class TemplateItemEventHandler {
         let firstCols = node.getElementsByClassName('_item_table_col_0');
         let resized = true;
 
-        var _iterator4 = _createForOfIteratorHelper(firstCols),
-            _step4;
+        var _iterator5 = _createForOfIteratorHelper(firstCols),
+            _step5;
 
         try {
-          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-            const firstCol = _step4.value;
+          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+            const firstCol = _step5.value;
 
             if (!this.firstColItemPreResizeWidth) {
               this.firstColItemPreResizeWidth = parse(firstCol.style.width);
@@ -375,9 +407,9 @@ class TemplateItemEventHandler {
             }
           }
         } catch (err) {
-          _iterator4.e(err);
+          _iterator5.e(err);
         } finally {
-          _iterator4.f();
+          _iterator5.f();
         }
 
         if (resized) {
@@ -399,18 +431,18 @@ class TemplateItemEventHandler {
           newHeight = this.firstRowItemPreResizeHeight + spec.bottomOffset / rows.length;
         }
 
-        var _iterator5 = _createForOfIteratorHelper(rows),
-            _step5;
+        var _iterator6 = _createForOfIteratorHelper(rows),
+            _step6;
 
         try {
-          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-            const row = _step5.value;
+          for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+            const row = _step6.value;
             row.style.height = newHeight + 'px';
           }
         } catch (err) {
-          _iterator5.e(err);
+          _iterator6.e(err);
         } finally {
-          _iterator5.f();
+          _iterator6.f();
         }
 
         if (spec.topOffset !== 0) {

package/dist/components/form/BaseField.js

@@ -338,10 +338,11 @@ const BaseField = props => {
   };
 
   return config ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "col",
+    className: "col-*-*",
     key: config.id,
     style: {
       textAlign: 'left',
+      marginLeft: '15px',
       display: !visible || _Utils.default.getComponentAttribute(config, 'hidden', false) === true ? 'none' : 'block'
     }
   }, /*#__PURE__*/_react.default.createElement("span", null, props.children({

package/dist/components/form/FieldSet.js

@@ -449,25 +449,27 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
           return null;
         }
 
-        var _iterator6 = _createForOfIteratorHelper(props.config.fields),
-            _step6;
-
-        try {
-          for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-            const field = _step6.value;
-            map[field.id] = formValue.map[field.id];
+        if (!_Utils.default.isNull(formValue) && !_Utils.default.isNull(formValue.map)) {
+          var _iterator6 = _createForOfIteratorHelper(props.config.fields),
+              _step6;
+
+          try {
+            for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+              const field = _step6.value;
+              map[field.id] = formValue.map[field.id];
+            }
+          } catch (err) {
+            _iterator6.e(err);
+          } finally {
+            _iterator6.f();
           }
-        } catch (err) {
-          _iterator6.e(err);
-        } finally {
-          _iterator6.f();
         }
 
         value.map = map;
         return value;
       },
 
-      loadData: (actionConfig, eventData) => {
+      loadData: (actionConfig, actionEvent) => {
         let service = !_Utils.default.isNull(actionConfig.dataService) ? actionConfig.dataService : !_Utils.default.isNull(props.config) ? props.config.dataService : null;
         let componentValue = !_Utils.default.isNull(props.config.value) ? props.config.value : actionConfig !== null ? actionConfig.value : null;
 
@@ -476,7 +478,7 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
 
           let isEpression = _ApplicationContext.default.isExpression(componentValue);
 
-          let val = isEventData || isEpression ? _ApplicationContext.default.resolveExpressionValue(componentValue, eventData) : componentValue;
+          let val = isEventData || isEpression ? _ApplicationContext.default.resolveExpressionValue(componentValue, actionEvent ? actionEvent.data : null) : componentValue;
           props.form().bindData(val);
           let event = new _Event.default(props.handle, props.viewId, val);
 
@@ -534,10 +536,11 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       }, row.fields.map(field => {
         return /*#__PURE__*/_react.default.createElement("div", {
           key: componentKey++,
-          className: "col",
+          className: "col-*-*",
           style: {
             paddingLeft: '0',
-            paddingRight: '0'
+            paddingRight: '0',
+            minWidth: '320px'
           }
         }, renderComponent(field));
       }));

package/dist/components/form/Form.css

@@ -14,6 +14,7 @@
     font-weight: 400;
     font-size: 20px;
     color: rgba(0,0,0,.87);
+    margin: 8px 0;
 }
 
 .tableFilterForm {

package/dist/components/form/Form.js

@@ -155,8 +155,8 @@ const Form = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
       removeField: id => {
         _removeField(id);
       },
-      loadData: (actionConfig, eventData) => {
-        _loadData(actionConfig, config, eventData);
+      loadData: (actionConfig, event) => {
+        _loadData(actionConfig, config, event ? event.data : null);
       },
       bindData: data => {
         doBindData(data);
@@ -235,6 +235,7 @@ const Form = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
                 if (fieldValid === false) {
                   doValidateParent(field, !fieldValid);
                   valid = false;
+                  console.log("INVALID FORM FIELD : " + field.handle.api.id);
                 } else if (valid) {
                   let id = field.id;
 

package/dist/components/form/ImageEditor.js

@@ -232,15 +232,22 @@ const ImageEditorComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_rea
 
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      margin: '8px',
       width: width
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "row"
+    className: "row",
+    style: {
+      marginLeft: '0',
+      marginRight: '0'
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "col-*-*"
   }, /*#__PURE__*/_react.default.createElement("label", null, _Utils.default.getComponentAttribute(props.config, 'label', '')))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "row"
+    className: "row",
+    style: {
+      marginLeft: '0',
+      marginRight: '0'
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "col-*-*"
   }, /*#__PURE__*/_react.default.createElement("input", {
@@ -341,7 +348,9 @@ const ImageEditorComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_rea
   }) : null)), !_Utils.default.isNull(base.value) ? /*#__PURE__*/_react.default.createElement("div", {
     className: "row",
     style: {
-      padding: "8px 0"
+      padding: "8px 0",
+      marginLeft: '0',
+      marginRight: '0'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "__image_parent",

package/dist/components/layout/Layout.js

@@ -390,7 +390,6 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     }, layout.components.map(component => {
       let className = _Utils.default.getComponentAttribute(component, 'className', null);
 
-      console.log(getDefaultComponentContainerStyle(component));
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "row-*-*",
         key: component.key

package/dist/components/signatures/DocumentContainer.js

@@ -149,6 +149,8 @@ const DocumentContainer = props => {
                 color = 'red';
               }
 
+              console.log(signingInput.tagName + " - " + signingInput.index + " - " + initialImage);
+              console.log(signingInput);
               template = template.replace(signingInput.tagName, "<sgvp".concat(signingInput.index, " />"));
 
               rendererProps["sgvp".concat(signingInput.index)] = props => /*#__PURE__*/_react.default.createElement("div", {
@@ -156,10 +158,8 @@ const DocumentContainer = props => {
                   borderRadius: '4px',
                   border: '4px dashed ' + color,
                   position: 'absolute',
-                  top: signingInput.padPosition.top ? signingInput.padPosition.top + 'px' : '0',
-                  left: signingInput.padPosition.left ? signingInput.padPosition.left + 'px' : '0',
-                  width: signingInput.padPosition.width ? signingInput.padPosition.width + 'px' : "SIGN" === signingInput.inputType ? '200px' : '48px',
-                  height: signingInput.padPosition.height ? signingInput.padPosition.height + 'px' : "SIGN" === signingInput.inputType ? '64px' : '48px'
+                  width: '100px',
+                  height: '60px'
                 }
               }, "SIGN" === signingInput.inputType && signatureImage !== null ? /*#__PURE__*/_react.default.createElement("img", {
                 src: signatureImage,