oa-componentbook 1.0.1-stage.44 → 1.0.1-stage.440

package/build/dev/oa-component-document-viewer/CustomDocumentViewer.js

@@ -0,0 +1,367 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/web.url.js");
+require("core-js/modules/web.url-search-params.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactPdf = require("react-pdf");
+var _icons = require("@material-ui/icons");
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _RotateRight = _interopRequireDefault(require("@material-ui/icons/RotateRight"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _styles = _interopRequireDefault(require("./styles"));
+var _reactZoomPanPinch = require("react-zoom-pan-pinch");
+var _antd = require("antd");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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; }
+/* eslint-disable */
+
+_reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.min.js");
+function CustomDocumentViewer(_ref) {
+  let {
+    fileType,
+    fileUrl,
+    onDownload,
+    hideZoom,
+    hideDownload,
+    hidePageNumber,
+    hideRotate,
+    documentViewerOverlayHeight,
+    oaImgCenterHeight,
+    docHeight,
+    onlyDocumentView,
+    setcarouselPageNumberHandler,
+    initialSlide,
+    // in case of carousel - we can specify the initialSlide for opening specific page
+    carouselPageNumber,
+    selectedPages,
+    deleteSelectedPage
+  } = _ref;
+  const [totalPages, setTotalPages] = (0, _react.useState)(null);
+  const [currentPage, setCurrentPage] = (0, _react.useState)(1); // For image rotation.
+  const [rotation, setRotation] = (0, _react.useState)(0);
+  const [transformUtils, setTransformUtils] = (0, _react.useState)(null);
+  const containerRef = (0, _react.useRef)(null);
+  const pageRefs = (0, _react.useRef)([]);
+  const carouselRef = (0, _react.useRef)();
+  const transformUtilsRefs = (0, _react.useRef)([]); // holds utils per page
+
+  // When the document loads, update total pages (for PDFs).
+  const onDocumentLoadSuccess = _ref2 => {
+    let {
+      numPages
+    } = _ref2;
+    return setTotalPages(numPages);
+  };
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    // Early return if not in carousel mode or carousel ref isn't ready
+    if (fileType !== "pdfWithCarousel" || !carouselRef.current) return;
+
+    // Ensure totalPages is valid before arithmetic
+    if (!totalPages || typeof totalPages !== "number") return;
+
+    // Check for right arrow and ensure we're not on the last page
+    if (event.key === "ArrowRight" && carouselPageNumber < totalPages - 1) {
+      var _carouselRef$current;
+      (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 || _carouselRef$current.next();
+    }
+    // Check for left arrow and ensure we're not on the first page
+    else if (event.key === "ArrowLeft" && carouselPageNumber > 0) {
+      var _carouselRef$current2;
+      (_carouselRef$current2 = carouselRef.current) === null || _carouselRef$current2 === void 0 || _carouselRef$current2.prev();
+    }
+  }, [fileType, carouselPageNumber, totalPages]);
+  (0, _react.useEffect)(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+  const handleRotate = (0, _react.useCallback)(() => setRotation(prev => prev + 90), []);
+  // Default download function; can be overridden by passing an onDownload prop.
+  const defaultDownload = (0, _react.useCallback)(() => {
+    if (fileType === "image") {
+      fetch(fileUrl, {
+        mode: "cors"
+      }).then(res => res.blob()).then(blob => {
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = fileUrl.split("/").pop();
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+      }).catch(error => console.error("Image download failed:", error));
+    } else {
+      // For PDFs and other file types, use the standard download.
+      const link = document.createElement("a");
+      link.href = fileUrl;
+      link.download = fileUrl.split("/").pop();
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  }, [fileUrl, fileType]);
+  const handleDownload = onDownload || defaultDownload;
+  const customNextArrow = /*#__PURE__*/_react.default.createElement("div", {
+    className: "custom-slick-arrow custom-next"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _icons.KeyboardArrowRight,
+    size: 32
+  }));
+  const customPrevArrow = /*#__PURE__*/_react.default.createElement("div", {
+    className: "custom-slick-arrow custom-prev"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _icons.KeyboardArrowLeft,
+    size: 32
+  }));
+  const handleScroll = (0, _react.useCallback)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const containerRect = container.getBoundingClientRect();
+    let closestPage = 1;
+    let minDistance = Infinity;
+    pageRefs.current.forEach((ref, index) => {
+      if (ref) {
+        const rect = ref.getBoundingClientRect();
+        const distance = Math.abs(rect.top - containerRect.top);
+        if (distance < minDistance) {
+          minDistance = distance;
+          closestPage = index + 1;
+        }
+      }
+    });
+    setCurrentPage(closestPage);
+  }, []);
+  const Controls = (0, _react.useMemo)(() => {
+    return _ref3 => {
+      let {
+        zoomIn,
+        zoomOut,
+        resetTransform
+      } = _ref3;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "customDocumentViewerOverlayHeader"
+      }, !hideRotate && fileType === "image" && /*#__PURE__*/_react.default.createElement("div", {
+        className: "pageNumber"
+      }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        color: "primary-background",
+        size: 24,
+        icon: _RotateRight.default,
+        onClick: handleRotate,
+        style: {
+          cursor: "pointer"
+        }
+      })), !hidePageNumber && fileType === "pdf" && /*#__PURE__*/_react.default.createElement("div", {
+        className: "pageNumber"
+      }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        className: "type-button-500",
+        color: "primary-background"
+      }, "Page ", currentPage, " of ", totalPages)), !hidePageNumber && fileType === "pdfWithCarousel" && /*#__PURE__*/_react.default.createElement("div", {
+        className: "pageNumber"
+      }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        className: "type-button-500",
+        color: "primary-background"
+      }, "Page ", carouselPageNumber + 1, " out of ", totalPages)), !hideZoom && /*#__PURE__*/_react.default.createElement("div", {
+        className: "customDocumentViewerOverlayHeaderIcons"
+      }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        color: "primary-background",
+        size: 24,
+        icon: _icons.RemoveRounded,
+        onClick: () => zoomOut()
+      }), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        color: "primary-background",
+        size: 24,
+        icon: _icons.ZoomInRounded,
+        onClick: () => resetTransform()
+      }), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        color: "primary-background",
+        size: 24,
+        icon: _icons.AddRounded,
+        onClick: () => zoomIn()
+      })), !hideDownload && /*#__PURE__*/_react.default.createElement("div", {
+        className: "downloadIcon"
+      }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        color: "primary-background",
+        size: 24,
+        icon: _icons.GetAppRounded,
+        onClick: handleDownload
+      })));
+    };
+  }, [fileType, hideZoom, hideDownload, hidePageNumber, hideRotate, currentPage, totalPages, handleRotate, handleDownload, carouselPageNumber, transformUtils]);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles.default, {
+    documentViewerOverlayHeight: documentViewerOverlayHeight,
+    oaImgCenterHeight: oaImgCenterHeight
+  }, fileType === "pdf" && /*#__PURE__*/_react.default.createElement("div", {
+    className: "customDocumentViewerOverlay ".concat(docHeight, " ").concat(fileType === "pdf" ? "pdfHeaderStyle" : "", " ").concat(onlyDocumentView ? " onlyDocumentView" : ""),
+    onScroll: handleScroll,
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformWrapper, {
+    initialScale: 1,
+    initialPositionX: 200,
+    wheel: {
+      disabled: true
+    },
+    pinch: {
+      disabled: true
+    },
+    doubleClick: {
+      disabled: true
+    }
+  }, utils => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Controls, utils), /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformComponent, {
+    wrapperStyle: {
+      overflowY: "auto"
+      // height: "calc(100vh - 112px)",
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
+    file: fileUrl,
+    onLoadSuccess: onDocumentLoadSuccess
+  }, Array.from({
+    length: totalPages
+  }, (_, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: "page_".concat(index + 1),
+    ref: el => pageRefs.current[index] = el,
+    style: {
+      marginBottom: "20px",
+      display: "flex",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
+    pageNumber: index + 1,
+    scale: 1.0
+  })))))))), fileType === "image" && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformWrapper, {
+    initialScale: 1
+    // wheel={{ disabled: true }}
+    ,
+    initialPositionX: 200,
+    initialPositionY: 100
+  }, utils => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Controls, utils), /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformComponent, {
+    wrapperClass: "customDocumentViewerOverlay ".concat(onlyDocumentView ? " onlyDocumentView" : "")
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: fileUrl,
+    alt: "document",
+    style: {
+      maxWidth: "100%",
+      maxHeight: "50%",
+      transform: "rotate(".concat(rotation, "deg)"),
+      transformOrigin: "center center",
+      transition: "transform 0.3s ease-in-out"
+    }
+  }))))), fileType === "pdfWithCarousel" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
+    file: fileUrl,
+    onLoadSuccess: onDocumentLoadSuccess
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (selectedPages === null || selectedPages === void 0 ? void 0 : selectedPages.length) > 0 ? "controlsWithFooter" : ""
+  }, transformUtils && /*#__PURE__*/_react.default.createElement(Controls, transformUtils)), /*#__PURE__*/_react.default.createElement(_antd.Carousel, {
+    ref: carouselRef,
+    arrows: true,
+    infinite: false,
+    dots: false,
+    nextArrow: customNextArrow,
+    beforeChange: (current, next) => {
+      setcarouselPageNumberHandler(next);
+      const nextUtils = transformUtilsRefs.current[next];
+      if (nextUtils) setTransformUtils(nextUtils); // update Controls to work on new page
+      // setCarouselPageNumber(next + 1);
+    },
+    prevArrow: customPrevArrow,
+    initialSlide: initialSlide !== null && initialSlide !== void 0 ? initialSlide : 0
+  }, Array.from({
+    length: totalPages
+  }, (_, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: "page_".concat(index + 1),
+    ref: el => pageRefs.current[index] = el
+  }, /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformWrapper, {
+    initialScale: 1,
+    initialPositionX: 200,
+    wheel: {
+      disabled: true
+    },
+    pinch: {
+      disabled: true
+    },
+    doubleClick: {
+      disabled: true
+    },
+    onInit: utils => {
+      transformUtilsRefs.current[index] = utils;
+      if (index === 0) {
+        setTransformUtils(utils); // default for initial slide
+      }
+    }
+  }, utils => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformComponent, {
+    wrapperStyle: {
+      overflowY: "auto",
+      display: "flex",
+      justifyContent: "center",
+      padding: "20px 0"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
+    pageNumber: index + 1,
+    scale: 1.0
+  })))))))), (selectedPages === null || selectedPages === void 0 ? void 0 : selectedPages.length) > 0 && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "carouselFooter"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "footerContainer"
+  }, selectedPages === null || selectedPages === void 0 ? void 0 : selectedPages.map(pageNumber => /*#__PURE__*/_react.default.createElement("div", {
+    className: "imgViewer"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _Close.default,
+    size: 20,
+    onClick: () => deleteSelectedPage(pageNumber)
+  }), /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
+    file: fileUrl
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    key: "page_".concat(pageNumber + 1),
+    ref: el => pageRefs.current[pageNumber] = el,
+    style: {
+      marginBottom: "20px",
+      display: "flex",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
+    pageNumber: pageNumber + 1,
+    scale: 1.0
+  })))))))))));
+}
+CustomDocumentViewer.propTypes = {
+  fileType: _propTypes.default.string.isRequired,
+  fileUrl: _propTypes.default.string.isRequired,
+  onDownload: _propTypes.default.func,
+  hideZoom: _propTypes.default.bool,
+  hideDownload: _propTypes.default.bool,
+  hidePageNumber: _propTypes.default.bool,
+  hideRotate: _propTypes.default.bool,
+  documentViewerOverlayHeight: _propTypes.default.string,
+  docHeight: _propTypes.default.string,
+  oaImgCenterHeight: _propTypes.default.string,
+  onlyDocumentView: _propTypes.default.bool,
+  setcarouselPageNumberHandler: _propTypes.default.func,
+  initialSlide: _propTypes.default.number,
+  carouselPageNumber: _propTypes.default.number,
+  selectedPages: _propTypes.default.array
+};
+CustomDocumentViewer.defaultProps = {
+  onDownload: null,
+  hideZoom: false,
+  hideDownload: false,
+  hidePageNumber: false,
+  hideRotate: false,
+  documentViewerOverlayHeight: "100vh",
+  docHeight: "",
+  oaImgCenterHeight: "calc(-114px + 100vh)",
+  onlyDocumentView: false,
+  setcarouselPageNumberHandler: null,
+  initialSlide: 0,
+  carouselPageNumber: 0,
+  selectedPages: []
+};
+var _default = exports.default = CustomDocumentViewer;

package/build/dev/oa-component-document-viewer/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const DocumentViewerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  .customDocumentViewerOverlay .react-transform-component {\n    background-color: var(--color-primary-content);\n    // height: ", ";\n    height: calc(100vh - 114px);\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    overflow: hidden;\n  }\n  .onlyDocumentView .react-transform-component {\n    height: calc(100vh - 114px + 61px);\n  }\n  .react-pdf__Document {\n    height: -webkit-fill-available;\n    overflow: auto;\n  }\n\n  .react-pdf__Page {\n    cursor: grab;\n    display: contents;\n  }\n    .react-pdf__Page canvas{\n      max-width: 100% !important;\n      height: -webkit-fill-available !important;\n    }\n  .viewerContainer > div {\n    position: rtelative;\n  }\n  .documentPdfHeight {\n    height: calc(100vh - 114px);\n  }\n  .pdfHeaderStyle .react-transform-component {\n    display: block;\n  }\n  .react-transform-component img {\n    cursor: grab;\n    pointer-events: auto;\n  }\n  .customDocumentViewerOverlayHeader {\n    position: absolute;\n    bottom: 16px;\n    left: 50%;\n    transform: translateX(-50%); /* Center horizontally */\n\n    padding: 0 16px;\n    height: 40px;\n    width: fit-content;\n    border-radius: 4px;\n    z-index: 99;\n    background: rgba(0, 0, 0, 0.7);\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.34);\n\n    padding: 0 16px;\n    height: 40px;\n    width: fit-content;\n    border-radius: 4px;\n    z-index: 99;\n    background: rgba(0, 0, 0, 0.7);\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.34);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .customDocumentViewerOverlayHeaderIcons {\n    display: flex;\n    padding: 8px 0;\n    flex-direction: row;\n    gap: 16px;\n  }\n\n  .downloadIcon {\n    border-left: solid 1px #fff;\n    padding-left: 16px;\n    margin-left: 16px;\n    height: 100%;\n    align-items: center;\n    display: flex;\n  }\n  .pageNumber {\n    border-right: solid 1px #fff;\n    padding-right: 16px;\n    margin-right: 16px;\n    height: 100%;\n    align-items: center;\n    display: flex;\n  }\n  .ant-radio-group {\n    display: flex;\n    white-space: nowrap;\n  }\n  .oaImgCenter {\n    // height: calc(-114px + 100vh);\n    height: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n  }\n  // slider css from here\n  .slick-prev,\n  .slick-next {\n    z-index: 100;\n    width: 36px;\n    height: 36px;\n    // display: flex !important;\n    align-items: center;\n    justify-content: center;\n    background: #212121;\n    border-radius: 50%;\n    color: #fff; \n        opacity: 1;\n  }\n\n  .slick-prev::before,\n  .slick-next::before {\n    font-size: 20px;\n    color: white;\n    opacity: 1;\n  }\n\n  .slick-prev {\n    left: 8px;\n  }\n  .slick-next {\n    right: 8px;\n  }\n"])), props => props.documentViewerOverlayHeight, props => props.oaImgCenterHeight);
+var _default = exports.default = DocumentViewerContainer;

package/build/dev/oa-component-upload/CustomUpload.js

@@ -18,7 +18,10 @@ var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorV
 var _handIcon = _interopRequireDefault(require("../../images/hand-icon.svg"));
 var _PdfSampleImage = _interopRequireDefault(require("../../images/PdfSampleImage.png"));
 var _styles = require("./styles");
-const _excluded = ["uploadedDocuments", "handleCustomOnChange", "multipleDoc", "showDelete", "formName", "getPreview", "isMandatory", "noOfUpload", "downloadCallback", "showDownloadButton", "showDeleteButton", "deleteHandler", "showRoateButton", "showZoomInButton", "showZoomOutButton"];
+const _excluded = ["uploadedDocuments", "handleCustomOnChange", "multipleDoc", "showDelete", "formName", "getPreview", "isMandatory", "noOfUpload", "downloadCallback", "showDownloadButton", "showDeleteButton", "deleteHandler", "showRoateButton", "showZoomInButton", "showZoomOutButton", "uploadButtonConfig", "notShowPreviewButton", "removeHandler", "listType", "deleteModalConfig"];
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
+/* eslint-disable */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -94,7 +97,12 @@ function DocumentUpload(_ref) {
       deleteHandler,
       showRoateButton,
       showZoomInButton,
-      showZoomOutButton
+      showZoomOutButton,
+      uploadButtonConfig,
+      notShowPreviewButton,
+      removeHandler = () => {},
+      listType,
+      deleteModalConfig
     } = _ref,
     antDesignProps = _objectWithoutProperties(_ref, _excluded);
   const [previewOpen, setPreviewOpen] = (0, _react.useState)(false);
@@ -105,10 +113,16 @@ function DocumentUpload(_ref) {
   const [deleteConfirmation, setDeleteConfirmation] = (0, _react.useState)(false);
   const [selectedFile, setSelectedFile] = (0, _react.useState)(null);
   const [selectedDocumentData, setSelectedDocumentData] = (0, _react.useState)({});
+  const [isError, setIsError] = (0, _react.useState)(false);
+  const uploadRef = _react.default.useRef(null);
   (0, _react.useEffect)(() => {
     setFileList(uploadedDocuments);
   }, [uploadedDocuments === null || uploadedDocuments === void 0 ? void 0 : uploadedDocuments.length]);
   const handlePreview = async file => {
+    // Don't show preview if notShowPreviewButton is true
+    if (notShowPreviewButton) {
+      return;
+    }
     if (file !== null && file !== void 0 && file.originFileObj) {
       setPreviewImage(file);
     } else if ((file === null || file === void 0 ? void 0 : file.fileType) === 'thumbnail') {
@@ -126,6 +140,22 @@ function DocumentUpload(_ref) {
       fileList: newFileList,
       file
     } = _ref2;
+    if (antDesignProps !== null && antDesignProps !== void 0 && antDesignProps.customRequest) {
+      const isError = newFileList.some(f => (f === null || f === void 0 ? void 0 : f.status) === 'error');
+      if (isError) {
+        setFileList([]);
+        setIsError(true);
+        setLoading(false);
+        return;
+      }
+      setIsError(false);
+      setFileList(newFileList);
+      const isUploading = newFileList.some(f => f.status === 'uploading');
+      setLoading(isUploading);
+      return;
+    }
+
+    // Default behavior for non-custom uploads
     const modifiedList = await Promise.all(newFileList.map(async files => {
       let modifiedFile = files;
       setLoading(true);
@@ -135,7 +165,6 @@ function DocumentUpload(_ref) {
           modifiedFile.status = 'done';
           if (!isImageFile(file === null || file === void 0 ? void 0 : file.name)) {
             modifiedFile.url = _PdfSampleImage.default;
-            // delete modifiedFile?.type;
           }
         }
       } catch (error) {
@@ -147,38 +176,83 @@ function DocumentUpload(_ref) {
     const tempList = modifiedList === null || modifiedList === void 0 ? void 0 : modifiedList.filter(Boolean);
     setFileList(tempList);
   };
+  const getUploadButtonIcon = () => {
+    if ((uploadButtonConfig === null || uploadButtonConfig === void 0 ? void 0 : uploadButtonConfig.icon) === 'PlusOutlined') {
+      return /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, null);
+    }
+    return /*#__PURE__*/_react.default.createElement(_icons.UploadOutlined, null);
+  };
   const uploadButton = /*#__PURE__*/_react.default.createElement("button", {
     style: {
       border: 0,
       background: 'none'
     },
     type: "button"
-  }, loading ? /*#__PURE__*/_react.default.createElement(_icons.LoadingOutlined, null) :
-  /*#__PURE__*/
-  // <CustomIcon
-  //   className="UploadImg"
-  //   alt="phone img"
-  //   src={offerImg}
-  // />
-  _react.default.createElement(_icons.UploadOutlined, null), /*#__PURE__*/_react.default.createElement("div", null, "Upload"));
+  }, loading ? /*#__PURE__*/_react.default.createElement(_icons.LoadingOutlined, null) : getUploadButtonIcon(), /*#__PURE__*/_react.default.createElement("div", null, uploadButtonConfig !== null && uploadButtonConfig !== void 0 && uploadButtonConfig.text ? uploadButtonConfig === null || uploadButtonConfig === void 0 ? void 0 : uploadButtonConfig.text : 'Upload'));
   const DeleteFile = async () => {
-    await deleteHandler(selectedFile);
+    await deleteHandler(selectedFile, isEmptyFileList => {
+      if (isEmptyFileList) {
+        setFileList([]);
+      }
+    });
     setDeleteConfirmation(false);
     if (showDeleteButton) {
       setPreviewOpen(false);
     }
   };
   const handleRemove = file => new Promise((resolve, reject) => {
-    setSelectedFile(file);
-    setDeleteConfirmation(true);
-    resolve(false);
+    // If file is uploading, cancel immediately without confirmation
+    if ((file === null || file === void 0 ? void 0 : file.status) === 'uploading') {
+      // Remove file from list immediately to cancel upload
+      const newFileList = fileList.filter(f => f.uid !== file.uid);
+      setFileList(newFileList);
+      resolve(true); // Allow removal
+      if (removeHandler) removeHandler(file);
+      return;
+    }
+
+    // If file is done or error, show confirmation modal
+    if ((file === null || file === void 0 ? void 0 : file.status) === 'done' || (file === null || file === void 0 ? void 0 : file.status) === 'error') {
+      setSelectedFile(file);
+      setDeleteConfirmation(true);
+      resolve(false); // Prevent removal until confirmed
+      return;
+    }
+
+    // Default: allow removal
+    resolve(true);
   });
   const handleModalDeleteButton = file => {
     setSelectedFile(file);
     setDeleteConfirmation(true);
   };
+
+  // Get the appropriate remove icon based on file status
+  const getRemoveIcon = file => {
+    // Show cross icon during upload (to cancel)
+    if ((file === null || file === void 0 ? void 0 : file.status) === 'uploading') {
+      return /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, null);
+    }
+    // Show delete icon after upload is done or if upload failed
+    if ((file === null || file === void 0 ? void 0 : file.status) === 'done' || (file === null || file === void 0 ? void 0 : file.status) === 'error') {
+      return /*#__PURE__*/_react.default.createElement(_icons.DeleteOutlined, null);
+    }
+    // Default to delete icon
+    return /*#__PURE__*/_react.default.createElement(_icons.DeleteOutlined, null);
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.MainStyleSec, null, /*#__PURE__*/_react.default.createElement(_styles.StyledSection, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "uploadDiv"
+    onClick: listType === 'picture' ? () => {
+      var _inst$upload, _inst$nativeElement, _inst$nativeElement$q, _inst$querySelector, _input$click;
+      if ((fileList === null || fileList === void 0 ? void 0 : fileList.length) >= noOfUpload) return;
+      const inst = uploadRef.current;
+      if (inst !== null && inst !== void 0 && inst.onClick) {
+        inst.onClick();
+        return;
+      }
+      const input = (inst === null || inst === void 0 || (_inst$upload = inst.upload) === null || _inst$upload === void 0 ? void 0 : _inst$upload.input) || (inst === null || inst === void 0 ? void 0 : inst.fileInput) || (inst === null || inst === void 0 || (_inst$nativeElement = inst.nativeElement) === null || _inst$nativeElement === void 0 || (_inst$nativeElement$q = _inst$nativeElement.querySelector) === null || _inst$nativeElement$q === void 0 ? void 0 : _inst$nativeElement$q.call(_inst$nativeElement, 'input[type="file"]')) || (inst === null || inst === void 0 || (_inst$querySelector = inst.querySelector) === null || _inst$querySelector === void 0 ? void 0 : _inst$querySelector.call(inst, 'input[type="file"]'));
+      input === null || input === void 0 || (_input$click = input.click) === null || _input$click === void 0 || _input$click.call(input);
+    } : null,
+    className: listType === 'picture' ? "uploadSecPad ".concat(isError && 'errorBorder') : 'uploadDiv'
   }, multipleDoc > 0 && /*#__PURE__*/_react.default.createElement("em", null, multipleDoc), /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {
       token: {
@@ -196,24 +270,30 @@ function DocumentUpload(_ref) {
     rules: [{
       validator: (rule, value) => {
         if (isMandatory && !(value !== null && value !== void 0 && value.length)) {
+          if (typeof value === 'object' && Object.keys(value).length > 0) {
+            return Promise.resolve();
+          }
           return Promise.reject(new Error('Please upload the document.'));
         }
         return Promise.resolve();
       }
     }]
   }, /*#__PURE__*/_react.default.createElement(_antd.Upload, _extends({
-    customRequest: () => {},
-    listType: "picture-card",
+    onClick: e => e.stopPropagation(),
+    ref: uploadRef,
+    listType: listType || 'picture-card',
     fileList: fileList,
-    onPreview: handlePreview,
+    onPreview: notShowPreviewButton ? undefined : handlePreview,
     onChange: handleChange,
     onRemove: handleRemove,
     showUploadList: {
       showDownloadIcon: false,
-      showRemoveIcon: showDelete,
-      removeIcon: /*#__PURE__*/_react.default.createElement(_icons.DeleteFilled, null),
-      previewIcon: /*#__PURE__*/_react.default.createElement(_icons.EyeFilled, null)
-    }
+      showRemoveIcon: showDelete !== undefined ? showDelete : true,
+      showPreviewIcon: !notShowPreviewButton,
+      removeIcon: file => getRemoveIcon(file),
+      previewIcon: notShowPreviewButton ? false : /*#__PURE__*/_react.default.createElement(_icons.EyeFilled, null)
+    },
+    maxCount: noOfUpload
   }, antDesignProps), (fileList === null || fileList === void 0 ? void 0 : fileList.length) >= noOfUpload ? null : uploadButton)))))), previewOpen && /*#__PURE__*/_react.default.createElement(_CustomViewer.default, {
     open: previewOpen,
     previewFile: previewImage,
@@ -233,12 +313,14 @@ function DocumentUpload(_ref) {
       label: 'Yes, Delete',
       type: 'danger-primary'
     }],
-    imgSrc: _handIcon.default,
+    imgSrc: deleteModalConfig !== null && deleteModalConfig !== void 0 && deleteModalConfig.deleteImage ? deleteModalConfig.deleteImage : _handIcon.default,
     open: deleteConfirmation,
-    onCancel: () => setDeleteConfirmation(false),
-    title: "Delete Item?",
+    onCancel: () => {
+      setDeleteConfirmation(false);
+    },
+    title: deleteModalConfig !== null && deleteModalConfig !== void 0 && deleteModalConfig.title ? deleteModalConfig.title : 'Delete Item?',
     className: "delete-modal-confirmation"
-  }, "This action will permanently delete the selected item"));
+  }, deleteModalConfig !== null && deleteModalConfig !== void 0 && deleteModalConfig.body ? deleteModalConfig.body : 'This action will permanently delete the selected item'));
 }
 DocumentUpload.propTypes = {
   uploadedDocuments: _propTypes.default.array,
@@ -259,7 +341,10 @@ DocumentUpload.propTypes = {
   showDeleteButton: _propTypes.default.bool,
   showRoateButton: _propTypes.default.bool,
   showZoomInButton: _propTypes.default.bool,
-  showZoomOutButton: _propTypes.default.bool
+  showZoomOutButton: _propTypes.default.bool,
+  uploadButtonConfig: _propTypes.default.object,
+  // Config for upload button text
+  notShowPreviewButton: _propTypes.default.bool // Hide preview button
 };
 DocumentUpload.defaultProps = {
   uploadedDocuments: [],
@@ -277,6 +362,8 @@ DocumentUpload.defaultProps = {
   showDownloadButton: true,
   showRoateButton: true,
   showZoomInButton: true,
-  showZoomOutButton: true
+  showZoomOutButton: true,
+  uploadButtonConfig: null,
+  notShowPreviewButton: false
 };
 var _default = exports.default = DocumentUpload;