@agilemotion/oui-react-js 1.3.2 → 1.3.3

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(() => {
@@ -105,10 +103,19 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
   });
 
   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 = () => {
@@ -125,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);
       }
 
@@ -133,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 + 1), 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() {
@@ -157,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)))))));
@@ -177,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",
+      margin: "0",
       width: "70%"
-    }
-  }, !_Utils.default.isNull(steps) && !_Utils.default.isNull(segmentPercentage) && !_Utils.default.isNull(currentIndex) ? render() : null) : null);
+    }, 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;
+}