@agilemotion/oui-react-js 1.8.39 → 1.8.41

package/dist/components/form/ImageEditor_bck.js

@@ -1,466 +0,0 @@
-"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;