oa-componentbook 1.0.1-stage.43 → 1.0.1-stage.431

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;