@agilemotion/oui-react-js 1.2.7 → 1.2.8

package/dist/components/form/Section.js

@@ -0,0 +1,184 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+
+var _FieldSet = _interopRequireDefault(require("./FieldSet"));
+
+var _TabPanel = _interopRequireDefault(require("../TabPanel"));
+
+var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+
+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 Section = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const _React$useState = _react.default.useState(null),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        fieldGrid = _React$useState2[0],
+        setFieldGrid = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(null),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        width = _React$useState4[0],
+        setWidth = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState({}),
+        _React$useState6 = _slicedToArray(_React$useState5, 1),
+        componentHandles = _React$useState6[0];
+
+  const _React$useState7 = _react.default.useState(true),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        initializing = _React$useState8[0],
+        setInitializing = _React$useState8[1];
+
+  let componentKey = 0;
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+
+    if (initializing) {
+      let fieldGrid = _Utils.default.getFieldGrid(props.config.attributes, props.config.components);
+
+      setFieldGrid(fieldGrid);
+      let width = !_Utils.default.isNull(props.config.attributes) && !_Utils.default.isNull(props.config.attributes['width']) ? props.config.attributes['width'] : '100%';
+      setWidth(width);
+      setInitializing(false);
+    }
+  });
+
+  const createComponentHandle = component => {
+    if (_Utils.default.isNull(componentHandles[component.id])) {
+      let handle = {};
+      componentHandles[component.id] = handle;
+      return handle;
+    }
+
+    return componentHandles[component.id];
+  };
+
+  function renderComponent(component) {
+    return component.type === 'fieldSet' ? /*#__PURE__*/_react.default.createElement(_FieldSet.default, {
+      keyHandler: props.keyHandler,
+      config: component,
+      form: props.form,
+      handle: createComponentHandle(component),
+      ref: /*#__PURE__*/_react.default.createRef(),
+      parentId: props.parentId,
+      loadCompleteHandler: props.loadCompleteHandler,
+      viewId: props.viewId,
+      values: props.values
+    }) : component.type === 'tab' ? /*#__PURE__*/_react.default.createElement(_TabPanel.default, {
+      keyHandler: props.keyHandler,
+      config: component,
+      form: props.form,
+      handle: createComponentHandle(component),
+      ref: /*#__PURE__*/_react.default.createRef(),
+      loadCompleteHandler: props.loadCompleteHandler,
+      viewId: props.viewId,
+      values: props.values
+    }) : /*#__PURE__*/_react.default.createElement("div", null, "Unsupported form section component type " + component.type);
+  }
+
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+
+      getChildren: () => {
+        let children = [];
+        let properties = Object.getOwnPropertyNames(componentHandles);
+
+        var _iterator = _createForOfIteratorHelper(properties),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            const property = _step.value;
+            let componentHandle = componentHandles[property];
+            children.push(componentHandle);
+
+            var _iterator2 = _createForOfIteratorHelper(componentHandle.api.getChildren()),
+                _step2;
+
+            try {
+              for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+                const child = _step2.value;
+                children.push(child);
+              }
+            } catch (err) {
+              _iterator2.e(err);
+            } finally {
+              _iterator2.f();
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+
+        return children;
+      }
+    };
+  };
+
+  const loadCompleteHandler = id => {
+    console.log('Load complete event in form layout, for ' + id); // TODO : call props.loadCompleteHandler
+  };
+
+  function render(section) {
+    let margin = !_Utils.default.isNull(section.attributes) && !_Utils.default.isNull(section.attributes['margin']) ? section.attributes['margin'] : null;
+    let counter = 0;
+    return _Utils.default.isNull(section.components) || section.components.length === 0 ? /*#__PURE__*/_react.default.createElement("div", null, " Error: A form section must have components") : /*#__PURE__*/_react.default.createElement("div", null, fieldGrid.rows.map(row => {
+      return /*#__PURE__*/_react.default.createElement(_Grid.default, {
+        container: true,
+        spacing: 2,
+        style: {
+          margin: margin,
+          textAlign: 'left',
+          width: '100%'
+        },
+        key: componentKey++
+      }, row.fields.map(field => {
+        if (_Utils.default.isNull(field.id)) {
+          field.id = counter + "-" + field.type + '-section-component';
+        }
+
+        return renderComponent(field);
+      }));
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    style: {
+      width: width
+    }
+  }, !initializing && !_Utils.default.isNull(fieldGrid) ? render(props.config) : null);
+}));
+
+var _default = Section;
+exports.default = _default;

package/dist/components/form/SelectItem.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+var _BaseField = require("./BaseField");
+
+var _RestUtils = require("../../RestUtils");
+
+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 _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 SelectItemComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const base = props.base;
+
+  const _React$useState = _react.default.useState(false),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        optionsLoaded = _React$useState2[0],
+        setOptionsLoaded = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(false),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        loadFullOptionList = _React$useState4[0],
+        setLoadFullOptionList = _React$useState4[1];
+
+  const minWidth = _Utils.default.getComponentAttribute(props.config, 'minWidth', '240px');
+
+  const width = _Utils.default.getComponentAttribute(props.config, 'width', '100%');
+
+  const defaultValue = _Utils.default.isNull(props.value) ? '' : props.value.id;
+
+  _react.default.useEffect(() => {
+    if (!_Utils.default.isNull(base.value) && !optionsLoaded) {
+      let defaultOptions = [];
+      defaultOptions.push(base.value);
+      base.setSelectOptions(defaultOptions);
+      setOptionsLoaded(true);
+    }
+  }, [base.value]);
+
+  _react.default.useEffect(() => {
+    if (loadFullOptionList && !_Utils.default.isNull(props.config.dataService)) {
+      (0, _RestUtils.invokeRpc)(props.config.dataService, props.handle, props.viewId, result => {
+        let data = result.data;
+        let options = [];
+
+        for (let i = 0; i < data.records.length; i++) {
+          let record = data.records[i];
+          options.push(record.map.objectReference);
+        }
+
+        base.setSelectOptions(options);
+      }, e => {
+        console.error(e);
+
+        _Utils.default.publishSystemErrorMessage(props.viewId);
+      });
+      setOptionsLoaded(true);
+    }
+  }, [loadFullOptionList]);
+
+  return /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    select: true,
+    InputProps: props.InputProps,
+    id: props.id,
+    reference: ref,
+    disabled: base.disabled,
+    required: base.required,
+    label: !_Utils.default.isNull(props.config.attributes) ? props.config.attributes['label'] : null,
+    style: {
+      minWidth: minWidth,
+      width: width
+    },
+    SelectProps: {
+      onOpen: () => {
+        if (!loadFullOptionList) {
+          setLoadFullOptionList(true);
+        }
+      },
+      displayEmpty: props.allowEmptyValue || false
+    },
+    value: !_Utils.default.isNull(base.value) ? base.value.id : defaultValue,
+    className: props.className,
+    onChange: e => {
+      base.handleValueChange(e.target.value);
+    },
+    error: base.hasError,
+    helperText: base.errorMessage,
+    margin: "dense",
+    size: "small",
+    variant: "outlined"
+  }, base.selectOptions.map(option => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+    key: option.id,
+    value: option.id
+  }, _Utils.default.isNull(option.label) ? "" : option.label.trim())));
+}));
+
+const SelectItem = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
+    handle: props.handle,
+    valueParser: value => {
+      if (!_Utils.default.isNull(value)) {
+        value.type = 'ObjectReference';
+      }
+
+      return value;
+    }
+  }), base => /*#__PURE__*/_react.default.createElement(SelectItemComponent, _extends({
+    ref: ref,
+    base: base
+  }, props)));
+}));
+
+var _default = SelectItem;
+exports.default = _default;

package/dist/components/form/TextField.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _BaseField = require("./BaseField");
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+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); }
+
+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 TextFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const base = props.base;
+
+  const _React$useState = _react.default.useState(props.multiline),
+        _React$useState2 = _slicedToArray(_React$useState, 1),
+        multiline = _React$useState2[0];
+
+  const minWidth = _Utils.default.getComponentAttribute(props.config, 'minWidth', '240px');
+
+  const width = _Utils.default.getComponentAttribute(props.config, 'width', '100%');
+
+  const height = _Utils.default.getComponentAttribute(props.config, 'height', multiline ? '200px' : null);
+
+  const rows = height === null ? 4 : height.replace('px', '') / 20 - 1;
+  const secondaryColor = (0, _reactRedux.useSelector)(state => state.dashboard.secondaryThemeColor);
+  const ThemedTextField = (0, _styles.withStyles)({
+    root: {
+      '& label.Mui-focused': {
+        color: secondaryColor
+      },
+      '& .MuiInput-underline:after': {
+        borderBottomColor: secondaryColor
+      },
+      '& .MuiOutlinedInput-root': {
+        '&.Mui-focused fieldset': {
+          borderColor: secondaryColor
+        }
+      }
+    }
+  })(_TextField.default);
+  return /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    id: props.id,
+    ref: ref,
+    type: props.type,
+    required: base.required,
+    label: !_Utils.default.isNull(props.config.attributes) ? props.config.attributes['label'] : null,
+    value: !_Utils.default.isNull(base.value) || base.value === 0 ? base.value : '',
+    onChange: e => {
+      base.handleValueChange(e.target.value);
+    },
+    onKeyPress: props.keyHandler,
+    error: base.hasError,
+    helperText: base.errorMessage,
+    margin: "dense",
+    multiline: multiline,
+    rows: rows,
+    disabled: base.disabled,
+    size: "small",
+    style: {
+      minWidth: minWidth,
+      width: width,
+      height: height,
+      color: 'secondary'
+    },
+    variant: "outlined"
+  });
+}));
+
+const TextField = /*#__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(TextFieldWrapper, _extends({
+    ref: ref,
+    base: base
+  }, props)));
+}));
+
+var _default = TextField;
+exports.default = _default;

package/dist/components/form/TimePicker.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 CustomTimePickerComponent = /*#__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 ThemedKeyboardTimePicker = (0, _styles.withStyles)({
+    root: {
+      '& label.Mui-focused': {
+        color: secondaryColor
+      },
+      '& .MuiInput-underline:after': {
+        borderBottomColor: secondaryColor
+      },
+      '& .MuiOutlinedInput-root': {
+        '&.Mui-focused fieldset': {
+          borderColor: secondaryColor
+        }
+      }
+    }
+  })(_pickers.KeyboardTimePicker);
+  return /*#__PURE__*/_react.default.createElement(_pickers.MuiPickersUtilsProvider, {
+    utils: _dateFns2.default
+  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    container: true,
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement(_pickers.KeyboardTimePicker, {
+    id: props.id,
+    InputProps: props.InputProps,
+    disabled: base.disabled,
+    required: base.required,
+    ampm: false,
+    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 time',
+      'disabled': props.disabled
+    },
+    readOnly: props.readOnly
+  })));
+}));
+
+const TimePicker = /*#__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(CustomTimePickerComponent, _extends({
+    ref: ref,
+    base: base
+  }, props)));
+}));
+
+var _default = TimePicker;
+exports.default = _default;

package/dist/components/form/TransferList.css

@@ -0,0 +1,11 @@
+.error {
+    color: #f44336;
+    margin-left: 14px;
+    font-size: 0.75rem;
+    margin-top: 3px;
+    text-align: left;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-weight: 400;
+    line-height: 1.66;
+    letter-spacing: 0.03333em;
+}