@agilemotion/oui-react-js 1.3.1 → 1.3.3

package/dist/components/SignaturePanel.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Utils = _interopRequireDefault(require("../Utils"));
+
+var _Observable = _interopRequireDefault(require("../event/Observable"));
+
+var _RestUtils = require("../RestUtils");
+
+var _ServiceCallActionHandler = _interopRequireDefault(require("../event/ServiceCallActionHandler"));
+
+var _DocumentContainer = _interopRequireDefault(require("@agilemotion/signi-vault-ui/dist/DocumentContainer"));
+
+var _AgilitySignaturePanel = _interopRequireDefault(require("./signatures/AgilitySignaturePanel"));
+
+var _Event = _interopRequireDefault(require("../event/Event"));
+
+var _EventType = _interopRequireDefault(require("../event/EventType"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+const SignaturePanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const _React$useState = _react.default.useState(true),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        initializing = _React$useState2[0],
+        setInitializing = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(null),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        config = _React$useState4[0],
+        setConfig = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState(null),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        value = _React$useState6[0],
+        setValue = _React$useState6[1];
+
+  const _React$useState7 = _react.default.useState({}),
+        _React$useState8 = _slicedToArray(_React$useState7, 1),
+        handle = _React$useState8[0];
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+
+    if (initializing) {
+      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+      _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
+
+      _Observable.default.addSystemSubscriptions(parsedConfig);
+
+      setInitializing(false);
+
+      if (!_Utils.default.isNull(props.loadCompleteHandler)) {
+        props.loadCompleteHandler(props.config.id);
+      }
+    }
+  });
+
+  _react.default.useEffect(() => {
+    let event = new _Event.default(props.handle, props.viewId, value);
+
+    _Observable.default.fireEvent(_EventType.default.VALUE_CHANGE, event);
+  }, [value]);
+
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+
+      get value() {
+        if (!_Utils.default.isNull(handle.api)) {
+          return handle.api.value;
+        }
+
+        return value;
+      },
+
+      loadData: actionConfig => {
+        let service = !_Utils.default.isNull(props.config.dataService) ? props.config.dataService : actionConfig !== null ? actionConfig.dataService : null;
+
+        if (!_Utils.default.isNull(service)) {
+          if (service.type === 'remoteObjectProxy') {
+            (0, _RestUtils.invokeRpc)(service, props.handle, props.viewId, result => {
+              setConfig(result);
+            }, e => {}, parameter => {});
+          } else {
+            if (_Utils.default.isNull(actionConfig)) {
+              actionConfig = {};
+            }
+
+            actionConfig.service = service;
+
+            _ServiceCallActionHandler.default.execute(actionConfig, null, null, props.viewId, data => {
+              setConfig(data);
+            }, () => {});
+          }
+        }
+      }
+    };
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref
+  }, config !== null ? config.documents ? props.config.provider === 'AGILITY' ? /*#__PURE__*/_react.default.createElement(_AgilitySignaturePanel.default, {
+    valueChangeHandler: value => {
+      console.log(value);
+      setValue(value);
+    },
+    config: config,
+    imageProcessingUrl: props.config.imageProcessingUrl,
+    signatureImageUrl: props.config.signatureImageUrl
+  }) : props.config.provider === 'SIGNIVAULT' ? /*#__PURE__*/_react.default.createElement(_DocumentContainer.default, {
+    handle: handle,
+    config: config
+  }) : /*#__PURE__*/_react.default.createElement("div", null, "Unsupported provider") : /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '32px 0 32px 48px'
+    }
+  }, "No document data") : /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '32px 0 32px 48px'
+    }
+  }, "Loading..."));
+}));
+
+var _default = SignaturePanel;
+exports.default = _default;

package/dist/components/StepperTitleBar.bck.css

@@ -0,0 +1,85 @@
+.stepDot,
+.stepDotActive,
+.stepDotVisited,
+.stepDotBox,
+.stepDotBoxActive {
+    border-radius: 100px;
+    display: inline-block;
+    text-align: center;
+    font-size: 18px;
+    color: #888888;
+    border: 1px solid #888888;
+}
+
+.stepDotBox,
+.stepDotBoxActive {
+    border: none;
+}
+
+.stepDotVisited,
+.stepDotActive {
+    color: #ffffff;
+    border: 1px solid #ffffff;
+    font-weight: 600;
+}
+
+.stepDotVisited {
+    border: none;
+}
+
+.stepTitle{
+    color: #ffffff;
+    font-size: 16px;
+    height: 30px;
+    float: right;
+    border-top-right-radius: 100px;
+    border-bottom-right-radius: 100px;
+    padding: 2px 8px;
+    font-weight: 600;
+}
+
+@media screen and (min-width:3480px) {
+    .stepTitle {
+        padding: 2px 0;
+    }
+}
+
+.stepDot,
+.stepDotVisited,
+.stepDotActive {
+    float: left;
+    width: 30px;
+    height: 30px;
+}
+
+.stepperLine {
+    width: calc(50% - 15px);
+    float: left;
+    border-top: 1px solid #888888;
+    margin: -16px 0 0 0;
+    padding: 0;
+}
+
+@media screen and (min-width:732px) {
+    .stepperLine {
+        width: calc(50% - 15.3px);
+    }
+}
+
+@media screen and (min-width:1176px) {
+    .stepperLine {
+        width: calc(50% - 15.4px);
+    }
+}
+
+@media screen and (min-width:2200px) {
+    .stepperLine {
+        width: calc(50% - 15.7px);
+    }
+}
+
+@media screen and (min-width:7320px) {
+    .stepperLine {
+        width: calc(50% - 16px);
+    }
+}

package/dist/components/StepperTitleBar.css

@@ -1,8 +1,9 @@
-.stepDot,
-.stepDotActive,
-.stepDotVisited,
-.stepDotBox,
-.stepDotBoxActive {
+.step,
+.stepActive,
+.stepVisited {
+}
+
+.box, .dot {
     border-radius: 100px;
     display: inline-block;
     text-align: center;
@@ -11,75 +12,73 @@
     border: 1px solid #888888;
 }
 
-.stepDotBox,
-.stepDotBoxActive {
-    border: none;
+.step .box,
+.stepVisited .box,
+.stepActive .box {
+    float: left;
 }
 
-.stepDotVisited,
-.stepDotActive {
-    color: #ffffff;
-    border: 1px solid #ffffff;
-    font-weight: 600;
+.stepVisited .firstBox {
+    margin-left: calc(50% - 15px);
 }
 
-.stepDotVisited {
+.box {
     border: none;
 }
 
-.stepTitle{
-    color: #ffffff;
-    font-size: 16px;
+.dot {
+    width: 30px;
     height: 30px;
-    float: right;
-    border-top-right-radius: 100px;
-    border-bottom-right-radius: 100px;
-    padding: 2px 8px;
-    font-weight: 600;
 }
 
-@media screen and (min-width:3480px) {
-    .stepTitle {
-        padding: 2px 0;
-    }
+.stepActive .dot {
+    color: #ffffff;
+    border-color: #ffffff;
 }
 
-.stepDot,
-.stepDotVisited,
-.stepDotActive {
-    float: left;
-    width: 30px;
-    height: 30px;
+.stepVisited .dot {
+    color: #ffffff;
 }
 
-.stepperLine {
-    width: calc(100% - 30px);
-    float: left;
-    border-top: 1px solid #888888;
-    margin: 14px 0 0 0;
-    padding: 0;
+.leftLine,
+.rightLine {
+    border-bottom: 1px solid;
+}
+
+.step .rightLine,
+.step .leftLine,
+.stepVisited .rightLine,
+.stepVisited .leftLine {
+    width: calc(50% - 15px);
 }
 
-@media screen and (min-width:732px) {
-    .stepperLine {
-        width: calc(100% - 30.3px);
-    }
+.stepVisited .firstLine {
+    margin-left: 30px;
+    width: calc(50% - 15px);
 }
 
-@media screen and (min-width:1176px) {
-    .stepperLine {
-        width: calc(100% - 30.4px);
-    }
+.step .lastLine {
+    width: calc(50% - 15px);
 }
 
-@media screen and (min-width:2200px) {
-    .stepperLine {
-        width: calc(100% - 30.7px);
-    }
+.leftLine {
+    float: left;
+    margin-top: 15px;
+}
+
+.rightLine {
+    float: right;
+    margin-top: -15px;
+    margin-left: 1px;
 }
 
-@media screen and (min-width:7320px) {
-    .stepperLine {
-        width: calc(100% - 32px);
-    }
+.title {
+    color: #ffffff;
+    font-size: 16px;
+    height: 30px;
+    float: right;
+    border-top-right-radius: 100px;
+    border-bottom-right-radius: 100px;
+    padding: 2px 8px;
+    font-weight: 600;
 }

package/dist/components/StepperTitleBar.js

@@ -60,13 +60,11 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
         segmentPercentage = _React$useState6[0],
         setSegmentPercentage = _React$useState6[1];
 
-  const _React$useState7 = _react.default.useState(null),
-        _React$useState8 = _slicedToArray(_React$useState7, 2),
-        currentIndex = _React$useState8[0],
-        setCurrentIndex = _React$useState8[1];
+  const currentIndex = _react.default.useRef(null);
 
-  let counter = -1;
-  let graphicsCounter = -1;
+  let keyCounter = 0;
+  let counter = 0;
+  let graphicsCounter = 0;
   const classes = useStyles();
 
   _react.default.useEffect(() => {
@@ -100,13 +98,24 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
         recalcLinePosition();
       });
     }
+
+    recalcLinePosition();
   });
 
   const recalcLinePosition = () => {
-    (0, _jquery.default)("#selectedLineDiv").css({
-      'width': (0, _jquery.default)("#step-container-0").width() - ((0, _jquery.default)("#titleDiv").width() + 40) + 'px',
-      'position': 'absolute'
-    });
+    let titleDiv = (0, _jquery.default)("#titleDiv");
+    let step = (0, _jquery.default)("#step-container-" + currentIndex.current);
+
+    if (currentIndex.current !== null && !_Utils.default.isNull(step.width())) {
+      let titleWidth = titleDiv.width() + 46;
+      (0, _jquery.default)(".stepActive .rightLine").css({
+        'margin-left': currentIndex.current === 0 ? titleWidth : titleWidth / 2 + step.width() / 2 - 2 + 'px',
+        'width': currentIndex.current === 0 ? step.width() - titleWidth + 2 : step.width() / 2 - titleWidth / 2 + 'px'
+      });
+      (0, _jquery.default)(".stepActive .leftLine").css({
+        'width': step.width() / 2 - titleWidth / 2 + 'px'
+      });
+    }
   };
 
   const api = () => {
@@ -123,7 +132,7 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
         let steps = _ApplicationContext.default.graphs[0].getTitleStack();
 
         setSteps(steps);
-        setCurrentIndex(_ApplicationContext.default.graphs[0].getCurrentNodeIndex());
+        currentIndex.current = _ApplicationContext.default.graphs[0].getCurrentNodeIndex();
         setSegmentPercentage(100 / steps.length);
       }
 
@@ -131,20 +140,23 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
   };
 
   function renderStep(step) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ++graphicsCounter > 0 ? /*#__PURE__*/_react.default.createElement("div", {
-      className: graphicsCounter === currentIndex ? "".concat(classes.themeBorder, " stepperLine") : 'stepperLine',
-      id: graphicsCounter === currentIndex ? 'selectedLineDiv' : 'lineDiv'
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: graphicsCounter === currentIndex.current ? "stepActive" : graphicsCounter < currentIndex.current ? 'stepVisited' : 'step'
+    }, graphicsCounter > 0 ? /*#__PURE__*/_react.default.createElement("div", {
+      className: (graphicsCounter <= currentIndex.current ? "".concat(classes.themeBorder, " ") : '') + 'leftLine' + (graphicsCounter === steps.length - 1 ? ' lastLine' : '')
     }) : null, /*#__PURE__*/_react.default.createElement("div", {
-      className: graphicsCounter === currentIndex ? "".concat(classes.theme, " stepDotBoxActive") : 'stepDotBox',
+      className: (graphicsCounter <= currentIndex.current ? "".concat(classes.theme, " box") : 'box') + (graphicsCounter === 0 ? ' firstBox' : ''),
       style: {
         display: "table-cell"
       }
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: graphicsCounter < currentIndex ? "".concat(classes.theme, " stepDotVisited") : graphicsCounter === currentIndex ? "".concat(classes.theme, " stepDotActive") : 'stepDot'
-    }, step.index), graphicsCounter === currentIndex ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "stepTitle",
+      className: 'dot'
+    }, step.index + 1), graphicsCounter === currentIndex.current ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "title",
       id: "titleDiv"
-    }, step.title) : null));
+    }, step.title) : null), graphicsCounter < steps.length - 1 ? /*#__PURE__*/_react.default.createElement("div", {
+      className: (graphicsCounter < currentIndex.current ? "".concat(classes.themeBorder, " ") : '') + 'rightLine' + (graphicsCounter === 0 ? ' firstLine' : '')
+    }) : null, graphicsCounter++ ? null : null);
   }
 
   function render() {
@@ -155,18 +167,18 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
       }
     }, /*#__PURE__*/_react.default.createElement("table", {
       cellPadding: "0",
-      border: "0",
-      width: "100%",
       style: {
-        borderCollapse: "collapse"
+        borderCollapse: "collapse",
+        width: "100%"
       }
     }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, steps.map(step => /*#__PURE__*/_react.default.createElement("td", {
-      width: segmentPercentage + '%',
-      align: "right",
+      align: graphicsCounter === 0 ? 'left' : graphicsCounter === steps.length - 1 ? 'right' : 'center',
+      key: keyCounter++,
       style: {
         whiteSpace: "nowrap",
         paddingTop: '8px',
-        maxHeight: '8px'
+        maxHeight: '8px',
+        width: segmentPercentage + '%'
       },
       id: 'step-container-' + counter++
     }, renderStep(step)))))));
@@ -175,13 +187,14 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref
   }, !_Utils.default.isNull(props.config) ? /*#__PURE__*/_react.default.createElement("div", {
-    style: {
+    style: _Utils.default.mergeStyles({
       fontSize: '24px',
       color: '#202124',
       padding: "16px 0",
-      width: "60%"
-    }
-  }, !_Utils.default.isNull(steps) && !_Utils.default.isNull(segmentPercentage) && !_Utils.default.isNull(currentIndex) ? render() : null) : null);
+      margin: "0",
+      width: "70%"
+    }, props.config)
+  }, !_Utils.default.isNull(steps) && !_Utils.default.isNull(segmentPercentage) && !_Utils.default.isNull(currentIndex.current) ? render() : null) : null);
 }));
 
 var _default = StepperTitleBar;

package/dist/components/TabPanel.js

@@ -7,20 +7,10 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
-
-var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
-
-var _styles = require("@material-ui/core/styles");
-
 var _Utils = _interopRequireDefault(require("../Utils"));
 
 var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));
 
-var _Form = _interopRequireDefault(require("./form/Form"));
-
 var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
 
 var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
@@ -29,7 +19,7 @@ var _TabPage = _interopRequireDefault(require("./TabPage"));
 
 var _Section = _interopRequireDefault(require("./form/Section"));
 
-var _mobx = require("mobx");
+var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -71,6 +61,8 @@ const TabPanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
         _React$useState6 = _slicedToArray(_React$useState5, 1),
         componentHandles = _React$useState6[0];
 
+  let keyCounter = 0;
+
   const handleTabChange = (event, newValue) => {
     setTabValue(newValue);
   };
@@ -138,6 +130,13 @@ const TabPanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       loadCompleteHandler: props.loadCompleteHandler,
       viewId: props.viewId,
       values: props.values
+    }) : component.type === 'toolbar' ? /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+      config: component,
+      handle: createComponentHandle(component),
+      key: keyCounter++,
+      ref: /*#__PURE__*/_react.default.createRef(),
+      viewId: props.viewId,
+      loadCompleteHandler: props.loadCompleteHandler
     }) : /*#__PURE__*/_react.default.createElement("div", null, 'Unsupported component type ' + component.type);
   }
 

package/dist/components/TableCellContent.js

@@ -108,7 +108,8 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
       }
 
       props.editor.attributes['minWidth'] = 0;
-      valueChangeHandler(null);
+      let value = props.row[props.dataBinding];
+      valueChangeHandler(_Utils.default.isNull(value) ? null : value);
     }
   }, [props.editor]);
 
@@ -249,9 +250,11 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
       }
     }))) : null, /*#__PURE__*/_react.default.createElement("td", {
       style: props.columnConfig.cellFormat === 'MONEY' || props.columnConfig.cellFormat === 'NUMBER' ? {
-        textAlign: 'right'
+        textAlign: 'right',
+        maxWidth: 0
       } : {
-        textAlign: 'left'
+        textAlign: 'left',
+        maxWidth: 0
       }
     }, doRender()))));
   };

package/dist/components/TemplateDesigner.css

@@ -0,0 +1,13 @@
+._draggable_ {
+    position: absolute;
+    border-radius: 2px;
+    display: inline-block;
+    margin-left: 4px;
+    font-style: italic;
+    font-weight: 600;
+    font-size: 12px;
+    color: green;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}