@micromag/screen-game-sort 0.3.720 → 0.3.722

package/es/index.js

@@ -133,7 +133,8 @@ var ShareScreen = function ShareScreen(_ref) {
     footerRef = _useDimensionObserver3.ref,
     _useDimensionObserver4 = _useDimensionObserver3.height,
     footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
-  useTrackScreenEvent('game-sort');
+  var trackingEnabled = isView;
+  var trackEvent = useTrackScreenEvent('game-sort');
   var _useState = useState(isView ? shuffle(items || []) : items || []),
     _useState2 = _slicedToArray(_useState, 2),
     sortedItems = _useState2[0],
@@ -260,6 +261,9 @@ var ShareScreen = function ShareScreen(_ref) {
       });
       var _newIndex = currentIndex === 0 ? sortedItems.length - 1 : currentIndex - 1;
       updateIndex(item, _newIndex);
+      if (trackingEnabled) {
+        trackEvent('tap', "item_".concat(itemIndex));
+      }
       return;
     }
     var sortedIndex = sortedItems.findIndex(function (it) {
@@ -300,6 +304,9 @@ var ShareScreen = function ShareScreen(_ref) {
       });
     } else {
       setSortedItems(sortedItemsRef.current);
+      if (trackingEnabled) {
+        trackEvent('drag', "item_".concat(itemIndex));
+      }
       // updateIndex(item, newIndex !== -1 ? newIndex : sortedIndex);
     }
   }, {
@@ -309,13 +316,23 @@ var ShareScreen = function ShareScreen(_ref) {
     enabled: dragEnabled
   });
   var onClickSubmit = useCallback(function () {
-    setValidated(items.map(function (it, itemIndex) {
+    var newValidated = items.map(function (it, itemIndex) {
       var sortedIndex = sortedItems.findIndex(function (sortedItem) {
         return sortedItem === it;
       });
       return itemIndex === sortedIndex;
-    }));
-  }, [items, sortedItems]);
+    });
+    setValidated(newValidated);
+    var allValid = newValidated.reduce(function (acc, isValid) {
+      return acc && isValid;
+    }, true);
+    var invalidCount = newValidated.filter(function (isValid) {
+      return !isValid;
+    }).length;
+    if (trackingEnabled) {
+      trackEvent('submit', allValid ? 'valid' : "invalid_".concat(invalidCount));
+    }
+  }, [items, sortedItems, trackingEnabled, trackEvent]);
   useEffect(function () {
     if (validated === null) {
       return function () {};
@@ -407,7 +424,9 @@ var ShareScreen = function ShareScreen(_ref) {
     var isValid = validated !== null && validated[itemIndex];
     return /*#__PURE__*/React.createElement(animated.div, Object.assign({
       key: "button-".concat(itemIndex),
-      className: classNames([styles.item, _defineProperty(_defineProperty(_defineProperty({}, styles.isEmpty, isEmpty), styles.valid, validated !== null && isValid), styles.invalid, validated !== null && !isValid)]),
+      className: classNames([styles.item, _defineProperty(_defineProperty(_defineProperty({
+        clickable: dragEnabled
+      }, styles.isEmpty, isEmpty), styles.valid, validated !== null && isValid), styles.invalid, validated !== null && !isValid)]),
       ref: function ref(_ref1) {
         elementsRef.current[itemIndex] = _ref1;
       },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-game-sort",
-    "version": "0.3.720",
+    "version": "0.3.722",
     "private": false,
     "description": "",
     "keywords": [
@@ -87,5 +87,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "ed934ee1ce23cfdee83089f1cb4fffcb777381f0"
+    "gitHead": "fa2c1e03a2918d5df62b78d37fce47eac5b3bb8b"
 }