@micromag/screen-game-sort 0.3.738 → 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],
@@ -514,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';
 
@@ -539,7 +546,7 @@ var definition = {
       "value": "Sort game"
     }]
   }),
-  component: zzzz,
+  component: GameSort,
   layouts: ['top', 'middle', 'bottom'],
   // transforms,
   fields: [{
@@ -772,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.738",
+    "version": "0.3.739",
     "private": false,
     "description": "",
     "keywords": [
@@ -87,5 +87,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "01cf2bc1d2bf4769cb33fb817304c6103e2b60f3"
+    "gitHead": "3808fe7b593aaed071a4cf42039c17e5a90cc596"
 }