@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260704091052 → 0.8.1-dev.20260706114046

package/dist/IframeClient-RGJFZ5P2.mjs

@@ -0,0 +1,98 @@
+"use client";
+
+"use client";
+
+// src/components/pageRenderingEngine/nodes/IframeClient.tsx
+import React2, { useEffect, useRef, useState } from "react";
+
+// src/components/IFrameLoaderView.tsx
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var IFrameLoaderView = (props) => {
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    props.isDataFound == null && /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsxs("div", { className: "mt-4 bg-gray-200 rounded-md p-4 animate-pulse", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center mb-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "bg-gray-300 h-8 w-8 rounded-full animate-pulse" }),
+        /* @__PURE__ */ jsxs("div", { className: "ml-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-300 h-3 w-16 animate-pulse" }),
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-300 h-2 w-12 animate-pulse" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-4 mt-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "animate-pulse", children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "animate-pulse", children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "animate-pulse", children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
+        ] })
+      ] })
+    ] }) }),
+    props.children
+  ] });
+};
+var IFrameLoaderView_default = IFrameLoaderView;
+
+// src/components/pageRenderingEngine/nodes/IframeClient.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var IframeClient = ({ src }) => {
+  const iframeRef = useRef(null);
+  const [iframeHeight, setIframeHeight] = useState("100%");
+  const [isDataFound, setIsDataFound] = useState(null);
+  useEffect(() => {
+    const handleReceiveMessage = (event) => {
+      const eventName = event?.data?.eventName;
+      const payload = event?.data?.payload;
+      if (eventName === "SET_HEIGHT" && payload?.height) {
+        let height = 500;
+        if (payload.height > 500) {
+          height = payload.height + 50;
+        }
+        setIframeHeight(`${height}px`);
+      }
+    };
+    window.addEventListener("message", handleReceiveMessage);
+    return () => window.removeEventListener("message", handleReceiveMessage);
+  }, []);
+  useEffect(() => {
+    const handleResize = () => {
+      if (iframeRef.current) {
+        iframeRef.current.contentWindow?.postMessage({ eventName: "RESIZE" }, "*");
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  const handleIframeLoad = () => {
+    setIsDataFound(true);
+  };
+  return /* @__PURE__ */ jsx2(React2.Fragment, { children: /* @__PURE__ */ jsx2(IFrameLoaderView_default, { isDataFound, children: /* @__PURE__ */ jsx2(
+    "iframe",
+    {
+      ref: iframeRef,
+      src,
+      className: "w-full h-full border-none",
+      scrolling: "no",
+      style: { height: iframeHeight },
+      onLoad: handleIframeLoad
+    }
+  ) }) });
+};
+var IframeClient_default = IframeClient;
+export {
+  IframeClient_default as default
+};