@portnet/ui 5.0.11 → 5.0.13

package/dist/components/widgets/GuideImage.js

@@ -0,0 +1,251 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.GuideImageGallery = exports.CompactImageGallery = void 0;
+require("core-js/modules/es.promise.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _PuiHelpWidgetContext = require("../common/PuiHelpWidgetContext");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const WIDGET_FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
+const GuideImage = _ref => {
+  let {
+    projectCode,
+    imageOrder,
+    alt,
+    style,
+    className,
+    onClick: _onClick
+  } = _ref;
+  const {
+    guideImageService
+  } = (0, _PuiHelpWidgetContext.useHelpWidget)();
+  const [imageUrl, setImageUrl] = (0, _react.useState)(null);
+  const [loading, setLoading] = (0, _react.useState)(true);
+  const [error, setError] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    let isMounted = true;
+    async function fetchImage() {
+      try {
+        setLoading(true);
+        setError(null);
+        const url = await guideImageService.loadGuideImage(projectCode, imageOrder);
+        if (isMounted) {
+          setImageUrl(url);
+          setLoading(false);
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err.message || "Failed to load image");
+          setLoading(false);
+        }
+      }
+    }
+    fetchImage();
+    return () => {
+      isMounted = false;
+    };
+  }, [projectCode, imageOrder, guideImageService]);
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: _objectSpread({
+        width: "100%",
+        height: "200px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#f8f9fa",
+        borderRadius: "8px",
+        border: "1px solid #e8eaed"
+      }, style),
+      className: className,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          textAlign: "center"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+          size: 20,
+          sx: {
+            color: "#1967d2",
+            marginBottom: "8px"
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "div",
+          sx: {
+            fontSize: "12px",
+            color: "#5f6368",
+            fontFamily: WIDGET_FONT,
+            lineHeight: "normal"
+          },
+          children: "Chargement de l'image..."
+        })]
+      })
+    });
+  }
+  if (error) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: _objectSpread({
+        width: "100%",
+        height: "200px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#f8f9fa",
+        borderRadius: "8px",
+        border: "1px solid #e8eaed"
+      }, style),
+      className: className,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: {
+          textAlign: "center",
+          padding: "20px"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "40",
+          height: "40",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "#5f6368",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          style: {
+            marginBottom: "8px"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+            x: "3",
+            y: "3",
+            width: "18",
+            height: "18",
+            rx: "2",
+            ry: "2"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+            cx: "8.5",
+            cy: "8.5",
+            r: "1.5"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("polyline", {
+            points: "21 15 16 10 5 21"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+            x1: "3",
+            y1: "3",
+            x2: "21",
+            y2: "21"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "div",
+          sx: {
+            fontSize: "12px",
+            color: "#5f6368",
+            fontFamily: WIDGET_FONT,
+            lineHeight: "normal"
+          },
+          children: "Image non disponible"
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+    src: imageUrl,
+    alt: alt || "Image ".concat(imageOrder),
+    onClick: () => _onClick && _onClick(imageUrl),
+    style: _objectSpread({
+      width: "100%",
+      height: "auto",
+      borderRadius: "8px",
+      border: "1px solid #e8eaed",
+      display: "block",
+      cursor: _onClick ? "pointer" : "default",
+      transition: "transform 0.2s, box-shadow 0.2s"
+    }, style),
+    className: className,
+    onMouseEnter: e => {
+      if (_onClick) {
+        e.currentTarget.style.transform = "scale(1.02)";
+        e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)";
+      }
+    },
+    onMouseLeave: e => {
+      if (_onClick) {
+        e.currentTarget.style.transform = "scale(1)";
+        e.currentTarget.style.boxShadow = "none";
+      }
+    }
+  });
+};
+const GuideImageGallery = _ref2 => {
+  let {
+    projectCode,
+    imageOrders,
+    columns = 1,
+    onImageClick
+  } = _ref2;
+  if (!imageOrders || imageOrders.length === 0) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: columns === 1 ? "1fr" : "repeat(".concat(columns, ", 1fr)"),
+      gap: "16px",
+      marginTop: "16px",
+      marginBottom: "16px"
+    },
+    children: imageOrders.map((imageOrder, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(GuideImage, {
+      projectCode: projectCode,
+      imageOrder: imageOrder,
+      alt: "Image ".concat(index + 1),
+      onClick: onImageClick
+    }, imageOrder))
+  });
+};
+exports.GuideImageGallery = GuideImageGallery;
+const CompactImageGallery = _ref3 => {
+  let {
+    projectCode,
+    imageOrders,
+    onImageClick
+  } = _ref3;
+  if (!imageOrders || imageOrders.length === 0) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      display: "flex",
+      gap: "12px",
+      overflowX: "auto",
+      marginTop: "16px",
+      marginBottom: "16px",
+      paddingBottom: "8px"
+    },
+    children: imageOrders.map((imageOrder, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        minWidth: "200px",
+        maxWidth: "200px",
+        flexShrink: 0
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GuideImage, {
+        projectCode: projectCode,
+        imageOrder: imageOrder,
+        alt: "Image ".concat(index + 1),
+        style: {
+          height: "150px",
+          objectFit: "cover"
+        },
+        onClick: onImageClick
+      })
+    }, imageOrder))
+  });
+};
+exports.CompactImageGallery = CompactImageGallery;
+var _default = exports.default = GuideImage;