@micromag/screen-game-sort 0.3.716 → 0.3.718

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-game-sort-layout{scrollbar-width:none}.micromag-screen-game-sort-layout::-webkit-scrollbar{display:none}.micromag-screen-game-sort-button.micromag-screen-game-sort-layoutLabelOver .micromag-screen-game-sort-buttonLabel,.micromag-screen-game-sort-container .micromag-screen-game-sort-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-game-sort-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-game-sort-disabled.micromag-screen-game-sort-container{overflow:hidden;pointer-events:none}.micromag-screen-game-sort-hidden.micromag-screen-game-sort-container{display:none;visibility:hidden}.micromag-screen-game-sort-placeholder.micromag-screen-game-sort-container .micromag-screen-game-sort-content{padding:6px;position:relative}.micromag-screen-game-sort-emptyHeading,.micromag-screen-game-sort-emptyItems{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-game-sort-container .micromag-screen-game-sort-background{z-index:0}.micromag-screen-game-sort-container .micromag-screen-game-sort-content{z-index:1}.micromag-screen-game-sort-container .micromag-screen-game-sort-heading{font-size:1rem;font-weight:400;margin-bottom:.5em}.micromag-screen-game-sort-layout{overflow-x:hidden;overflow-y:auto;padding:10px}.micromag-screen-game-sort-emptyHeading,.micromag-screen-game-sort-emptyItems{margin:10px auto;padding:10px;width:100%}.micromag-screen-game-sort-emptyItems{padding:40px}.micromag-screen-game-sort-header{left:0;margin-top:0;position:absolute;top:0;width:100%;z-index:1}.micromag-screen-game-sort-footer{bottom:0;left:0;margin-top:0;position:absolute;width:100%}.micromag-screen-game-sort-items{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-screen-game-sort-item{border-radius:0;display:block;opacity:0;padding-bottom:.3em;-ms-touch-action:none;touch-action:none;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;width:100%}.micromag-screen-game-sort-sorted .micromag-screen-game-sort-item{opacity:1}.micromag-screen-game-sort-button{background-clip:padding-box;background-color:hsla(0,0%,100%,.1);display:block;padding:.5em;text-align:center;width:100%}.micromag-screen-game-sort-isEmpty .micromag-screen-game-sort-button{min-height:2em}.micromag-screen-game-sort-valid .micromag-screen-game-sort-button{background:rgba(0,255,0,.4)}.micromag-screen-game-sort-invalid .micromag-screen-game-sort-button{background:rgba(255,0,0,.4)}.micromag-screen-game-sort-button.micromag-screen-game-sort-layoutLabelTop{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-screen-game-sort-button.micromag-screen-game-sort-layoutNoLabel .micromag-screen-game-sort-buttonLabel{display:none}.micromag-screen-game-sort-button.micromag-screen-game-sort-layoutLabelOver .micromag-screen-game-sort-buttonVisual{position:relative;z-index:1}.micromag-screen-game-sort-button.micromag-screen-game-sort-layoutLabelOver .micromag-screen-game-sort-buttonLabel{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(28,28,28,0)),to(rgba(28,28,28,.75)));background-image:linear-gradient(180deg,rgba(28,28,28,0),rgba(28,28,28,.75));bottom:0;display:block;height:auto;top:auto;z-index:2}.micromag-screen-game-sort-submitButton{background:#fff;color:#000;margin-top:.3em;padding:.75em}.micromag-screen-game-sort-submitButton:disabled{opacity:.5}
+.micromag-screen-game-sort-layout{scrollbar-width:none}.micromag-screen-game-sort-layout::-webkit-scrollbar{display:none}.micromag-screen-game-sort-button.micromag-screen-game-sort-layoutLabelOver .micromag-screen-game-sort-buttonLabel,.micromag-screen-game-sort-container .micromag-screen-game-sort-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-game-sort-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-game-sort-disabled.micromag-screen-game-sort-container{overflow:hidden;pointer-events:none}.micromag-screen-game-sort-hidden.micromag-screen-game-sort-container{display:none;visibility:hidden}.micromag-screen-game-sort-placeholder.micromag-screen-game-sort-container .micromag-screen-game-sort-content{padding:6px;position:relative}.micromag-screen-game-sort-emptyHeading,.micromag-screen-game-sort-emptyItems{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-game-sort-container .micromag-screen-game-sort-background{z-index:0}.micromag-screen-game-sort-container .micromag-screen-game-sort-content{z-index:1}.micromag-screen-game-sort-container .micromag-screen-game-sort-heading{font-size:1rem;font-weight:400;margin-bottom:.5em}.micromag-screen-game-sort-layout{overflow-x:hidden;overflow-y:auto;padding:10px}.micromag-screen-game-sort-emptyHeading,.micromag-screen-game-sort-emptyItems{margin:10px auto;padding:10px;width:100%}.micromag-screen-game-sort-emptyItems{padding:40px}.micromag-screen-game-sort-header{left:0;margin-top:0;position:absolute;top:0;width:100%;z-index:1}.micromag-screen-game-sort-footer{bottom:0;left:0;margin-top:0;position:absolute;width:100%}.micromag-screen-game-sort-items{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-screen-game-sort-item{border-radius:0;display:block;opacity:0;-ms-touch-action:none;touch-action:none;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;width:100%}.micromag-screen-game-sort-item .micromag-screen-game-sort-button{margin-bottom:.3em}.micromag-screen-game-sort-sorted .micromag-screen-game-sort-item{opacity:1}.micromag-screen-game-sort-button{background-clip:padding-box;background-color:hsla(0,0%,100%,.1);display:block;padding:.5em;position:relative;text-align:center;width:100%}.micromag-screen-game-sort-button .micromag-screen-game-sort-buttonLabel{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.micromag-screen-game-sort-button .micromag-screen-game-sort-results{-webkit-animation:micromag-screen-game-sort-fadeIn .2s ease-in-out;animation:micromag-screen-game-sort-fadeIn .2s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;margin-left:auto;padding-left:2em}@-webkit-keyframes micromag-screen-game-sort-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes micromag-screen-game-sort-fadeIn{0%{opacity:0}to{opacity:1}}.micromag-screen-game-sort-button .micromag-screen-game-sort-label{-webkit-transition:text-align .2s ease-in-out;transition:text-align .2s ease-in-out}.micromag-screen-game-sort-isEmpty .micromag-screen-game-sort-button{min-height:2em}.micromag-screen-game-sort-valid .micromag-screen-game-sort-button{background:rgba(0,255,0,.4)}.micromag-screen-game-sort-invalid .micromag-screen-game-sort-button{background:rgba(255,0,0,.4)}.micromag-screen-game-sort-resultsVisible .micromag-screen-game-sort-button .micromag-screen-game-sort-label{text-align:left}.micromag-screen-game-sort-button.micromag-screen-game-sort-layoutLabelTop{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-screen-game-sort-button.micromag-screen-game-sort-layoutNoLabel .micromag-screen-game-sort-buttonLabel{display:none}.micromag-screen-game-sort-button.micromag-screen-game-sort-layoutLabelOver{min-height:2em}.micromag-screen-game-sort-button.micromag-screen-game-sort-layoutLabelOver .micromag-screen-game-sort-buttonVisual{position:relative;z-index:1}.micromag-screen-game-sort-button.micromag-screen-game-sort-layoutLabelOver .micromag-screen-game-sort-buttonLabel{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(28,28,28,0)),to(rgba(28,28,28,.75)));background-image:linear-gradient(180deg,rgba(28,28,28,0),rgba(28,28,28,.75));bottom:0;height:auto;padding:.5em;top:auto;z-index:2}.micromag-screen-game-sort-submitButton{background:#fff;color:#000;margin-top:.3em;padding:.75em}.micromag-screen-game-sort-submitButton:disabled{opacity:.5}

package/es/index.js

@@ -14,7 +14,7 @@ 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';
 import { useDimensionObserver, useTrackScreenEvent } from '@micromag/core/hooks';
-import { isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromText, getStyleFromBox } from '@micromag/core/utils';
+import { isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromBox, getStyleFromText } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
 import Button from '@micromag/element-button';
 import Container from '@micromag/element-container';
@@ -25,7 +25,7 @@ import Layout, { Spacer } from '@micromag/element-layout';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
 
-var styles = {"layout":"micromag-screen-game-sort-layout","button":"micromag-screen-game-sort-button","layoutLabelOver":"micromag-screen-game-sort-layoutLabelOver","buttonLabel":"micromag-screen-game-sort-buttonLabel","container":"micromag-screen-game-sort-container","background":"micromag-screen-game-sort-background","content":"micromag-screen-game-sort-content","emptyHeading":"micromag-screen-game-sort-emptyHeading","emptyItems":"micromag-screen-game-sort-emptyItems","heading":"micromag-screen-game-sort-heading","header":"micromag-screen-game-sort-header","footer":"micromag-screen-game-sort-footer","items":"micromag-screen-game-sort-items","item":"micromag-screen-game-sort-item","sorted":"micromag-screen-game-sort-sorted","isEmpty":"micromag-screen-game-sort-isEmpty","valid":"micromag-screen-game-sort-valid","invalid":"micromag-screen-game-sort-invalid","layoutLabelTop":"micromag-screen-game-sort-layoutLabelTop","layoutNoLabel":"micromag-screen-game-sort-layoutNoLabel","buttonVisual":"micromag-screen-game-sort-buttonVisual","submitButton":"micromag-screen-game-sort-submitButton"};
+var styles = {"layout":"micromag-screen-game-sort-layout","button":"micromag-screen-game-sort-button","layoutLabelOver":"micromag-screen-game-sort-layoutLabelOver","buttonLabel":"micromag-screen-game-sort-buttonLabel","container":"micromag-screen-game-sort-container","background":"micromag-screen-game-sort-background","content":"micromag-screen-game-sort-content","emptyHeading":"micromag-screen-game-sort-emptyHeading","emptyItems":"micromag-screen-game-sort-emptyItems","heading":"micromag-screen-game-sort-heading","header":"micromag-screen-game-sort-header","footer":"micromag-screen-game-sort-footer","items":"micromag-screen-game-sort-items","item":"micromag-screen-game-sort-item","sorted":"micromag-screen-game-sort-sorted","results":"micromag-screen-game-sort-results","label":"micromag-screen-game-sort-label","isEmpty":"micromag-screen-game-sort-isEmpty","valid":"micromag-screen-game-sort-valid","invalid":"micromag-screen-game-sort-invalid","resultsVisible":"micromag-screen-game-sort-resultsVisible","layoutLabelTop":"micromag-screen-game-sort-layoutLabelTop","layoutNoLabel":"micromag-screen-game-sort-layoutNoLabel","buttonVisual":"micromag-screen-game-sort-buttonVisual","submitButton":"micromag-screen-game-sort-submitButton"};
 
 var propTypes = {
   layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
@@ -33,12 +33,19 @@ var propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   items: PropTypes.array,
   spacing: PropTypes.number,
-  buttonStyles: PropTypes.shape({}),
+  itemsLayout: PropTypes.oneOf(['label-bottom', 'label-top', 'no-label', 'label-over']),
+  itemsBoxStyle: PropTypes$1.boxStyle,
+  itemsTextStyle: PropTypes$1.textStyle,
+  resultsTextStyle: PropTypes$1.textStyle,
+  validBoxStyle: PropTypes$1.boxStyle,
+  invalidBoxStyle: PropTypes$1.boxStyle,
+  submitBoxStyle: PropTypes$1.boxStyle,
+  submitTextStyle: PropTypes$1.textStyle,
+  submitButtonLabel: PropTypes.string,
+  validatedButtonLabel: PropTypes.string,
   background: PropTypes$1.backgroundElement,
   header: PropTypes$1.header,
   footer: PropTypes$1.footer,
-  id: PropTypes.string,
-  index: PropTypes.number,
   current: PropTypes.bool,
   active: PropTypes.bool,
   className: PropTypes.string
@@ -47,13 +54,20 @@ var defaultProps = {
   layout: 'top',
   heading: null,
   items: null,
-  buttonStyles: null,
   spacing: 20,
+  itemsLayout: 'label-bottom',
+  itemsBoxStyle: null,
+  itemsTextStyle: null,
+  resultsTextStyle: null,
+  validBoxStyle: null,
+  invalidBoxStyle: null,
+  submitBoxStyle: null,
+  submitTextStyle: null,
+  submitButtonLabel: null,
+  validatedButtonLabel: null,
   background: null,
   header: null,
   footer: null,
-  id: null,
-  index: null,
   current: true,
   active: true,
   className: null
@@ -62,14 +76,21 @@ var ShareScreen = function ShareScreen(_ref) {
   var layout = _ref.layout,
     heading = _ref.heading,
     items = _ref.items,
-    buttonStyles = _ref.buttonStyles,
     spacing = _ref.spacing,
+    itemsLayout = _ref.itemsLayout,
+    itemsBoxStyle = _ref.itemsBoxStyle,
+    itemsTextStyle = _ref.itemsTextStyle,
+    resultsTextStyle = _ref.resultsTextStyle,
+    validBoxStyle = _ref.validBoxStyle,
+    invalidBoxStyle = _ref.invalidBoxStyle,
+    submitBoxStyle = _ref.submitBoxStyle,
+    submitTextStyle = _ref.submitTextStyle,
+    submitButtonLabel = _ref.submitButtonLabel,
+    validatedButtonLabel = _ref.validatedButtonLabel,
     background = _ref.background,
     header = _ref.header,
-    footer = _ref.footer;
-    _ref.id;
-    _ref.index;
-    var current = _ref.current,
+    footer = _ref.footer,
+    current = _ref.current,
     active = _ref.active,
     className = _ref.className;
   var intl = useIntl();
@@ -101,23 +122,6 @@ var ShareScreen = function ShareScreen(_ref) {
     openWebView: openWebView,
     isPreview: isPreview
   });
-  var _ref2 = buttonStyles || {},
-    _ref2$layout = _ref2.layout,
-    buttonLayout = _ref2$layout === void 0 ? null : _ref2$layout,
-    _ref2$textStyle = _ref2.textStyle,
-    buttonTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle,
-    _ref2$boxStyle = _ref2.boxStyle,
-    buttonBoxStyle = _ref2$boxStyle === void 0 ? null : _ref2$boxStyle,
-    _ref2$validBoxStyle = _ref2.validBoxStyle,
-    validBoxStyle = _ref2$validBoxStyle === void 0 ? null : _ref2$validBoxStyle,
-    _ref2$invalidBoxStyle = _ref2.invalidBoxStyle,
-    invalidBoxStyle = _ref2$invalidBoxStyle === void 0 ? null : _ref2$invalidBoxStyle,
-    _ref2$submitBoxStyle = _ref2.submitBoxStyle,
-    submitBoxStyle = _ref2$submitBoxStyle === void 0 ? null : _ref2$submitBoxStyle,
-    _ref2$submitButtonLab = _ref2.submitButtonLabel,
-    submitButtonLabel = _ref2$submitButtonLab === void 0 ? null : _ref2$submitButtonLab,
-    _ref2$validatedButton = _ref2.validatedButtonLabel,
-    validatedButtonLabel = _ref2$validatedButton === void 0 ? null : _ref2$validatedButton;
   var _useDimensionObserver = useDimensionObserver(),
     headerRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.height,
@@ -133,6 +137,20 @@ var ShareScreen = function ShareScreen(_ref) {
     setSortedItems = _useState2[1];
   var sortedItemsRef = useRef(sortedItems);
   var currentItemsRef = useRef(items);
+  var elementsRef = useRef([]);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    initialSorted = _useState4[0],
+    setInitialSorted = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    validated = _useState6[0],
+    setValidated = _useState6[1];
+  var initialSortedItemsRef = useRef(sortedItems);
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    resultsVisible = _useState8[0],
+    setResultsVisible = _useState8[1];
   useEffect(function () {
     if (currentItemsRef.current !== items) {
       var newSortedItems = isView ? shuffle(items || []) : items || [];
@@ -165,18 +183,13 @@ var ShareScreen = function ShareScreen(_ref) {
     _useSprings2 = _slicedToArray(_useSprings, 2),
     springs = _useSprings2[0],
     api = _useSprings2[1];
-  var itemsRef = useRef([]);
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    initialSorted = _useState4[0],
-    setInitialSorted = _useState4[1];
   var updateSpring = useCallback(function (currentItems) {
-    var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      dragItem = _ref3.dragItem,
-      dragY = _ref3.dragY,
-      _ref3$initial = _ref3.initial,
-      initial = _ref3$initial === void 0 ? false : _ref3$initial;
-    var heights = itemsRef.current.map(function (item) {
+    var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      dragItem = _ref2.dragItem,
+      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;
     });
@@ -221,7 +234,6 @@ var ShareScreen = function ShareScreen(_ref) {
       setInitialSorted(true);
     }
   }, [api]);
-  var initialSortedItemsRef = useRef(sortedItems);
   useEffect(function () {
     if (!isView) {
       return;
@@ -230,17 +242,13 @@ var ShareScreen = function ShareScreen(_ref) {
       initial: initialSortedItemsRef.current === sortedItems
     });
   }, [sortedItems]);
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    validated = _useState6[0],
-    setValidated = _useState6[1];
-  var bind = useDrag(function (_ref4) {
-    var _ref4$args = _slicedToArray(_ref4.args, 1),
-      itemIndex = _ref4$args[0],
-      dragActive = _ref4.active,
-      _ref4$movement = _slicedToArray(_ref4.movement, 2),
-      movementY = _ref4$movement[1],
-      tap = _ref4.tap;
+  var bind = useDrag(function (_ref3) {
+    var _ref3$args = _slicedToArray(_ref3.args, 1),
+      itemIndex = _ref3$args[0],
+      dragActive = _ref3.active,
+      _ref3$movement = _slicedToArray(_ref3.movement, 2),
+      movementY = _ref3$movement[1],
+      tap = _ref3.tap;
     var item = items[itemIndex] || {};
     if (tap) {
       var currentIndex = sortedItems.findIndex(function (it) {
@@ -254,29 +262,29 @@ var ShareScreen = function ShareScreen(_ref) {
       return it === item;
     });
     var heights = sortedItems.map(function (sortedItem) {
-      var _itemsRef$current$ind;
-      var index = items.findIndex(function (it) {
+      var _elementsRef$current$;
+      var elementIndex = items.findIndex(function (it) {
         return it === sortedItem;
       });
-      return ((_itemsRef$current$ind = itemsRef.current[index]) === null || _itemsRef$current$ind === void 0 || (_itemsRef$current$ind = _itemsRef$current$ind.getBoundingClientRect()) === null || _itemsRef$current$ind === void 0 ? void 0 : _itemsRef$current$ind.height) || 0;
+      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;
     });
-    var ys = heights.map(function (itemHeight, index) {
-      var endY = itemHeight + heights.slice(0, index).reduce(function (acc, h) {
+    var ys = heights.map(function (itemHeight, heightIndex) {
+      var endY = itemHeight + heights.slice(0, heightIndex).reduce(function (acc, h) {
         return acc + h;
       }, 0);
       return {
-        isStart: index === 0,
-        isEnd: index === heights.length - 1,
+        isStart: heightIndex === 0,
+        isEnd: heightIndex === heights.length - 1,
         start: endY - itemHeight,
         end: endY
       };
     });
     var newY = ys[sortedIndex].end - heights[sortedIndex] / 2 + movementY;
-    var newIndex = ys.findIndex(function (_ref5) {
-      var isStart = _ref5.isStart,
-        isEnd = _ref5.isEnd,
-        start = _ref5.start,
-        end = _ref5.end;
+    var newIndex = ys.findIndex(function (_ref4) {
+      var isStart = _ref4.isStart,
+        isEnd = _ref4.isEnd,
+        start = _ref4.start,
+        end = _ref4.end;
       return (isStart || newY >= start) && (isEnd || newY < end);
     });
     if (dragActive) {
@@ -290,29 +298,18 @@ var ShareScreen = function ShareScreen(_ref) {
       setSortedItems(sortedItemsRef.current);
       // updateIndex(item, newIndex !== -1 ? newIndex : sortedIndex);
     }
-    // console.log({
-    //     movementY,
-    //     newY,
-    //     itemIndex,
-    //     sortedIndex,
-    //     newIndex,
-    //     ys,
-    //     items: sortedItemsRef.current.map(({ label }) => label),
-    // });
   }, {
     axis: 'y',
     preventDefault: true,
     filterTaps: true,
     enabled: isView && active && current && validated === null
-    // preventScroll: 250,
-    // preventScrollAxis: 'y',
   });
   var onClickSubmit = useCallback(function () {
-    setValidated(items.map(function (it, index) {
+    setValidated(items.map(function (it, itemIndex) {
       var sortedIndex = sortedItems.findIndex(function (sortedItem) {
         return sortedItem === it;
       });
-      return index === sortedIndex;
+      return itemIndex === sortedIndex;
     }));
   }, [items, sortedItems]);
   useEffect(function () {
@@ -321,13 +318,14 @@ var ShareScreen = function ShareScreen(_ref) {
     }
     var timeout = setTimeout(function () {
       setSortedItems(items);
-    }, 2000);
+      setResultsVisible(true);
+    }, 1000);
     return function () {
       clearTimeout(timeout);
     };
   }, [validated]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.sorted, initialSorted || !isView), styles.isPlaceholder, isPlaceholder)]),
+    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.sorted, initialSorted || !isView), styles.resultsVisible, resultsVisible), styles.isPlaceholder, isPlaceholder)]),
     "data-screen-ready": true
   }, /*#__PURE__*/React.createElement(Container, {
     width: width,
@@ -382,72 +380,79 @@ var ShareScreen = function ShareScreen(_ref) {
     className: styles.items,
     emptyClassName: styles.emptyItems,
     isEmpty: (items || []).length === 0
-  }, springs.map(function (props, itemIndex) {
+  }, springs.map(function (_ref6, itemIndex) {
+    var y = _ref6.y,
+      scale = _ref6.scale;
     var item = items[itemIndex] || {};
     var _ref7 = item || {},
       _ref7$visual = _ref7.visual,
       visual = _ref7$visual === void 0 ? null : _ref7$visual,
       itemLabel = _ref7.label,
       _ref7$boxStyle = _ref7.boxStyle,
-      boxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle;
+      boxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle,
+      _ref7$results = _ref7.results,
+      results = _ref7$results === void 0 ? null : _ref7$results;
     var finalLabel = isString(itemLabel) ? {
       body: itemLabel
     } : itemLabel || {};
     var _ref8 = finalLabel || {},
       _ref8$body = _ref8.body,
       label = _ref8$body === void 0 ? null : _ref8$body,
-      _ref8$textStyle = _ref8.textStyle,
-      textStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
+      labelTextStyle = _ref8.textStyle;
     var isEmpty = label === null && visual === null;
     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)]),
       ref: function ref(_ref1) {
-        itemsRef.current[itemIndex] = _ref1;
-      }
-    }, bind(itemIndex), {
-      style: _objectSpread(_objectSpread(_objectSpread({}, props), getStyleFromText(buttonTextStyle)), getStyleFromText(textStyle))
-      // onClick={(e) => onItemClick(e, item)}
-    }), /*#__PURE__*/React.createElement("div", {
-      className: classNames([styles.button, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), styles.layoutLabelTop, buttonLayout === 'label-top'), styles.layoutNoLabel, buttonLayout === 'no-label'), styles.layoutLabelOver, buttonLayout === 'label-over')]),
-      style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(buttonBoxStyle)), getStyleFromBox(boxStyle)), getStyleFromBox(validated && isValid ? validBoxStyle : null)), getStyleFromBox(validated && !isValid ? invalidBoxStyle : null))
+        elementsRef.current[itemIndex] = _ref1;
+      },
+      style: _objectSpread(_objectSpread({
+        transform: y.to(function (yValue) {
+          return "translateY(".concat(yValue, ")");
+        })
+      }, getStyleFromBox(itemsTextStyle)), getStyleFromText(labelTextStyle))
+    }, bind(itemIndex)), /*#__PURE__*/React.createElement(animated.div, {
+      className: classNames([styles.button, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.layoutLabelBottom, itemsLayout === 'label-bottom'), styles.layoutLabelTop, itemsLayout === 'label-top'), styles.layoutNoLabel, itemsLayout === 'no-label'), styles.layoutLabelOver, itemsLayout === 'label-over')]),
+      style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+        transform: scale.to(function (scaleValue) {
+          return "scale(".concat(scaleValue, ")");
+        })
+      }, getStyleFromBox(itemsBoxStyle)), getStyleFromBox(boxStyle)), getStyleFromBox(validated && isValid ? validBoxStyle : null)), getStyleFromBox(validated && !isValid ? invalidBoxStyle : null))
       // onClick={(e) => onItemClick(e, item, itemIndex)}
     }, visual !== null ? /*#__PURE__*/React.createElement(Visual, {
       className: styles.buttonVisual,
       imageClassName: styles.thumbnail,
       media: visual,
       width: "auto"
-    }) : null, label !== null ? /*#__PURE__*/React.createElement(Text, Object.assign({
+    }) : null, label !== null || results !== null && resultsVisible ? /*#__PURE__*/React.createElement("div", {
       className: styles.buttonLabel
-    }, finalLabel, {
-      textStyle: _objectSpread(_objectSpread({}, getStyleFromText(buttonTextStyle)), getStyleFromText(textStyle))
-    })) : null));
+    }, label !== null ? /*#__PURE__*/React.createElement(Text, Object.assign({}, finalLabel, {
+      style: _objectSpread(_objectSpread({}, getStyleFromBox(itemsTextStyle)), getStyleFromText(labelTextStyle)),
+      className: styles.label
+    })) : null, results !== null && resultsVisible ? /*#__PURE__*/React.createElement(Text, Object.assign({}, results, {
+      className: styles.results,
+      style: _objectSpread(_objectSpread({}, getStyleFromText(resultsTextStyle)), getStyleFromText(results.textStyle || null))
+    })) : null) : null));
   })), /*#__PURE__*/React.createElement(Button, {
     className: styles.submitButton,
     disabled: validated !== null,
     type: "button",
     onClick: onClickSubmit,
-    style: getStyleFromBox(submitBoxStyle)
-  }, validated !== null ? /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: styles.buttonLabel,
-    body: intl.formatMessage({
-      id: "CTculh",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Validated"
-      }]
-    })
-  }, validatedButtonLabel)) : /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: styles.buttonLabel,
-    body: intl.formatMessage({
-      id: "IbZVf0",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Submit"
-      }]
-    })
-  }, submitButtonLabel))), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread(_objectSpread({}, getStyleFromBox(submitBoxStyle)), getStyleFromText(submitTextStyle))
+  }, validated !== null ? validatedButtonLabel || intl.formatMessage({
+    id: "CTculh",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Validated"
+    }]
+  }) : submitButtonLabel || intl.formatMessage({
+    id: "IbZVf0",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Submit"
+    }]
+  })), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
     className: styles.footer,
     ref: footerRef,
     style: {
@@ -520,24 +525,28 @@ var definition = {
     })
   }, {
     name: 'items',
-    type: 'buttons',
+    type: 'game-sort-items',
     label: defineMessage({
-      id: "l5uLMd",
+      id: "fbUW2U",
       defaultMessage: [{
         "type": 0,
-        "value": "Buttons"
+        "value": "Items"
       }]
     }),
-    itemsProps: {
-      excludedFields: ['url', 'inWebView']
-    },
     isSection: true
   }, {
-    name: 'buttonStyles',
+    label: defineMessage({
+      id: "83959F",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Items style"
+      }]
+    }),
     type: 'fields',
     isList: true,
+    isSection: true,
     fields: [{
-      name: 'layout',
+      name: 'itemsLayout',
       type: 'button-layout',
       label: defineMessage({
         id: "OPxJx/",
@@ -547,7 +556,7 @@ var definition = {
         }]
       })
     }, {
-      name: 'textStyle',
+      name: 'itemsTextStyle',
       type: 'text-style-form',
       label: defineMessage({
         id: "rzXCu2",
@@ -557,73 +566,95 @@ var definition = {
         }]
       })
     }, {
-      name: 'boxStyle',
+      name: 'resultsTextStyle',
+      type: 'text-style-form',
+      label: defineMessage({
+        id: "ex1Bgx",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Results style"
+        }]
+      })
+    }, {
+      name: 'itemsBoxStyle',
       type: 'box-style-form',
       label: defineMessage({
-        id: "rlOUqL",
+        id: "p1pghO",
         defaultMessage: [{
           "type": 0,
-          "value": "Buttons style"
+          "value": "Box style"
         }]
       })
     }, {
       name: 'validBoxStyle',
       type: 'box-style-form',
       label: defineMessage({
-        id: "wJm7+k",
+        id: "ao5VYd",
         defaultMessage: [{
           "type": 0,
-          "value": "Valid buttons style"
+          "value": "Valid box style"
         }]
       })
     }, {
       name: 'invalidBoxStyle',
       type: 'box-style-form',
       label: defineMessage({
-        id: "0N19DP",
+        id: "JLYWNN",
         defaultMessage: [{
           "type": 0,
-          "value": "Invalid buttons style"
+          "value": "Invalid box style"
         }]
       })
-    }, {
-      name: 'submitBoxStyle',
-      type: 'box-style-form',
+    }]
+  }, {
+    label: defineMessage({
+      id: "WjigmA",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Submit button"
+      }]
+    }),
+    type: 'fields',
+    isList: true,
+    isSection: true,
+    fields: [{
+      name: 'submitButtonLabel',
+      type: 'text',
       label: defineMessage({
-        id: "9QP1Kj",
+        id: "Cg3LGu",
         defaultMessage: [{
           "type": 0,
-          "value": "Submit button style"
+          "value": "Label"
         }]
       })
     }, {
-      name: 'validatedBoxStyle',
-      type: 'box-style-form',
+      name: 'validatedButtonLabel',
+      type: 'text',
       label: defineMessage({
-        id: "6EF9gy",
+        id: "wROB6F",
         defaultMessage: [{
           "type": 0,
-          "value": "Validated button style"
+          "value": "Validated label"
         }]
       })
     }, {
-      name: 'submitButtonLabel',
-      type: 'text-element',
+      name: 'submitBoxStyle',
+      type: 'box-style-form',
       label: defineMessage({
-        id: "Vuj0dX",
+        id: "nno1Pq",
         defaultMessage: [{
           "type": 0,
-          "value": "Submit button label"
+          "value": "Button style"
         }]
       })
     }, {
-      name: 'validatedButtonLabel',
-      type: 'text-element',
+      name: 'submitTextStyle',
+      type: 'box-style-form',
       label: defineMessage({
-        id: "tbrIgP",
+        id: "OEckOD",
         defaultMessage: [{
           "type": 0,
-          "value": "Validated button label"
+          "value": "Text style"
         }]
       })
     }]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-game-sort",
-    "version": "0.3.716",
+    "version": "0.3.718",
     "private": false,
     "description": "",
     "keywords": [
@@ -87,5 +87,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "194b2ca0d8d059fb858b7d604b95b896d9cefd9b"
+    "gitHead": "5b6ec7e1a49f10cd456c1ace4f3d0e90e6730a13"
 }