@agilemotion/oui-react-js 1.8.2 → 1.8.4

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)));
 }));

package/dist/components/form/SignatureTemplateDesignerField.js

@@ -10,7 +10,7 @@ var _SignatureTemplateDesigner = _interopRequireDefault(require("../signatures/S
 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 SignatureTemplateDesignerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const SignatureTemplateDesignerComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
   const designerHandler = _react.default.useState({});
   return /*#__PURE__*/_react.default.createElement(_SignatureTemplateDesigner.default, {
@@ -25,11 +25,10 @@ const SignatureTemplateDesignerComponent = /*#__PURE__*/_react.default.memo( /*#
     }
   });
 }));
-const SignatureTemplateDesignerField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const SignatureTemplateDesignerField = /*#__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(SignatureTemplateDesignerComponent, _extends({
-    ref: ref,
     base: base
   }, props)));
 }));

package/dist/components/form/Switch.js

@@ -5,16 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
 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 SwitchWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const SwitchWrapper = /*#__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(_Switch.default, {
       checked: base.value || false,
       style: _Utils.default.mergeStyles({}, props.config),
@@ -31,11 +30,10 @@ const SwitchWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defa
     label: _Utils.default.getComponentAttribute(props.config, 'label', '')
   });
 }));
-const Switch = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Switch = /*#__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(SwitchWrapper, _extends({
-    ref: ref,
     base: base
   }, props)));
 }));

package/dist/components/form/TextField.js

@@ -4,52 +4,51 @@ 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 _react = _interopRequireWildcard(require("react"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _styles = require("@mui/styles");
 var _BaseField = require("./BaseField");
 var _Utils = _interopRequireDefault(require("../../Utils"));
 var _reactRedux = require("react-redux");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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 TextFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const TextFieldWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
   const [multiline] = _react.default.useState(props.multiline);
   const width = !_Utils.default.isNull(props.config.attributes?.style?.width) ? props.config.attributes.style.width : "100%";
   const maxWidth = !_Utils.default.isNull(props.config.attributes?.style?.maxWidth) ? props.config.attributes.style.maxWidth : null;
   const minWidth = !_Utils.default.isNull(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 : 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
-        }
-      }
+  const textRef = (0, _react.useRef)(null);
+  const [rows, setRows] = (0, _react.useState)(1);
+  _react.default.useEffect(() => {
+    if (textRef.current) {
+      const computedStyle = window.getComputedStyle(textRef.current);
+      const lineHeight = parseFloat(computedStyle.lineHeight) || 20;
+      const calculatedRows = Math.floor(height === null ? 20 : height.replace('px', '') / lineHeight);
+      setRows(calculatedRows);
     }
-  })(_TextField.default);
+  }, [textRef.current]);
   return /*#__PURE__*/_react.default.createElement(_TextField.default, {
     id: props.id,
-    ref: ref,
     type: props.type,
     required: base.required,
+    inputRef: textRef,
     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);
     },
-    inputProps: {
-      autocomplete: "new-password"
+    slotProps: {
+      input: {
+        autoComplete: "new-password",
+        sx: {}
+      }
     },
-    onKeyPress: props.keyHandler,
+    onKeyUp: props.keyHandler,
     error: base.hasError,
     helperText: base.errorMessage,
     margin: "dense",
@@ -61,20 +60,19 @@ const TextFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
       minWidth: minWidth,
       width: width,
       maxWidth: maxWidth,
-      height: height,
+      height: multiline ? null : height,
       color: 'secondary'
     },
     variant: "outlined"
   });
 }));
-const TextField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const TextField = /*#__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 value ? value.toString().trim() : value;
     }
   }), base => /*#__PURE__*/_react.default.createElement(TextFieldWrapper, _extends({
-    ref: ref,
     base: base
   }, props)));
 }));

package/dist/components/form/TimePicker.js

@@ -7,15 +7,17 @@ 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 _Grid = _interopRequireDefault(require("@mui/material/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 _TimePicker = require("@mui/x-date-pickers/TimePicker");
+var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
+var _AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
 var _reactRedux = require("react-redux");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _demo = require("@mui/x-date-pickers/internals/demo");
 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 CustomTimePickerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+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');
@@ -28,67 +30,56 @@ const CustomTimePickerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     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,
+  const style = {
+    minWidth: minWidth,
+    width: width,
+    textAlign: 'left'
+  };
+  return /*#__PURE__*/_react.default.createElement(_LocalizationProvider.LocalizationProvider, {
+    dateAdapter: _AdapterDayjs.AdapterDayjs
+  }, /*#__PURE__*/_react.default.createElement(_demo.DemoContainer, {
+    components: ['TimePicker', 'TimePicker']
+  }, /*#__PURE__*/_react.default.createElement(_TimePicker.TimePicker, {
     label: props.config.attributes['label'],
-    value: base.value,
     className: props.className,
     error: base.hasError,
     helperText: base.errorMessage,
-    margin: "dense",
-    inputVariant: "outlined",
-    style: {
-      minWidth: minWidth,
-      width: width,
-      textAlign: 'left'
-    },
-    onChange: handleDateChange,
-    size: "small",
-    KeyboardButtonProps: {
-      'aria-label': 'change time',
-      'disabled': props.disabled
+    ampm: false,
+    slotProps: {
+      textField: {
+        variant: "outlined",
+        margin: "dense",
+        size: "small",
+        style: style,
+        disabled: base.disabled,
+        required: base.required,
+        error: base.hasError,
+        helperText: base.errorMessage
+      }
     },
-    readOnly: props.readOnly
+    onChange: newValue => handleDateChange(newValue.toDate()),
+    value: base.value ? (0, _dayjs.default)(base.value) : null
   })));
 }));
-const TimePicker = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const TimePicker = /*#__PURE__*/_react.default.memo((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle,
     valueParser: (value, inbound) => {
       if (!_Utils.default.isNull(value)) {
         if (!value.toString().includes("T")) {
+          if (typeof value === 'string') {
+            const [hours, minutes] = value.split(":").map(Number);
+            const dateObject = new Date();
+            dateObject.setHours(hours, minutes, 0, 0);
+            return inbound ? dateObject : dateObject.toLocaleTimeString('it-IT');
+          }
           return value;
         }
       }
       return !_Utils.default.isNull(value) ? inbound ? new Date(value) : new Date(value).toLocaleTimeString('it-IT') : null;
     }
   }), base => /*#__PURE__*/_react.default.createElement(CustomTimePickerComponent, _extends({
-    ref: ref,
     base: base
   }, props)));
-}));
+});
 var _default = exports.default = TimePicker;