@agilemotion/oui-react-js 1.3.9 → 1.4.1

package/dist/components/dashboard/components/blackDashboard/sidebar/Sidebar.js

@@ -7,30 +7,22 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactRouterDom = require("react-router-dom");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _perfectScrollbar = _interopRequireDefault(require("perfect-scrollbar"));
-
 var _Utils = _interopRequireDefault(require("../../../../../Utils"));
 
 var _reactstrap = require("reactstrap");
 
 var _MenuLink = _interopRequireDefault(require("../../../../menu/MenuLink"));
 
-var _reactRedux = require("react-redux");
-
-var _redux = require("redux");
-
-var _DashboardStore = require("../../../../../redux/store/DashboardStore");
-
 var _CardAvatar = _interopRequireDefault(require("../../../../card/CardAvatar"));
 
 var _core = require("@material-ui/core");
 
 var _RestUtils = require("../../../../../RestUtils");
 
+require("./Sidebar.css");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
@@ -38,13 +30,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 let ps;
 const TAB = 16;
 
-const propHandler = state => {
-  let activeRouteMenu = state.dashboard.activeRouteMenu;
-  return {
-    activeRouteMenu: activeRouteMenu
-  };
-};
-
 class Sidebar extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -56,14 +41,14 @@ class Sidebar extends _react.default.Component {
         let createView = {};
         createView.name = menus[i].attributes.label;
         createView.id = menus[i].id;
-        createView.mini = "SS";
-        createView.layout = "/admin";
+        createView.mini = 'SS';
+        createView.layout = '/admin';
         createView.level = level;
 
-        if (menus[i].items && menus[i].items.length > 0) {
+        if (menus[i].subMenu) {
           createView.collapse = true;
-          createView.state = menus[i].id + "Collapse";
-          createView.views = this.getItems(menus[i].items, level + 1);
+          createView.state = menus[i].id + 'Collapse';
+          createView.views = this.getItems(menus[i].subMenu.items, level + 1);
         } else {
           createView.item = menus[i];
         }
@@ -71,7 +56,7 @@ class Sidebar extends _react.default.Component {
         newViews.push(createView);
       }
 
-      console.log("VIEWS : ", newViews, menus);
+      console.log('VIEWS : ', newViews, menus);
       return newViews;
     });
 
@@ -82,15 +67,15 @@ class Sidebar extends _react.default.Component {
         let createItem = {};
         createItem.name = items[i].attributes.label;
         createItem.id = items[i].id;
-        createItem.mini = "SS";
-        createItem.layout = "/admin";
+        createItem.mini = 'SS';
+        createItem.layout = '/admin';
         createItem.item = items[i];
         createItem.level = level;
 
         if (!_Utils.default.isNull(items[i].subMenu)) {
           createItem.collapse = true;
-          createItem.state = items[i].id + "SubMenuCollapse";
-          createItem.views = getItems(items[i].subMenu.items, level + 1);
+          createItem.state = items[i].id + 'SubMenuCollapse';
+          createItem.views = this.getItems(items[i].subMenu.items, level + 1);
         }
 
         newItems.push(createItem);
@@ -124,24 +109,24 @@ class Sidebar extends _react.default.Component {
         let service = {
           url: '/ui/api/v1/menu/get',
           parameters: [{
-            name: "id",
+            name: 'id',
             value: route.menu,
-            httpParameterType: "QUERY_PARAMETER"
+            httpParameterType: 'QUERY_PARAMETER'
           }, {
-            name: "version",
+            name: 'version',
             value: 1.0,
-            httpParameterType: "QUERY_PARAMETER"
+            httpParameterType: 'QUERY_PARAMETER'
           }],
-          contentType: "application/json"
+          contentType: 'application/json'
         };
         (0, _RestUtils.invokeRest)(service, {
           api: {
             get id() {
-              return "dashboard-sidebar";
+              return 'dashboard-sidebar';
             }
 
           }
-        }, "dashboard-sidebar", result => {
+        }, 'dashboard-sidebar', result => {
           resolve(this.getViews(result.menus, route.level + 1));
         }, e => {
           console.error(e);
@@ -150,6 +135,10 @@ class Sidebar extends _react.default.Component {
       });
     });
 
+    _defineProperty(this, "getLiClassName", prop => {
+      return "li-" + prop.level;
+    });
+
     _defineProperty(this, "createLinks", routes => {
       const {
         rtlActive,
@@ -162,12 +151,13 @@ class Sidebar extends _react.default.Component {
 
         if ((prop.collapse || prop.isParent) && prop.name !== 'Dashboard' && prop.name !== 'My Work Items') {
           var st = {};
-          st[prop["state"]] = !this.state[prop.state];
+          st[prop['state']] = !this.state[prop.state];
           return /*#__PURE__*/_react.default.createElement("li", {
-            className: prop.collapse ? this.getCollapseInitialState(prop.views) ? "active" : null : null,
+            className: prop.collapse ? this.getCollapseInitialState(prop.views) + '-' + prop.level ? 'active ' + this.getLiClassName(prop) : this.getLiClassName(prop) : this.getLiClassName(prop),
             key: key
           }, /*#__PURE__*/_react.default.createElement("a", {
             href: "#pablo",
+            className: 'li-link-' + prop.level,
             "data-toggle": "collapse",
             style: {
               marginLeft: (prop.level + 1) * TAB + 'px'
@@ -193,57 +183,71 @@ class Sidebar extends _react.default.Component {
             style: {
               width: '28px'
             }
-          }), " ", /*#__PURE__*/_react.default.createElement("span", null, " ", prop.name, " ", prop.collapse ? /*#__PURE__*/_react.default.createElement("span", {
+          }), ' ', /*#__PURE__*/_react.default.createElement("span", null, ' ', prop.name, ' ', prop.collapse ? /*#__PURE__*/_react.default.createElement("span", {
             className: "caret",
             style: {
               marginTop: '0'
             }
-          }) : null), " ", " ") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+          }) : null), ' ', ' ') : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
             className: "sidebar-normal",
             style: {
-              paddingLeft: "4px"
+              paddingLeft: '4px'
             }
-          }, " ", prop.name, " ", /*#__PURE__*/_react.default.createElement("b", {
+          }, ' ', prop.name, ' ', /*#__PURE__*/_react.default.createElement("b", {
             className: "caret"
-          })), " "), " "), " ", prop.collapse && prop.views ? /*#__PURE__*/_react.default.createElement(_reactstrap.Collapse, {
+          })), ' '), ' '), ' ', prop.collapse && prop.views ? /*#__PURE__*/_react.default.createElement(_reactstrap.Collapse, {
             isOpen: this.state[prop.state]
           }, /*#__PURE__*/_react.default.createElement("ul", {
             className: "nav"
-          }, " ", this.createLinks(prop.views), " "), " ") : null);
+          }, " ", this.createLinks(prop.views), " "), ' ') : null);
         }
 
         return /*#__PURE__*/_react.default.createElement("li", {
-          className: "",
+          className: "".concat('menu-link-li' + (this.activeRoute(prop.id) ? '-active' : '') + (prop.name === 'Dashboard' ? ' dashboard-link' : '')),
           key: key,
           style: this.activeRoute(prop.id) ? {
             backgroundColor: (0, _core.lighten)(secondaryThemeColor, .9),
             borderRadius: '16px',
             color: secondaryThemeColor,
-            fontWeight: 500,
-            marginRight: '8px'
+            fontWeight: 500
           } : {}
         }, /*#__PURE__*/_react.default.createElement(_MenuLink.default, {
           config: prop.item,
-          clickCallback: prop.name === 'Dashboard' ? this.props.dashboardLauncher : null,
+          clickCallback: prop.name === 'Dashboard' ? item => {
+            this.props.dashboardLauncher();
+            this.setState({ ...this.state,
+              activeRouteMenu: item
+            });
+          } : item => this.setState({ ...this.state,
+            activeRouteMenu: item
+          }),
           autoClick: prop.name === 'My Work Items' || prop.item && prop.item.defaultItem,
           viewId: "menuBar",
           icon: prop.icon,
           iconColor: (prop.name === 'Dashboard' || prop.name === 'My Work Items') && this.activeRoute(prop.id) ? secondaryThemeColor : null,
+          backgroundColor: this.activeRoute(prop.id) ? (0, _core.lighten)(secondaryThemeColor, .9) : null,
           name: prop.name,
           id: prop.id,
           level: prop.level,
           tab: TAB,
           color: this.activeRoute(prop.id) ? secondaryThemeColor : null
-        }), " ");
+        }), ' ');
       });
     });
 
     _defineProperty(this, "activeRoute", routeName => {
       // return this.props.location.pathname.indexOf(routeName) > -1 ? "active" : "";
-      return this.props.activeRouteMenu.id === routeName;
+      return this.state.activeRouteMenu.id === routeName;
     });
 
-    this.state = this.getCollapseStates(props.routes); //actionCreators.setActiveRoute(Utils.isNull(props.activeRouteMenu) ? 'Dashboard' : props.activeRouteMenu);
+    this.state = { ...this.getCollapseStates(props.routes),
+      isLoading: false,
+      error: false,
+      activeRouteMenu: {
+        id: 'dashboard',
+        name: 'Dashboard'
+      }
+    };
   }
 
   // this verifies if any of the collapses should be default opened on a rerender of this component
@@ -271,7 +275,7 @@ class Sidebar extends _react.default.Component {
 
   componentDidMount() {
     // if you are using a Windows Machine, the scrollbars will have a Mac look
-    if (navigator.platform.indexOf("Win") > -1) {
+    if (navigator.platform.indexOf('Win') > -1) {
       /*ps = new PerfectScrollbar(this.refs.sidebar, {
           suppressScrollX: true,
           suppressScrollY: false,
@@ -282,7 +286,7 @@ class Sidebar extends _react.default.Component {
   componentWillUnmount() {
     // we need to destroy the false scrollbar when we navigate
     // to a page that doesn't have this component rendered
-    if (navigator.platform.indexOf("Win") > -1) {//ps.destroy();
+    if (navigator.platform.indexOf('Win') > -1) {//ps.destroy();
     }
   }
 
@@ -307,16 +311,13 @@ class Sidebar extends _react.default.Component {
         }
       }, /*#__PURE__*/_react.default.createElement("img", {
         src: logo.imgSrc,
-        style: {
-          width: '150px'
-        },
         alt: "react-logo"
-      })), " ");
+      })), ' ');
       logoText = /*#__PURE__*/_react.default.createElement("a", {
         href: logo.outterLink,
         className: "simple-text ",
         onClick: this.props.closeSidebar
-      }, logo.text, " ");
+      }, logo.text, ' ');
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -328,15 +329,15 @@ class Sidebar extends _react.default.Component {
       }
     }, /*#__PURE__*/_react.default.createElement("table", {
       style: {
-        height: "96%",
-        maxHeight: "100%",
-        width: "100%"
+        height: '96%',
+        maxHeight: '100%',
+        width: '100%'
       }
     }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
       style: {
         height: '10%'
       }
-    }, " ", logoImg !== null ? /*#__PURE__*/_react.default.createElement("div", {
+    }, ' ', logoImg !== null ? /*#__PURE__*/_react.default.createElement("div", {
       className: "logo",
       style: {
         display: 'flex',
@@ -344,7 +345,7 @@ class Sidebar extends _react.default.Component {
         alignItems: 'center',
         height: '100%'
       }
-    }, " ", logoImg, " ") : null, " ", !_Utils.default.isNull(this.props.heading) ? /*#__PURE__*/_react.default.createElement("div", {
+    }, ' ', logoImg, ' ') : null, ' ', !_Utils.default.isNull(this.props.heading) ? /*#__PURE__*/_react.default.createElement("div", {
       className: "logo",
       style: {
         display: 'flex',
@@ -358,24 +359,27 @@ class Sidebar extends _react.default.Component {
       style: {
         height: '70%'
       },
-      valign: "top"
+      valign: 'top'
     }, /*#__PURE__*/_react.default.createElement(_reactstrap.Nav, {
       style: {
-        margin: "8px",
-        padding: "16px"
-      }
+        margin: '8px',
+        padding: '16px'
+      },
+      className: 'nav-wrapper'
     }, this.createLinks(this.props.routes)))), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
+      className: 'sidebar-app-logo-wrapper',
       style: {
         height: '10%'
       },
-      valign: "top"
+      valign: 'top'
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "sidebar-app-logo",
+      className: 'sidebar-app-logo',
       style: {
         justifyContent: 'center',
         height: '92px'
       }
     }, !_Utils.default.isNull(this.props.appLogoPath) ? /*#__PURE__*/_react.default.createElement("div", {
+      className: 'product-logo',
       style: {
         display: 'flex',
         justifyContent: 'center',
@@ -393,13 +397,13 @@ class Sidebar extends _react.default.Component {
         alignItems: 'center',
         marginTop: '8px'
       }
-    }, "Copyrights \xA9 ", 1900 + new Date().getYear(), " ", " ")))))));
+    }, "Copyrights \xA9 ", 1900 + new Date().getYear(), " ", ' ')))))));
   }
 
 }
 
 Sidebar.propTypes = {
-  activeColor: _propTypes.default.oneOf(["primary", "blue", "green", "orange", "red", "agility"]),
+  activeColor: _propTypes.default.oneOf(['primary', 'blue', 'green', 'orange', 'red', 'agility']),
   secondaryThemeColor: _propTypes.default.string.isRequired,
   rtlActive: _propTypes.default.bool,
   routes: _propTypes.default.array.isRequired,
@@ -415,7 +419,5 @@ Sidebar.propTypes = {
   // this is used on responsive to close the sidebar on route navigation
   closeSidebar: _propTypes.default.func
 };
-
-var _default = (0, _reactRouterDom.withRouter)((0, _reactRedux.connect)(propHandler, dispatch => (0, _redux.bindActionCreators)(_DashboardStore.actionCreators, dispatch))(Sidebar));
-
+var _default = Sidebar;
 exports.default = _default;

package/dist/components/form/AutoComplete.js

@@ -17,7 +17,7 @@ var _Autocomplete = _interopRequireDefault(require("@material-ui/lab/Autocomplet
 
 require("./Form.css");
 
-var _ApplicationContext = _interopRequireDefault(require("../../ApplicationContext"));
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -49,6 +49,7 @@ const AutoCompleteWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
   const [inputValue, setInputValue] = (0, _react.useState)('');
   const baseValue = (0, _react.useRef)(null);
   const [options, setOptions] = (0, _react.useState)([]);
+  const [entityStore] = (0, _react.useState)([]);
 
   _react.default.useEffect(() => {
     let minLen = _Utils.default.getComponentAttribute(props.config, 'minSearchAttributeLength', 1);
@@ -66,13 +67,18 @@ const AutoCompleteWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
         keys.push(currValue[props.config.attributes.searchAttribute]);
         return keys;
       }, []);
+
+      for (const valueElement of base.value) {
+        entityStore.push(valueElement);
+      }
+
       baseValue.current = base.value;
       setOptions(value.current);
     }
   }, [base.value]);
 
   const fetchOptions = () => {
-    fetch(encodeURI(location + _ApplicationContext.default.getContextRoot() + props.config.attributes.optionsUrlPath), {
+    fetch(encodeURI(location + _ApplicationManager.default.getContextRoot() + props.config.attributes.optionsUrlPath), {
       method: 'POST',
       headers: {
         'Accept': 'application/json',
@@ -89,7 +95,22 @@ const AutoCompleteWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
         "currentPage": 0
       })
     }).then(status).then(json).then(data => {
-      setOptions(JSON.parse(data).records);
+      let records = JSON.parse(data).records;
+      let newOptions = [];
+
+      for (const record of records) {
+        var _baseValue$current;
+
+        if (!((_baseValue$current = baseValue.current) !== null && _baseValue$current !== void 0 && _baseValue$current.find(o => o[props.config.attributes.searchAttribute] === record[props.config.attributes.searchAttribute]))) {
+          newOptions.push(record[props.config.attributes.searchAttribute]);
+        }
+
+        if (!entityStore.find(o => o.username === record.username)) {
+          entityStore.push(record);
+        }
+      }
+
+      setOptions(newOptions);
     }).catch(ignored => {});
   };
 
@@ -100,46 +121,26 @@ const AutoCompleteWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
   return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
     inputValue: inputValue,
     multiple: true,
+    disabled: base.disabled,
     value: value.current,
-    getOptionLabel: option => option ? option[props.config.attributes.searchAttribute] ? option[props.config.attributes.searchAttribute] : option : '',
+    getOptionLabel: option => option ? option : '',
     onInputChange: (event, newValue) => handleInputChange(event, newValue),
     onChange: (e, newValue, reason) => {
       let val = [];
 
-      if (baseValue.current && Array.isArray(baseValue.current)) {
-        for (const baseValueElement of baseValue.current) {
-          if (baseValueElement) {
-            val.push(baseValueElement);
-          }
-        }
-
-        baseValue.current = null;
-      }
-
       for (const newValueElement of newValue) {
-        let find = options.find(o => o[props.config.attributes.searchAttribute] === newValueElement);
-
-        if (!find) {
-          var _value$current;
-
-          find = (_value$current = value.current) === null || _value$current === void 0 ? void 0 : _value$current.find(o => o[props.config.attributes.searchAttribute] === newValueElement);
-        }
-
-        if (find) {
-          val.push(find);
-        } else {
-          console.error("Cannot map autocomplete key : " + newValueElement);
-        }
+        val.push(entityStore.find(e => e[props.config.attributes.searchAttribute] === newValueElement));
       }
 
       value.current = newValue;
       base.handleValueChange(val);
     },
-    options: options.length > 0 ? options.map(option => option[props.config.attributes.searchAttribute]) : [],
+    options: options,
     id: props.config.id,
     renderInput: params => /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
-      error: !_Utils.default.isNull(props.hasError) ? props.hasError : false,
-      helperText: !_Utils.default.isNull(props.errorMessage) && !_Utils.default.isNull(props.hasError) ? props.errorMessage : '',
+      required: base.required,
+      error: base.hasError,
+      helperText: base.errorMessage,
       variant: props.borderless ? 'standard' : 'outlined'
     }, params, {
       label: _Utils.default.getComponentAttribute(props.config, 'label', '')

package/dist/components/form/BaseField.js

@@ -11,7 +11,7 @@ var _Utils = _interopRequireDefault(require("../../Utils"));
 
 var _Observable = _interopRequireDefault(require("../../event/Observable"));
 
-var _ApplicationContext = _interopRequireDefault(require("../../ApplicationContext"));
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 
 var _Event = _interopRequireDefault(require("../../event/Event"));
 
@@ -32,9 +32,13 @@ const BaseField = props => {
 
   const loadingRef = _react.default.useRef(true);
 
-  const [config, setConfig] = _react.default.useState(null);
+  const [config, setConfig] = _react.default.useState(null); // TODO : Replace the state value with the valueRef below. The state value is occationaly not available in time for event scripts
 
-  const [value, setValue] = _react.default.useState(!_Utils.default.isNull(props.value) ? props.value : null);
+
+  const [value, setValue] = _react.default.useState(!_Utils.default.isNull(props.value) ? props.value : null); // TODO : Replace the state value with this ref for the reason mensioned above
+
+
+  const valueRef = _react.default.useRef(!_Utils.default.isNull(props.value) ? props.value : null);
 
   const [selectOptions, setSelectOptions] = _react.default.useState([]);
 
@@ -54,11 +58,14 @@ const BaseField = props => {
     if (props.config.fieldType === 'SELECT' || props.config.fieldType === 'LOOKUP') {
       if (!value || _Utils.default.isNull(value.id)) {
         setValue(null);
+        valueRef.current = null;
       } else {
         setValue(value);
+        valueRef.current = value;
       }
     } else {
       setValue(value);
+      valueRef.current = value;
     }
   }, [valueObject[valueProperty]]); // Change the required value and re-validate field if necessary
 
@@ -78,10 +85,10 @@ const BaseField = props => {
     };
 
     if (!_Utils.default.isNull(config.validator) && !_Utils.default.isNull(config.validator.script)) {
-      result.valid = _DynamicJS.default.executeScriptObject("".concat(config.id, "Validator"), config.validator.script);
+      result = _DynamicJS.default.executeScriptObject("".concat(config.id, "Validator"), config.validator.script);
 
       if (!result.valid) {
-        result.message = config.validator.message;
+        result.message = result.message ? result.message : config.validator.message;
       }
     }
 
@@ -89,11 +96,11 @@ const BaseField = props => {
       result = _Utils.default.validateField(path.valueProperty, required, path.valueObject, currentValue, config.validator);
     }
 
-    setErrorMessage(_ApplicationContext.default.isFormMarkersEnabled() ? result.message : '');
-    setHasError(!result.valid && _ApplicationContext.default.isFormMarkersEnabled());
-    valid.current = result.valid && _ApplicationContext.default.isFormMarkersEnabled();
+    setErrorMessage(_ApplicationManager.default.isFormMarkersEnabled() ? result.message : '');
+    setHasError(!result.valid && _ApplicationManager.default.isFormMarkersEnabled());
+    valid.current = result.valid && _ApplicationManager.default.isFormMarkersEnabled();
 
-    if (_ApplicationContext.default.isFormMarkersEnabled()) {
+    if (_ApplicationManager.default.isFormMarkersEnabled()) {
       props.form().setFieldError(config.id, typeof result.message === 'undefined' ? null : result.message);
     }
 
@@ -110,7 +117,7 @@ const BaseField = props => {
 
       _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
 
-      _Observable.default.addSystemSubscriptions(parsedConfig);
+      _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
 
       setConfig(parsedConfig);
       setVisible(_Utils.default.evaluateBooleanExpression(parsedConfig.visible, parsedConfig.id, true));
@@ -128,12 +135,13 @@ const BaseField = props => {
       }
 
       if (!_Utils.default.isNull(props.config.value)) {
-        let scriptValue = _ApplicationContext.default.isExpression(props.config.value) ? _DynamicJS.default.executeScript(props.config.id.replace('.', '_') + 'Value', props.config.value) : props.config.value;
+        let scriptValue = _ApplicationManager.default.isExpression(props.config.value) ? _DynamicJS.default.executeScript(props.config.id.replace('.', '_') + 'Value', props.config.value) : props.config.value;
 
         if (!_Utils.default.isNull(scriptValue)) {
           let val = scriptValue.instanceType === 'TypedValue' ? scriptValue.value : scriptValue;
           valueObject[valueProperty] = val;
           setValue(val);
+          valueRef.current = val;
           props.form().handleChange(config.id, val);
         }
       }
@@ -164,23 +172,26 @@ const BaseField = props => {
   }, []);
 
   const handleValueChange = newValue => {
-    let valueChanged = newValue !== value;
+    let valueChanged = newValue !== valueRef.current;
 
-    if (!_Utils.default.isNull(newValue) && !_Utils.default.isNull(value)) {
+    if (!_Utils.default.isNull(newValue) && !_Utils.default.isNull(valueRef.current)) {
       if (props.config.fieldType === 'SELECT' || props.config.fieldType === 'LOOKUP') {
-        valueChanged = newValue.id !== value.id;
+        valueChanged = newValue.id !== valueRef.current.id;
+      } else if (props.config.fieldType === 'DATE' || props.config.fieldType === 'TIME') {
+        valueChanged = newValue !== valueRef.current;
       } else {
-        valueChanged = JSON.stringify(value) !== JSON.stringify(newValue);
+        valueChanged = JSON.stringify(valueRef.current) !== JSON.stringify(newValue);
       }
     }
 
     if (valueChanged) {
       let id = props.config.dataBinding ? props.config.dataBinding : props.config.id;
 
-      _ApplicationContext.default.enableFormMarkers(true);
+      _ApplicationManager.default.enableFormMarkers(true);
 
       if (props.config.fieldType === 'SELECT') {
         setValue(props.form().handleSelectItemChange(id, selectOptions, newValue));
+        valueRef.current = props.form().handleSelectItemChange(id, selectOptions, newValue);
 
         for (const selectOption of selectOptions) {
           if (selectOption.id === newValue) {
@@ -190,6 +201,7 @@ const BaseField = props => {
         }
       } else {
         setValue(newValue);
+        valueRef.current = newValue;
         props.form().handleChange(!_Utils.default.isNull(props.config.dataBinding) ? props.config.dataBinding : id, newValue);
       }
 
@@ -251,11 +263,11 @@ const BaseField = props => {
         return null;
       },
 
-      set value(value) {
-        handleValueChange(value);
+      set value(val) {
+        handleValueChange(val);
 
         if (!_Utils.default.isNull(props.valueChangeCallback)) {
-          props.valueChangeCallback(value);
+          props.valueChangeCallback(val);
         }
       },
 
@@ -272,13 +284,13 @@ const BaseField = props => {
       },
 
       refresh() {
-        if (config) {
-          setVisible(_Utils.default.evaluateBooleanExpression(config.visible, config.id, true));
-          setDisabled(_Utils.default.evaluateBooleanExpression(config.disabled, config.id));
-          let requiredNewVal = !_Utils.default.isNull(config.validator) ? !_Utils.default.evaluateBooleanExpression(config.validator.nullable, config.id, true) : false;
-          validateOnChange.current = required !== null && required !== requiredNewVal && loadingRef.current === false;
-          setRequired(requiredNewVal);
-        }
+        let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+        setVisible(_Utils.default.evaluateBooleanExpression(parsedConfig.visible, parsedConfig.id, true));
+        setDisabled(_Utils.default.evaluateBooleanExpression(parsedConfig.disabled, parsedConfig.id));
+        let requiredNewVal = !_Utils.default.isNull(parsedConfig.validator) ? !_Utils.default.evaluateBooleanExpression(parsedConfig.validator.nullable, parsedConfig.id, true) : false;
+        validateOnChange.current = required !== null && required !== requiredNewVal && loadingRef.current === false;
+        setRequired(requiredNewVal);
       },
 
       get required() {