@agilemotion/oui-react-js 1.8.1 → 1.8.3

package/dist/components/form/GridField.js

@@ -9,8 +9,8 @@ var _BaseField = require("./BaseField");
 var _Utils = _interopRequireDefault(require("../../Utils"));
 var _DataGrid = require("../DataGrid");
 var _Icon = _interopRequireDefault(require("../Icon"));
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
 var _Toolbar = _interopRequireDefault(require("../Toolbar"));
 var _Observable = _interopRequireDefault(require("../../event/Observable"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -27,15 +27,15 @@ function createRecord(row, gridConfig, inbound) {
   let record = {};
   for (const column of gridConfig.columns) {
     let property = !_Utils.default.isNull(column.dataBinding) ? column.dataBinding : column.id;
-    let val = row[property];
-    record[property] = val;
+    let val = _Utils.default.readNestedProperty(row, property);
+    _Utils.default.updateNestedProperty(record, property, val);
   }
 
   //record.id = row.id >= 0 ? row.id : null;
   record.id = row.id;
   return record;
 }
-const GridFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const GridFieldWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
   const newRowIdCounter = _react.default.useRef(-1);
   const [selection, setSelection] = _react.default.useState([]);
@@ -96,7 +96,6 @@ const GridFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
     className: 'col-*-*'
   }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     "aria-controls": "menu-list-grow",
-    ref: ref,
     "aria-haspopup": "true",
     onClick: () => {
       props.gridHandle.api.addRows([{
@@ -109,7 +108,6 @@ const GridFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
     className: 'col-*-*'
   }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     "aria-controls": "menu-list-grow",
-    ref: ref,
     "aria-haspopup": "true",
     disabled: selection.length === 0,
     onClick: () => {
@@ -149,11 +147,11 @@ const GridFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
     onSelectionChange: selection => {
       setSelection(selection);
     },
-    filterWrapperClass: 'transferListFilterWraper',
+    filterWrapperClass: 'transferListFilterWrapper',
     hasBorder: false
   })));
 }));
-const GridField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const GridField = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [gridHandle] = _react.default.useState({});
   const [toolHandle] = _react.default.useState(!_Utils.default.isNull(props.config.toolstrip) ? {} : null);
   const initialValueSet = _react.default.useRef(false);
@@ -198,7 +196,6 @@ const GridField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.
     },
     clearHandler: () => gridHandle.api.clear()
   }), base => /*#__PURE__*/_react.default.createElement(GridFieldWrapper, _extends({
-    ref: ref,
     gridHandle: gridHandle,
     toolstripHandle: toolHandle,
     initialValueSet: initialValueSet.current,

package/dist/components/form/IconField.js

@@ -9,17 +9,16 @@ var _BaseField = require("./BaseField");
 var _Icon = _interopRequireDefault(require("../Icon"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const IconWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const IconWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
   return /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: props.config.iconId
   });
 }));
-const IconField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const IconField = /*#__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(IconWrapper, _extends({
-    ref: ref,
     base: base
   }, props)));
 }));

package/dist/components/form/ImageEditor.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ImageEditorComponent = exports.ImageEditor = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _BaseField = require("./BaseField");
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/styles");
 var _Utils = _interopRequireDefault(require("../../Utils"));
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 var _Icon = _interopRequireDefault(require("../Icon"));
@@ -38,7 +38,7 @@ const json = response => {
   return response.text();
 };
 const location = window.location.protocol + "//" + window.location.hostname;
-const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [multiple] = _react.default.useState(props.multiple === true);
   const [angle, setAngle] = _react.default.useState(0);
   const [zoomDepth, setZoomDepth] = _react.default.useState(null);
@@ -224,7 +224,6 @@ const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.
   }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: 'contained',
     size: "large",
-    ref: ref,
     style: {
       width: '40px',
       height: '40px'
@@ -257,7 +256,6 @@ const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.
   }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: 'contained',
     size: "large",
-    ref: ref,
     style: {
       width: '40px',
       height: '40px'
@@ -309,7 +307,7 @@ const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.
     }
   }))))) : null);
 }));
-const ImageEditor = exports.ImageEditor = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const ImageEditor = exports.ImageEditor = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [file, setFile] = _react.default.useState(null);
   const clearTrigger = _react.default.useRef(false);
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
@@ -358,7 +356,6 @@ const ImageEditor = exports.ImageEditor = /*#__PURE__*/_react.default.memo( /*#_
       }
     }
   }), base => /*#__PURE__*/_react.default.createElement(ImageEditorComponent, _extends({
-    ref: ref,
     base: base,
     initialFile: file,
     clearTrigger: clearTrigger.current

package/dist/components/form/LabelField.js

@@ -9,21 +9,19 @@ var _BaseField = require("./BaseField");
 var _Utils = _interopRequireDefault(require("../../Utils"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const LabelFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const LabelFieldWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
   let displayTemplate = _Utils.default.getComponentAttribute(props.config, 'displayTemplate', null);
   let className = _Utils.default.getComponentAttribute(props.config, 'className', null);
   let emptyValue = _Utils.default.getComponentAttribute(props.config, 'emptyValue', '');
   return /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref,
     className: className
   }, !_Utils.default.isNull(displayTemplate) ? displayTemplate.replace('@{value}', _Utils.default.isNull(base.value) ? emptyValue : base.value) : base.value);
 }));
-const LabelField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const LabelField = /*#__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(LabelFieldWrapper, _extends({
-    ref: ref,
     base: base
   }, props)));
 }));

package/dist/components/form/LookupField.js

@@ -6,24 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.LookupFieldComponent = exports.LookupField = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Utils = _interopRequireDefault(require("../../Utils"));
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
-var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
-var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
+var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _BaseField = require("./BaseField");
 var _DataGrid = require("../DataGrid");
 var _Observable = _interopRequireDefault(require("../../event/Observable"));
-var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [currentSelection, setCurrentSelection] = _react.default.useState(null);
   const [open, setOpen] = _react.default.useState(false);
   const width = props.config.attributes?.style?.width ? props.config.attributes.style.width : "100%";
   const minWidth = props.config.attributes?.style?.minWidth ? props.config.attributes.style.minWidth : "240px";
-  const height = !_Utils.default.isNull(props.config.attributes?.style?.height) ? props.config.attributes.style.height : '52px';
+  const height = !_Utils.default.isNull(props.config.attributes?.style?.height) ? props.config.attributes.style.height : '41px';
   const margin = !_Utils.default.isNull(props.config.attributes?.style?.margin) ? props.config.attributes.style.margin : '4px 0';
   const defaultValue = _Utils.default.isNull(props.value) ? '' : props.value;
   const base = props.base;
@@ -74,7 +74,9 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
       width: width,
       minWidth: minWidth,
       margin: margin,
-      height: height
+      height: height,
+      marginBottom: base.hasError ? '20px' : '4px',
+      marginTop: '8px'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'col-*-*',
@@ -98,27 +100,19 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
       marginBottom: base.value ? '0' : '8px'
     }
   }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    InputProps: {
-      readOnly: true,
-      disableUnderline: true
+    style: {
+      marginTop: '0'
     },
     id: props.id,
-    ref: ref,
     required: base.required,
     disabled: true,
     label: !_Utils.default.isNull(props.config.attributes) && !_Utils.default.isNull(props.config.attributes['label']) ? props.config.attributes['label'] : null,
     value: base.value?.__oui_label || base.value?.dataRecordDescription || defaultValue,
-    className: props.className,
+    className: props.className || 'lookup-field-input',
     error: base.hasError,
     helperText: base.errorMessage,
     size: "small",
-    margin: "dense",
-    style: {
-      height: '48px',
-      width: '100%',
-      color: 'secondary',
-      border: 'none'
-    }
+    margin: "dense"
   })), /*#__PURE__*/_react.default.createElement(_Dialog.default, {
     open: open,
     onClose: handleClose,
@@ -135,7 +129,7 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
     }
   }, /*#__PURE__*/_react.default.createElement(_DialogTitle.default, {
     id: "alert-dialog-title"
-  }, !_Utils.default.isNull(props.config.attributes) && !_Utils.default.isNull(props.config.attributes['label']) ? props.config.attributes['label'] : null), /*#__PURE__*/_react.default.createElement("div", {
+  }, !_Utils.default.isNull(props.config.attributes) && !_Utils.default.isNull(props.config.attributes['pickerLabel']) ? props.config.attributes['pickerLabel'] : props.config.attributes['label']), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       maxHeight: "calc(38vh - 52px)",
       overflow: "auto",
@@ -163,7 +157,7 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
     disabled: _Utils.default.isNull(currentSelection)
   }, "Ok"))))));
 }));
-const LookupField = exports.LookupField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const LookupField = exports.LookupField = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [gridHandle] = _react.default.useState({});
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle,
@@ -191,7 +185,6 @@ const LookupField = exports.LookupField = /*#__PURE__*/_react.default.memo( /*#_
       return value;
     }
   }), base => /*#__PURE__*/_react.default.createElement(LookupFieldComponent, _extends({
-    ref: ref,
     gridHandle: gridHandle,
     base: base
   }, props)));

package/dist/components/form/MultiFileUploadField.js

@@ -5,12 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.MultiFileUploadField = exports.DocumentUpload = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _BaseField = require("./BaseField");
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/styles");
 var _Utils = _interopRequireDefault(require("../../Utils"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _FileThumb = _interopRequireDefault(require("../FileThumb"));
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
+var _reactPromiseTracker = require("react-promise-tracker");
+var _Event = _interopRequireDefault(require("../../event/Event"));
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+var _EventType = _interopRequireDefault(require("../../event/EventType"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const useStyles = (0, _styles.makeStyles)(theme => ({
@@ -40,11 +45,27 @@ const location = window.location.protocol + '//' + window.location.hostname;
 const DocumentUpload = props => {
   const [files, setFiles] = _react.default.useState(null);
   const [multiple] = _react.default.useState(props.multiple === true);
+  const [payloadStorageMode] = _react.default.useState(props.config.payloadStorageMode || 'base64');
   const classes = useStyles();
   const [errorMessage, setErrorMessage] = _react.default.useState('');
   const base = props.base;
   _react.default.useEffect(() => {
-    base.handleValueChange(files);
+    if (files) {
+      let val = [];
+      for (const file of files) {
+        if (payloadStorageMode === 'post' && file.documentRepositoryCacheId) {
+          val.push({
+            ...file,
+            payload: null
+          });
+        } else {
+          val.push(file);
+        }
+      }
+      base.handleValueChange(val);
+    } else {
+      base.handleValueChange(null);
+    }
   }, [files]);
   _react.default.useEffect(() => {
     if (!files && base.value) {
@@ -53,7 +74,87 @@ const DocumentUpload = props => {
   }, [base.value]);
   const deleteFile = file => {
     setFiles(files.filter(f => f.name !== file.name));
+    if (file.documentRepositoryCacheId) {
+      remove(file.documentRepositoryCacheId);
+    }
+  };
+  const remove = cacheId => {
+    return new Promise((resolve, reject) => {
+      const accessToken = sessionStorage.getItem("accessToken");
+      const idToken = sessionStorage.getItem("idToken");
+      let fetchConfig = {
+        method: 'GET',
+        headers: {
+          'Accept': 'application/json',
+          'Authorization': 'Bearer ' + accessToken,
+          'idToken': idToken,
+          'tenant': _ApplicationManager.default.getActiveTenant()
+        }
+      };
+      let url = location + _ApplicationManager.default.getContextRoot() + '/docs/api/v1/manager/upload/remove/' + cacheId;
+      (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(() => {
+        resolve();
+      }).catch(e => {
+        if (e.code === 401) {
+          _ApplicationManager.default.clear();
+          _ApplicationManager.default.getApplicationHistory().push('/login');
+        } else {
+          reject(e);
+        }
+      }));
+    });
   };
+  const upload = (metadata, file) => {
+    let uploadUrl = _Utils.default.getComponentAttribute(props.config, 'uploadUrl', null);
+    if (uploadUrl === null) {
+      uploadUrl = _ApplicationManager.default.getContextRoot() + "/docs/api/v1/manager/upload/save";
+    }
+    let payloadStorageMode = props.config.payloadStorageMode;
+    return new Promise((resolve, reject) => {
+      if (payloadStorageMode === 'post') {
+        const accessToken = sessionStorage.getItem("accessToken");
+        const idToken = sessionStorage.getItem("idToken");
+        let data = new FormData();
+        metadata.correlationId = props.viewId + "." + props.config.id + "-" + file.name;
+        data.append("metadata", JSON.stringify(metadata));
+        data.append("file", file);
+        let fetchConfig = {
+          method: 'POST',
+          headers: {
+            'Accept': 'application/json',
+            'Authorization': 'Bearer ' + accessToken,
+            'idToken': idToken,
+            'tenant': _ApplicationManager.default.getActiveTenant()
+          },
+          body: data
+        };
+        let url = location + uploadUrl;
+        (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
+          resolve({
+            documentRepositoryId: !_Utils.default.isNull(base.value) ? base.value.documentRepositoryId : null,
+            documentRepositoryCacheId: data
+          });
+        }).catch(e => {
+          handleError(e);
+          reject(e);
+        }));
+      } else {
+        resolve(null);
+      }
+    });
+  };
+  function handleError(e) {
+    if (e.code === 401) {
+      _ApplicationManager.default.clear();
+      _ApplicationManager.default.getApplicationHistory().push('/login');
+    }
+    let message = {
+      messageType: 'ERROR',
+      message: 'An error has occurred while uploading file'
+    };
+    let event = new _Event.default(_ApplicationManager.default, props.viewId, message);
+    _Observable.default.fireEvent(_EventType.default.MESSAGE_ARRIVED, event);
+  }
   const handleChange = () => event => {
     let uploadedFiles = event.target.files;
     var allFiles = [];
@@ -61,26 +162,56 @@ const DocumentUpload = props => {
       let file = uploadedFiles[i];
       let reader = new FileReader();
       reader.readAsDataURL(file);
+      let find = allFiles.find(f => f.name === file.name);
       reader.onload = () => {
         let fileInfo = {
           name: file.name,
           type: file.type,
           size: file.size,
-          payload: reader.result
+          payload: reader.result,
+          correlationId: props.viewId + "." + props.config.id + "-" + file.name
         };
-        if (!files || !files.find(f => f.name === file.name)) {
-          allFiles.push(fileInfo);
-          if (allFiles.length === uploadedFiles.length) {
-            if (multiple === true) {
-              if (!_Utils.default.isNull(props.onUploadHandler)) {
-                props.onUploadHandler(allFiles);
-              }
-            } else {
-              if (!_Utils.default.isNull(props.onUploadHandler)) {
-                props.onUploadHandler(allFiles[0]);
+        if ('base64' === payloadStorageMode) {
+          storeFile();
+        } else {
+          if (find && find.documentRepositoryCacheId) {
+            remove(find.documentRepositoryCacheId).then(() => {
+              upload(fileInfo, file).then(result => {
+                find.documentRepositoryCacheId = result.documentRepositoryCacheId;
+                storeFile();
+              }).catch(e => {
+                console.log("Error caching file : ", e);
+                handleError(e);
+              });
+            }).catch(e => {
+              console.log("Error removing file cache : ", e);
+              handleError(e);
+            });
+          } else {
+            upload(fileInfo, file).then(result => {
+              fileInfo.documentRepositoryCacheId = result.documentRepositoryCacheId;
+              storeFile();
+            }).catch(e => {
+              console.log("Error caching file : ", e);
+              handleError(e);
+            });
+          }
+        }
+        function storeFile() {
+          if (!files || !find) {
+            allFiles.push(fileInfo);
+            if (allFiles.length === uploadedFiles.length) {
+              if (multiple === true) {
+                if (!_Utils.default.isNull(props.onUploadHandler)) {
+                  props.onUploadHandler(allFiles);
+                }
+              } else {
+                if (!_Utils.default.isNull(props.onUploadHandler)) {
+                  props.onUploadHandler(allFiles[0]);
+                }
               }
+              setFiles(files && files.length > 0 ? allFiles.concat(files) : allFiles);
             }
-            setFiles(files && files.length > 0 ? allFiles.concat(files) : allFiles);
           }
         }
       };
@@ -96,9 +227,13 @@ const DocumentUpload = props => {
     multiple: multiple,
     onChange: handleChange(),
     type: "file"
-  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
+  }), /*#__PURE__*/_react.default.createElement("div", null, !base.disabled && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: props.config.attributes?.showThumbImages ? null : '48px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: `contained-button-file-${props.config.id}`
-  }, !base.disabled && /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     component: "span",
     disabled: base.disabled,
     className: classes.button,
@@ -120,12 +255,14 @@ const DocumentUpload = props => {
       key: index,
       style: {
         marginLeft: '0',
-        marginRight: '8px'
+        marginRight: '8px',
+        width: props.config.attributes?.showThumbImages ? null : '100%'
       }
     }, /*#__PURE__*/_react.default.createElement(_FileThumb.default, {
       key: file.name,
       file: file,
       disabled: base.disabled,
+      showImage: props.config.attributes?.showThumbImages,
       onDelete: file => {
         deleteFile(file);
       }

package/dist/components/form/RadioGroup.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _RadioGroup = _interopRequireDefault(require("@material-ui/core/RadioGroup"));
-var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
-var _FormLabel = _interopRequireDefault(require("@material-ui/core/FormLabel"));
+var _RadioGroup = _interopRequireDefault(require("@mui/material/RadioGroup"));
+var _Radio = _interopRequireDefault(require("@mui/material/Radio"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _FormLabel = _interopRequireDefault(require("@mui/material/FormLabel"));
 var _BaseField = require("./BaseField");
 var _Utils = _interopRequireDefault(require("../../Utils"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const RadioGroupWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const RadioGroupWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
   const label = _Utils.default.getComponentAttribute(props.config, 'label', null);
   // TODO : Support calling a rest end-point to get options
@@ -53,7 +53,7 @@ const RadioGroupWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.
     });
   })));
 }));
-const RadioGroup = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const RadioGroup = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const defaultValue = _Utils.default.getComponentAttribute(props.config, 'defaultValue', null);
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle,
@@ -64,7 +64,6 @@ const RadioGroup = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default
       return value;
     }
   }), base => /*#__PURE__*/_react.default.createElement(RadioGroupWrapper, _extends({
-    ref: ref,
     base: base,
     defaultValue: defaultValue
   }, props)));

package/dist/components/form/Section.js

@@ -9,12 +9,12 @@ 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"));
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 var _HtmlPanel = _interopRequireDefault(require("../HtmlPanel"));
 var _Video = _interopRequireDefault(require("../media/Video"));
 var _VideoPlayer = _interopRequireDefault(require("../media/VideoPlayer"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Section = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Section = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [fieldGrid, setFieldGrid] = _react.default.useState(null);
   const [width, setWidth] = _react.default.useState(null);
   const [componentHandles] = _react.default.useState({});
@@ -135,7 +135,6 @@ const Section = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
     }));
   }
   return /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref,
     style: {
       width: width
     }

package/dist/components/form/SelectItem.js

@@ -5,14 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _Utils = _interopRequireDefault(require("../../Utils"));
 var _BaseField = require("./BaseField");
-var _RestUtils = require("../../RestUtils");
+var _RestService = require("../../RestService");
+var _Event = _interopRequireDefault(require("../../event/Event"));
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+var _EventType = _interopRequireDefault(require("../../event/EventType"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const SelectItemComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const SelectItemComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
   const [optionsLoaded, setOptionsLoaded] = _react.default.useState(false);
   const [loadFullOptionList, setLoadFullOptionList] = _react.default.useState(false);
@@ -30,8 +33,12 @@ const SelectItemComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
   }, [base.value]);
   _react.default.useEffect(() => {
     if (loadFullOptionList && !_Utils.default.isNull(props.config.dataService)) {
-      let method = props.config.dataService.type === 'rpc' ? _RestUtils.invokeRpc : _RestUtils.invokeRest;
-      method(props.config.dataService, props.handle, props.viewId, result => {
+      let method = props.config.dataService.type === 'rpc' ? _RestService.invokeRpc : _RestService.invokeRest;
+      method({
+        service: props.config.dataService,
+        component: props.handle,
+        viewId: props.viewId
+      }).then(result => {
         let options = [];
         if (_Utils.default.isNull(props.validator) || props.validator.nullable) {
           options.push({
@@ -43,7 +50,7 @@ const SelectItemComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
           options.push(record);
         }
         base.setSelectOptions(options);
-      }, e => {
+      }).catch(e => {
         console.error(e);
         _Utils.default.publishErrorMessage(e, props.viewId);
       });
@@ -88,14 +95,13 @@ const SelectItemComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
     value: option.id
   }, _Utils.default.isNull(option.dataRecordDescription) ? '' : option.dataRecordDescription.trim())));
 }));
-const SelectItem = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+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 => {
       return value;
     }
   }), base => /*#__PURE__*/_react.default.createElement(SelectItemComponent, _extends({
-    ref: ref,
     base: base
   }, props)));
 }));