@micromag/screen-game-sort 0.3.737 → 0.3.739

package/es/index.js

@@ -1,15 +1,15 @@
 import { useIntl, FormattedMessage, defineMessage } from 'react-intl';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { useSprings, animated } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
 import classNames from 'classnames';
 import isString from 'lodash/isString';
 import shuffle from 'lodash/shuffle';
 import PropTypes from 'prop-types';
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { ScreenElement } from '@micromag/core/components';
 import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
@@ -74,10 +74,10 @@ var defaultProps = {
   active: true,
   className: null
 };
-var zzzz = function zzzz(_ref) {
+var GameSort = function GameSort(_ref) {
   var layout = _ref.layout,
     heading = _ref.heading,
-    items = _ref.items,
+    initialItems = _ref.items,
     spacing = _ref.spacing,
     itemsLayout = _ref.itemsLayout,
     itemsBoxStyle = _ref.itemsBoxStyle,
@@ -135,6 +135,13 @@ var zzzz = function zzzz(_ref) {
     footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
   var trackingEnabled = isView;
   var trackEvent = useTrackScreenEvent('game-sort');
+  var items = useMemo(function () {
+    return (initialItems || []).map(function (item, itemIndex) {
+      return _objectSpread({
+        id: itemIndex
+      }, item);
+    });
+  }, [initialItems]);
   var _useState = useState(isView ? shuffle(items || []) : items || []),
     _useState2 = _slicedToArray(_useState, 2),
     sortedItems = _useState2[0],
@@ -197,18 +204,25 @@ var zzzz = function zzzz(_ref) {
     var refs = currentItems.map(function (it) {
       return elementsRef.current[it.id] || null;
     });
-    var heights = refs.map(function (it) {
+    var initialRefs = (items || []).map(function (it) {
+      return elementsRef.current[it.id] || null;
+    });
+    var initialHeights = initialRefs.map(function (it) {
       var _it$getBoundingClient;
       return (it === null || it === void 0 || (_it$getBoundingClient = it.getBoundingClientRect()) === null || _it$getBoundingClient === void 0 ? void 0 : _it$getBoundingClient.height) || 0;
     });
+    var heights = refs.map(function (it) {
+      var _it$getBoundingClient2;
+      return (it === null || it === void 0 || (_it$getBoundingClient2 = it.getBoundingClientRect()) === null || _it$getBoundingClient2 === void 0 ? void 0 : _it$getBoundingClient2.height) || 0;
+    });
     // console.log('heights', heights);
     api.start(function (itemIndex) {
       var item = (items || [])[itemIndex] || null;
       var sortedIndex = currentItems.findIndex(function (it) {
         return it.id === item.id;
       });
-      var currentHeight = heights[itemIndex] || 0;
-      var currentY = heights.slice(0, itemIndex).reduce(function (acc, itemHeight) {
+      var currentHeight = initialHeights[itemIndex] || 0;
+      var currentY = initialHeights.slice(0, itemIndex).reduce(function (acc, itemHeight) {
         return acc + itemHeight;
       }, 0);
 
@@ -221,13 +235,15 @@ var zzzz = function zzzz(_ref) {
           immediate: true
         };
       }
-      if (itemIndex === sortedIndex) {
-        return {
-          y: "0%",
-          scale: 1,
-          immediate: initial
-        };
-      }
+
+      // if (itemIndex === sortedIndex) {
+      //     return {
+      //         y: `0%`,
+      //         scale: 1,
+      //         immediate: initial,
+      //     };
+      // }
+
       var newY = heights.slice(0, sortedIndex).reduce(function (acc, itemHeight) {
         return acc + itemHeight;
       }, 0);
@@ -282,8 +298,8 @@ var zzzz = function zzzz(_ref) {
       return elementsRef.current[it.id] || null;
     });
     var heights = refs.map(function (it) {
-      var _it$getBoundingClient2;
-      return (it === null || it === void 0 || (_it$getBoundingClient2 = it.getBoundingClientRect()) === null || _it$getBoundingClient2 === void 0 ? void 0 : _it$getBoundingClient2.height) || 0;
+      var _it$getBoundingClient3;
+      return (it === null || it === void 0 || (_it$getBoundingClient3 = it.getBoundingClientRect()) === null || _it$getBoundingClient3 === void 0 ? void 0 : _it$getBoundingClient3.height) || 0;
     });
     var ys = heights.map(function (itemHeight, heightIndex) {
       var endY = itemHeight + heights.slice(0, heightIndex).reduce(function (acc, h) {
@@ -505,8 +521,8 @@ var zzzz = function zzzz(_ref) {
     className: styles.background
   }) : null);
 };
-zzzz.propTypes = propTypes;
-zzzz.defaultProps = defaultProps;
+GameSort.propTypes = propTypes;
+GameSort.defaultProps = defaultProps;
 
 // import * as transforms from './transforms/index';
 
@@ -530,7 +546,7 @@ var definition = {
       "value": "Sort game"
     }]
   }),
-  component: zzzz,
+  component: GameSort,
   layouts: ['top', 'middle', 'bottom'],
   // transforms,
   fields: [{
@@ -763,4 +779,4 @@ var definition = {
   }]
 };
 
-export { zzzz as GameSortScreen, definition as default };
+export { GameSort as GameSortScreen, definition as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-game-sort",
-    "version": "0.3.737",
+    "version": "0.3.739",
     "private": false,
     "description": "",
     "keywords": [
@@ -87,5 +87,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "357ff7c95c7a25f250304c26a5d8a611a717d341"
+    "gitHead": "3808fe7b593aaed071a4cf42039c17e5a90cc596"
 }