@agilemotion/oui-react-js 1.8.32 → 1.8.33

package/dist/components/form/ImageEditor_bck.js

@@ -0,0 +1,466 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ImageEditorComponent = exports.ImageEditor = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _BaseField = require("./BaseField");
+var _styles = require("@mui/styles");
+var _Utils = _interopRequireDefault(require("../../Utils"));
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+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 => ({
+  button: {
+    margin: theme.spacing(1)
+  },
+  input: {
+    display: 'none'
+  },
+  errorMessageDisplay: {
+    color: 'red'
+  }
+}));
+const status = response => {
+  if (response.ok) {
+    return Promise.resolve(response);
+  } else {
+    let error = new Error(response.statusText);
+    error.code = response.status;
+    return Promise.reject(error);
+  }
+};
+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 [multiple] = _react.default.useState(props.multiple === true);
+  const [angle, setAngle] = _react.default.useState(0);
+  const [zoomDepth, setZoomDepth] = _react.default.useState(null);
+  const [originalImageWidth, setOriginalImageWidth] = _react.default.useState(null);
+  const [originalImageHeight, setOriginalImageHeight] = _react.default.useState(null);
+  const [payloadStorageMode] = _react.default.useState(props.config.payloadStorageMode || 'base64');
+  const classes = useStyles();
+  const width = _Utils.default.getComponentAttribute(props.config, 'width', '320px');
+  const height = _Utils.default.getComponentAttribute(props.config, 'height', '320px');
+  const cacheId = _react.default.useRef(!_Utils.default.isNull(props.base.value) ? props.base.value.documentRepositoryCacheId : null);
+  const base = props.base;
+  _react.default.useEffect(() => {}, [props.initialFile]);
+  function getFetchConfig(data) {
+    const accessToken = sessionStorage.getItem("accessToken");
+    const idToken = sessionStorage.getItem("idToken");
+    return {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Authorization': 'Bearer ' + accessToken,
+        'idToken': idToken
+      },
+      body: data
+    };
+  }
+  function getRotateAngle(action) {
+    let rotateAngle = null;
+    if ("rotateLeft" === action) {
+      rotateAngle = -90;
+    } else if ("rotateRight" === action) {
+      rotateAngle = 90;
+    }
+    return rotateAngle;
+  }
+  function process(callback, data, action) {
+    let fetchConfig = getFetchConfig(data);
+    let url = location + _ApplicationManager.default.getContextRoot() + _Utils.default.getComponentAttribute(props.config, 'processingUrl', null) + "/" + action + "/" + _Utils.default.getComponentAttribute(props.config, "mode", "DOC");
+    let rotateAngle = getRotateAngle(action);
+    if (rotateAngle) {
+      url += "?" + rotateAngle;
+    }
+    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
+      callback(data);
+    }).catch(e => {
+      if (e.code === 401) {
+        _ApplicationManager.default.clear();
+        _ApplicationManager.default.getApplicationHistory().push('/login');
+      }
+    }));
+  }
+  const handleChange = () => event => {
+    if (cacheId.current) {
+      remove().then(() => cacheId.current = null).catch(e => {});
+    }
+    let files = event.target.files;
+    let file = files[0];
+    let reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      if (!_Utils.default.isNull(file)) {
+        let fileMetaData = {};
+        fileMetaData.name = file.name;
+        fileMetaData.type = file.type;
+        fileMetaData.size = file.size;
+        if (base.value) {
+          fileMetaData.id = base.value.id;
+        }
+        if ('base64' === payloadStorageMode) {
+          if (_Utils.default.getComponentAttribute(props.config, 'autoRemoveBackground', false)) {
+            process(data => {
+              fileMetaData.url = data;
+              base.handleValueChange(fileMetaData);
+            }, reader.result, 'removeBackground');
+          } else {
+            fileMetaData.url = file.base64;
+            base.handleValueChange(fileMetaData);
+          }
+        } else {
+          if (_Utils.default.getComponentAttribute(props.config, 'autoRemoveBackground', false)) {
+            process(data => {
+              setCacheModeValue(fileMetaData, file);
+            }, reader.result, 'removeBackground');
+          } else {
+            setCacheModeValue(fileMetaData, file);
+          }
+        }
+      }
+    };
+    reader.onloadend = () => {};
+  };
+  const setCacheModeValue = (fileMetaData, file) => {
+    fileMetaData.correlationId = props.config.id;
+    fileMetaData.domain = props.viewId;
+    if (cacheId.current) {
+      remove().then(() => {
+        cacheId.current = null;
+        upload(fileMetaData, file, reader);
+      }).catch(e => {});
+    } else {
+      upload(fileMetaData, file, reader);
+    }
+  };
+  const upload = (metadata, file, reader) => {
+    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;
+    if (payloadStorageMode === 'post') {
+      const accessToken = sessionStorage.getItem("accessToken");
+      const idToken = sessionStorage.getItem("idToken");
+      let data = new FormData();
+      metadata.correlationId = props.viewId + "." + props.config.id;
+      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 => {
+        metadata.documentRepositoryId = !_Utils.default.isNull(base.value) ? base.value.documentRepositoryId : null;
+        metadata.documentRepositoryCacheId = data;
+        cacheId.current = data;
+        base.handleValueChange(metadata);
+      }).catch(e => {
+        if (e.code === 401) {
+          _ApplicationManager.default.clear();
+          _ApplicationManager.default.getApplicationHistory().push('/login');
+        }
+        let message = {
+          messageType: 'ERROR',
+          message: 'An error has accurred while uploading file'
+        };
+        let event = new _Event.default(_ApplicationManager.default, props.viewId, message);
+        _Observable.default.fireEvent(_EventType.default.MESSAGE_ARRIVED, event);
+      }));
+    } else {
+      metadata.payload = reader.result;
+      base.handleValueChange(metadata);
+    }
+  };
+  const remove = () => {
+    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.current;
+      (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);
+        }
+      }));
+    });
+  };
+  _react.default.useEffect(() => {
+    let container = document.getElementById("__image_container");
+    let image = document.getElementById("__image");
+    if (container) {
+      let ratio = 10 * zoomDepth / 100;
+      container.style.width = originalImageWidth + originalImageWidth * ratio + "px";
+      container.style.height = originalImageHeight + originalImageHeight * ratio + "px";
+      image.style.width = container.style.width;
+      image.style.height = container.style.height;
+    }
+  }, [zoomDepth]);
+  const zoom = direction => {
+    if (originalImageWidth === null) {
+      setOriginalImageWidth(document.getElementById("__image").width);
+      setOriginalImageHeight(document.getElementById("__image").height);
+    }
+    let depth = direction === "In" ? zoomDepth + 1 : zoomDepth - 1;
+    if (depth <= 0) {
+      depth = 1;
+    }
+    setZoomDepth(depth);
+  };
+  const rotate = direction => {
+    let rotateMode = _Utils.default.getComponentAttribute(props.config, "rotateMode", null);
+    if (rotateMode === null || rotateMode === 'SERVER') {
+      process(data => {
+        base.handleValueChange({
+          ...base.value,
+          url: data
+        });
+      }, base.value.url, 'rotate' + direction);
+    } else {
+      let rotateAngle = angle + getRotateAngle("rotate" + direction);
+      document.getElementById("__image_container").style.transform = "rotate(" + rotateAngle + "deg)";
+      setAngle(rotateAngle);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: _Utils.default.mergeStyles({
+      width: width
+    }, props.config)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row",
+    style: {
+      marginLeft: '0',
+      marginRight: '0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement("label", null, _Utils.default.getComponentAttribute(props.config, 'label', '')))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "row",
+    style: {
+      marginLeft: '0',
+      marginRight: '0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    accept: "image/jpeg,image/gif,image/png,image/x-eps",
+    className: classes.input,
+    id: `contained-button-file-${props.config.id}`,
+    disabled: base.disabled,
+    required: base.required,
+    multiple: multiple,
+    onChange: handleChange(),
+    type: "file"
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: `contained-button-file-${props.config.id}`
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    component: "span",
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '120px',
+      height: '40px',
+      border: base.hasError ? "1px solid #f44336" : null,
+      color: base.hasError ? "#f44336" : null
+    },
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'UPLOAD'
+    })
+  }, "UPLOAD")), base.hasError ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      color: "#f44336",
+      padding: "8px 0"
+    }
+  }, base.errorMessage)) : null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*",
+    style: {
+      marginLeft: '4px'
+    }
+  }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    onClick: () => rotate('Left'),
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'ROTATE_LEFT'
+    })
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*",
+    style: {
+      marginLeft: '4px'
+    }
+  }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    onClick: () => rotate('Right'),
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'ROTATE_RIGHT'
+    })
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*",
+    style: {
+      marginLeft: '4px'
+    }
+  }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    onClick: () => zoom('Out'),
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'ZOOM_OUT'
+    })
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*",
+    style: {
+      marginLeft: '4px'
+    }
+  }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    onClick: () => zoom('In'),
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'ZOOM_IN'
+    })
+  }) : null)), !_Utils.default.isNull(base.value) ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "row",
+    style: {
+      padding: "8px 0",
+      marginLeft: '0',
+      marginRight: '0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "__image_parent",
+    style: {
+      width: "100%",
+      height: height,
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+      backgroundColor: 'transparent',
+      backgroundImage: `url(${require('./transparent.jpeg')})`,
+      border: '4px solid #e1e1e1',
+      borderRadius: '4px'
+    },
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.button,
+    style: {
+      width: 'auto',
+      height: parseFloat(height.replace('px', '')) - 20 + 'px',
+      maxHeight: parseFloat(height.replace('px', '')) - 20 + 'px',
+      textAlign: 'center',
+      overflow: 'auto',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "__image_container"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    id: "__image",
+    src: base.value.url,
+    alt: '',
+    style: {
+      maxHeight: parseFloat(height.replace('px', '')) - 20 + 'px'
+    }
+  }))))) : null);
+}));
+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, {
+    handle: props.handle,
+    valueParser: (value, inbound) => {
+      if (inbound) {
+        clearTrigger.current = !clearTrigger.current;
+        if (!_Utils.default.isNull(value)) {
+          let val = value;
+
+          // TODO : Support multiple file upload
+          if (_Utils.default.getComponentAttribute(props.config, 'multiple', false)) {
+            if (typeof value.length !== 'undefined' && value.length > 0) {
+              val = value[0];
+            } else {
+              if (value.documentRepositoryId) {
+                return value;
+              }
+              return null;
+            }
+          }
+          if (val.map) {
+            val = val.map;
+          }
+          let fileMetaData = {};
+          fileMetaData.name = !_Utils.default.isNull(val.label) ? val.label : val.name;
+          fileMetaData.id = val.id;
+          fileMetaData.type = val.type;
+          fileMetaData.size = val.size;
+          fileMetaData.documentRepositoryId = !_Utils.default.isNull(val.key) ? val.key : val.documentRepositoryId;
+          fileMetaData.documentRepositoryCacheId = val.documentRepositoryCacheId;
+          fileMetaData.url = val.url;
+          if (!_Utils.default.isNull(val.url)) {
+            let file = {};
+            file.base64 = val.url;
+            setFile(file);
+          }
+          return fileMetaData;
+        }
+      }
+      return value;
+    },
+    valueChangeCallback: value => {
+      if (_Utils.default.isNull(value)) {
+        clearTrigger.current = !clearTrigger.current;
+      }
+    }
+  }), base => /*#__PURE__*/_react.default.createElement(ImageEditorComponent, _extends({
+    base: base,
+    initialFile: file,
+    clearTrigger: clearTrigger.current
+  }, props)));
+}));
+var _default = exports.default = ImageEditor;

package/dist/components/form/TimePicker.js

@@ -17,7 +17,7 @@ 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 = props => {
   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');
@@ -61,8 +61,8 @@ const CustomTimePickerComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/
     onChange: newValue => handleDateChange(newValue.toDate()),
     value: base.value ? (0, _dayjs.default)(base.value) : null
   })));
-}));
-const TimePicker = /*#__PURE__*/_react.default.memo((props, ref) => {
+};
+const TimePicker = props => {
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle,
     valueParser: (value, inbound) => {
@@ -82,5 +82,5 @@ const TimePicker = /*#__PURE__*/_react.default.memo((props, ref) => {
   }), base => /*#__PURE__*/_react.default.createElement(CustomTimePickerComponent, _extends({
     base: base
   }, props)));
-});
+};
 var _default = exports.default = TimePicker;

package/dist/components/layout/CollapsiblePanel.css

@@ -1,9 +1,9 @@
-.coll-panel-container {
-    font-family: sans-serif;
-    text-align: center;
-}
-
-.coll-panel-btn:focus {
-    outline: 0;
-    box-shadow: none;
-}
+.coll-panel-container {
+    font-family: sans-serif;
+    text-align: center;
+}
+
+.coll-panel-btn:focus {
+    outline: 0;
+    box-shadow: none;
+}

package/dist/components/layout/Layout.js

@@ -69,17 +69,22 @@ const Layout = props => {
   _react.default.useLayoutEffect(() => {
     props.handle.api = api();
   }, []);
+  function uniqueId(prefix) {
+    // time + random + counter, all base36 (no dashes)
+    uniqueId._c = (uniqueId._c || 0) + 1;
+    return prefix + Date.now().toString(36) + Math.random().toString(36).slice(2) + uniqueId._c.toString(36);
+  }
   const setMissingComponentIds = () => {
     let layout = props.config;
     if (!layout.id) {
-      layout.id = '_parent_layout';
+      layout.id = uniqueId('_parent_layout_');
     }
     layout.key = keyCounter++;
     if (!_Utils.default.isNull(layout.components)) {
       for (let i = 0; i < layout.components.length; i++) {
         let component = layout.components[i];
         if (_Utils.default.isNull(component.id)) {
-          component.id = layout.id + '_' + component.type + '_' + i;
+          component.id = uniqueId(layout.id + '_' + component.type + '_');
         }
         component.key = keyCounter++;
       }
@@ -385,7 +390,8 @@ const Layout = props => {
   return /*#__PURE__*/_react.default.createElement("div", {
     id: props.config.id,
     style: getLayoutStyle(props.config, 'transparent'),
-    className: `${_Utils.default.getComponentAttribute(props.config, 'className', 'default-oui-layout') + (props.config.orientation === 'HORIZONTAL' ? ' row' : '')}`
+    className: `${_Utils.default.getComponentAttribute(props.config, 'className', 'default-oui-layout') + (props.config.orientation === 'HORIZONTAL' ? ' row' : '')}`,
+    key: props.config.id
   }, render(props.config));
 };
 exports.Layout = Layout;