ods-component-lib 1.18.101 → 1.18.102

package/dist/index.d.ts

@@ -49,6 +49,7 @@ import OdsBadgeRibbon from "./components/antd/badge/OdsBadgeRibbon";
 import OdsModal from "./components/antd/modal/OdsModal";
 import OdsFilter from "./components/filter/OdsFilter";
 import OdsFilterTagView from "./components/filter/OdsFilterTagView";
+import OdsFileUpload from "./components/antd/fileUpload/OdsFileUpload";
 export { OdsButton };
 export { OdsInput };
 export { OdsDropdownButton };
@@ -98,6 +99,7 @@ export { OdsBadgeRibbon };
 export { OdsModal };
 export { OdsFilter };
 export { OdsFilterTagView };
+export { OdsFileUpload };
 export { OdsDataGrid };
 export { OdsDisplayGrid };
 export { OdsRemoteDataGrid } from "./components/devextreme/index";

package/dist/index.js

@@ -1718,6 +1718,228 @@ var OdsFilter = function OdsFilter(props) {
   }, props.buttonApplyName))))));
 };
 
+var Title$1 = antd.Typography.Title;
+function OdsFileUpload(props) {
+  var image = props.image,
+    removeFile = props.removeFile,
+    title = props.title,
+    sendDataToParent = props.sendDataToParent,
+    _props$allowDocumentU = props.allowDocumentUpload,
+    allowDocumentUpload = _props$allowDocumentU === void 0 ? false : _props$allowDocumentU,
+    _props$multipleDoc = props.multipleDoc,
+    multipleDoc = _props$multipleDoc === void 0 ? false : _props$multipleDoc;
+  var _useState = React.useState(false),
+    previewOpen = _useState[0],
+    setPreviewOpen = _useState[1];
+  var _useState2 = React.useState(null),
+    previewImage = _useState2[0],
+    setPreviewImage = _useState2[1];
+  var _useState3 = React.useState([]),
+    fileList = _useState3[0],
+    setFileList = _useState3[1];
+  var _useState4 = React.useState(""),
+    previewFileName = _useState4[0],
+    setPreviewFileName = _useState4[1];
+  var getBase64 = function getBase64(img, callback) {
+    var reader = new FileReader();
+    reader.addEventListener('load', function () {
+      return callback(reader.result);
+    });
+    if (img !== undefined) {
+      reader.readAsDataURL(img);
+      if (!multipleDoc) setPreviewFileName(img.name);
+    }
+  };
+  var uploadProps = {
+    name: 'file',
+    accept: allowDocumentUpload ? "image/png,image/jpg,image/jpeg,image/svg+xml,application/pdf,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" : "image/png,image/jpg,image/jpeg,image/svg+xml",
+    multiple: multipleDoc,
+    maxCount: multipleDoc ? 10 : 1,
+    listType: 'picture-card',
+    type: "select",
+    onPreview: function onPreview(file) {
+      if (multipleDoc) {
+        var fileExtension = file.name != "" ? file.name.split('.').pop().toLowerCase() : file.url.split('.').pop().toLowerCase();
+        if (fileExtension === "docx" || fileExtension === "xlsx") {
+          downloadFile(file.url, file.thumbUrl, file.name);
+          setPreviewOpen(false);
+          return;
+        }
+        setPreviewFileName(file.name);
+      }
+      setPreviewImage(file.url || file.thumbUrl || '');
+      handlePreview();
+    },
+    showUploadList: {
+      showPreviewIcon: true,
+      showRemoveIcon: true,
+      showDownloadIcon: true
+    },
+    beforeUpload: function (file) {
+      try {
+        var fileType = allowDocumentUpload ? ["image/png", "image/jpg", "image/jpeg", "image/svg+xml", "application/pdf", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"] : ["image/png", "image/jpg", "image/jpeg", "image/svg+xml"];
+        var isFileSizeOk = file.size / (1024 * 1024) <= 1;
+        var checkType = fileType.includes(file.type);
+        if (!checkType) {
+          return Promise.resolve(antd.Upload.LIST_IGNORE);
+        }
+        if (!isFileSizeOk) {
+          return Promise.resolve(antd.Upload.LIST_IGNORE);
+        }
+        return Promise.resolve(false);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    onChange: function onChange(info) {
+      if (info.fileList) {
+        var updatedFileList = info.fileList.map(function (file) {
+          if (file.originFileObj) {
+            getBase64(file.originFileObj, function (url) {
+              sendDataToParent({
+                base64: url,
+                fileName: file.name,
+                plainTextBase64: splitAtFirstComma(url)[1],
+                id: file.uid
+              });
+            });
+          }
+          return file;
+        });
+        setFileList(updatedFileList);
+      }
+    },
+    onRemove: function onRemove(file) {
+      if (!multipleDoc) {
+        setFileList(null);
+        sendDataToParent({
+          base64: null,
+          fileName: null,
+          plainTextBase64: null,
+          id: null
+        });
+        return;
+      }
+      var updatedFileList = fileList.filter(function (item) {
+        return item.uid !== file.uid;
+      });
+      setFileList(updatedFileList);
+      removeFile(updatedFileList.map(function (file) {
+        return file.uid;
+      }));
+    },
+    onDownload: function onDownload(file) {
+      downloadFile(file.url, file.thumbUrl, file.name);
+    },
+    fileList: fileList
+  };
+  function splitAtFirstComma(input) {
+    var index = input.indexOf(',');
+    if (index !== -1) {
+      var firstPart = input.substring(0, index).trim();
+      var secondPart = input.substring(index + 1).trim();
+      return [firstPart, secondPart];
+    } else {
+      return [input, ''];
+    }
+  }
+  var handleCancel = function handleCancel() {
+    return setPreviewOpen(false);
+  };
+  var handlePreview = function handlePreview() {
+    setPreviewOpen(true);
+  };
+  React.useEffect(function () {
+    if (image) {
+      var formattedFiles = multipleDoc ? image.map(function (file) {
+        return {
+          uid: file.uid,
+          name: file.filename,
+          status: 'done',
+          url: file.url
+        };
+      }) : [{
+        uid: "1",
+        name: "file",
+        status: 'done',
+        url: image
+      }];
+      setFileList(formattedFiles);
+    }
+  }, [image]);
+  var renderPreviewContent = function renderPreviewContent(fileName, previewSrc) {
+    if (previewSrc === null) {
+      return "";
+    }
+    if (!multipleDoc) {
+      return React__default.createElement("img", {
+        alt: fileName == "" ? "file" : fileName,
+        style: {
+          width: '100%'
+        },
+        src: previewSrc
+      });
+    } else {
+      var fileExtension = fileName != "" ? fileName.split('.').pop().toLowerCase() : previewSrc.split('.').pop().toLowerCase();
+      if (fileExtension === "png" || fileExtension === "jpg" || fileExtension === "jpeg" || fileExtension === "svg") {
+        return React__default.createElement("img", {
+          alt: fileName == "" ? "file" : fileName,
+          style: {
+            width: '100%'
+          },
+          src: previewSrc
+        });
+      } else if (fileExtension === "pdf") {
+        return React__default.createElement("embed", {
+          src: previewSrc,
+          type: "application/pdf",
+          width: "100%",
+          height: "800px"
+        });
+      } else {
+        setPreviewOpen(false);
+        return "";
+      }
+    }
+  };
+  function downloadFile(url, thumbUrl, name) {
+    var base64 = url || thumbUrl;
+    var extension = name ? name.split('.').pop() : url.split('.').pop();
+    var fileName = name || "download." + extension;
+    fetch(base64).then(function (res) {
+      return res.blob();
+    }).then(function (blob) {
+      var blobURL = window.URL.createObjectURL(blob);
+      var link = document.createElement('a');
+      link.href = blobURL;
+      link.setAttribute('download', fileName);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(blobURL);
+    })["catch"](function (err) {
+      return console.error('Failed to download file:', err);
+    });
+  }
+  return React__default.createElement("div", null, React__default.createElement(Title$1, {
+    level: 5
+  }, title), React__default.createElement(antd.Upload, Object.assign({}, uploadProps), (fileList === null || fileList === void 0 ? void 0 : fileList.length) < 10 && React__default.createElement("div", null, React__default.createElement(icons.PlusOutlined, null), React__default.createElement("div", {
+    style: {
+      marginTop: 8
+    }
+  }, "Upload"))), React__default.createElement(antd.Modal, {
+    open: previewOpen,
+    title: null,
+    footer: null,
+    onCancel: handleCancel,
+    width: "100%"
+  }, React__default.createElement("div", {
+    style: {
+      padding: '25px'
+    }
+  }, renderPreviewContent(previewFileName, previewImage))));
+}
+
 // A type of promise-like that resolves synchronously and supports only one observer
 
 const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
@@ -34604,6 +34826,7 @@ exports.OdsDisplayGrid = OdsDisplayGrid;
 exports.OdsDivider = OdsDivider;
 exports.OdsDropdown = OdsDropdown;
 exports.OdsDropdownButton = OdsDropdownButton;
+exports.OdsFileUpload = OdsFileUpload;
 exports.OdsFilter = OdsFilter;
 exports.OdsFilterTagView = OdsFilterTagView;
 exports.OdsImage = OdsImage;