@kontextso/sdk-react-native 2.2.0-rc.1 → 2.2.0-rc.3

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 (4) hide show
  1. package/dist/index.js +44 -26
  2. package/dist/index.mjs +44 -26
  3. package/package.json +1 -1
  4. package/src/formats/Format.tsx +19 -3
package/dist/index.js CHANGED
@@ -124,6 +124,7 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
124
124
  const webViewRef = (0, import_react2.useRef)(null);
125
125
  const modalWebViewRef = (0, import_react2.useRef)(null);
126
126
  const modalInitTimeoutRef = (0, import_react2.useRef)(null);
127
+ const isModalInitRef = (0, import_react2.useRef)(false);
127
128
  const { height: windowHeight, width: windowWidth } = (0, import_react_native.useWindowDimensions)();
128
129
  const reset = () => {
129
130
  setHeight(0);
@@ -140,6 +141,7 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
140
141
  clearTimeout(modalInitTimeoutRef.current);
141
142
  modalInitTimeoutRef.current = null;
142
143
  }
144
+ isModalInitRef.current = false;
143
145
  setModalOpen(false);
144
146
  setModalLoaded(false);
145
147
  setModalShown(false);
@@ -221,7 +223,11 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
221
223
  break;
222
224
  case "open-component-iframe":
223
225
  setModalOpen(true);
224
- modalInitTimeoutRef.current = setTimeout(resetModal, message.data.timeout ?? 5e3);
226
+ modalInitTimeoutRef.current = setTimeout(() => {
227
+ if (!isModalInitRef.current) {
228
+ resetModal();
229
+ }
230
+ }, message.data.timeout ?? 5e3);
225
231
  break;
226
232
  }
227
233
  },
@@ -251,6 +257,7 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
251
257
  resetModal();
252
258
  break;
253
259
  case "init-component-iframe":
260
+ isModalInitRef.current = true;
254
261
  if (modalInitTimeoutRef.current) {
255
262
  clearTimeout(modalInitTimeoutRef.current);
256
263
  modalInitTimeoutRef.current = null;
@@ -260,6 +267,7 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
260
267
  case "error-component-iframe":
261
268
  case "error-iframe":
262
269
  resetModal();
270
+ context?.captureError(new Error("Processing modal iframe error"));
263
271
  break;
264
272
  case "click-iframe":
265
273
  if (message.data.url) {
@@ -331,38 +339,48 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
331
339
  return 0;
332
340
  };
333
341
  const content = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
334
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Modal, { visible: modalOpen, transparent: true, onRequestClose: resetModal, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
335
- import_react_native.View,
342
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
343
+ import_react_native.Modal,
336
344
  {
337
- style: {
338
- flex: 1,
339
- // Don't show the modal until the modal page is loaded and sends 'init-component-iframe' message back to SDK
340
- ...modalShown ? { opacity: 1, pointerEvents: "auto" } : { opacity: 0, pointerEvents: "none" }
341
- },
345
+ visible: modalOpen,
346
+ transparent: true,
347
+ onRequestClose: resetModal,
348
+ animationType: "slide",
349
+ statusBarTranslucent: true,
342
350
  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
343
- frame_webview_default,
351
+ import_react_native.View,
344
352
  {
345
- ref: modalWebViewRef,
346
- iframeUrl: modalUrl,
347
- onMessage: onModalMessage,
348
353
  style: {
349
- backgroundColor: "transparent",
350
- height: "100%",
351
- width: "100%",
352
- borderWidth: 0
353
- },
354
- onError: () => {
355
- debug("modal-error");
356
- resetModal();
354
+ flex: 1,
355
+ // Don't show the modal until the modal page is loaded and sends 'init-component-iframe' message back to SDK
356
+ ...modalShown ? { opacity: 1, pointerEvents: "auto" } : { opacity: 0, pointerEvents: "none" }
357
357
  },
358
- onLoad: () => {
359
- debug("modal-load");
360
- setModalLoaded(true);
361
- }
358
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
359
+ frame_webview_default,
360
+ {
361
+ ref: modalWebViewRef,
362
+ iframeUrl: modalUrl,
363
+ onMessage: onModalMessage,
364
+ style: {
365
+ backgroundColor: "transparent",
366
+ height: "100%",
367
+ width: "100%",
368
+ borderWidth: 0
369
+ },
370
+ onError: () => {
371
+ debug("modal-error");
372
+ resetModal();
373
+ },
374
+ onLoad: () => {
375
+ debug("modal-load");
376
+ setModalLoaded(true);
377
+ }
378
+ }
379
+ )
362
380
  }
363
381
  )
364
382
  }
365
- ) }),
383
+ ),
366
384
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.View, { style: containerStyles, ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
367
385
  frame_webview_default,
368
386
  {
@@ -372,7 +390,7 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
372
390
  style: {
373
391
  height: getHeight(),
374
392
  width: getWidth(),
375
- background: "transparent",
393
+ backgroundColor: "transparent",
376
394
  borderWidth: 0,
377
395
  ...iframeStyles
378
396
  },
package/dist/index.mjs CHANGED
@@ -93,6 +93,7 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
93
93
  const webViewRef = useRef(null);
94
94
  const modalWebViewRef = useRef(null);
95
95
  const modalInitTimeoutRef = useRef(null);
96
+ const isModalInitRef = useRef(false);
96
97
  const { height: windowHeight, width: windowWidth } = useWindowDimensions();
97
98
  const reset = () => {
98
99
  setHeight(0);
@@ -109,6 +110,7 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
109
110
  clearTimeout(modalInitTimeoutRef.current);
110
111
  modalInitTimeoutRef.current = null;
111
112
  }
113
+ isModalInitRef.current = false;
112
114
  setModalOpen(false);
113
115
  setModalLoaded(false);
114
116
  setModalShown(false);
@@ -190,7 +192,11 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
190
192
  break;
191
193
  case "open-component-iframe":
192
194
  setModalOpen(true);
193
- modalInitTimeoutRef.current = setTimeout(resetModal, message.data.timeout ?? 5e3);
195
+ modalInitTimeoutRef.current = setTimeout(() => {
196
+ if (!isModalInitRef.current) {
197
+ resetModal();
198
+ }
199
+ }, message.data.timeout ?? 5e3);
194
200
  break;
195
201
  }
196
202
  },
@@ -220,6 +226,7 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
220
226
  resetModal();
221
227
  break;
222
228
  case "init-component-iframe":
229
+ isModalInitRef.current = true;
223
230
  if (modalInitTimeoutRef.current) {
224
231
  clearTimeout(modalInitTimeoutRef.current);
225
232
  modalInitTimeoutRef.current = null;
@@ -229,6 +236,7 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
229
236
  case "error-component-iframe":
230
237
  case "error-iframe":
231
238
  resetModal();
239
+ context?.captureError(new Error("Processing modal iframe error"));
232
240
  break;
233
241
  case "click-iframe":
234
242
  if (message.data.url) {
@@ -300,38 +308,48 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
300
308
  return 0;
301
309
  };
302
310
  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
303
- /* @__PURE__ */ jsx2(Modal, { visible: modalOpen, transparent: true, onRequestClose: resetModal, children: /* @__PURE__ */ jsx2(
304
- View,
311
+ /* @__PURE__ */ jsx2(
312
+ Modal,
305
313
  {
306
- style: {
307
- flex: 1,
308
- // Don't show the modal until the modal page is loaded and sends 'init-component-iframe' message back to SDK
309
- ...modalShown ? { opacity: 1, pointerEvents: "auto" } : { opacity: 0, pointerEvents: "none" }
310
- },
314
+ visible: modalOpen,
315
+ transparent: true,
316
+ onRequestClose: resetModal,
317
+ animationType: "slide",
318
+ statusBarTranslucent: true,
311
319
  children: /* @__PURE__ */ jsx2(
312
- frame_webview_default,
320
+ View,
313
321
  {
314
- ref: modalWebViewRef,
315
- iframeUrl: modalUrl,
316
- onMessage: onModalMessage,
317
322
  style: {
318
- backgroundColor: "transparent",
319
- height: "100%",
320
- width: "100%",
321
- borderWidth: 0
322
- },
323
- onError: () => {
324
- debug("modal-error");
325
- resetModal();
323
+ flex: 1,
324
+ // Don't show the modal until the modal page is loaded and sends 'init-component-iframe' message back to SDK
325
+ ...modalShown ? { opacity: 1, pointerEvents: "auto" } : { opacity: 0, pointerEvents: "none" }
326
326
  },
327
- onLoad: () => {
328
- debug("modal-load");
329
- setModalLoaded(true);
330
- }
327
+ children: /* @__PURE__ */ jsx2(
328
+ frame_webview_default,
329
+ {
330
+ ref: modalWebViewRef,
331
+ iframeUrl: modalUrl,
332
+ onMessage: onModalMessage,
333
+ style: {
334
+ backgroundColor: "transparent",
335
+ height: "100%",
336
+ width: "100%",
337
+ borderWidth: 0
338
+ },
339
+ onError: () => {
340
+ debug("modal-error");
341
+ resetModal();
342
+ },
343
+ onLoad: () => {
344
+ debug("modal-load");
345
+ setModalLoaded(true);
346
+ }
347
+ }
348
+ )
331
349
  }
332
350
  )
333
351
  }
334
- ) }),
352
+ ),
335
353
  /* @__PURE__ */ jsx2(View, { style: containerStyles, ref: containerRef, children: /* @__PURE__ */ jsx2(
336
354
  frame_webview_default,
337
355
  {
@@ -341,7 +359,7 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
341
359
  style: {
342
360
  height: getHeight(),
343
361
  width: getWidth(),
344
- background: "transparent",
362
+ backgroundColor: "transparent",
345
363
  borderWidth: 0,
346
364
  ...iframeStyles
347
365
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kontextso/sdk-react-native",
3
- "version": "2.2.0-rc.1",
3
+ "version": "2.2.0-rc.3",
4
4
  "description": "Kontext SDK for React Native",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
package/src/formats/Format.tsx CHANGED
@@ -59,6 +59,7 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
59
59
  const webViewRef = useRef<WebView>(null)
60
60
  const modalWebViewRef = useRef<WebView>(null)
61
61
  const modalInitTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
62
+ const isModalInitRef = useRef<boolean>(false)
62
63
 
63
64
  const { height: windowHeight, width: windowWidth } = useWindowDimensions()
64
65
 
@@ -79,6 +80,7 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
79
80
  modalInitTimeoutRef.current = null
80
81
  }
81
82
 
83
+ isModalInitRef.current = false
82
84
  setModalOpen(false)
83
85
  setModalLoaded(false)
84
86
  setModalShown(false)
@@ -175,7 +177,11 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
175
177
  case 'open-component-iframe':
176
178
  setModalOpen(true)
177
179
 
178
- modalInitTimeoutRef.current = setTimeout(resetModal, message.data.timeout ?? 5000)
180
+ modalInitTimeoutRef.current = setTimeout(() => {
181
+ if (!isModalInitRef.current) {
182
+ resetModal()
183
+ }
184
+ }, message.data.timeout ?? 5000)
179
185
  break
180
186
  }
181
187
  },
@@ -209,6 +215,9 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
209
215
  break
210
216
 
211
217
  case 'init-component-iframe':
218
+ // Just clearing the timeoutRef didn't work in Android, so we need to set a flag and check it in the timeout callback
219
+ isModalInitRef.current = true
220
+
212
221
  if (modalInitTimeoutRef.current) {
213
222
  clearTimeout(modalInitTimeoutRef.current)
214
223
  modalInitTimeoutRef.current = null
@@ -220,6 +229,7 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
220
229
  case 'error-component-iframe':
221
230
  case 'error-iframe':
222
231
  resetModal()
232
+ context?.captureError(new Error('Processing modal iframe error'))
223
233
  break
224
234
 
225
235
  case 'click-iframe':
@@ -304,7 +314,13 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
304
314
 
305
315
  const content = (
306
316
  <>
307
- <Modal visible={modalOpen} transparent={true} onRequestClose={resetModal}>
317
+ <Modal
318
+ visible={modalOpen}
319
+ transparent={true}
320
+ onRequestClose={resetModal}
321
+ animationType="slide"
322
+ statusBarTranslucent={true}
323
+ >
308
324
  <View
309
325
  style={{
310
326
  flex: 1,
@@ -342,7 +358,7 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
342
358
  style={{
343
359
  height: getHeight(),
344
360
  width: getWidth(),
345
- background: 'transparent',
361
+ backgroundColor: 'transparent',
346
362
  borderWidth: 0,
347
363
  ...iframeStyles,
348
364
  }}