@agilemotion/oui-react-js 1.3.1 → 1.3.3

package/dist/components/footer/Footer.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Footer;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -23,10 +23,27 @@ var _CardAvatar = _interopRequireDefault(require("../card/CardAvatar"));
 
 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 useStyles = (0, _styles.makeStyles)(_footerStyle.default);
 
-function Footer(props) {
+const Footer = props => {
   const classes = useStyles();
+
+  const _React$useState = _react.default.useState(props.width ? props.width : null),
+        _React$useState2 = _slicedToArray(_React$useState, 1),
+        width = _React$useState2[0];
+
   const fluid = props.fluid,
         white = props.white,
         rtlActive = props.rtlActive;
@@ -42,8 +59,16 @@ function Footer(props) {
     [classes.block]: true,
     [classes.whiteColor]: white
   });
-  return /*#__PURE__*/_react.default.createElement("footer", {
-    className: classes.footer
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.wrapper,
+    style: {
+      borderTop: '1px solid ' + props.splitterColor
+    }
+  }, /*#__PURE__*/_react.default.createElement("footer", {
+    className: classes.footer,
+    style: {
+      width: width
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: container,
     style: {
@@ -56,21 +81,29 @@ function Footer(props) {
   }, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
     className: classes.inlineBlock
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.right + " row "
+    className: classes.right + " row"
   }, "\xA9 ", 1900 + new Date().getYear(), " ", " ", /*#__PURE__*/_react.default.createElement("div", {
     style: {
       paddingLeft: 10
     }
   }, /*#__PURE__*/_react.default.createElement(_CardAvatar.default, {
     plain: true
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: require("../../assets/img/flogo.png"),
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, props.logo ? /*#__PURE__*/_react.default.createElement("img", {
+    src: props.logo,
     alt: "..."
-  }))))));
-}
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, props.text ? /*#__PURE__*/_react.default.createElement("div", null, "\xA0\xA0", props.text) : null))))))));
+};
 
 Footer.propTypes = {
   fluid: _propTypes.default.bool,
   white: _propTypes.default.bool,
   rtlActive: _propTypes.default.bool
-};
+};
+var _default = Footer;
+exports.default = _default;

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,20 +297,34 @@ 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;
         setRequired(requiredNewVal);
       },
 
-      setFieldRequired(required) {
+      get required() {
+        return required;
+      },
+
+      setFieldRequired(newVal) {
         validateOnChange.current = true;
-        setRequired(required);
+        setRequired(newVal);
+      },
+
+      setFieldRequired(newVal, validate) {
+        validateOnChange.current = validate;
+        setRequired(newVal);
       },
 
       getChildren: () => {
@@ -310,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,
@@ -324,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

@@ -27,7 +27,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 _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 CustomDatePickerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const _React$useState = _react.default.useState(null),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        minDate = _React$useState2[0],
+        setMinDate = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(null),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        maxDate = _React$useState4[0],
+        setMaxDate = _React$useState4[1];
+
   const base = props.base;
   const defaultDate = !_Utils.default.isNull(base.valueObject[base.valueProperty]) ? new Date(base.valueObject[base.valueProperty]) : null;
 
@@ -44,6 +66,48 @@ const CustomDatePickerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     base.setValue(defaultDate);
   }, [props.base.valueObject[props.base.valueProperty]]);
 
+  const formatNumber = n => {
+    return n < 10 ? '0' + n : n;
+  };
+
+  const getLimitDate = id => {
+    let dateAttr = _Utils.default.getComponentAttribute(props.config, id, null);
+
+    if (dateAttr) {
+      if (dateAttr.toString().includes('now')) {
+        let operator = dateAttr.toString().includes("-") ? '-' : '+';
+        let tokens = dateAttr.toString().split(operator);
+        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) {
+          limit.setDate(limit.getDate() - days);
+        } else {
+          limit.setDate(limit.getDate() + days);
+        }
+
+        return limit.getFullYear() + "-" + formatNumber(limit.getMonth() + 1) + "-" + formatNumber(limit.getDate());
+      }
+    }
+
+    return id === "minDate" ? "1970-01-01" : "9000-12-31";
+  };
+
+  _react.default.useEffect(() => {
+    if (minDate === null) {
+      setMinDate(getLimitDate("minDate"));
+    }
+
+    if (maxDate === null) {
+      setMaxDate(getLimitDate("maxDate"));
+    }
+  });
+
   const secondaryColor = (0, _reactRedux.useSelector)(state => state.dashboard.secondaryThemeColor);
   const ThemedKeyboardDatePicker = (0, _styles.withStyles)({
     root: {
@@ -72,22 +136,24 @@ const CustomDatePickerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     required: base.required,
     format: "dd/MM/yyyy",
     label: props.config.attributes['label'],
-    value: base.value,
+    value: base.value ? base.value : null,
     className: props.className,
     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,
+    maxDate: maxDate,
     readOnly: props.readOnly
   })));
 }));
@@ -96,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,