@micromag/screen-game-sort 0.3.736 → 0.3.738

package/es/index.js

@@ -74,7 +74,7 @@ var defaultProps = {
   active: true,
   className: null
 };
-var ShareScreen = function ShareScreen(_ref) {
+var zzzz = function zzzz(_ref) {
   var layout = _ref.layout,
     heading = _ref.heading,
     items = _ref.items,
@@ -141,7 +141,7 @@ var ShareScreen = function ShareScreen(_ref) {
     setSortedItems = _useState2[1];
   var sortedItemsRef = useRef(sortedItems);
   var currentItemsRef = useRef(items);
-  var elementsRef = useRef([]);
+  var elementsRef = useRef({});
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     initialSorted = _useState4[0],
@@ -194,37 +194,49 @@ var ShareScreen = function ShareScreen(_ref) {
       dragY = _ref2.dragY,
       _ref2$initial = _ref2.initial,
       initial = _ref2$initial === void 0 ? false : _ref2$initial;
-    var heights = elementsRef.current.map(function (item) {
-      var _item$getBoundingClie;
-      return (item === null || item === void 0 || (_item$getBoundingClie = item.getBoundingClientRect()) === null || _item$getBoundingClie === void 0 ? void 0 : _item$getBoundingClie.height) || 0;
+    var refs = currentItems.map(function (it) {
+      return elementsRef.current[it.id] || null;
     });
+    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 === item;
+        return it.id === item.id;
       });
-      var currentHeight = heights[itemIndex] || 0;
+      var currentHeight = initialHeights[itemIndex] || 0;
+      var currentY = initialHeights.slice(0, itemIndex).reduce(function (acc, itemHeight) {
+        return acc + itemHeight;
+      }, 0);
+
+      // This works
       if (item === dragItem) {
-        var _currentY = heights.slice(0, itemIndex).reduce(function (acc, itemHeight) {
-          return acc + itemHeight;
-        }, 0);
-        var _deltaY = dragY - _currentY;
+        var _deltaY = dragY - currentY;
         return {
           y: "".concat(_deltaY / currentHeight * 100, "%"),
           scale: 1.02,
           immediate: true
         };
       }
-      if (itemIndex === sortedIndex) {
-        return {
-          y: "0%",
-          scale: 1,
-          immediate: initial
-        };
-      }
-      var currentY = heights.slice(0, itemIndex).reduce(function (acc, itemHeight) {
-        return acc + itemHeight;
-      }, 0);
+
+      // if (itemIndex === sortedIndex) {
+      //     return {
+      //         y: `0%`,
+      //         scale: 1,
+      //         immediate: initial,
+      //     };
+      // }
+
       var newY = heights.slice(0, sortedIndex).reduce(function (acc, itemHeight) {
         return acc + itemHeight;
       }, 0);
@@ -269,12 +281,18 @@ var ShareScreen = function ShareScreen(_ref) {
     var sortedIndex = sortedItems.findIndex(function (it) {
       return it === item;
     });
-    var heights = sortedItems.map(function (sortedItem) {
-      var _elementsRef$current$;
-      var elementIndex = items.findIndex(function (it) {
-        return it === sortedItem;
-      });
-      return ((_elementsRef$current$ = elementsRef.current[elementIndex]) === null || _elementsRef$current$ === void 0 || (_elementsRef$current$ = _elementsRef$current$.getBoundingClientRect()) === null || _elementsRef$current$ === void 0 ? void 0 : _elementsRef$current$.height) || 0;
+
+    // const heights = sortedItems.map((sortedItem) => {
+    //     const elementIndex = items.findIndex((it) => it === sortedItem);
+    //     return elementsRef.current[elementIndex]?.getBoundingClientRect()?.height || 0;
+    // });
+
+    var refs = sortedItems.map(function (it) {
+      return elementsRef.current[it.id] || null;
+    });
+    var heights = refs.map(function (it) {
+      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) {
@@ -406,6 +424,8 @@ var ShareScreen = function ShareScreen(_ref) {
       scale = _ref6.scale;
     var item = items[itemIndex] || {};
     var _ref7 = item || {},
+      _ref7$id = _ref7.id,
+      id = _ref7$id === void 0 ? null : _ref7$id,
       _ref7$visual = _ref7.visual,
       visual = _ref7$visual === void 0 ? null : _ref7$visual,
       itemLabel = _ref7.label,
@@ -428,7 +448,7 @@ var ShareScreen = function ShareScreen(_ref) {
         clickable: dragEnabled
       }, styles.isEmpty, isEmpty), styles.valid, validated !== null && isValid), styles.invalid, validated !== null && !isValid)]),
       ref: function ref(_ref1) {
-        elementsRef.current[itemIndex] = _ref1;
+        elementsRef.current[id] = _ref1;
       },
       style: _objectSpread(_objectSpread({
         transform: y.to(function (yValue) {
@@ -494,8 +514,8 @@ var ShareScreen = function ShareScreen(_ref) {
     className: styles.background
   }) : null);
 };
-ShareScreen.propTypes = propTypes;
-ShareScreen.defaultProps = defaultProps;
+zzzz.propTypes = propTypes;
+zzzz.defaultProps = defaultProps;
 
 // import * as transforms from './transforms/index';
 
@@ -519,7 +539,7 @@ var definition = {
       "value": "Sort game"
     }]
   }),
-  component: ShareScreen,
+  component: zzzz,
   layouts: ['top', 'middle', 'bottom'],
   // transforms,
   fields: [{
@@ -752,4 +772,4 @@ var definition = {
   }]
 };
 
-export { ShareScreen as GameSortScreen, definition as default };
+export { zzzz as GameSortScreen, definition as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-game-sort",
-    "version": "0.3.736",
+    "version": "0.3.738",
     "private": false,
     "description": "",
     "keywords": [
@@ -87,5 +87,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "77bd0bf6941418463c0f7bbb68bf9b20379c5c55"
+    "gitHead": "01cf2bc1d2bf4769cb33fb817304c6103e2b60f3"
 }