@micromag/screen-game-sort 0.3.718 → 0.3.720

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;-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}
+.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;-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-draggable .micromag-screen-game-sort-item{-ms-touch-action:none;touch-action:none}.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-buttonResults{-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}.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}.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-top:.3em}@-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}}

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, getStyleFromBox, getStyleFromText } from '@micromag/core/utils';
+import { isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromText, getStyleFromBox } 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","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 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","draggable":"micromag-screen-game-sort-draggable","buttonResults":"micromag-screen-game-sort-buttonResults","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","results":"micromag-screen-game-sort-results"};
 
 var propTypes = {
   layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
@@ -36,13 +36,14 @@ var propTypes = {
   itemsLayout: PropTypes.oneOf(['label-bottom', 'label-top', 'no-label', 'label-over']),
   itemsBoxStyle: PropTypes$1.boxStyle,
   itemsTextStyle: PropTypes$1.textStyle,
-  resultsTextStyle: PropTypes$1.textStyle,
+  itemsResultsTextStyle: 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,
+  results: PropTypes$1.textElement,
+  resultsBoxStyle: PropTypes$1.boxStyle,
   background: PropTypes$1.backgroundElement,
   header: PropTypes$1.header,
   footer: PropTypes$1.footer,
@@ -58,13 +59,14 @@ var defaultProps = {
   itemsLayout: 'label-bottom',
   itemsBoxStyle: null,
   itemsTextStyle: null,
-  resultsTextStyle: null,
+  itemsResultsTextStyle: null,
   validBoxStyle: null,
   invalidBoxStyle: null,
   submitBoxStyle: null,
   submitTextStyle: null,
   submitButtonLabel: null,
-  validatedButtonLabel: null,
+  results: null,
+  resultsBoxStyle: null,
   background: null,
   header: null,
   footer: null,
@@ -80,13 +82,14 @@ var ShareScreen = function ShareScreen(_ref) {
     itemsLayout = _ref.itemsLayout,
     itemsBoxStyle = _ref.itemsBoxStyle,
     itemsTextStyle = _ref.itemsTextStyle,
-    resultsTextStyle = _ref.resultsTextStyle,
+    itemsResultsTextStyle = _ref.itemsResultsTextStyle,
     validBoxStyle = _ref.validBoxStyle,
     invalidBoxStyle = _ref.invalidBoxStyle,
     submitBoxStyle = _ref.submitBoxStyle,
     submitTextStyle = _ref.submitTextStyle,
     submitButtonLabel = _ref.submitButtonLabel,
-    validatedButtonLabel = _ref.validatedButtonLabel,
+    results = _ref.results,
+    resultsBoxStyle = _ref.resultsBoxStyle,
     background = _ref.background,
     header = _ref.header,
     footer = _ref.footer,
@@ -151,6 +154,7 @@ var ShareScreen = function ShareScreen(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     resultsVisible = _useState8[0],
     setResultsVisible = _useState8[1];
+  var dragEnabled = isView && active && current && validated === null;
   useEffect(function () {
     if (currentItemsRef.current !== items) {
       var newSortedItems = isView ? shuffle(items || []) : items || [];
@@ -302,7 +306,7 @@ var ShareScreen = function ShareScreen(_ref) {
     axis: 'y',
     preventDefault: true,
     filterTaps: true,
-    enabled: isView && active && current && validated === null
+    enabled: dragEnabled
   });
   var onClickSubmit = useCallback(function () {
     setValidated(items.map(function (it, itemIndex) {
@@ -325,7 +329,7 @@ var ShareScreen = function ShareScreen(_ref) {
     };
   }, [validated]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.sorted, initialSorted || !isView), styles.resultsVisible, resultsVisible), styles.isPlaceholder, isPlaceholder)]),
+    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.sorted, initialSorted || !isView), styles.draggable, dragEnabled), styles.resultsVisible, resultsVisible), styles.isPlaceholder, isPlaceholder)]),
     "data-screen-ready": true
   }, /*#__PURE__*/React.createElement(Container, {
     width: width,
@@ -391,7 +395,7 @@ var ShareScreen = function ShareScreen(_ref) {
       _ref7$boxStyle = _ref7.boxStyle,
       boxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle,
       _ref7$results = _ref7.results,
-      results = _ref7$results === void 0 ? null : _ref7$results;
+      itemResults = _ref7$results === void 0 ? null : _ref7$results;
     var finalLabel = isString(itemLabel) ? {
       body: itemLabel
     } : itemLabel || {};
@@ -411,7 +415,7 @@ var ShareScreen = function ShareScreen(_ref) {
         transform: y.to(function (yValue) {
           return "translateY(".concat(yValue, ")");
         })
-      }, getStyleFromBox(itemsTextStyle)), getStyleFromText(labelTextStyle))
+      }, getStyleFromText(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({
@@ -425,28 +429,25 @@ var ShareScreen = function ShareScreen(_ref) {
       imageClassName: styles.thumbnail,
       media: visual,
       width: "auto"
-    }) : null, label !== null || results !== null && resultsVisible ? /*#__PURE__*/React.createElement("div", {
+    }) : null, label !== null || itemResults !== null && resultsVisible ? /*#__PURE__*/React.createElement("div", {
       className: styles.buttonLabel
     }, label !== null ? /*#__PURE__*/React.createElement(Text, Object.assign({}, finalLabel, {
-      style: _objectSpread(_objectSpread({}, getStyleFromBox(itemsTextStyle)), getStyleFromText(labelTextStyle)),
+      textStyle: _objectSpread(_objectSpread({}, itemsTextStyle), 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, itemResults !== null && resultsVisible ? /*#__PURE__*/React.createElement(Text, Object.assign({}, itemResults, {
+      className: styles.buttonResults,
+      textStyle: _objectSpread(_objectSpread({}, itemsResultsTextStyle), itemResults.textStyle)
     })) : null) : null));
-  })), /*#__PURE__*/React.createElement(Button, {
+  })), resultsVisible && results !== null ? /*#__PURE__*/React.createElement("div", {
+    className: styles.results,
+    style: _objectSpread({}, getStyleFromBox(resultsBoxStyle))
+  }, /*#__PURE__*/React.createElement(Text, results)) : /*#__PURE__*/React.createElement(Button, {
     className: styles.submitButton,
     disabled: validated !== null,
     type: "button",
     onClick: onClickSubmit,
     style: _objectSpread(_objectSpread({}, getStyleFromBox(submitBoxStyle)), getStyleFromText(submitTextStyle))
-  }, validated !== null ? validatedButtonLabel || intl.formatMessage({
-    id: "CTculh",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Validated"
-    }]
-  }) : submitButtonLabel || intl.formatMessage({
+  }, submitButtonLabel || intl.formatMessage({
     id: "IbZVf0",
     defaultMessage: [{
       "type": 0,
@@ -627,16 +628,6 @@ var definition = {
           "value": "Label"
         }]
       })
-    }, {
-      name: 'validatedButtonLabel',
-      type: 'text',
-      label: defineMessage({
-        id: "wROB6F",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Validated label"
-        }]
-      })
     }, {
       name: 'submitBoxStyle',
       type: 'box-style-form',
@@ -658,6 +649,41 @@ var definition = {
         }]
       })
     }]
+  }, {
+    label: defineMessage({
+      id: "jINZkT",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Results"
+      }]
+    }),
+    type: 'fields',
+    isList: true,
+    isSection: true,
+    fields: [{
+      name: 'results',
+      type: 'text-element',
+      theme: {
+        textStyle: 'text'
+      },
+      label: defineMessage({
+        id: "ZMS1Wv",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Text"
+        }]
+      })
+    }, {
+      name: 'resultsBoxStyle',
+      type: 'box-style-form',
+      label: defineMessage({
+        id: "p1pghO",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Box style"
+        }]
+      })
+    }]
   }, {
     name: 'background',
     type: 'background',

package/package.json

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