@agilemotion/oui-react-js 1.8.16 → 1.8.18

package/dist/components/DataGrid.js

@@ -202,8 +202,8 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
         }
         return children;
       },
-      loadData: actionConfig => {
-        search(actionConfig);
+      loadData: (actionConfig, event) => {
+        search(actionConfig, event);
       },
       deleteSelectedRows: () => {
         // TODO : dispose from observer
@@ -398,6 +398,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
   }
   const search = function () {
     let actionConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    let event = arguments.length > 1 ? arguments[1] : undefined;
     let conf = config;
     if (_Utils.default.isNull(conf)) {
       conf = _Utils.default.parseConfig(props.config, props.viewId);
@@ -413,11 +414,13 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
         method({
           service: service,
           component: props.handle,
-          viewId: props.viewId
+          viewId: props.viewId,
+          event
         }).then(result => {
           processData(result, conf);
         }).catch(e => {
           console.error(e);
+          _Utils.default.publishErrorMessage(e, props.viewId);
         });
       } else {
         throw new Error('Unknown service type : ' + serviceType);

package/dist/components/StepperTitleBar.css

@@ -3,13 +3,27 @@
 .stepVisited {
 }
 
-.box, .dot {
+.box, .box-pending, .dot {
     border-radius: 100px;
-    display: inline-block;
     text-align: center;
-    font-size: 18px;
+    font-size: 14px;
     color: #888888;
     border: 1px solid #888888;
+    display: flex;
+    justify-content: center;
+}
+
+.box-pending {
+    border: unset;
+    border-right: 1px solid #888888;
+    border-top: 1px solid #888888;
+    border-bottom: 1px solid #888888;
+}
+
+.line {
+    border-top: 1px solid #888888;
+    width: 100%;
+    height: 1px;
 }
 
 .step .box,
@@ -32,15 +46,15 @@
 .dot {
     width: 30px;
     height: 30px;
+    font-size: 18px;
 }
 
 .stepActive .dot {
-    color: #ffffff;
+    color: #000000;
     border-color: #ffffff;
 }
 
 .stepVisited .dot {
-    color: #ffffff;
 }
 
 .leftLine,

package/dist/components/StepperTitleBar.js

@@ -14,8 +14,13 @@ require("./StepperTitleBar.css");
 var _jquery = _interopRequireDefault(require("jquery"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useStyles = (0, _styles.makeStyles)(theme => ({
-  theme: {
-    backgroundColor: theme.palette.secondary.main
+  primary: {
+    backgroundColor: theme.palette.primary.main,
+    border: '1px solid ' + theme.palette.primary.main
+  },
+  secondary: {
+    backgroundColor: theme.palette.secondary.main,
+    border: '1px solid ' + theme.palette.secondary.main
   },
   themeBorder: {
     borderColor: theme.palette.secondary.main
@@ -31,7 +36,11 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.def
   const classes = useStyles();
   _react.default.useEffect(() => {
     props.handle.api = api();
+    recalcLinePosition();
   });
+  _react.default.useLayoutEffect(() => {
+    recalcLinePosition();
+  }, []);
   _react.default.useEffect(() => {
     let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
     let eventHandlingConfig = _Utils.default.isNull(parsedConfig.eventHandlingConfig) ? {} : parsedConfig.eventHandlingConfig;
@@ -90,46 +99,73 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.def
     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 ? `${classes.themeBorder} ` : '') + 'leftLine' + (graphicsCounter === steps.length - 1 ? ' lastLine' : '')
+      className: (graphicsCounter <= currentIndex.current ? `${classes.themeBorder} ` : '') + '' + (graphicsCounter === steps.length - 1 ? ' lastLine' : '')
     }) : null, /*#__PURE__*/_react.default.createElement("div", {
-      className: (graphicsCounter <= currentIndex.current ? `${classes.theme} box row` : 'box') + (graphicsCounter === 0 ? ' firstBox' : ''),
+      className: 'row flex' + (graphicsCounter === 0 ? ' firstBox' : ''),
       style: {
         marginLeft: 'unset',
-        marginRight: 'unset'
+        marginRight: 'unset',
+        width: '100%'
       },
       id: 'step-' + graphicsCounter
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: 'dot col-*-*'
-    }, step.index + 1), graphicsCounter === currentIndex.current ? /*#__PURE__*/_react.default.createElement("div", {
-      className: `title col-*-*`,
-      id: "titleDiv"
-    }, step.title) : null), graphicsCounter < steps.length - 1 ? /*#__PURE__*/_react.default.createElement("div", {
-      className: (graphicsCounter < currentIndex.current ? `${classes.themeBorder} ` : '') + 'rightLine' + (graphicsCounter === 0 ? ' firstLine' : '')
+      style: {
+        whiteSpace: "nowrap"
+      },
+      className: (graphicsCounter < currentIndex.current ? `${classes.secondary} box` : graphicsCounter === currentIndex.current ? `${classes.primary} box` : 'box-pending') + ' row no-margin no-padding'
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: 'dot col-*-*',
+      style: {
+        color: graphicsCounter < currentIndex.current ? '#ffffff' : null
+      }
+    }, step.index + 1), graphicsCounter <= currentIndex.current ? /*#__PURE__*/_react.default.createElement("div", {
+      className: `col-*-*`,
+      id: "titleDiv",
+      style: {
+        alignContent: 'center',
+        color: graphicsCounter === currentIndex.current ? '#000000' : '#ffffff',
+        margin: '0 4px'
+      }
+    }, step.title) : /*#__PURE__*/_react.default.createElement("div", {
+      className: `col-*-*`,
+      id: "titleDiv",
+      style: {
+        alignContent: 'center',
+        color: '#888888',
+        margin: '0 4px'
+      }
+    }, step.title)), graphicsCounter < steps.length - 1 && /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flex: 1,
+        overflow: "hidden",
+        alignContent: 'center'
+      },
+      className: 'col-*-*'
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: 'line'
+    }, "\xA0"))), graphicsCounter < steps.length - 1 ? /*#__PURE__*/_react.default.createElement("div", {
+      className: (graphicsCounter < currentIndex.current ? `${classes.themeBorder} ` : '') + '' + (graphicsCounter === 0 ? ' firstLine' : '')
     }) : null, graphicsCounter++ ? null : null);
   }
   function render() {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "w-100",
       style: {
-        width: "100%"
-      }
-    }, /*#__PURE__*/_react.default.createElement("table", {
-      cellPadding: "0",
-      style: {
-        borderCollapse: "collapse",
-        width: "100%"
+        display: "flex",
+        width: "100%",
+        margin: "0 0 16px 0"
       }
-    }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, steps.map(step => /*#__PURE__*/_react.default.createElement("td", {
-      align: graphicsCounter === 0 ? 'left' : graphicsCounter === steps.length - 1 ? 'right' : 'center',
+    }, steps.map(step => /*#__PURE__*/_react.default.createElement("div", {
+      align: graphicsCounter === 0 ? "left" : graphicsCounter === steps.length - 1 ? "right" : "center",
       key: keyCounter++,
       style: {
         whiteSpace: "nowrap",
-        paddingTop: '8px',
-        maxHeight: '8px',
-        width: (graphicsCounter === currentIndex.current ? activeSegmentPercentage : 10) + '%'
+        paddingTop: "8px",
+        maxHeight: "8px",
+        width: 100 / steps.length + "%"
       },
-      id: 'step-container-' + counter++
-    }, renderStep(step)))))));
+      id: "step-container-" + counter++
+    }, renderStep(step))));
   }
   return /*#__PURE__*/_react.default.createElement("div", null, !_Utils.default.isNull(props.config) ? /*#__PURE__*/_react.default.createElement("div", {
     style: _Utils.default.mergeStyles({

package/dist/components/layout/View.js

@@ -22,6 +22,7 @@ const View = props => {
   const [layoutHandle] = _react.default.useState({});
   const [model] = _react.default.useState({});
   const loadingRef = _react.default.useRef(true);
+  const paramsLoaded = _react.default.useRef(false);
   function registerInlineScriptLibraries() {
     if (!_Utils.default.isNull(props.config.lib)) {
       let libName = props.config.id + '_lib';
@@ -116,11 +117,18 @@ const View = props => {
     });
   }
   const api = () => {
+    if (!paramsLoaded.current && !_Utils.default.isNull(props.parameters)) {
+      doUpdateModel(props.parameters);
+      paramsLoaded.current = true;
+    }
     return {
       get id() {
         // View
         return props.config.id;
       },
+      get parameters() {
+        return props.parameters;
+      },
       get model() {
         let children = layoutHandle.api.getChildren();
         for (const child of children) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.8.16",
+  "version": "1.8.18",
   "files": [
     "dist"
   ],