@agilemotion/oui-react-js 1.3.8 → 1.4.0

package/dist/components/TabPanel.js

@@ -21,23 +21,13 @@ var _Section = _interopRequireDefault(require("./form/Section"));
 
 var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
-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); }
+var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
 
-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; }
+var _Layout = require("./layout/Layout");
 
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function a11yProps(index) {
   return {
@@ -47,29 +37,16 @@ function a11yProps(index) {
 }
 
 const TabPanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const _React$useState = _react.default.useState(0),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        tabValue = _React$useState2[0],
-        setTabValue = _React$useState2[1];
+  const [tabValue, setTabValue] = _react.default.useState(0);
 
-  const _React$useState3 = _react.default.useState({}),
-        _React$useState4 = _slicedToArray(_React$useState3, 2),
-        errors = _React$useState4[0],
-        setErrors = _React$useState4[1];
+  const [errors, setErrors] = _react.default.useState({});
 
-  const _React$useState5 = _react.default.useState({}),
-        _React$useState6 = _slicedToArray(_React$useState5, 1),
-        componentHandles = _React$useState6[0];
-
-  let keyCounter = 0;
+  const [componentHandles] = _react.default.useState({});
 
   const handleTabChange = (event, newValue) => {
     setTabValue(newValue);
   };
 
-  let tabIndex = 0;
-  let tabContentIndex = 0;
-
   const createComponentHandle = component => {
     if (_Utils.default.isNull(componentHandles[component.id])) {
       let handle = {};
@@ -80,73 +57,67 @@ const TabPanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     return componentHandles[component.id];
   };
 
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+  });
+
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(props.form)) {
       props.form().setContainerErrorHandler(containerErrors => {
         let shouldRefresh = false;
         let properties = Object.getOwnPropertyNames(containerErrors);
 
-        var _iterator = _createForOfIteratorHelper(properties),
-            _step;
-
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            const property = _step.value;
-
-            if (errors[property] !== containerErrors[property]) {
-              shouldRefresh = true;
-              break;
-            }
+        for (const property of properties) {
+          if (errors[property] !== containerErrors[property]) {
+            shouldRefresh = true;
+            break;
           }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
         }
 
-        if (shouldRefresh) {
-          //Note that this line refreshes the entire tab page
+        if (_ApplicationManager.default.isFormMarkersEnabled() && shouldRefresh) {
           setErrors(JSON.parse(JSON.stringify(containerErrors)));
         }
       });
     }
+  }, []);
 
-    props.handle.api = api();
-  });
-
-  function renderTabPageComponent(component, tabId) {
+  function renderTabPageComponent(component, tabId, index) {
     if (_Utils.default.isNull(component.id)) {
-      component.id = tabContentIndex + '-tab-content';
+      component.id = index + '-tab-content';
     }
 
     return component.type === 'formSection' ? /*#__PURE__*/_react.default.createElement(_Section.default, {
       keyHandler: props.keyHandler,
-      key: tabContentIndex,
+      key: index,
       config: component,
       handle: createComponentHandle(component),
       ref: /*#__PURE__*/_react.default.createRef(),
       form: props.form,
       parentId: tabId,
-      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++,
+      key: index,
       ref: /*#__PURE__*/_react.default.createRef(),
-      viewId: props.viewId,
-      loadCompleteHandler: props.loadCompleteHandler
+      viewId: props.viewId
+    }) : component.type === 'layout' ? /*#__PURE__*/_react.default.createElement(_Layout.Layout, {
+      config: component,
+      handle: createComponentHandle(component),
+      key: index,
+      ref: /*#__PURE__*/_react.default.createRef(),
+      viewId: props.viewId
     }) : /*#__PURE__*/_react.default.createElement("div", null, 'Unsupported component type ' + component.type);
   }
 
-  function renderPage(page) {
+  function renderPage(page, pageIndex) {
     return /*#__PURE__*/_react.default.createElement("div", {
       style: {
         margin: '16px'
       }
-    }, page.components.map(component => {
-      return renderTabPageComponent(component, page.id);
+    }, page.components.map((component, index) => {
+      return renderTabPageComponent(component, page.id, pageIndex + index);
     }));
   }
 
@@ -159,35 +130,15 @@ const TabPanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
         let children = [];
         let properties = Object.getOwnPropertyNames(componentHandles);
 
-        var _iterator2 = _createForOfIteratorHelper(properties),
-            _step2;
-
-        try {
-          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-            const property = _step2.value;
-            let componentHandle = componentHandles[property];
-            children.push(componentHandle);
-
-            if (!_Utils.default.isNull(componentHandle.api.getChildren)) {
-              var _iterator3 = _createForOfIteratorHelper(componentHandle.api.getChildren()),
-                  _step3;
-
-              try {
-                for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-                  const child = _step3.value;
-                  children.push(child);
-                }
-              } catch (err) {
-                _iterator3.e(err);
-              } finally {
-                _iterator3.f();
-              }
+        for (const property of properties) {
+          let componentHandle = componentHandles[property];
+          children.push(componentHandle);
+
+          if (!_Utils.default.isNull(componentHandle.api.getChildren)) {
+            for (const child of componentHandle.api.getChildren()) {
+              children.push(child);
             }
           }
-        } catch (err) {
-          _iterator2.e(err);
-        } finally {
-          _iterator2.f();
         }
 
         return children;
@@ -197,9 +148,9 @@ const TabPanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
 
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    style: {
+    style: _Utils.default.mergeStyles({
       width: '100%'
-    }
+    }, props.config)
   }, /*#__PURE__*/_react.default.createElement(_AppBar.default, {
     position: "static",
     color: "default",
@@ -214,25 +165,25 @@ const TabPanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     indicatorColor: "primary",
     textColor: "primary",
     "aria-label": "tabs"
-  }, !_Utils.default.isNull(props.config) && !_Utils.default.isNull(props.config.tabPages) && props.config.tabPages.length > 0 ? props.config.tabPages.map(page => {
+  }, !_Utils.default.isNull(props.config) && !_Utils.default.isNull(props.config.tabPages) && props.config.tabPages.length > 0 ? props.config.tabPages.map((page, index) => {
     return /*#__PURE__*/_react.default.createElement(_Tab.default, _extends({
       label: page.attributes['label']
-    }, a11yProps(tabIndex), {
-      key: tabIndex++,
+    }, a11yProps(index), {
+      key: index,
       style: {
-        color: !_Utils.default.isNull(props.form) && errors !== null && errors[page.id] === true ? "red" : null
+        color: _ApplicationManager.default.isFormMarkersEnabled() && !_Utils.default.isNull(props.form) && errors !== null && errors[page.id] === true ? '#ed5249' : null
       }
     }));
-  }) : null)), !_Utils.default.isNull(props.config) && !_Utils.default.isNull(props.config.tabPages) && props.config.tabPages.length > 0 ? props.config.tabPages.map(page => {
+  }) : null)), !_Utils.default.isNull(props.config) && !_Utils.default.isNull(props.config.tabPages) && props.config.tabPages.length > 0 ? props.config.tabPages.map((page, index) => {
     if (_Utils.default.isNull(page.id)) {
-      page.id = tabContentIndex + '-tab-page';
+      page.id = index + '-tab-page';
     }
 
     return /*#__PURE__*/_react.default.createElement(_TabPage.default, {
       value: tabValue,
-      key: tabContentIndex,
-      index: tabContentIndex++
-    }, renderPage(page));
+      key: index,
+      index: index
+    }, renderPage(page, index));
   }) : null);
 }));
 

package/dist/components/TableCellContent.js

@@ -21,31 +21,14 @@ var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));
 
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 
-var _ApplicationContext = _interopRequireDefault(require("../ApplicationContext"));
+var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
 
 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 TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const _React$useState = _react.default.useState(props.contentType),
-        _React$useState2 = _slicedToArray(_React$useState, 1),
-        contentType = _React$useState2[0];
+  const [contentType] = _react.default.useState(props.contentType);
 
-  const _React$useState3 = _react.default.useState(true),
-        _React$useState4 = _slicedToArray(_React$useState3, 2),
-        refresher = _React$useState4[0],
-        setRefresher = _React$useState4[1];
+  const [refresher, setRefresher] = _react.default.useState(true);
 
   const validate = value => {
     let validator = props.validator;
@@ -94,14 +77,14 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(ref.current)) {
       props.refCallback(props.row, props.dataBinding, {
-        "api": api
+        'api': api
       });
     }
   }, [ref.current]);
 
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(props.editor)) {
-      props.editor.id = props.editor.id.replace(".", "_");
+      props.editor.id = props.editor.id.replace('.', '_');
 
       if (_Utils.default.isNull(props.editor.attributes)) {
         props.editor.attributes = {};
@@ -115,13 +98,32 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
 
   const getStaticDisplayValue = () => {
     let displayValue;
-    let contentValue = props.row[props.dataBinding];
+    let contentValue;
+    let tokens = props.dataBinding.split('.');
+
+    if (tokens.length === 1) {
+      contentValue = props.row[props.dataBinding];
+    } else {
+      let parent = props.row;
+
+      for (let i = 0; i < tokens.length - 1; i++) {
+        parent = parent[tokens[i]];
+
+        if (!parent) {
+          break;
+        }
+      }
+
+      if (parent) {
+        contentValue = parent[tokens[tokens.length - 1]];
+      }
+    }
 
     if (props.columnConfig.cellFormat === 'MONEY' || props.columnConfig.cellFormat === 'NUMBER') {
       return _Utils.default.isNull(contentValue) ? '' : contentValue.toFixed(2);
     } else {
       if (_Utils.default.isNull(contentValue)) {
-        displayValue = "";
+        displayValue = '';
       } else if (contentType === 'DATE') {
         displayValue = new Date(contentValue).toLocaleDateString();
       } else if (contentType === 'TIME') {
@@ -129,11 +131,7 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
       } else {
         if (typeof contentValue === 'object') {
           // TODO : First check if the editor has a display template. If it does, use it to get the display value
-          if (!_Utils.default.isNull(contentValue.map)) {
-            displayValue = contentValue.map.label;
-          } else {
-            displayValue = contentValue.label;
-          }
+          displayValue = contentValue.dataRecordDescription;
         } else {
           displayValue = contentValue;
         }
@@ -150,11 +148,10 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
       if (!_Utils.default.isNull(props.editor)) {
         props.formValues[props.editor.id] = props.row[props.dataBinding];
 
-        if (props.editor.fieldType === "TEXT_FIELD") {
+        if (props.editor.fieldType === 'TEXT_FIELD') {
           return /*#__PURE__*/_react.default.createElement(_TextField.default, {
             valueChangeHandler: valueChangeHandler,
             config: props.editor,
-            loadCompleteHandler: props.loadCompleteHandler,
             form: props.form,
             handle: {},
             ref: /*#__PURE__*/_react.default.createRef(),
@@ -162,7 +159,7 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
             values: props.formValues,
             viewId: props.viewId
           });
-        } else if (props.editor.fieldType === "DATE") {
+        } else if (props.editor.fieldType === 'DATE') {
           return /*#__PURE__*/_react.default.createElement(_DatePicker.default, {
             valueChangeHandler: valueChangeHandler,
             config: props.editor,
@@ -170,11 +167,10 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
             handle: {},
             ref: /*#__PURE__*/_react.default.createRef(),
             bindValueToForm: false,
-            loadCompleteHandler: props.loadCompleteHandler,
             values: props.formValues,
             viewId: props.viewId
           });
-        } else if (props.editor.fieldType === "SELECT") {
+        } else if (props.editor.fieldType === 'SELECT') {
           let objectReference = props.row[props.dataBinding];
 
           if (!_Utils.default.isNull(objectReference)) {
@@ -190,12 +186,11 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
             handle: {},
             ref: /*#__PURE__*/_react.default.createRef(),
             bindValueToForm: false,
-            loadCompleteHandler: props.loadCompleteHandler,
             values: props.formValues,
             value: objectReference,
             viewId: props.viewId
           });
-        } else if (props.editor.fieldType === "LOOKUP") {
+        } else if (props.editor.fieldType === 'LOOKUP') {
           let data = props.row[props.dataBinding];
 
           if (!_Utils.default.isNull(data)) {
@@ -216,9 +211,6 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
             handle: {},
             ref: /*#__PURE__*/_react.default.createRef(),
             bindValueToForm: false,
-            loadCompleteHandler: id => {
-              _ApplicationContext.default.resolveComponentApi(id).refresh();
-            },
             values: props.formValues,
             value: data,
             viewId: props.viewId