@micromag/screen-keypad 0.4.54 → 0.4.56

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 (2) hide show
  1. package/es/index.js +88 -74
  2. package/package.json +18 -18
package/es/index.js CHANGED
@@ -189,6 +189,7 @@ function KeypadScreen(_ref) {
189
189
  _useState6 = _slicedToArray(_useState5, 2),
190
190
  popup = _useState6[0],
191
191
  setPopup = _useState6[1];
192
+ var prevShowPopupRef = useRef(showPopup);
192
193
  var _ref7 = popup || {},
193
194
  _ref7$heading = _ref7.heading,
194
195
  popupHeading = _ref7$heading === void 0 ? null : _ref7$heading,
@@ -200,37 +201,46 @@ function KeypadScreen(_ref) {
200
201
  popupButton = _ref7$button === void 0 ? null : _ref7$button,
201
202
  _ref7$popupBoxStyle = _ref7.popupBoxStyle,
202
203
  singlePopupBoxStyle = _ref7$popupBoxStyle === void 0 ? null : _ref7$popupBoxStyle;
204
+ var _ref8 = largeVisual || {},
205
+ _ref8$metadata = _ref8.metadata,
206
+ metadata = _ref8$metadata === void 0 ? null : _ref8$metadata;
207
+ var _ref9 = metadata || {},
208
+ _ref9$width = _ref9.width,
209
+ largeVisualWidth = _ref9$width === void 0 ? 0 : _ref9$width,
210
+ _ref9$height = _ref9.height,
211
+ largeVisualHeight = _ref9$height === void 0 ? 0 : _ref9$height;
212
+ var largeVisualRatio = largeVisualWidth > 0 && largeVisualHeight > 0 ? largeVisualWidth / largeVisualHeight : null;
203
213
  var hasPopupHeading = isTextFilled(popupHeading);
204
- var _ref8 = popupHeading || {},
205
- _ref8$textStyle = _ref8.textStyle,
206
- popupHeadingTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
214
+ var _ref0 = popupHeading || {},
215
+ _ref0$textStyle = _ref0.textStyle,
216
+ popupHeadingTextStyle = _ref0$textStyle === void 0 ? null : _ref0$textStyle;
207
217
  var hasPopupContent = isTextFilled(popupContent);
208
- var _ref9 = popupContent || {},
209
- _ref9$textStyle = _ref9.textStyle,
210
- popupContentTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
211
- var _ref0 = popupButton || {},
212
- _ref0$label = _ref0.label,
213
- buttonLabel = _ref0$label === void 0 ? null : _ref0$label,
214
- _ref0$url = _ref0.url,
215
- buttonUrl = _ref0$url === void 0 ? null : _ref0$url,
216
- _ref0$inWebView = _ref0.inWebView,
217
- popupInWebView = _ref0$inWebView === void 0 ? false : _ref0$inWebView,
218
- _ref0$boxStyle = _ref0.boxStyle,
219
- popupButtonBoxStyle = _ref0$boxStyle === void 0 ? null : _ref0$boxStyle;
218
+ var _ref1 = popupContent || {},
219
+ _ref1$textStyle = _ref1.textStyle,
220
+ popupContentTextStyle = _ref1$textStyle === void 0 ? null : _ref1$textStyle;
221
+ var _ref10 = popupButton || {},
222
+ _ref10$label = _ref10.label,
223
+ buttonLabel = _ref10$label === void 0 ? null : _ref10$label,
224
+ _ref10$url = _ref10.url,
225
+ buttonUrl = _ref10$url === void 0 ? null : _ref10$url,
226
+ _ref10$inWebView = _ref10.inWebView,
227
+ popupInWebView = _ref10$inWebView === void 0 ? false : _ref10$inWebView,
228
+ _ref10$boxStyle = _ref10.boxStyle,
229
+ popupButtonBoxStyle = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle;
220
230
  var onItemClick = useCallback(function (e, item, index) {
221
231
  e.stopPropagation();
222
232
  if (isNotInteractive) {
223
233
  return;
224
234
  }
225
- var _ref1 = item || {},
226
- _ref1$label = _ref1.label,
227
- itemLabel = _ref1$label === void 0 ? null : _ref1$label,
228
- _ref1$heading = _ref1.heading,
229
- heading = _ref1$heading === void 0 ? null : _ref1$heading,
230
- _ref1$inWebView = _ref1.inWebView,
231
- inWebView = _ref1$inWebView === void 0 ? false : _ref1$inWebView,
232
- _ref1$url = _ref1.url,
233
- url = _ref1$url === void 0 ? null : _ref1$url;
235
+ var _ref11 = item || {},
236
+ _ref11$label = _ref11.label,
237
+ itemLabel = _ref11$label === void 0 ? null : _ref11$label,
238
+ _ref11$heading = _ref11.heading,
239
+ heading = _ref11$heading === void 0 ? null : _ref11$heading,
240
+ _ref11$inWebView = _ref11.inWebView,
241
+ inWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
242
+ _ref11$url = _ref11.url,
243
+ url = _ref11$url === void 0 ? null : _ref11$url;
234
244
  if (inWebView && url !== null) {
235
245
  openWebView({
236
246
  url: url
@@ -239,9 +249,9 @@ function KeypadScreen(_ref) {
239
249
  setPopup(item);
240
250
  setShowPopup(true);
241
251
  }
242
- var _ref10 = heading || {},
243
- _ref10$body = _ref10.body,
244
- headingBody = _ref10$body === void 0 ? null : _ref10$body;
252
+ var _ref12 = heading || {},
253
+ _ref12$body = _ref12.body,
254
+ headingBody = _ref12$body === void 0 ? null : _ref12$body;
245
255
  var finalLabel = isString(itemLabel) ? itemLabel : (itemLabel || {}).body || null;
246
256
  trackScreenEvent('click_item', ["#".concat(index + 1), finalLabel || headingBody || ''].filter(function (it) {
247
257
  return !isEmpty(it);
@@ -279,21 +289,21 @@ function KeypadScreen(_ref) {
279
289
  _useState8 = _slicedToArray(_useState7, 2),
280
290
  popupDragDirection = _useState8[0],
281
291
  setPopupDragDirection = _useState8[1];
282
- var onPopupScrollHeightChange = useCallback(function (_ref11) {
283
- var _ref11$scrolleeHeight = _ref11.scrolleeHeight,
284
- scrolleeHeight = _ref11$scrolleeHeight === void 0 ? 0 : _ref11$scrolleeHeight;
292
+ var onPopupScrollHeightChange = useCallback(function (_ref13) {
293
+ var _ref13$scrolleeHeight = _ref13.scrolleeHeight,
294
+ scrolleeHeight = _ref13$scrolleeHeight === void 0 ? 0 : _ref13$scrolleeHeight;
285
295
  if (Math.floor(scrolleeHeight) >= Math.floor(height)) {
286
296
  setPopupDragDirection('top');
287
297
  } else {
288
298
  setPopupDragDirection('bottom');
289
299
  }
290
300
  }, [height]);
291
- var computePopupProgress = useCallback(function (_ref12) {
292
- var dragActive = _ref12.active,
293
- _ref12$movement = _slicedToArray(_ref12.movement, 2),
294
- my = _ref12$movement[1],
295
- _ref12$velocity = _slicedToArray(_ref12.velocity, 2),
296
- vy = _ref12$velocity[1];
301
+ var computePopupProgress = useCallback(function (_ref14) {
302
+ var dragActive = _ref14.active,
303
+ _ref14$movement = _slicedToArray(_ref14.movement, 2),
304
+ my = _ref14$movement[1],
305
+ _ref14$velocity = _slicedToArray(_ref14.velocity, 2),
306
+ vy = _ref14$velocity[1];
297
307
  var damper = 0.5;
298
308
  var windowHeight = typeof window !== 'undefined' ? window.innerHeight : 0;
299
309
  var delta = windowHeight > 0 ? Math.abs(my) / windowHeight : 0;
@@ -374,12 +384,14 @@ function KeypadScreen(_ref) {
374
384
  popupSpring = _useDragProgress.progress,
375
385
  popupTransitioning = _useDragProgress.transitioning;
376
386
 
377
- // Clear popup
387
+ // Clear popup contents after close transition completes
378
388
  useEffect(function () {
379
- if (!showPopup && !popupTransitioning && popup !== null) {
389
+ if (prevShowPopupRef.current && !showPopup && !popupTransitioning) {
390
+ console.log('clear popup');
380
391
  setPopup(null);
381
392
  }
382
- }, [showPopup, popupTransitioning, popup]);
393
+ prevShowPopupRef.current = showPopup;
394
+ }, [showPopup, popupTransitioning]);
383
395
  useEffect(function () {
384
396
  var keyup = function keyup(e) {
385
397
  if (e.key === 'Escape') {
@@ -395,43 +407,43 @@ function KeypadScreen(_ref) {
395
407
  }, [showPopup, onCloseModal]);
396
408
  var gridItems = useMemo(function () {
397
409
  return (items === null || items.length === 0 ? placeholders : items).map(function (item, index) {
398
- var _ref13 = item || {},
399
- _ref13$id = _ref13.id,
400
- id = _ref13$id === void 0 ? null : _ref13$id,
401
- _ref13$label = _ref13.label,
402
- itemLabel = _ref13$label === void 0 ? null : _ref13$label,
403
- _ref13$visual = _ref13.visual,
404
- visual = _ref13$visual === void 0 ? null : _ref13$visual,
405
- _ref13$boxStyle = _ref13.boxStyle,
406
- boxStyle = _ref13$boxStyle === void 0 ? null : _ref13$boxStyle,
407
- _ref13$heading = _ref13.heading,
408
- heading = _ref13$heading === void 0 ? null : _ref13$heading,
409
- _ref13$content = _ref13.content,
410
- content = _ref13$content === void 0 ? null : _ref13$content,
411
- _ref13$url = _ref13.url,
412
- url = _ref13$url === void 0 ? null : _ref13$url,
413
- _ref13$inWebView = _ref13.inWebView,
414
- inWebView = _ref13$inWebView === void 0 ? false : _ref13$inWebView,
415
- _ref13$largeVisual = _ref13.largeVisual,
416
- popupLargeVisual = _ref13$largeVisual === void 0 ? null : _ref13$largeVisual;
417
- var _ref14 = visual || {},
418
- _ref14$url = _ref14.url,
419
- visualUrl = _ref14$url === void 0 ? null : _ref14$url;
420
- var _ref15 = heading || {},
421
- _ref15$body = _ref15.body,
422
- headingBody = _ref15$body === void 0 ? null : _ref15$body;
423
- var _ref16 = content || {},
424
- _ref16$body = _ref16.body,
425
- contentBody = _ref16$body === void 0 ? null : _ref16$body;
410
+ var _ref15 = item || {},
411
+ _ref15$id = _ref15.id,
412
+ id = _ref15$id === void 0 ? null : _ref15$id,
413
+ _ref15$label = _ref15.label,
414
+ itemLabel = _ref15$label === void 0 ? null : _ref15$label,
415
+ _ref15$visual = _ref15.visual,
416
+ visual = _ref15$visual === void 0 ? null : _ref15$visual,
417
+ _ref15$boxStyle = _ref15.boxStyle,
418
+ boxStyle = _ref15$boxStyle === void 0 ? null : _ref15$boxStyle,
419
+ _ref15$heading = _ref15.heading,
420
+ heading = _ref15$heading === void 0 ? null : _ref15$heading,
421
+ _ref15$content = _ref15.content,
422
+ content = _ref15$content === void 0 ? null : _ref15$content,
423
+ _ref15$url = _ref15.url,
424
+ url = _ref15$url === void 0 ? null : _ref15$url,
425
+ _ref15$inWebView = _ref15.inWebView,
426
+ inWebView = _ref15$inWebView === void 0 ? false : _ref15$inWebView,
427
+ _ref15$largeVisual = _ref15.largeVisual,
428
+ popupLargeVisual = _ref15$largeVisual === void 0 ? null : _ref15$largeVisual;
429
+ var _ref16 = visual || {},
430
+ _ref16$url = _ref16.url,
431
+ visualUrl = _ref16$url === void 0 ? null : _ref16$url;
432
+ var _ref17 = heading || {},
433
+ _ref17$body = _ref17.body,
434
+ headingBody = _ref17$body === void 0 ? null : _ref17$body;
435
+ var _ref18 = content || {},
436
+ _ref18$body = _ref18.body,
437
+ contentBody = _ref18$body === void 0 ? null : _ref18$body;
426
438
  var finalLabel = isString(itemLabel) ? {
427
439
  body: itemLabel
428
440
  } : itemLabel || {};
429
- var _ref17 = finalLabel || {},
430
- _ref17$textStyle = _ref17.textStyle,
431
- finalLabelTextStyle = _ref17$textStyle === void 0 ? null : _ref17$textStyle;
432
- var _ref18 = finalLabel || {},
433
- _ref18$body = _ref18.body,
434
- finalBody = _ref18$body === void 0 ? null : _ref18$body;
441
+ var _ref19 = finalLabel || {},
442
+ _ref19$textStyle = _ref19.textStyle,
443
+ finalLabelTextStyle = _ref19$textStyle === void 0 ? null : _ref19$textStyle;
444
+ var _ref20 = finalLabel || {},
445
+ _ref20$body = _ref20.body,
446
+ finalBody = _ref20$body === void 0 ? null : _ref20$body;
435
447
  var key = finalBody || visualUrl || id;
436
448
  var itemIsEmpty = finalBody === null && visual === null;
437
449
  var isExternalLink = url !== null && !inWebView;
@@ -663,7 +675,9 @@ function KeypadScreen(_ref) {
663
675
  videoClassName: styles.popupVisualVideo,
664
676
  media: largeVisual,
665
677
  resolution: resolution,
666
- width: "100%"
678
+ ratio: largeVisualRatio,
679
+ width: "100%",
680
+ height: "auto"
667
681
  }) : null
668
682
  }), /*#__PURE__*/jsx(ScreenElement, {
669
683
  placeholder: "button",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-keypad",
3
- "version": "0.4.54",
3
+ "version": "0.4.56",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -66,22 +66,22 @@
66
66
  },
67
67
  "dependencies": {
68
68
  "@babel/runtime": "^7.28.6",
69
- "@micromag/core": "^0.4.54",
70
- "@micromag/element-background": "^0.4.54",
71
- "@micromag/element-button": "^0.4.54",
72
- "@micromag/element-call-to-action": "^0.4.54",
73
- "@micromag/element-container": "^0.4.54",
74
- "@micromag/element-footer": "^0.4.54",
75
- "@micromag/element-grid": "^0.4.54",
76
- "@micromag/element-header": "^0.4.54",
77
- "@micromag/element-heading": "^0.4.54",
78
- "@micromag/element-keypad": "^0.4.54",
79
- "@micromag/element-layout": "^0.4.54",
80
- "@micromag/element-scroll": "^0.4.54",
81
- "@micromag/element-text": "^0.4.54",
82
- "@micromag/element-urbania-author": "^0.4.54",
83
- "@micromag/element-visual": "^0.4.54",
84
- "@micromag/transforms": "^0.4.54",
69
+ "@micromag/core": "^0.4.55",
70
+ "@micromag/element-background": "^0.4.55",
71
+ "@micromag/element-button": "^0.4.55",
72
+ "@micromag/element-call-to-action": "^0.4.55",
73
+ "@micromag/element-container": "^0.4.55",
74
+ "@micromag/element-footer": "^0.4.55",
75
+ "@micromag/element-grid": "^0.4.55",
76
+ "@micromag/element-header": "^0.4.55",
77
+ "@micromag/element-heading": "^0.4.55",
78
+ "@micromag/element-keypad": "^0.4.55",
79
+ "@micromag/element-layout": "^0.4.55",
80
+ "@micromag/element-scroll": "^0.4.55",
81
+ "@micromag/element-text": "^0.4.55",
82
+ "@micromag/element-urbania-author": "^0.4.55",
83
+ "@micromag/element-visual": "^0.4.55",
84
+ "@micromag/transforms": "^0.4.55",
85
85
  "@react-spring/core": "^10.0.3",
86
86
  "@react-spring/web": "^10.0.3",
87
87
  "@use-gesture/react": "^10.3.0",
@@ -94,6 +94,6 @@
94
94
  "access": "public",
95
95
  "registry": "https://registry.npmjs.org/"
96
96
  },
97
- "gitHead": "b7aacdebb4a5c2179a58d21ab2aaea5bcdc43d69",
97
+ "gitHead": "8d1c7dca724abbc01da7cebbe6913c77ee27f0b7",
98
98
  "types": "es/index.d.ts"
99
99
  }