@agilemotion/oui-react-js 1.2.7 → 1.2.8

package/dist/components/form/BaseField.js

@@ -0,0 +1,330 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseField = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+
+var _ApplicationContext = _interopRequireDefault(require("../../ApplicationContext"));
+
+var _Event = _interopRequireDefault(require("../../event/Event"));
+
+var _EventType = _interopRequireDefault(require("../../event/EventType"));
+
+var _DynamicJS = _interopRequireDefault(require("../../DynamicJS"));
+
+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; } } }; }
+
+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 BaseField = props => {
+  const _React$useState = _react.default.useState(false),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        hasError = _React$useState2[0],
+        setHasError = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(""),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        errorMessage = _React$useState4[0],
+        setErrorMessage = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState({}),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        valueObject = _React$useState6[0],
+        setValueObject = _React$useState6[1];
+
+  const _React$useState7 = _react.default.useState(null),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        valueProperty = _React$useState8[0],
+        setValueProperty = _React$useState8[1];
+
+  const loadingRef = _react.default.useRef(true);
+
+  const _React$useState9 = _react.default.useState(null),
+        _React$useState10 = _slicedToArray(_React$useState9, 2),
+        config = _React$useState10[0],
+        setConfig = _React$useState10[1];
+
+  const _React$useState11 = _react.default.useState(!_Utils.default.isNull(props.value) ? props.value : null),
+        _React$useState12 = _slicedToArray(_React$useState11, 2),
+        value = _React$useState12[0],
+        setValue = _React$useState12[1];
+
+  const _React$useState13 = _react.default.useState([]),
+        _React$useState14 = _slicedToArray(_React$useState13, 2),
+        selectOptions = _React$useState14[0],
+        setSelectOptions = _React$useState14[1];
+
+  const _React$useState15 = _react.default.useState(false),
+        _React$useState16 = _slicedToArray(_React$useState15, 2),
+        disabled = _React$useState16[0],
+        setDisabled = _React$useState16[1];
+
+  const _React$useState17 = _react.default.useState(null),
+        _React$useState18 = _slicedToArray(_React$useState17, 2),
+        required = _React$useState18[0],
+        setRequired = _React$useState18[1];
+
+  const validateOnChange = _react.default.useRef();
+
+  _react.default.useEffect(() => {
+    setValue(valueObject[valueProperty]);
+  }, [valueObject[valueProperty]]); // Change the required value and re-validate field if necessary
+
+
+  _react.default.useEffect(() => {
+    if (!_Utils.default.isNull(config) && validateOnChange.current === true) {
+      props.form().validateParent(config.id, doValidation(props.values, value));
+    }
+
+    validateOnChange.current = null;
+  }, [required]);
+
+  const doValidation = (values, currentValue) => {
+    let path = props.form().getValuePath(config.id);
+    let result = {
+      valid: true
+    };
+
+    if (!_Utils.default.isNull(config.validator) && !_Utils.default.isNull(config.validator.script)) {
+      result.valid = _DynamicJS.default.executeScriptObject("".concat(config.id, "Validator"), config.validator.script);
+
+      if (!result.valid) {
+        result.message = config.validator.message;
+      }
+    }
+
+    if (result.valid) {
+      result = _Utils.default.validateField(path.valueProperty, required, path.valueObject, currentValue, config.validator);
+    }
+
+    setErrorMessage(_ApplicationContext.default.isFormMarkersEnabled() ? result.message : "");
+    setHasError(!result.valid && _ApplicationContext.default.isFormMarkersEnabled());
+    props.form().setFieldError(config.id, typeof result.message === 'undefined' ? null : result.message);
+    return result.valid;
+  };
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+
+    if (_Utils.default.isNull(config)) {
+      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+      _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
+
+      _Observable.default.addSystemSubscriptions(parsedConfig);
+
+      setConfig(parsedConfig);
+    }
+  });
+
+  _react.default.useEffect(() => {
+    if (!_Utils.default.isNull(props.values) && !_Utils.default.isNull(config)) {
+      let path = props.form().getValuePath(config.id, props.values);
+
+      if (!_Utils.default.isNull(path.valueObject)) {
+        setValueObject(path.valueObject);
+        setValueProperty(path.valueProperty);
+      }
+
+      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;
+
+        if (!_Utils.default.isNull(scriptValue)) {
+          let val = scriptValue.instanceType === 'TypedValue' ? scriptValue.value : scriptValue;
+          valueObject[valueProperty] = val;
+          setValue(val);
+          props.form().handleChange(config.id, val);
+        }
+      }
+    }
+  }, [props.values, config]);
+
+  _react.default.useEffect(() => {
+    if (loadingRef.current === true && !_Utils.default.isNull(config)) {
+      let field = props.form().addField(config.id, props.handle, props.parentId, props.bindValueToForm);
+
+      if (!_Utils.default.isNull(field) && !_Utils.default.isNull(field.error)) {
+        if (field.error.length > 0) {
+          setHasError(true);
+          setErrorMessage(field.error);
+        }
+      }
+
+      if (!_Utils.default.isNull(props.loadCompleteHandler)) {
+        props.loadCompleteHandler(config.id);
+      }
+    }
+  });
+
+  _react.default.useEffect(() => {
+    return () => {
+      if (!_Utils.default.isNull(props.form())) {
+        _Observable.default.clearComponentEventListeners(props.handle);
+
+        props.form().removeField(props.config.id);
+      }
+    };
+  }, []);
+
+  const handleValueChange = newValue => {
+    let valueChanged = newValue !== value;
+
+    if (!_Utils.default.isNull(newValue) && !_Utils.default.isNull(value)) {
+      if (config.fieldType === 'SELECT' || config.fieldType === 'LOOKUP') {
+        valueChanged = newValue.id !== value.id;
+      } else {
+        valueChanged = JSON.stringify(value) !== JSON.stringify(newValue);
+      }
+    }
+
+    if (valueChanged) {
+      let id = config.dataBinding ? config.dataBinding : config.id;
+
+      _ApplicationContext.default.enableFormMarkers(true);
+
+      if (config.fieldType === 'SELECT') {
+        setValue(props.form().handleSelectItemChange(id, selectOptions, newValue));
+
+        var _iterator = _createForOfIteratorHelper(selectOptions),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            const selectOption = _step.value;
+
+            if (selectOption.id === newValue) {
+              newValue = selectOption;
+              break;
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      } else {
+        setValue(newValue);
+        props.form().handleChange(!_Utils.default.isNull(config.dataBinding) ? config.dataBinding : id, newValue);
+      }
+
+      if (!_Utils.default.isNull(props.valueChangeHandler)) {
+        props.valueChangeHandler(newValue);
+      }
+
+      let event = new _Event.default(props.handle, props.viewId, newValue);
+
+      _Observable.default.fireEvent(_EventType.default.VALUE_CHANGE, event);
+    }
+  };
+
+  const api = () => {
+    return {
+      validate: (values, currentValue) => {
+        return doValidation(values, currentValue);
+      },
+      parseValue: (value, inbound) => {
+        if (!_Utils.default.isNull(props.valueParser)) {
+          return props.valueParser(value, inbound);
+        }
+
+        return value;
+      },
+
+      get id() {
+        return props.config.id;
+      },
+
+      getValidationGroup: () => {
+        return !_Utils.default.isNull(config.validator) ? config.validator.group : null;
+      },
+      clear: () => {
+        handleValueChange(null);
+
+        if (!_Utils.default.isNull(props.clearHandler)) {
+          props.clearHandler();
+        }
+      },
+
+      get value() {
+        if (!_Utils.default.isNull(valueObject) && !_Utils.default.isNull(valueProperty)) {
+          return valueObject[valueProperty];
+        }
+
+        return null;
+      },
+
+      set value(value) {
+        handleValueChange(value);
+
+        if (!_Utils.default.isNull(props.valueChangeCallback)) {
+          props.valueChangeCallback(value);
+        }
+      },
+
+      set disabled(disabled) {
+        setDisabled(disabled);
+      },
+
+      handleLoadComplete() {
+        loadingRef.current = false;
+      },
+
+      refresh() {
+        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) {
+        validateOnChange.current = true;
+        setRequired(required);
+      },
+
+      getChildren: () => {
+        if (!_Utils.default.isNull(props.getChildren)) {
+          return props.getChildren();
+        }
+
+        return [];
+      }
+    };
+  };
+
+  return /*#__PURE__*/_react.default.createElement("span", null, props.children({
+    required: required,
+    disabled: disabled,
+    valueObject: valueObject,
+    valueProperty: valueProperty,
+    handleValueChange: handleValueChange,
+    setValue: setValue,
+    setSelectOptions: setSelectOptions,
+    selectOptions: selectOptions,
+    value: value,
+    hasError: hasError,
+    doValidation: doValidation,
+    errorMessage: errorMessage,
+    loadingRef: loadingRef
+  }));
+};
+
+exports.BaseField = BaseField;

package/dist/components/form/Checkbox.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
+
+var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+
+var _BaseField = require("./BaseField");
+
+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); }
+
+const CheckboxWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const base = props.base;
+  return /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
+    ref: ref,
+    control: /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+      checked: base.value || false,
+      key: props.key,
+      value: base.value || false,
+      disabled: base.disabled,
+      onChange: e => {
+        base.handleValueChange(e.target.checked);
+      },
+      error: props.base.errorMessage,
+      size: "small",
+      inputProps: props.inputProps
+    }),
+    label: props.config.attributes['label']
+  });
+}));
+
+const Checkbox = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
+    handle: props.handle
+  }), base => /*#__PURE__*/_react.default.createElement(CheckboxWrapper, _extends({
+    ref: ref,
+    base: base
+  }, props)));
+}));
+
+var _default = Checkbox;
+exports.default = _default;

package/dist/components/form/DatePicker.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("date-fns");
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+
+var _BaseField = require("./BaseField");
+
+var _dateFns2 = _interopRequireDefault(require("@date-io/date-fns"));
+
+var _pickers = require("@material-ui/pickers");
+
+var _styles = require("@material-ui/core/styles");
+
+var _reactRedux = require("react-redux");
+
+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); }
+
+const CustomDatePickerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const base = props.base;
+  const defaultDate = !_Utils.default.isNull(base.valueObject[base.valueProperty]) ? new Date(base.valueObject[base.valueProperty]) : null;
+
+  let minWidth = _Utils.default.getComponentAttribute(props.config, 'minWidth', '240px');
+
+  let width = _Utils.default.getComponentAttribute(props.config, 'width', '100%');
+
+  const handleDateChange = date => {
+    base.setValue(date);
+    base.handleValueChange(date);
+  };
+
+  _react.default.useEffect(() => {
+    base.setValue(defaultDate);
+  }, [props.base.valueObject[props.base.valueProperty]]);
+
+  const secondaryColor = (0, _reactRedux.useSelector)(state => state.dashboard.secondaryThemeColor);
+  const ThemedKeyboardDatePicker = (0, _styles.withStyles)({
+    root: {
+      '& label.Mui-focused': {
+        color: secondaryColor
+      },
+      '& .MuiInput-underline:after': {
+        borderBottomColor: secondaryColor
+      },
+      '& .MuiOutlinedInput-root': {
+        '&.Mui-focused fieldset': {
+          borderColor: secondaryColor
+        }
+      }
+    }
+  })(_pickers.KeyboardDatePicker);
+  return /*#__PURE__*/_react.default.createElement(_pickers.MuiPickersUtilsProvider, {
+    utils: _dateFns2.default
+  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    container: true,
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement(ThemedKeyboardDatePicker, {
+    id: props.id,
+    InputProps: props.InputProps,
+    disabled: base.disabled,
+    required: base.required,
+    format: "dd/MM/yyyy",
+    label: props.config.attributes['label'],
+    value: base.value,
+    className: props.className,
+    error: base.hasError,
+    margin: "dense",
+    inputVariant: "outlined",
+    style: {
+      minWidth: minWidth,
+      width: width,
+      textAlign: 'left'
+    },
+    onChange: handleDateChange,
+    size: "small",
+    KeyboardButtonProps: {
+      'aria-label': 'change date',
+      'disabled': props.disabled
+    },
+    readOnly: props.readOnly
+  })));
+}));
+
+const DatePicker = /*#__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) => {
+      return !_Utils.default.isNull(value) ? inbound ? new Date(value) : value.getTime() : null;
+    }
+  }), base => /*#__PURE__*/_react.default.createElement(CustomDatePickerComponent, _extends({
+    ref: ref,
+    base: base
+  }, props)));
+}));
+
+var _default = DatePicker;
+exports.default = _default;