oa-componentbook 0.0.0-sit1.1

package/build/widgets/oa-widget-image-gallery/FullscreenViewer.js

@@ -0,0 +1,169 @@
+"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.regexp.exec.js");
+require("core-js/modules/es.string.match.js");
+require("core-js/modules/es.string.starts-with.js");
+require("core-js/modules/es.promise.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactZoomPanPinch = require("react-zoom-pan-pinch");
+var _ArrowBackIosRounded = _interopRequireDefault(require("@material-ui/icons/ArrowBackIosRounded"));
+var _ArrowForwardIosRounded = _interopRequireDefault(require("@material-ui/icons/ArrowForwardIosRounded"));
+var _ArrowBackRounded = _interopRequireDefault(require("@material-ui/icons/ArrowBackRounded"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _CustomLoader = _interopRequireDefault(require("../../components/oa-component-loader/CustomLoader"));
+var _imageCache = require("./imageCache");
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _imageGalleryStyle = require("./imageGalleryStyle");
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+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; }
+const styles = {
+  viewer: {
+    position: 'relative',
+    textAlign: 'center',
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+};
+function FullscreenViewer(_ref) {
+  var _images$currentIndex;
+  let {
+    images,
+    currentIndex,
+    onClose,
+    onNavigate,
+    downloadDocumentId,
+    allowIndividualDownload,
+    fetchImage
+  } = _ref;
+  const [loaded, setLoaded] = (0, _react.useState)(false);
+  const [resolvedSrc, setResolvedSrc] = (0, _react.useState)(null);
+  const imageUrl = (_images$currentIndex = images[currentIndex]) === null || _images$currentIndex === void 0 ? void 0 : _images$currentIndex.originalImageUrl;
+  (0, _react.useEffect)(() => {
+    let isMounted = true;
+    setLoaded(false);
+    setResolvedSrc(null);
+    const isDirectImage = (imageUrl === null || imageUrl === void 0 ? void 0 : imageUrl.match(/\.(jpg|jpeg|png|gif|webp|svg|bmp)$/i)) || (imageUrl === null || imageUrl === void 0 ? void 0 : imageUrl.startsWith('data:image'));
+    const resolveImage = async () => {
+      if (!imageUrl) return;
+      try {
+        const cacheKey = imageUrl;
+        const cached = (0, _imageCache.getCachedImage)(cacheKey);
+        if (cached) {
+          setResolvedSrc(cached);
+          return;
+        }
+        if (isDirectImage) {
+          setResolvedSrc(imageUrl);
+          (0, _imageCache.setCachedImage)(cacheKey, imageUrl);
+        } else if (typeof fetchImage === 'function') {
+          const result = await fetchImage(imageUrl);
+          if (isMounted) setResolvedSrc(result);
+          (0, _imageCache.setCachedImage)(cacheKey, result);
+        } else {
+          console.warn('No fetchImage prop provided for non-direct image:', imageUrl);
+        }
+      } catch (err) {
+        console.error('Error fetching image:', err);
+      }
+    };
+    resolveImage();
+    return () => {
+      isMounted = false;
+    };
+  }, [imageUrl, fetchImage]);
+  if (!images[currentIndex]) return null;
+  const handlePrev = () => {
+    if (typeof onNavigate === 'function') onNavigate('prev');
+  };
+  const handleNext = () => {
+    if (typeof onNavigate === 'function') onNavigate('next');
+  };
+  return /*#__PURE__*/_react.default.createElement(_imageGalleryStyle.FullScreenStyle, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "overlay"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "header"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    onClick: onClose,
+    icon: _ArrowBackRounded.default,
+    size: 26,
+    color: "primary-background"
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    "data-test": "text",
+    typography: "type-b2-400",
+    color: "primary-background",
+    className: "title"
+  }, "Image", ' ', currentIndex + 1, ' ', "/", ' ', images.length)), /*#__PURE__*/_react.default.createElement("div", {
+    style: styles.viewer
+  }, /*#__PURE__*/_react.default.createElement(_CustomLoader.default, {
+    spinning: !loaded
+  }, /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformWrapper, null, /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformComponent, null, resolvedSrc && /*#__PURE__*/_react.default.createElement("img", {
+    src: resolvedSrc,
+    alt: "fullscreen",
+    onLoad: () => setLoaded(true),
+    style: {
+      maxWidth: '100%',
+      maxHeight: '80vh',
+      display: loaded ? 'block' : 'none'
+    }
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "navButtonLeft",
+    onClick: handlePrev,
+    onKeyDown: e => e.key === 'Enter' && handlePrev(),
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _ArrowBackIosRounded.default,
+    size: 16,
+    color: "primary-background"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "navButtonRight",
+    onClick: handleNext,
+    onKeyDown: e => e.key === 'Enter' && handleNext(),
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _ArrowForwardIosRounded.default,
+    size: 16,
+    color: "primary-background"
+  })), allowIndividualDownload && /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    className: "downloadAll",
+    tabIndex: 0,
+    onClick: () => downloadDocumentId(imageUrl),
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        downloadDocumentId(imageUrl);
+      }
+    }
+  }, "Download This Image"))));
+}
+FullscreenViewer.propTypes = {
+  images: _propTypes.default.arrayOf(_propTypes.default.shape({
+    originalImageUrl: _propTypes.default.string.isRequired
+  })).isRequired,
+  currentIndex: _propTypes.default.number.isRequired,
+  onClose: _propTypes.default.func.isRequired,
+  onNavigate: _propTypes.default.func,
+  fetchImage: _propTypes.default.func,
+  downloadDocumentId: _propTypes.default.func,
+  allowIndividualDownload: _propTypes.default.bool
+};
+FullscreenViewer.defaultProps = {
+  onNavigate: () => {},
+  fetchImage: undefined,
+  downloadDocumentId: () => {},
+  allowIndividualDownload: false
+};
+var _default = exports.default = FullscreenViewer;

package/build/widgets/oa-widget-image-gallery/ImageGallery.js

@@ -0,0 +1,87 @@
+"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");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _GetAppRounded = _interopRequireDefault(require("@material-ui/icons/GetAppRounded"));
+var _ThumbnailGrid = _interopRequireDefault(require("./ThumbnailGrid"));
+var _FullscreenViewer = _interopRequireDefault(require("./FullscreenViewer"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _imageGalleryStyle = require("./imageGalleryStyle");
+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; }
+function ImageGallery(_ref) {
+  let {
+    images,
+    fetchImage,
+    allowIndividualDownload,
+    downloadDocumentId,
+    actionButtonFragment
+  } = _ref;
+  const [activeIndex, setActiveIndex] = (0, _react.useState)(null);
+  const handleImageClick = index => {
+    setActiveIndex(index);
+  };
+  const handleCloseViewer = () => {
+    setActiveIndex(null);
+  };
+  (0, _react.useEffect)(() => {
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') {
+        event.stopPropagation(); // Optional: prevent bubbling
+        handleCloseViewer();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown, {
+      capture: true
+    });
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, {
+        capture: true
+      });
+    };
+  }, []);
+  const handleNavigationClick = type => {
+    if (type === 'prev') {
+      setActiveIndex(prevIndex => prevIndex > 0 ? prevIndex - 1 : images.length - 1);
+    } else if (type === 'next') {
+      setActiveIndex(prevIndex => prevIndex < images.length - 1 ? prevIndex + 1 : 0);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_imageGalleryStyle.StylesContainer, null, typeof actionButtonFragment === 'function' && /*#__PURE__*/_react.default.createElement("div", {
+    className: "topBottomGallarySec"
+  }, actionButtonFragment()), /*#__PURE__*/_react.default.createElement(_ThumbnailGrid.default, {
+    fetchImage: fetchImage,
+    images: images,
+    onImageClick: handleImageClick
+  }), activeIndex !== null && /*#__PURE__*/_react.default.createElement(_FullscreenViewer.default, {
+    fetchImage: fetchImage,
+    allowIndividualDownload: allowIndividualDownload,
+    downloadDocumentId: downloadDocumentId,
+    images: images,
+    currentIndex: activeIndex,
+    onClose: handleCloseViewer,
+    onNavigate: handleNavigationClick
+  }));
+}
+ImageGallery.propTypes = {
+  images: _propTypes.default.array.isRequired,
+  fetchImage: _propTypes.default.func,
+  allowIndividualDownload: _propTypes.default.bool,
+  downloadDocumentId: _propTypes.default.func,
+  actionButtonFragment: _propTypes.default.node
+};
+ImageGallery.defaultProps = {
+  fetchImage: () => {},
+  allowIndividualDownload: false,
+  downloadDocumentId: () => {},
+  actionButtonFragment: null
+};
+var _default = exports.default = ImageGallery;

package/build/widgets/oa-widget-image-gallery/ThumbnailGrid.js

@@ -0,0 +1,146 @@
+"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/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactIntersectionObserver = require("react-intersection-observer");
+var _CustomLoader = _interopRequireDefault(require("../../components/oa-component-loader/CustomLoader"));
+var _imageCache = require("./imageCache");
+var _imageGalleryStyle = require("./imageGalleryStyle");
+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 */
+
+function ThumbnailGrid(_ref) {
+  let {
+    images,
+    onImageClick,
+    fetchImage
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_imageGalleryStyle.ThumbnailGridStyle, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "thumbnailGridStyleBox"
+  }, images.map((img, index) => /*#__PURE__*/_react.default.createElement(ThumbnailImage, {
+    fetchImage: fetchImage,
+    key: img.id || index,
+    img: img,
+    onClick: () => onImageClick(index),
+    displayDocName: img.displayDocName
+  }))));
+}
+ThumbnailGrid.propTypes = {
+  images: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    thumbnailUrl: _propTypes.default.string,
+    originalImageUrl: _propTypes.default.string
+  })).isRequired,
+  onImageClick: _propTypes.default.func.isRequired,
+  fetchImage: _propTypes.default.func
+};
+ThumbnailGrid.defaultProps = {
+  fetchImage: () => {}
+};
+function ThumbnailImage(_ref2) {
+  let {
+    img,
+    onClick,
+    fetchImage,
+    displayDocName
+  } = _ref2;
+  const {
+    ref,
+    inView
+  } = (0, _reactIntersectionObserver.useInView)({
+    triggerOnce: true
+  });
+  const [loaded, setLoaded] = (0, _react.useState)(false);
+  const [resolvedSrc, setResolvedSrc] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    const resolveImageSrc = async () => {
+      const rawUrl = img.thumbnailUrl || img.originalImageUrl;
+      if (!rawUrl) return;
+      const cacheKey = rawUrl;
+      const cached = (0, _imageCache.getCachedImage)(cacheKey);
+      if (cached) {
+        setResolvedSrc(cached);
+        return;
+      }
+      const isLikelyDirectImage = /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i.test(rawUrl);
+      if (isLikelyDirectImage) {
+        (0, _imageCache.setCachedImage)(cacheKey, rawUrl);
+        setResolvedSrc(rawUrl);
+      } else {
+        try {
+          const response = await fetchImage(rawUrl);
+          (0, _imageCache.setCachedImage)(cacheKey, response);
+          setResolvedSrc(response);
+        } catch (error) {
+          console.error("Failed to fetch image URL:", error);
+        }
+      }
+    };
+    if (inView && !resolvedSrc) {
+      resolveImageSrc();
+    }
+  }, [inView, img.thumbnailUrl, img.originalImageUrl, resolvedSrc, fetchImage]);
+  return /*#__PURE__*/_react.default.createElement(_imageGalleryStyle.ThumbnailGridBoxStyle, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "thumbnailGridBox",
+    ref: ref,
+    onClick: onClick,
+    onKeyDown: e => e.key === "Enter" && onClick(),
+    role: "button",
+    tabIndex: 0,
+    style: {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'stretch'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CustomLoader.default, {
+    spinning: !loaded && inView
+  }, inView && resolvedSrc && /*#__PURE__*/_react.default.createElement("img", {
+    src: resolvedSrc,
+    alt: "thumbnail",
+    style: {
+      display: loaded ? 'block' : 'none',
+      width: '100%',
+      borderRadius: 8,
+      background: '#e0e0e0',
+      minHeight: 120,
+      objectFit: 'cover'
+    },
+    onLoad: () => setLoaded(true)
+  })), loaded && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: 8,
+      marginLeft: 8,
+      marginBottom: 4,
+      color: '#222',
+      fontSize: 15,
+      fontWeight: 400,
+      letterSpacing: 0.2
+    }
+  }, displayDocName || 'Image')));
+}
+ThumbnailImage.propTypes = {
+  img: _propTypes.default.shape({
+    thumbnailUrl: _propTypes.default.string,
+    originalImageUrl: _propTypes.default.string
+  }).isRequired,
+  onClick: _propTypes.default.func.isRequired,
+  fetchImage: _propTypes.default.func,
+  displayDocName: _propTypes.default.string
+};
+ThumbnailImage.defaultProps = {
+  fetchImage: () => {},
+  displayDocName: ''
+};
+var _default = exports.default = ThumbnailGrid;

package/build/widgets/oa-widget-image-gallery/imageCache.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCachedImage = getCachedImage;
+exports.setCachedImage = setCachedImage;
+require("core-js/modules/web.dom-collections.iterator.js");
+const imageCache = new Map();
+function getCachedImage(key) {
+  return imageCache.get(key);
+}
+function setCachedImage(key, url) {
+  imageCache.set(key, url);
+}

package/build/widgets/oa-widget-image-gallery/imageGalleryStyle.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThumbnailGridStyle = exports.ThumbnailGridBoxStyle = exports.StylesContainer = exports.FullScreenStyle = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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 StylesContainer = exports.StylesContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n.topBottomGallarySec{ display:flex; flex-direction:row; margin-bottom:16px; justify-content:flex-end;}\n\n.thumbnailGridStyle{display: grid\n;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 8px;}\n\n\n"])));
+const ThumbnailGridStyle = exports.ThumbnailGridStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.thumbnailGridStyleBox{display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 8px;}\n"])));
+const ThumbnailGridBoxStyle = exports.ThumbnailGridBoxStyle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n.thumbnailGridBox{ position: relative;\n    aspect-ratio: 1 / 1; padding: 8px; border-radius: 4px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgb(240, 240, 240);\n    gap:6px;\n    }\n\n    .thumbnailGridBox img{ border-radius:4px;    width: 100%;\n    height: 100%;  transition: transform .2s;\n    object-fit: cover;} \n\n    .thumbnailGridBox img:hover{ transform: scale(1.02);} \n\n"])));
+const FullScreenStyle = exports.FullScreenStyle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\n.overlay{\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(31, 31, 31, 0.82);\n    z-index: 99999;\n  }\n\n\n\n  .navButtonLeft, .navButtonRight{\n    position: absolute;\n    top: 50%;\n    font-size: 16px;\n    cursor: pointer;\n    user-select: none;\n    background: rgba(0, 0, 0, 0.7);\n    border-radius: 50%;\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .navButtonLeft:hover, .navButtonRight:hover{ background: rgba(0, 0, 0, 0.9);}\n\n.navButtonLeft{left: 10px;}\n.navButtonRight {right: 10px;}\n.downloadAll{color: #FFF;\n    padding: 10px 24px;\n    border-radius: 4px;\n    border: 1px solid #FFF;\n    text-align: center;\n    font-size: 14px;\n    line-height: 20px;\n    position: absolute; cursor: pointer;\n    bottom: 60px;\n    left: 50%;\n    transform: translate(-50%, -50%);}\n\n.header{padding:24px; display:flex; flex-direction:row;  justify-content:space-between; align-items:center;}\n\n"])));
+
+// export default StylesContainer;