@agilemotion/oui-react-js 0.1.0

package/dist/components/form/Form.js

@@ -0,0 +1,1044 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+var _Section = _interopRequireDefault(require("./Section"));
+
+require("./Form.css");
+
+var _RestUtils = require("../../RestUtils");
+
+var _asyncMutex = require("async-mutex");
+
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+
+var _ApplicationContext = _interopRequireDefault(require("../../ApplicationContext"));
+
+var _ServiceCallActionHandler = _interopRequireDefault(require("../../event/ServiceCallActionHandler"));
+
+var _DynamicJS = _interopRequireDefault(require("../../DynamicJS"));
+
+var _EventType = _interopRequireDefault(require("../../event/EventType"));
+
+var _Event = _interopRequireDefault(require("../../event/Event"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+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); }
+
+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 useStyles = (0, _styles.makeStyles)(theme => ({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    width: '100%',
+    "& tr td": {
+      verticalAlign: "top"
+    }
+  },
+  select: {
+    margin: theme.spacing(1),
+    minWidth: 120,
+    minHeight: 48
+  },
+  selectEmpty: {
+    marginTop: theme.spacing(2)
+  },
+  root: {}
+}));
+
+const Form = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const _React$useState = _react.default.useState(!_Utils.default.isNull(props.values) ? props.values : {}),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        values = _React$useState2[0],
+        setValues = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(null),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        masterValues = _React$useState4[0],
+        setMasterValues = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState(null),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        config = _React$useState6[0],
+        setConfig = _React$useState6[1];
+
+  const _React$useState7 = _react.default.useState(_Utils.default.isNull(props.config.binder) ? 'PLAIN_OBJECT' : props.config.binder),
+        _React$useState8 = _slicedToArray(_React$useState7, 1),
+        binder = _React$useState8[0];
+
+  const _React$useState9 = _react.default.useState([]),
+        _React$useState10 = _slicedToArray(_React$useState9, 1),
+        fields = _React$useState10[0];
+
+  const containerErrorCallback = _react.default.useRef();
+
+  const _React$useState11 = _react.default.useState({}),
+        _React$useState12 = _slicedToArray(_React$useState11, 1),
+        sectionHandles = _React$useState12[0];
+
+  const _React$useState13 = _react.default.useState([]),
+        _React$useState14 = _slicedToArray(_React$useState13, 1),
+        loadedComponents = _React$useState14[0];
+
+  const _React$useState15 = _react.default.useState({}),
+        _React$useState16 = _slicedToArray(_React$useState15, 1),
+        fieldParentErrors = _React$useState16[0];
+
+  const loadingRef = _react.default.useRef(true);
+
+  const _React$useState17 = _react.default.useState(true),
+        _React$useState18 = _slicedToArray(_React$useState17, 2),
+        initializing = _React$useState18[0],
+        setInitializing = _React$useState18[1];
+
+  const mutex = new _asyncMutex.Mutex();
+  let sectionCounter = 0;
+
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+
+      doUpdateValue: (name, value) => {
+        return updateValue(name, value);
+      },
+      clear: () => {
+        doClear();
+      },
+      setValue: (id, value) => {
+        doHandleChange(id, value);
+      },
+      handleSelectItemChange: (name, options, selectedId) => {
+        return _handleSelectItemChange(name, options, selectedId);
+      },
+      handleChange: (id, value) => {
+        doHandleChange(id, value);
+      },
+      getValuePath: (id, values) => {
+        return _getValuePath(id, values);
+      },
+      addField: (id, ref, parentId, bindValueToForm) => {
+        return _addField(id, ref, parentId, bindValueToForm);
+      },
+      removeField: id => {
+        _removeField(id);
+      },
+      loadData: actionConfig => {
+        _loadData(actionConfig, config);
+      },
+      bindData: data => {
+        doBindData(data);
+      },
+      validateParent: (id, invalid) => {
+        doValidateParent(getField(id), invalid);
+      },
+
+      get fieldDataBindings() {
+        let fieldNames = [];
+
+        for (let i = 0; i < props.config.sections.length; i++) {
+          let section = props.config.sections[i];
+
+          for (let j = 0; j < section.components.length; j++) {
+            let component = section.components[j];
+            let fields = null;
+
+            if (component.type === 'tab') {
+              fields = getFieldsFromTab(component);
+            } else {
+              fields = component.fields;
+            }
+
+            for (let k = 0; k < fields.length; k++) {
+              let field = fields[k];
+              fieldNames.push(!_Utils.default.isNull(field.dataBinding) ? field.dataBinding : field.id);
+            }
+          }
+        }
+
+        return fieldNames;
+      },
+
+      setContainerErrorHandler(callback) {
+        containerErrorCallback.current = callback;
+      },
+
+      get model() {
+        return values;
+      },
+
+      set model(model) {
+        parseValues(transformDataObject(model));
+        setMasterValues(model);
+      },
+
+      get value() {
+        if (loadingRef.current === false) {
+          let data = null;
+          let currentValue = values;
+          let valid = true;
+          let parentErrors = {};
+
+          if (binder === 'MAP_OBJECT') {
+            data = {};
+            let map = !_Utils.default.isNull(masterValues) ? JSON.parse(JSON.stringify(masterValues.map)) : {};
+
+            if (_Utils.default.isNull(map.id)) {
+              map.id = values.id;
+            }
+
+            var _iterator = _createForOfIteratorHelper(fields),
+                _step;
+
+            try {
+              for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                const field = _step.value;
+
+                if (field.bindValueToForm === false) {
+                  continue;
+                }
+
+                let fieldValid = field.handle.api.validate(values, null);
+
+                if (fieldValid === false) {
+                  doValidateParent(field, !fieldValid);
+                  valid = false;
+                } else if (valid) {
+                  let id = field.id;
+
+                  let path = _getValuePath(id, values);
+
+                  map[id] = field.handle.api.parseValue(path.valueObject[path.valueProperty], false);
+                }
+              }
+            } catch (err) {
+              _iterator.e(err);
+            } finally {
+              _iterator.f();
+            }
+
+            if (binder === 'MAP_OBJECT') {
+              data.map = map;
+            } else {
+              data = map;
+            }
+          } else {
+            data = values;
+          }
+
+          return valid ? data : null;
+        }
+
+        return null;
+      },
+
+      setFieldError: (id, error) => {
+        return _setFieldError(id, error);
+      },
+      getChildren: () => {
+        let children = [];
+
+        for (let i = 0; i < fields.length; i++) {
+          let field = fields[i];
+          children.push(field.handle);
+          let moreChildren = field.handle.api.getChildren();
+
+          for (let j = 0; j < moreChildren.length; j++) {
+            children.push(moreChildren[j]);
+          }
+        }
+
+        let properties = Object.getOwnPropertyNames(sectionHandles);
+
+        var _iterator2 = _createForOfIteratorHelper(properties),
+            _step2;
+
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            const property = _step2.value;
+            let sectionHandle = sectionHandles[property];
+            children.push(sectionHandle);
+
+            var _iterator3 = _createForOfIteratorHelper(sectionHandle.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();
+            }
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+
+        return children;
+      }
+    };
+  };
+
+  const createSectionHandle = section => {
+    if (_Utils.default.isNull(sectionHandles[section.id])) {
+      let handle = {};
+      sectionHandles[section.id] = handle;
+      return handle;
+    }
+
+    return sectionHandles[section.id];
+  };
+
+  function updateViewTitle() {
+    let currentView = _ApplicationContext.default.getCurrentView();
+
+    let title = currentView.config.title;
+
+    if (title.includes(props.config.id)) {
+      _ApplicationContext.default.updateAppBarTitle(currentView.config.id, title);
+    }
+  }
+
+  function handleDataArrived(data) {
+    updateViewTitle();
+
+    if (!_Utils.default.isNull(data)) {
+      let event = new _Event.default(props.handle, props.viewId, data);
+
+      _Observable.default.fireEvent(_EventType.default.DATA_ARRIVED, event);
+    }
+
+    _Observable.default.processSystemGeneratedSubscriptions(props.config.id);
+
+    var _iterator4 = _createForOfIteratorHelper(fields),
+        _step4;
+
+    try {
+      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+        const field = _step4.value;
+
+        _Observable.default.processSystemGeneratedSubscriptions(field.handle.api.id);
+      }
+    } catch (err) {
+      _iterator4.e(err);
+    } finally {
+      _iterator4.f();
+    }
+  }
+
+  function _loadData(eventConfig, componentConfig) {
+    let service = !_Utils.default.isNull(componentConfig.dataService) ? componentConfig.dataService : eventConfig !== null ? eventConfig.dataService : null;
+    let componentValue = !_Utils.default.isNull(componentConfig.value) ? componentConfig.value : eventConfig !== null ? eventConfig.value : null;
+
+    if (!_Utils.default.isNull(service)) {
+      if (service.type === 'remoteObjectProxy') {
+        (0, _RestUtils.invokeRpc)(service, props.handle, props.viewId, result => {
+          try {
+            if (!_Utils.default.isNull(result.data)) {
+              parseValues(transformDataObject(result.data));
+              setMasterValues(result.data);
+              loadingRef.current = false;
+            }
+          } catch (e) {
+            console.error(e);
+          }
+        }, e => {
+          console.error(e);
+
+          _Utils.default.publishSystemErrorMessage(props.viewId);
+        }, parameter => {
+          loadingRef.current = false;
+          handleDataArrived({});
+        });
+      } else {
+        if (_Utils.default.isNull(eventConfig)) {
+          eventConfig = {};
+          eventConfig.service = service;
+        } // TODO : Implement the invalid paramenter callback
+
+
+        _ServiceCallActionHandler.default.execute(eventConfig, null, null, props.viewId, data => {
+          parseValues(transformDataObject(data));
+          setMasterValues(data);
+          loadingRef.current = false;
+        }, () => {});
+      }
+
+      return true;
+    } else {
+      if (!_Utils.default.isNull(componentValue)) {
+        if (_ApplicationContext.default.isExpression(componentValue)) {
+          let path = _Utils.default.getPropertyChainPath(componentValue);
+
+          if (!_Utils.default.isNull(path.valueObject)) {
+            _Observable.default.addSystemGeneratedSubscription(props.viewId, props.config.id, () => {
+              let value = _DynamicJS.default.executeScript("".concat(props.config.id, "ValueEvaluator"), componentValue);
+
+              if (!_Utils.default.isNull(value)) {
+                parseValues(transformDataObject(value));
+                setMasterValues(value);
+              }
+            });
+          }
+        } else {
+          parseValues(transformDataObject(componentValue));
+          setMasterValues(componentValue);
+        }
+      } else {
+        updateViewTitle();
+      }
+
+      loadingRef.current = false;
+      return false;
+    }
+  }
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+
+    if (initializing) {
+      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+      let eventHandlingConfig = _Utils.default.isNull(parsedConfig.eventHandlingConfig) ? {} : parsedConfig.eventHandlingConfig;
+      eventHandlingConfig.subscriptions = _Utils.default.isNull(eventHandlingConfig.subscriptions) ? [] : eventHandlingConfig.subscriptions;
+
+      let autoLoadData = _Utils.default.getComponentAttribute(parsedConfig, 'autoLoadData', null);
+
+      if (autoLoadData === null || autoLoadData === true) {
+        let subscription = {
+          publisher: props.viewId,
+          eventType: _EventType.default.COMPONENT_LOAD,
+          actions: [{
+            actionType: "loadData"
+          }]
+        };
+        eventHandlingConfig.subscriptions.push(subscription);
+      } else {
+        loadingRef.current = false;
+        handleDataArrived();
+      }
+
+      _Observable.default.addSubscriptions(eventHandlingConfig, props.handle, props.viewId);
+
+      _Observable.default.addSystemSubscriptions(parsedConfig);
+
+      setConfig(parsedConfig);
+      let data = {};
+      data.viewId = props.viewId;
+      setInitializing(false);
+    }
+  });
+
+  _react.default.useEffect(() => {
+    if (!_Utils.default.isNull(props.config) && !_Utils.default.isNull(props.values)) {
+      parseValues(props.values);
+    }
+  }, [props.config, props.values]);
+
+  _react.default.useEffect(() => {
+    if (!_Utils.default.isNull(masterValues)) {
+      handleDataArrived(masterValues);
+    }
+  }, [masterValues]);
+
+  const getFieldsFromTab = tab => {
+    let fields = [];
+
+    var _iterator5 = _createForOfIteratorHelper(tab.tabPages),
+        _step5;
+
+    try {
+      for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+        const tabPage = _step5.value;
+
+        var _iterator6 = _createForOfIteratorHelper(tabPage.components),
+            _step6;
+
+        try {
+          for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+            const formSection = _step6.value;
+
+            var _iterator7 = _createForOfIteratorHelper(formSection.components),
+                _step7;
+
+            try {
+              for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+                const fieldset = _step7.value;
+                fields = fields.concat(fieldset.fields);
+              }
+            } catch (err) {
+              _iterator7.e(err);
+            } finally {
+              _iterator7.f();
+            }
+          }
+        } catch (err) {
+          _iterator6.e(err);
+        } finally {
+          _iterator6.f();
+        }
+      }
+    } catch (err) {
+      _iterator5.e(err);
+    } finally {
+      _iterator5.f();
+    }
+
+    return fields;
+  };
+
+  function loadCompleteHandler(_x) {
+    return _loadCompleteHandler.apply(this, arguments);
+  }
+
+  function _loadCompleteHandler() {
+    _loadCompleteHandler = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(id) {
+      var release, allLoaded, _iterator8, _step8, section, _iterator10, _step10, component, fields, _iterator11, _step11, field, _iterator9, _step9, handle;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (_Utils.default.isNull(id)) {
+              _context.next = 67;
+              break;
+            }
+
+            _context.next = 3;
+            return mutex.acquire();
+
+          case 3:
+            release = _context.sent;
+            _context.prev = 4;
+
+            if (loadedComponents.includes(id)) {
+              _context.next = 64;
+              break;
+            }
+
+            loadedComponents.push(id);
+            allLoaded = true;
+            _iterator8 = _createForOfIteratorHelper(props.config.sections);
+            _context.prev = 9;
+
+            _iterator8.s();
+
+          case 11:
+            if ((_step8 = _iterator8.n()).done) {
+              _context.next = 54;
+              break;
+            }
+
+            section = _step8.value;
+            _iterator10 = _createForOfIteratorHelper(section.components);
+            _context.prev = 14;
+
+            _iterator10.s();
+
+          case 16:
+            if ((_step10 = _iterator10.n()).done) {
+              _context.next = 42;
+              break;
+            }
+
+            component = _step10.value;
+            fields = null;
+
+            if (component.type === 'tab') {
+              fields = getFieldsFromTab(component);
+            } else {
+              fields = component.fields;
+            }
+
+            _iterator11 = _createForOfIteratorHelper(fields);
+            _context.prev = 21;
+
+            _iterator11.s();
+
+          case 23:
+            if ((_step11 = _iterator11.n()).done) {
+              _context.next = 30;
+              break;
+            }
+
+            field = _step11.value;
+
+            if (loadedComponents.includes(field.id)) {
+              _context.next = 28;
+              break;
+            }
+
+            allLoaded = false;
+            return _context.abrupt("break", 30);
+
+          case 28:
+            _context.next = 23;
+            break;
+
+          case 30:
+            _context.next = 35;
+            break;
+
+          case 32:
+            _context.prev = 32;
+            _context.t0 = _context["catch"](21);
+
+            _iterator11.e(_context.t0);
+
+          case 35:
+            _context.prev = 35;
+
+            _iterator11.f();
+
+            return _context.finish(35);
+
+          case 38:
+            if (allLoaded) {
+              _context.next = 40;
+              break;
+            }
+
+            return _context.abrupt("break", 42);
+
+          case 40:
+            _context.next = 16;
+            break;
+
+          case 42:
+            _context.next = 47;
+            break;
+
+          case 44:
+            _context.prev = 44;
+            _context.t1 = _context["catch"](14);
+
+            _iterator10.e(_context.t1);
+
+          case 47:
+            _context.prev = 47;
+
+            _iterator10.f();
+
+            return _context.finish(47);
+
+          case 50:
+            if (allLoaded) {
+              _context.next = 52;
+              break;
+            }
+
+            return _context.abrupt("break", 54);
+
+          case 52:
+            _context.next = 11;
+            break;
+
+          case 54:
+            _context.next = 59;
+            break;
+
+          case 56:
+            _context.prev = 56;
+            _context.t2 = _context["catch"](9);
+
+            _iterator8.e(_context.t2);
+
+          case 59:
+            _context.prev = 59;
+
+            _iterator8.f();
+
+            return _context.finish(59);
+
+          case 62:
+            if (allLoaded) {
+              _iterator9 = _createForOfIteratorHelper(fields);
+
+              try {
+                for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
+                  field = _step9.value;
+                  handle = field.handle;
+                  handle.api.handleLoadComplete();
+                }
+              } catch (err) {
+                _iterator9.e(err);
+              } finally {
+                _iterator9.f();
+              }
+            }
+
+            if (allLoaded && !_Utils.default.isNull(props.loadCompleteHandler)) {
+              props.loadCompleteHandler(props.config.id);
+            }
+
+          case 64:
+            _context.prev = 64;
+            release();
+            return _context.finish(64);
+
+          case 67:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[4,, 64, 67], [9, 56, 59, 62], [14, 44, 47, 50], [21, 32, 35, 38]]);
+    }));
+    return _loadCompleteHandler.apply(this, arguments);
+  }
+
+  const transformDataObject = data => {
+    let formValues = null;
+
+    if (binder === 'MAP_OBJECT') {
+      formValues = {};
+
+      if (_Utils.default.isNull(data)) {
+        return null;
+      }
+
+      let map = data.map;
+
+      if (!_Utils.default.isNull(map)) {
+        let properties = Object.getOwnPropertyNames(map);
+
+        for (let i = 0; i < properties.length; i++) {
+          let property = properties[i];
+          let tokens = property.split('.');
+          let vo = formValues;
+
+          for (let j = 0; j < tokens.length; j++) {
+            let token = tokens[j];
+
+            if (j < tokens.length - 1) {
+              if (_Utils.default.isNull(vo[token])) {
+                vo[token] = {};
+              }
+
+              vo = vo[token];
+            } else {
+              vo[token] = map[property];
+            }
+          }
+        }
+      }
+    } else {
+      formValues = data;
+    }
+
+    return formValues;
+  };
+
+  function doClear() {
+    for (let i = 0; i < fields.length; i++) {
+      let field = fields[i];
+      field.handle.api.clear();
+    }
+
+    values.id = null;
+
+    if (!_Utils.default.isNull(props.valueChangeHandler)) {
+      props.valueChangeHandler(values);
+    }
+  }
+
+  function doBindData(data) {
+    if (!_Utils.default.isNull(data)) {
+      if (!_Utils.default.isNull(data.map)) {
+        data = data.map;
+      }
+
+      for (var _i2 = 0, _Object$keys = Object.keys(data); _i2 < _Object$keys.length; _i2++) {
+        const key = _Object$keys[_i2];
+        let field = getField(key);
+
+        if (!_Utils.default.isNull(field)) {
+          field.handle.api.value = field.handle.api.parseValue(data[key], true);
+        }
+      }
+    }
+  }
+
+  function parseValues(data) {
+    let parsedValues = JSON.parse(JSON.stringify(data));
+
+    for (let i = 0; i < fields.length; i++) {
+      let field = fields[i];
+
+      let path = _getValuePath(field.id, parsedValues);
+
+      let objectValue = path.valueObject[path.valueProperty];
+
+      if (!_Utils.default.isNull(field.handle.api)) {
+        path.valueObject[path.valueProperty] = field.handle.api.parseValue(objectValue, true);
+      } else {
+        console.error("NULL field reference while parsing form value - " + field.id);
+      }
+    }
+
+    setValues(parsedValues);
+
+    if (!_Utils.default.isNull(props.dataArrivedHandler)) {
+      props.dataArrivedHandler(parsedValues);
+    }
+
+    if (!_Utils.default.isNull(props.valueChangeHandler)) {
+      props.valueChangeHandler(parsedValues);
+    }
+  }
+
+  _react.default.useEffect(() => {
+    if (!_Utils.default.isNull(props.values)) {
+      parseValues(props.values);
+    }
+  }, [props.values]);
+
+  const getField = id => {
+    for (let i = 0; i < fields.length; i++) {
+      if (fields[i].id === id) {
+        return fields[i];
+      }
+    }
+
+    return null;
+  };
+
+  const _removeField = id => {
+    for (let i = 0; i < fields.length; i++) {
+      if (fields[i].id === id) {
+        fields.splice(i, 1);
+      }
+    }
+  };
+
+  function doValidateParent(field, invalid) {
+    let hasErrors = false;
+
+    if (!_Utils.default.isNull(field.parentId)) {
+      let isParentInvalid = invalid;
+
+      for (let i = 0; i < fields.length; i++) {
+        if (fields[i] !== field && fields[i].parentId === field.parentId) {
+          isParentInvalid = isParentInvalid || !(_Utils.default.isNull(fields[i].error) || fields[i].error.length === 0);
+        }
+      }
+
+      hasErrors = hasErrors || isParentInvalid;
+      fieldParentErrors[field.parentId] = isParentInvalid;
+    }
+
+    if (!_Utils.default.isNull(containerErrorCallback.current) && !_ApplicationContext.default.isFormMarkersEnabled()) {
+      containerErrorCallback.current(fieldParentErrors);
+    }
+  }
+
+  const validateField = (field, id, value) => {
+    if (loadingRef.current === false) {
+      field.error = null;
+      let invalid = field.handle.api.validate(_objectSpread(_objectSpread({}, values), {}, {
+        [id]: value
+      }), value) === false;
+      doValidateParent(field, invalid);
+      return invalid;
+    }
+
+    return true;
+  };
+
+  const _getValuePath = (id, vals) => {
+    let path = {};
+    let currentValues = vals;
+
+    if (_Utils.default.isNull(vals)) {
+      currentValues = values;
+    }
+
+    if (!_Utils.default.isNull(currentValues)) {
+      let tokens = id.split(".");
+
+      if (tokens.length === 1) {
+        path.valueObject = currentValues;
+        path.valueProperty = tokens[0];
+      } else if (tokens.length > 1) {
+        let vo = currentValues;
+
+        for (let i = 0; i < tokens.length - 1; i++) {
+          if (!_Utils.default.isNull(vo[tokens[i]])) {
+            vo = vo[tokens[i]];
+          } else {
+            vo[tokens[i]] = {};
+            vo = vo[tokens[i]];
+          }
+        }
+
+        if (!_Utils.default.isNull(vo)) {
+          path.valueObject = vo;
+          path.valueProperty = tokens[tokens.length - 1];
+        }
+      }
+    }
+
+    return path;
+  };
+
+  const doHandleChange = (id, value) => {
+    let path = _getValuePath(id, null);
+
+    if (!_Utils.default.isNull(path.valueObject) && !_Utils.default.isNull(path.valueProperty) && loadingRef.current === false) {
+      path.valueObject[path.valueProperty] = value;
+      let invalid = false;
+      let field = getField(id);
+
+      if (!_Utils.default.isNull(field)) {
+        invalid = validateField(field, id, value);
+
+        for (let i = 0; i < fields.length; i++) {
+          let groupField = fields[i];
+          let validationGroup = groupField.handle.api.getValidationGroup();
+
+          if (!_Utils.default.isNull(validationGroup)) {
+            if (field !== groupField && validationGroup === field.handle.api.getValidationGroup()) {
+              let groupFieldId = groupField.handle.api.getId();
+
+              let gridFieldPath = _getValuePath(groupFieldId, null);
+
+              if (!_Utils.default.isNull(gridFieldPath)) {
+                let groupFieldVal = gridFieldPath.valueObject[gridFieldPath.valueProperty];
+                validateField(groupField, groupFieldId, groupFieldVal);
+              }
+            }
+          }
+        }
+      }
+
+      if (!_Utils.default.isNull(props.valueChangeHandler)) {
+        props.valueChangeHandler(invalid ? null : values, id, value);
+      }
+    }
+
+    _Observable.default.processSystemGeneratedSubscriptions(props.config.id);
+  };
+
+  const _setFieldError = (id, error) => {
+    let field = getField(id);
+
+    if (!_Utils.default.isNull(field)) {
+      field.error = error;
+    }
+  };
+
+  const _addField = (id, handle, parentId, bindValueToForm) => {
+    let field = getField(id);
+    let error = null;
+
+    if (!_Utils.default.isNull(field)) {
+      error = field.error;
+
+      _removeField(id);
+    }
+
+    field = {};
+    field.id = id;
+    field.handle = handle;
+    field.error = error;
+    field.bindValueToForm = bindValueToForm;
+    field.parentId = parentId;
+    fields.push(field);
+    return field;
+  };
+
+  const _handleSelectItemChange = (name, options, selectedId) => {
+    let selectedValue = null;
+
+    for (let i = 0; i < options.length; i++) {
+      if (options[i].id === selectedId) {
+        selectedValue = options[i];
+      }
+    }
+
+    doHandleChange(name, selectedValue);
+    return selectedValue;
+  };
+
+  const updateValue = (name, value) => {
+    props.valueChangeHandler(_objectSpread(_objectSpread({}, values), {}, {
+      [name]: value
+    }));
+  };
+
+  function render(form) {
+    return _Utils.default.isNull(form.sections) || form.sections.length === 0 ? null : /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        overflow: _Utils.default.getComponentAttribute(props.config, 'overflow', 'auto'),
+        maxHeight: '70vh'
+      }
+    }, form.sections.map(section => {
+      if (_Utils.default.isNull(section.id)) {
+        section.id = sectionCounter + '-form-section';
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: sectionCounter++
+      }, /*#__PURE__*/_react.default.createElement(_Section.default, {
+        keyHandler: props.keyHandler,
+        config: section,
+        handle: createSectionHandle(section),
+        ref: /*#__PURE__*/_react.default.createRef(),
+        loadCompleteHandler: loadCompleteHandler,
+        form: () => {
+          return !_Utils.default.isNull(props.handle.api) ? props.handle.api : api();
+        },
+        viewId: props.viewId,
+        values: values
+      }));
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: props.className,
+    ref: ref,
+    style: props.className === 'defaultForm' ? {
+      height: _Utils.default.getComponentAttribute(props.config, 'height', null),
+      padding: _Utils.default.getComponentAttribute(props.config, 'padding', '16px 32px 0 48px'),
+      margin: _Utils.default.getComponentAttribute(props.config, 'margin', '0'),
+      overflow: 'hidden'
+    } : null
+  }, !_Utils.default.isNull(props.config.id) ? !initializing ? render(props.config) : null : /*#__PURE__*/_react.default.createElement("div", null, "ERROR: A form must have an ID"));
+}));
+
+var _default = Form;
+exports.default = _default;