@kontextso/sdk-react-native 2.0.0-rc.6 → 2.0.0-rc.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +33 -4
  2. package/dist/index.mjs +34 -5
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -59,8 +59,8 @@ function handleIframeMessage(handler, opts) {
59
59
 
60
60
  // src/formats/Format.tsx
61
61
  var import_jsx_runtime = require("react/jsx-runtime");
62
- var sendMessage = (webViewRef, code, data) => {
63
- const message = makeIframeMessage("update-iframe", {
62
+ var sendMessage = (webViewRef, type, code, data) => {
63
+ const message = makeIframeMessage(type, {
64
64
  data,
65
65
  code
66
66
  });
@@ -79,7 +79,9 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
79
79
  const [iframeLoaded, setIframeLoaded] = (0, import_react.useState)(false);
80
80
  const [containerStyles, setContainerStyles] = (0, import_react.useState)({});
81
81
  const [iframeStyles, setIframeStyles] = (0, import_react.useState)({});
82
+ const containerRef = (0, import_react.useRef)(null);
82
83
  const webViewRef = (0, import_react.useRef)(null);
84
+ const { height: windowHeight, width: windowWidth } = (0, import_react_native.useWindowDimensions)();
83
85
  const reset = () => {
84
86
  setHeight(0);
85
87
  setShowIframe(false);
@@ -117,7 +119,7 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
117
119
  case "init-iframe":
118
120
  setIframeLoaded(true);
119
121
  debug("iframe-post-message");
120
- sendMessage(webViewRef, code, {
122
+ sendMessage(webViewRef, "update-iframe", code, {
121
123
  messages: context?.messages,
122
124
  sdk: "sdk-react-native",
123
125
  otherParams,
@@ -172,11 +174,30 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
172
174
  return;
173
175
  }
174
176
  debug("iframe-post-message");
175
- sendMessage(webViewRef, code, {
177
+ sendMessage(webViewRef, "update-iframe", code, {
176
178
  data: { otherParams },
177
179
  code
178
180
  });
179
181
  }, [paramsString, iframeLoaded, context?.adServerUrl, bid, code]);
182
+ const checkIfInViewport = () => {
183
+ if (!containerRef.current) return;
184
+ containerRef.current.measureInWindow((containerX, containerY, containerWidth, containerHeight) => {
185
+ sendMessage(webViewRef, "update-dimensions-iframe", code, {
186
+ windowWidth,
187
+ windowHeight,
188
+ containerWidth,
189
+ containerHeight,
190
+ containerX,
191
+ containerY
192
+ });
193
+ });
194
+ };
195
+ (0, import_react.useEffect)(() => {
196
+ const interval = setInterval(() => {
197
+ checkIfInViewport();
198
+ }, 250);
199
+ return () => clearInterval(interval);
200
+ }, []);
180
201
  if (!context || !bid || !iframeUrl) {
181
202
  return null;
182
203
  }
@@ -196,6 +217,7 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
196
217
  import_react_native.View,
197
218
  {
198
219
  style: containerStyles,
220
+ ref: containerRef,
199
221
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
200
222
  import_react_native_webview.WebView,
201
223
  {
@@ -210,6 +232,13 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
210
232
  ...iframeStyles
211
233
  },
212
234
  injectedJavaScript: `
235
+ function sendToLog(data) {
236
+ window.ReactNativeWebView.postMessage(JSON.stringify({
237
+ type: 'log-iframe',
238
+ data: data
239
+ }));
240
+ }
241
+
213
242
  window.addEventListener("message", function(event) {
214
243
  if (window.ReactNativeWebView && event.data) {
215
244
  // ReactNativeWebView.postMessage only supports string data
package/dist/index.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  import { useContext, useEffect, useRef, useState } from "react";
3
3
  import { AdsContext, convertParamsToString, ErrorBoundary, useBid, useIframeUrl } from "@kontextso/sdk-react";
4
4
  import { WebView } from "react-native-webview";
5
- import { Linking, View } from "react-native";
5
+ import { Linking, View, useWindowDimensions } from "react-native";
6
6
 
7
7
  // ../sdk-common/dist/index.mjs
8
8
  function makeIframeMessage(type, opts) {
@@ -22,8 +22,8 @@ function handleIframeMessage(handler, opts) {
22
22
 
23
23
  // src/formats/Format.tsx
24
24
  import { jsx } from "react/jsx-runtime";
25
- var sendMessage = (webViewRef, code, data) => {
26
- const message = makeIframeMessage("update-iframe", {
25
+ var sendMessage = (webViewRef, type, code, data) => {
26
+ const message = makeIframeMessage(type, {
27
27
  data,
28
28
  code
29
29
  });
@@ -42,7 +42,9 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
42
42
  const [iframeLoaded, setIframeLoaded] = useState(false);
43
43
  const [containerStyles, setContainerStyles] = useState({});
44
44
  const [iframeStyles, setIframeStyles] = useState({});
45
+ const containerRef = useRef(null);
45
46
  const webViewRef = useRef(null);
47
+ const { height: windowHeight, width: windowWidth } = useWindowDimensions();
46
48
  const reset = () => {
47
49
  setHeight(0);
48
50
  setShowIframe(false);
@@ -80,7 +82,7 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
80
82
  case "init-iframe":
81
83
  setIframeLoaded(true);
82
84
  debug("iframe-post-message");
83
- sendMessage(webViewRef, code, {
85
+ sendMessage(webViewRef, "update-iframe", code, {
84
86
  messages: context?.messages,
85
87
  sdk: "sdk-react-native",
86
88
  otherParams,
@@ -135,11 +137,30 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
135
137
  return;
136
138
  }
137
139
  debug("iframe-post-message");
138
- sendMessage(webViewRef, code, {
140
+ sendMessage(webViewRef, "update-iframe", code, {
139
141
  data: { otherParams },
140
142
  code
141
143
  });
142
144
  }, [paramsString, iframeLoaded, context?.adServerUrl, bid, code]);
145
+ const checkIfInViewport = () => {
146
+ if (!containerRef.current) return;
147
+ containerRef.current.measureInWindow((containerX, containerY, containerWidth, containerHeight) => {
148
+ sendMessage(webViewRef, "update-dimensions-iframe", code, {
149
+ windowWidth,
150
+ windowHeight,
151
+ containerWidth,
152
+ containerHeight,
153
+ containerX,
154
+ containerY
155
+ });
156
+ });
157
+ };
158
+ useEffect(() => {
159
+ const interval = setInterval(() => {
160
+ checkIfInViewport();
161
+ }, 250);
162
+ return () => clearInterval(interval);
163
+ }, []);
143
164
  if (!context || !bid || !iframeUrl) {
144
165
  return null;
145
166
  }
@@ -159,6 +180,7 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
159
180
  View,
160
181
  {
161
182
  style: containerStyles,
183
+ ref: containerRef,
162
184
  children: /* @__PURE__ */ jsx(
163
185
  WebView,
164
186
  {
@@ -173,6 +195,13 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
173
195
  ...iframeStyles
174
196
  },
175
197
  injectedJavaScript: `
198
+ function sendToLog(data) {
199
+ window.ReactNativeWebView.postMessage(JSON.stringify({
200
+ type: 'log-iframe',
201
+ data: data
202
+ }));
203
+ }
204
+
176
205
  window.addEventListener("message", function(event) {
177
206
  if (window.ReactNativeWebView && event.data) {
178
207
  // ReactNativeWebView.postMessage only supports string data
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kontextso/sdk-react-native",
3
- "version": "2.0.0-rc.6",
3
+ "version": "2.0.0-rc.7",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",