@agilemotion/oui-react-js 1.3.2 → 1.3.4

package/dist/components/TitleBar.js

@@ -50,19 +50,26 @@ const TitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
 
       let eventHandlingConfig = _Utils.default.isNull(parsedConfig.eventHandlingConfig) ? {} : parsedConfig.eventHandlingConfig;
       eventHandlingConfig.subscriptions = _Utils.default.isNull(eventHandlingConfig.subscriptions) ? [] : eventHandlingConfig.subscriptions;
-      let subscription = {
-        publisher: "applicationContext",
-        eventType: _EventType.default.APPLICATION_CONTEXT_CHANGE,
-        actions: [{
-          actionType: "script",
-          script: {
-            lines: ["if($event.data.name === 'title'){", "   @#{".concat(props.config.id, "}.title = $event.data.value"), "}"]
-          }
-        }]
-      };
-      eventHandlingConfig.subscriptions.push(subscription);
-
-      _Observable.default.addSubscriptions(eventHandlingConfig, props.handle, props.viewId);
+
+      let titleValue = _Utils.default.getComponentAttribute(props.config, 'title', null);
+
+      if (_Utils.default.isNull(titleValue)) {
+        let subscription = {
+          publisher: "applicationContext",
+          eventType: _EventType.default.APPLICATION_CONTEXT_CHANGE,
+          actions: [{
+            actionType: "script",
+            script: {
+              lines: ["if($event.data.name === 'title'){", "   let component = @#{".concat(props.config.id, "};"), "   if(component) {", "      component.title = $event.data.value", "   }", "}"]
+            }
+          }]
+        };
+        eventHandlingConfig.subscriptions.push(subscription);
+
+        _Observable.default.addSubscriptions(eventHandlingConfig, props.handle, props.viewId);
+      } else {
+        setTitle(titleValue);
+      }
 
       props.loadCompleteHandler(props.config.id);
       setInitializing(false);
@@ -90,7 +97,7 @@ const TitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     ref: ref
   }, !_Utils.default.isNull(props.config) ? /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      padding: '32px 32px 4px 32px',
+      padding: '32px 0 4px 0',
       fontSize: '24px',
       color: '#202124'
     }

package/dist/components/Toolbar.js

@@ -278,7 +278,10 @@ const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     }, toolbar.sections.map(section => {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "col-*-*",
-        key: ++sectionKeyCounter
+        key: ++sectionKeyCounter,
+        style: {
+          textAlign: section.halign ? section.halign.toLowerCase() : null
+        }
       }, renderSection(section, counter++));
     }));
   }
@@ -295,11 +298,10 @@ const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    style: {
-      padding: _Utils.default.getComponentAttribute(props.config, 'padding', null),
+    style: _Utils.default.mergeStyles({
       borderBottom: getBorderBottom(),
-      margin: _Utils.default.getComponentAttribute(props.config, 'margin', '0px 32px 0px 32px')
-    }
+      margin: '0'
+    }, props.config)
   }, render(props.config));
 });
 

package/dist/components/Tree.js

@@ -179,9 +179,12 @@ const Tree = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     if (!_Utils.default.isNull(service)) {
       (0, _RestUtils.invokeRpc)(service, props.handle, props.viewId, result => {
         try {
-          expand(result.data);
-          setRoot(result.data);
           props.loadCompleteHandler(props.config.id);
+
+          if (result.data) {
+            expand(result.data);
+            setRoot(result.data);
+          }
         } catch (e) {
           props.console.error(e);
 

package/dist/components/dashboard/BasicBusinessAppDashboard.js

@@ -201,6 +201,7 @@ const BasicBusinessAppDashboard = props => {
       newRoute.level = 0;
       newRoute.isParent = true;
       newRoutes.push(newRoute);
+      console.log(props.settings.systemProfileDto);
 
       if (!_Utils.default.isNull(props.settings.systemProfileDto.modules)) {
         for (let i = 0; i < props.settings.systemProfileDto.modules.length; i++) {
@@ -221,16 +222,19 @@ const BasicBusinessAppDashboard = props => {
         }
       }
 
-      newRoute = {};
-      newRoute.name = "Settings";
-      newRoute.icon = "fa fa-cog";
-      newRoute.layout = "/admin";
-      newRoute.isParent = true;
-      newRoute.collapse = true;
-      newRoute.level = 0;
-      newRoute.state = "settingsMenuCollapse";
-      newRoute.views = getViews(props.settings.settingsMenu.menus, 1);
-      newRoutes.push(newRoute);
+      if (props.settings.settingsMenu) {
+        newRoute = {};
+        newRoute.name = "Settings";
+        newRoute.icon = "fa fa-cog";
+        newRoute.layout = "/admin";
+        newRoute.isParent = true;
+        newRoute.collapse = true;
+        newRoute.level = 0;
+        newRoute.state = "settingsMenuCollapse";
+        newRoute.views = getViews(props.settings.settingsMenu.menus, 1);
+        newRoutes.push(newRoute);
+      }
+
       setRoutes(newRoutes);
       props.settings.dashboardMenu = createNewMenu.items.length > 0 ? dashboardMenu : null;
       setLoading(false);

package/dist/components/dashboard/BusinessPortalAppDashboard.js

@@ -17,6 +17,8 @@ require("./BusinessPortalAppDashboard.css");
 
 var _Workspace = _interopRequireDefault(require("./components/portal/Workspace"));
 
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; } } }; }
@@ -35,7 +37,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 let ps;
 
-const BusinessPortalAppDashboard = props => {
+const BusinessPortalAppDashboard = /*#__PURE__*/_react.default.memo(props => {
   const _React$useState = _react.default.useState(true),
         _React$useState2 = _slicedToArray(_React$useState, 2),
         loading = _React$useState2[0],
@@ -46,15 +48,22 @@ const BusinessPortalAppDashboard = props => {
         routes = _React$useState4[0],
         setRoutes = _React$useState4[1];
 
-  const _React$useState5 = _react.default.useState("data:image/png;base64," + props.logo),
+  const _React$useState5 = _react.default.useState(null),
         _React$useState6 = _slicedToArray(_React$useState5, 2),
-        logo = _React$useState6[0],
-        setLogo = _React$useState6[1];
+        currentModuleMenu = _React$useState6[0],
+        setCurrentModuleMenu = _React$useState6[1];
+
+  const _React$useState7 = _react.default.useState("data:image/png;base64," + props.logo),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        logo = _React$useState8[0],
+        setLogo = _React$useState8[1];
 
   const getItems = (items, level) => {
     let newItems = [];
 
     for (let i = 0; i < items.length; i++) {
+      _Observable.default.clearComponentEventListeners(items[i].id);
+
       let createItem = {};
       createItem.name = items[i].attributes.label;
       createItem.mini = "SS";
@@ -78,6 +87,8 @@ const BusinessPortalAppDashboard = props => {
     let newViews = [];
 
     for (let i = 0; i < menus.length; i++) {
+      _Observable.default.clearComponentEventListeners(menus[i].id);
+
       let createView = {};
       createView.name = menus[i].attributes.label;
       createView.mini = "SS";
@@ -98,19 +109,9 @@ const BusinessPortalAppDashboard = props => {
   };
 
   _react.default.useEffect(() => {
-    document.body.classList.add("white-content");
-
-    if (navigator.platform.indexOf("Win") > -1) {
-      ps.destroy();
-      document.documentElement.className.add("perfect-scrollbar-off");
-      document.documentElement.classList.remove("perfect-scrollbar-on");
-    }
-
-    window.removeEventListener("scroll", showNavbarButton); //dispatch(actionCreators.setSecondaryThemeColor(props.settings.systemProfileDto.secondCorporateBrandColor));
-
-    if (!_Utils.default.isNull(props.settings)) {
-      //alert(JSON.stringify(props.settings.menu));
+    if (!_Utils.default.isNull(currentModuleMenu) && !_Utils.default.isNull(props.settings.menu) && !_Utils.default.isNull(props.settings.menu.menus)) {
       let newRoutes = [];
+      let currentMenu = null;
 
       var _iterator = _createForOfIteratorHelper(props.settings.menu.menus),
           _step;
@@ -118,23 +119,10 @@ const BusinessPortalAppDashboard = props => {
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           const menu = _step.value;
-          let newRoute = {};
-          newRoute.name = menu.attributes.label;
-
-          if (!_Utils.default.isNull(menu.icon)) {
-            newRoute.icon = menu.icon;
-          }
-
-          newRoute.layout = "/admin";
-          newRoute.level = 0;
-          newRoute.isParent = true;
-          newRoute.item = menu;
-          newRoutes.push(newRoute);
 
-          if (!_Utils.default.isNull(menu.items) && menu.items.length > 0) {
-            newRoute.collapse = true;
-            newRoute.state = menu.name + "Collapse";
-            newRoute.views = getViews(menu.items, 1);
+          if (menu.id === currentModuleMenu) {
+            currentMenu = menu;
+            break;
           }
         }
       } catch (err) {
@@ -143,8 +131,61 @@ const BusinessPortalAppDashboard = props => {
         _iterator.f();
       }
 
+      if (currentMenu != null) {
+        var _iterator2 = _createForOfIteratorHelper(currentMenu.items),
+            _step2;
+
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            const item = _step2.value;
+
+            _Observable.default.clearComponentEventListeners(item.id);
+
+            let newRoute = {};
+            newRoute.name = item.attributes.label;
+
+            if (!_Utils.default.isNull(item.icon)) {
+              newRoute.icon = item.icon;
+            }
+
+            newRoute.layout = "/admin";
+            newRoute.level = 0;
+            newRoute.isParent = false;
+            newRoute.item = item;
+            newRoutes.push(newRoute);
+
+            if (!_Utils.default.isNull(item.items) && item.items.length > 0) {
+              newRoute.collapse = false;
+              newRoute.state = item.name + "Collapse";
+              newRoute.views = getViews(item.items, 0);
+            }
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      }
+
       setRoutes(newRoutes);
-      setLoading(false);
+    }
+
+    setLoading(false);
+  }, [currentModuleMenu]);
+
+  _react.default.useEffect(() => {
+    document.body.classList.add("white-content");
+
+    if (navigator.platform.indexOf("Win") > -1) {
+      ps.destroy();
+      document.documentElement.className.add("perfect-scrollbar-off");
+      document.documentElement.classList.remove("perfect-scrollbar-on");
+    }
+
+    window.removeEventListener("scroll", showNavbarButton); //dispatch(actionCreators.setSecondaryThemeColor(props.settings.systemProfileDto.secondCorporateBrandColor));
+
+    if (!_Utils.default.isNull(props.settings)) {
+      setCurrentModuleMenu("homeMenu");
     }
   }, [props.settings]);
 
@@ -168,6 +209,10 @@ const BusinessPortalAppDashboard = props => {
     logoutCallBack: props.logoutCallBack,
     appLogoPath: props.appLogoPath,
     avatar: props.avatar,
+    moduleMenus: props.settings.menu.menus,
+    moduleChangeHandler: selected => {
+      setCurrentModuleMenu(selected);
+    },
     logo: {
       outterLink: "",
       text: "",
@@ -181,7 +226,7 @@ const BusinessPortalAppDashboard = props => {
     activeRouteMenu: 'My Work Items',
     secondaryColor: props.settings.secondaryColor
   }))));
-};
+});
 
 BusinessPortalAppDashboard.propTypes = {
   children: _propTypes.default.element,

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

@@ -128,7 +128,7 @@ class Sidebar extends _react.default.Component {
         }, /*#__PURE__*/_react.default.createElement(_MenuLink.default, {
           config: prop.item,
           clickCallback: prop.name === 'Dashboard' ? this.props.dashboardLauncher : null,
-          autoClick: prop.name === 'My Work Items',
+          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.name) ? secondaryThemeColor : null,

package/dist/components/dashboard/components/portal/Workspace.css

@@ -5,21 +5,21 @@
 
 .workspace-left {
     width: 32%;
-    padding-right: 6px;
+    /*padding-right: 6px*/;
 }
 
 .workspace-right {
-    width: 55%;
-    margin: 32px;
+    width: 45%;
+    margin: 16px;
     border: 1px solid #e1e1e1;
-    height: calc(100vh - 122px) !important;
+    height: calc(100vh - 96px) !important;
 }
 
 .sidebar-customizer {
     position: relative !important;
-    margin-top: 32px !important;
+    margin-top: 16px !important;
     height: auto !important;
-    max-height: calc(100vh - 122px) !important;
+    max-height: calc(100vh - 96px) !important;
     box-shadow: none !important;
     border: 1px solid #e1e1e1;
 }

package/dist/components/form/AddressSearch.js

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactGoogleAutocomplete = _interopRequireDefault(require("react-google-autocomplete"));
+
+var _core = require("@material-ui/core");
+
+var _BaseField = require("./BaseField");
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+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(_e) { throw _e; }, 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(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+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; }
+
+const AddressSearchWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const base = props.base;
+
+  const getAddressProp = (components, id) => {
+    var _iterator = _createForOfIteratorHelper(components),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        const component = _step.value;
+
+        var _iterator2 = _createForOfIteratorHelper(component.types),
+            _step2;
+
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            const type = _step2.value;
+
+            if (type === id) {
+              return component.long_name;
+            }
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    return ' ';
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_core.OutlinedInput, {
+    fullWidth: true,
+    variant: "outlined",
+    id: '__address_search__',
+    style: _Utils.default.mergeStyles({}, props.config),
+    endAdornment: base.value ? /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
+      position: "start",
+      style: {
+        cursor: "pointer"
+      },
+      onClick: () => {
+        base.handleValueChange(null);
+        document.getElementById("__address_search__").value = null;
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Close.default, null)) : null,
+    inputComponent: (_ref) => {
+      let inputRef = _ref.inputRef,
+          onFocus = _ref.onFocus,
+          onBlur = _ref.onBlur,
+          props = _objectWithoutProperties(_ref, ["inputRef", "onFocus", "onBlur"]);
+
+      return /*#__PURE__*/_react.default.createElement(_reactGoogleAutocomplete.default, _extends({
+        apiKey: 'AIzaSyAqXhYU8TvunZtkJ5eAD6SfZyHqFOLLM8w'
+      }, props, {
+        onPlaceSelected: place => {
+          let data = {};
+          data.formattedAddress = place.formatted_address;
+          data.street = getAddressProp(place.address_components, 'street_number') + " " + getAddressProp(place.address_components, 'route');
+          data.suburb = getAddressProp(place.address_components, 'sublocality_level_1');
+          data.city = getAddressProp(place.address_components, 'locality');
+          data.municipality = getAddressProp(place.address_components, 'administrative_area_level_2');
+          data.province = getAddressProp(place.address_components, 'administrative_area_level_1');
+          data.country = getAddressProp(place.address_components, 'country');
+          data.postalCode = getAddressProp(place.address_components, 'postal_code');
+          base.handleValueChange(data);
+          document.getElementById("__address_search__").value = data.formattedAddress;
+        },
+        options: {
+          types: ["geocode", "establishment"],
+          componentRestrictions: {
+            "country": "za"
+          }
+        }
+      }));
+    }
+  });
+}));
+
+const AddressSearch = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
+    handle: props.handle,
+    valueParser: (value, inbound) => {
+      if (!_Utils.default.isNull(value)) {
+        if (!inbound) {
+          return value.formattedAddress;
+        }
+      }
+
+      return value;
+    }
+  }), base => /*#__PURE__*/_react.default.createElement(AddressSearchWrapper, _extends({
+    ref: ref,
+    base: base
+  }, props)));
+}));
+
+var _default = AddressSearch;
+exports.default = _default;

package/dist/components/form/BaseField.js

@@ -78,13 +78,20 @@ const BaseField = props => {
         disabled = _React$useState16[0],
         setDisabled = _React$useState16[1];
 
-  const _React$useState17 = _react.default.useState(null),
+  const _React$useState17 = _react.default.useState(false),
         _React$useState18 = _slicedToArray(_React$useState17, 2),
-        required = _React$useState18[0],
-        setRequired = _React$useState18[1];
+        visible = _React$useState18[0],
+        setVisible = _React$useState18[1];
+
+  const _React$useState19 = _react.default.useState(null),
+        _React$useState20 = _slicedToArray(_React$useState19, 2),
+        required = _React$useState20[0],
+        setRequired = _React$useState20[1];
 
   const validateOnChange = _react.default.useRef();
 
+  const valid = _react.default.useRef(false);
+
   _react.default.useEffect(() => {
     setValue(valueObject[valueProperty]);
   }, [valueObject[valueProperty]]); // Change the required value and re-validate field if necessary
@@ -118,6 +125,7 @@ const BaseField = props => {
 
     setErrorMessage(_ApplicationContext.default.isFormMarkersEnabled() ? result.message : "");
     setHasError(!result.valid && _ApplicationContext.default.isFormMarkersEnabled());
+    valid.current = result.valid && _ApplicationContext.default.isFormMarkersEnabled();
     props.form().setFieldError(config.id, typeof result.message === 'undefined' ? null : result.message);
     return result.valid;
   };
@@ -133,6 +141,7 @@ const BaseField = props => {
       _Observable.default.addSystemSubscriptions(parsedConfig);
 
       setConfig(parsedConfig);
+      setVisible(_Utils.default.evaluateBooleanExpression(parsedConfig.visible, parsedConfig.id, true));
     }
   });
 
@@ -249,6 +258,10 @@ const BaseField = props => {
         return value;
       },
 
+      get valid() {
+        return valid.current;
+      },
+
       get id() {
         return props.config.id;
       },
@@ -266,7 +279,7 @@ const BaseField = props => {
 
       get value() {
         if (!_Utils.default.isNull(valueObject) && !_Utils.default.isNull(valueProperty)) {
-          return valueObject[valueProperty];
+          return !_Utils.default.isNull(props.valueParser) ? props.valueParser(valueObject[valueProperty], false) : valueObject[valueProperty];
         }
 
         return null;
@@ -284,11 +297,16 @@ const BaseField = props => {
         setDisabled(disabled);
       },
 
+      set visible(visible) {
+        setVisible(visible);
+      },
+
       handleLoadComplete() {
         loadingRef.current = false;
       },
 
       refresh() {
+        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;
@@ -319,7 +337,14 @@ const BaseField = props => {
     };
   };
 
-  return /*#__PURE__*/_react.default.createElement("span", null, props.children({
+  return config ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "col",
+    key: config.id,
+    style: {
+      textAlign: 'left',
+      display: !visible || _Utils.default.getComponentAttribute(config, 'hidden', false) === true ? 'none' : 'block'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", null, props.children({
     required: required,
     disabled: disabled,
     valueObject: valueObject,
@@ -333,7 +358,7 @@ const BaseField = props => {
     doValidation: doValidation,
     errorMessage: errorMessage,
     loadingRef: loadingRef
-  }));
+  }))) : null;
 };
 
 exports.BaseField = BaseField;

package/dist/components/form/Checkbox.js

@@ -13,6 +13,8 @@ var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormCo
 
 var _BaseField = require("./BaseField");
 
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
 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); }
@@ -23,6 +25,7 @@ const CheckboxWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
     ref: ref,
     control: /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
       checked: base.value || false,
+      style: _Utils.default.mergeStyles({}, props.config),
       key: props.key,
       value: base.value || false,
       disabled: base.disabled,

package/dist/components/form/DatePicker.js

@@ -77,7 +77,12 @@ const CustomDatePickerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*
       if (dateAttr.toString().includes('now')) {
         let operator = dateAttr.toString().includes("-") ? '-' : '+';
         let tokens = dateAttr.toString().split(operator);
-        let days = parseFloat(tokens[1].replace('d', '').trim());
+        let days = 0;
+
+        if (tokens.length > 0 && !_Utils.default.isNull(tokens[1])) {
+          days = parseFloat(tokens[1].replace('d', '').trim());
+        }
+
         let limit = new Date();
 
         if ("-" === operator) {
@@ -90,7 +95,7 @@ const CustomDatePickerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*
       }
     }
 
-    return null;
+    return id === "minDate" ? "1970-01-01" : "9000-12-31";
   };
 
   _react.default.useEffect(() => {
@@ -136,19 +141,19 @@ const CustomDatePickerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     error: base.hasError,
     margin: "dense",
     inputVariant: "outlined",
-    style: {
+    style: _Utils.default.mergeStyles({
       minWidth: minWidth,
       width: width,
       textAlign: 'left'
-    },
+    }, props.config),
     onChange: handleDateChange,
     size: "small",
     KeyboardButtonProps: {
       'aria-label': 'change date',
       'disabled': props.disabled
     },
-    minDate: minDate !== null ? minDate : null,
-    maxDate: maxDate !== null ? maxDate : null,
+    minDate: minDate,
+    maxDate: maxDate,
     readOnly: props.readOnly
   })));
 }));
@@ -157,7 +162,7 @@ const DatePicker = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle,
     valueParser: (value, inbound) => {
-      return !_Utils.default.isNull(value) ? inbound ? new Date(value) : value.getTime() : null;
+      return !_Utils.default.isNull(value) ? inbound ? new Date(parseFloat(value.toString())) : value.getTime() : null;
     }
   }), base => /*#__PURE__*/_react.default.createElement(CustomDatePickerComponent, _extends({
     ref: ref,