@micromag/screen-keypad 0.3.682 → 0.3.701

package/es/index.js

@@ -4,7 +4,8 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { animated } from '@react-spring/web';
 import classNames from 'classnames';
-import { isString } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+import isString from 'lodash/isString';
 import PropTypes from 'prop-types';
 import React, { useRef, useMemo, useState, useCallback, useEffect } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
@@ -277,34 +278,47 @@ var KeypadScreen = function KeypadScreen(_ref) {
     _ref9$textStyle = _ref9.textStyle,
     popupHeadingTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
   var hasPopupContent = isTextFilled(popupContent);
-  var _ref10 = popupContent || {},
-    _ref10$textStyle = _ref10.textStyle,
-    popupContentTextStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
-  var _ref11 = popupButton || {},
-    _ref11$label = _ref11.label,
-    buttonLabel = _ref11$label === void 0 ? null : _ref11$label,
-    _ref11$url = _ref11.url,
-    buttonUrl = _ref11$url === void 0 ? null : _ref11$url,
-    _ref11$inWebView = _ref11.inWebView,
-    popupInWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
-    _ref11$boxStyle = _ref11.boxStyle,
-    popupButtonBoxStyle = _ref11$boxStyle === void 0 ? null : _ref11$boxStyle;
-  var onItemClick = useCallback(function (e, item) {
+  var _ref0 = popupContent || {},
+    _ref0$textStyle = _ref0.textStyle,
+    popupContentTextStyle = _ref0$textStyle === void 0 ? null : _ref0$textStyle;
+  var _ref1 = popupButton || {},
+    _ref1$label = _ref1.label,
+    buttonLabel = _ref1$label === void 0 ? null : _ref1$label,
+    _ref1$url = _ref1.url,
+    buttonUrl = _ref1$url === void 0 ? null : _ref1$url,
+    _ref1$inWebView = _ref1.inWebView,
+    popupInWebView = _ref1$inWebView === void 0 ? false : _ref1$inWebView,
+    _ref1$boxStyle = _ref1.boxStyle,
+    popupButtonBoxStyle = _ref1$boxStyle === void 0 ? null : _ref1$boxStyle;
+  var onItemClick = useCallback(function (e, item, index) {
     e.stopPropagation();
-    trackScreenEvent('click_item', item);
-    var _ref12 = item || {},
-      _ref12$inWebView = _ref12.inWebView,
-      inWebView = _ref12$inWebView === void 0 ? false : _ref12$inWebView,
-      _ref12$url = _ref12.url,
-      url = _ref12$url === void 0 ? null : _ref12$url;
+    var _ref10 = item || {},
+      _ref10$label = _ref10.label,
+      itemLabel = _ref10$label === void 0 ? null : _ref10$label,
+      _ref10$heading = _ref10.heading,
+      heading = _ref10$heading === void 0 ? null : _ref10$heading,
+      _ref10$inWebView = _ref10.inWebView,
+      inWebView = _ref10$inWebView === void 0 ? false : _ref10$inWebView,
+      _ref10$url = _ref10.url,
+      url = _ref10$url === void 0 ? null : _ref10$url;
     if (inWebView && url !== null) {
       openWebView({
         url: url
       });
-      return;
+    } else {
+      setPopup(item);
+      setShowPopup(true);
     }
-    setPopup(item);
-    setShowPopup(true);
+    var _ref11 = heading || {},
+      _ref11$body = _ref11.body,
+      headingBody = _ref11$body === void 0 ? null : _ref11$body;
+    var finalLabel = isString(itemLabel) ? itemLabel : (itemLabel || {}).body || null;
+    trackScreenEvent('click_item', ["#".concat(index + 1), finalLabel || headingBody || ''].filter(function (it) {
+      return !isEmpty(it);
+    }).join(' '), {
+      linkType: 'keypad_item',
+      linkUrl: url || null
+    });
   }, [setPopup, setShowPopup, trackScreenEvent, openWebView]);
   var onCloseModal = useCallback(function () {
     setShowPopup(false);
@@ -325,21 +339,21 @@ var KeypadScreen = function KeypadScreen(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     popupDragDirection = _useState6[0],
     setPopupDragDirection = _useState6[1];
-  var onPopupScrollHeightChange = useCallback(function (_ref13) {
-    var _ref13$scrolleeHeight = _ref13.scrolleeHeight,
-      scrolleeHeight = _ref13$scrolleeHeight === void 0 ? 0 : _ref13$scrolleeHeight;
+  var onPopupScrollHeightChange = useCallback(function (_ref12) {
+    var _ref12$scrolleeHeight = _ref12.scrolleeHeight,
+      scrolleeHeight = _ref12$scrolleeHeight === void 0 ? 0 : _ref12$scrolleeHeight;
     if (Math.floor(scrolleeHeight) >= Math.floor(height)) {
       setPopupDragDirection('top');
     } else {
       setPopupDragDirection('bottom');
     }
   }, [height]);
-  var computePopupProgress = useCallback(function (_ref14) {
-    var dragActive = _ref14.active,
-      _ref14$movement = _slicedToArray(_ref14.movement, 2),
-      my = _ref14$movement[1],
-      _ref14$velocity = _slicedToArray(_ref14.velocity, 2),
-      vy = _ref14$velocity[1];
+  var computePopupProgress = useCallback(function (_ref13) {
+    var dragActive = _ref13.active,
+      _ref13$movement = _slicedToArray(_ref13.movement, 2),
+      my = _ref13$movement[1],
+      _ref13$velocity = _slicedToArray(_ref13.velocity, 2),
+      vy = _ref13$velocity[1];
     var damper = 0.5;
     var delta = Math.abs(my) / window.innerHeight;
     var reachedThreshold = vy > 1 || delta > 0.3;
@@ -424,45 +438,45 @@ var KeypadScreen = function KeypadScreen(_ref) {
     };
   }, [showPopup, onCloseModal]);
   var gridItems = useMemo(function () {
-    return (items === null || items.length === 0 ? placeholders : items).map(function (item) {
-      var _ref15 = item || {},
-        _ref15$id = _ref15.id,
-        id = _ref15$id === void 0 ? null : _ref15$id,
-        _ref15$label = _ref15.label,
-        itemLabel = _ref15$label === void 0 ? null : _ref15$label,
-        _ref15$visual = _ref15.visual,
-        visual = _ref15$visual === void 0 ? null : _ref15$visual,
-        _ref15$boxStyle = _ref15.boxStyle,
-        boxStyle = _ref15$boxStyle === void 0 ? null : _ref15$boxStyle,
-        _ref15$alignment = _ref15.alignment,
-        alignment = _ref15$alignment === void 0 ? null : _ref15$alignment,
-        _ref15$heading = _ref15.heading,
-        heading = _ref15$heading === void 0 ? null : _ref15$heading,
-        _ref15$content = _ref15.content,
-        content = _ref15$content === void 0 ? null : _ref15$content,
+    return (items === null || items.length === 0 ? placeholders : items).map(function (item, index) {
+      var _ref14 = item || {},
+        _ref14$id = _ref14.id,
+        id = _ref14$id === void 0 ? null : _ref14$id,
+        _ref14$label = _ref14.label,
+        itemLabel = _ref14$label === void 0 ? null : _ref14$label,
+        _ref14$visual = _ref14.visual,
+        visual = _ref14$visual === void 0 ? null : _ref14$visual,
+        _ref14$boxStyle = _ref14.boxStyle,
+        boxStyle = _ref14$boxStyle === void 0 ? null : _ref14$boxStyle,
+        _ref14$alignment = _ref14.alignment,
+        alignment = _ref14$alignment === void 0 ? null : _ref14$alignment,
+        _ref14$heading = _ref14.heading,
+        heading = _ref14$heading === void 0 ? null : _ref14$heading,
+        _ref14$content = _ref14.content,
+        content = _ref14$content === void 0 ? null : _ref14$content,
+        _ref14$url = _ref14.url,
+        url = _ref14$url === void 0 ? null : _ref14$url,
+        _ref14$inWebView = _ref14.inWebView,
+        inWebView = _ref14$inWebView === void 0 ? false : _ref14$inWebView,
+        _ref14$largeVisual = _ref14.largeVisual,
+        popupLargeVisual = _ref14$largeVisual === void 0 ? null : _ref14$largeVisual;
+      var _ref15 = visual || {},
         _ref15$url = _ref15.url,
-        url = _ref15$url === void 0 ? null : _ref15$url,
-        _ref15$inWebView = _ref15.inWebView,
-        inWebView = _ref15$inWebView === void 0 ? false : _ref15$inWebView,
-        _ref15$largeVisual = _ref15.largeVisual,
-        popupLargeVisual = _ref15$largeVisual === void 0 ? null : _ref15$largeVisual;
-      var _ref16 = visual || {},
-        _ref16$url = _ref16.url,
-        visualUrl = _ref16$url === void 0 ? null : _ref16$url;
-      var _ref17 = heading || {},
+        visualUrl = _ref15$url === void 0 ? null : _ref15$url;
+      var _ref16 = heading || {},
+        _ref16$body = _ref16.body,
+        headingBody = _ref16$body === void 0 ? null : _ref16$body;
+      var _ref17 = content || {},
         _ref17$body = _ref17.body,
-        headingBody = _ref17$body === void 0 ? null : _ref17$body;
-      var _ref18 = content || {},
-        _ref18$body = _ref18.body,
-        contentBody = _ref18$body === void 0 ? null : _ref18$body;
+        contentBody = _ref17$body === void 0 ? null : _ref17$body;
       var finalLabel = isString(itemLabel) ? {
         body: itemLabel
       } : itemLabel || {};
-      var _ref19 = finalLabel || {},
-        _ref19$body = _ref19.body,
-        label = _ref19$body === void 0 ? null : _ref19$body,
-        _ref19$textStyle = _ref19.textStyle,
-        textStyle = _ref19$textStyle === void 0 ? null : _ref19$textStyle;
+      var _ref18 = finalLabel || {},
+        _ref18$body = _ref18.body,
+        label = _ref18$body === void 0 ? null : _ref18$body,
+        _ref18$textStyle = _ref18.textStyle,
+        textStyle = _ref18$textStyle === void 0 ? null : _ref18$textStyle;
       var key = label || visualUrl || id;
       var isEmpty = label === null && visual === null;
       var isExternalLink = url !== null && !inWebView;
@@ -477,7 +491,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
         href: isExternalLink ? url : null,
         focusable: current,
         onClick: !isPopupEmpty || url !== null && !isExternalLink ? function (e) {
-          return onItemClick(e, item);
+          return onItemClick(e, item, index);
         } : null
       }, /*#__PURE__*/React.createElement(ScreenElement, {
         emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-keypad",
-    "version": "0.3.682",
+    "version": "0.3.701",
     "private": false,
     "description": "",
     "keywords": [
@@ -66,7 +66,7 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@micromag/core": "^0.3.679",
-        "@micromag/element-background": "^0.3.682",
+        "@micromag/element-background": "^0.3.700",
         "@micromag/element-button": "^0.3.679",
         "@micromag/element-call-to-action": "^0.3.679",
         "@micromag/element-container": "^0.3.679",
@@ -79,7 +79,7 @@
         "@micromag/element-scroll": "^0.3.679",
         "@micromag/element-text": "^0.3.679",
         "@micromag/element-urbania-author": "^0.3.679",
-        "@micromag/element-visual": "^0.3.682",
+        "@micromag/element-visual": "^0.3.700",
         "@micromag/transforms": "^0.3.679",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
@@ -95,5 +95,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "ff77a57d44913b0e5afa373445ae9f014799e183"
+    "gitHead": "c693ba9ccf9798d2b047c5a8b427453a1b7a09d6"
 }