@micromag/screen-game-sort 0.3.719 → 0.3.720
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/css/styles.css +1 -1
- package/es/index.js +10 -9
- package/package.json +2 -2
package/assets/css/styles.css
CHANGED
|
@@ -1 +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;-
|
|
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;-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
CHANGED
|
@@ -14,7 +14,7 @@ import { PropTypes as PropTypes$1 } from '@micromag/core';
|
|
|
14
14
|
import { ScreenElement } from '@micromag/core/components';
|
|
15
15
|
import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
|
|
16
16
|
import { useDimensionObserver, useTrackScreenEvent } from '@micromag/core/hooks';
|
|
17
|
-
import { isHeaderFilled, isFooterFilled, getFooterProps,
|
|
17
|
+
import { isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromText, getStyleFromBox } from '@micromag/core/utils';
|
|
18
18
|
import Background from '@micromag/element-background';
|
|
19
19
|
import Button from '@micromag/element-button';
|
|
20
20
|
import Container from '@micromag/element-container';
|
|
@@ -25,7 +25,7 @@ import Layout, { Spacer } from '@micromag/element-layout';
|
|
|
25
25
|
import Text from '@micromag/element-text';
|
|
26
26
|
import Visual from '@micromag/element-visual';
|
|
27
27
|
|
|
28
|
-
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","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"};
|
|
28
|
+
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"};
|
|
29
29
|
|
|
30
30
|
var propTypes = {
|
|
31
31
|
layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
|
|
@@ -154,6 +154,7 @@ var ShareScreen = function ShareScreen(_ref) {
|
|
|
154
154
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
155
155
|
resultsVisible = _useState8[0],
|
|
156
156
|
setResultsVisible = _useState8[1];
|
|
157
|
+
var dragEnabled = isView && active && current && validated === null;
|
|
157
158
|
useEffect(function () {
|
|
158
159
|
if (currentItemsRef.current !== items) {
|
|
159
160
|
var newSortedItems = isView ? shuffle(items || []) : items || [];
|
|
@@ -305,7 +306,7 @@ var ShareScreen = function ShareScreen(_ref) {
|
|
|
305
306
|
axis: 'y',
|
|
306
307
|
preventDefault: true,
|
|
307
308
|
filterTaps: true,
|
|
308
|
-
enabled:
|
|
309
|
+
enabled: dragEnabled
|
|
309
310
|
});
|
|
310
311
|
var onClickSubmit = useCallback(function () {
|
|
311
312
|
setValidated(items.map(function (it, itemIndex) {
|
|
@@ -328,7 +329,7 @@ var ShareScreen = function ShareScreen(_ref) {
|
|
|
328
329
|
};
|
|
329
330
|
}, [validated]);
|
|
330
331
|
return /*#__PURE__*/React.createElement("div", {
|
|
331
|
-
className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.sorted, initialSorted || !isView), styles.resultsVisible, resultsVisible), styles.isPlaceholder, isPlaceholder)]),
|
|
332
|
+
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)]),
|
|
332
333
|
"data-screen-ready": true
|
|
333
334
|
}, /*#__PURE__*/React.createElement(Container, {
|
|
334
335
|
width: width,
|
|
@@ -414,7 +415,7 @@ var ShareScreen = function ShareScreen(_ref) {
|
|
|
414
415
|
transform: y.to(function (yValue) {
|
|
415
416
|
return "translateY(".concat(yValue, ")");
|
|
416
417
|
})
|
|
417
|
-
},
|
|
418
|
+
}, getStyleFromText(itemsTextStyle)), getStyleFromText(labelTextStyle))
|
|
418
419
|
}, bind(itemIndex)), /*#__PURE__*/React.createElement(animated.div, {
|
|
419
420
|
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')]),
|
|
420
421
|
style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({
|
|
@@ -431,16 +432,16 @@ var ShareScreen = function ShareScreen(_ref) {
|
|
|
431
432
|
}) : null, label !== null || itemResults !== null && resultsVisible ? /*#__PURE__*/React.createElement("div", {
|
|
432
433
|
className: styles.buttonLabel
|
|
433
434
|
}, label !== null ? /*#__PURE__*/React.createElement(Text, Object.assign({}, finalLabel, {
|
|
434
|
-
|
|
435
|
+
textStyle: _objectSpread(_objectSpread({}, itemsTextStyle), labelTextStyle),
|
|
435
436
|
className: styles.label
|
|
436
437
|
})) : null, itemResults !== null && resultsVisible ? /*#__PURE__*/React.createElement(Text, Object.assign({}, itemResults, {
|
|
437
438
|
className: styles.buttonResults,
|
|
438
|
-
|
|
439
|
+
textStyle: _objectSpread(_objectSpread({}, itemsResultsTextStyle), itemResults.textStyle)
|
|
439
440
|
})) : null) : null));
|
|
440
|
-
})), resultsVisible && results !== null ? /*#__PURE__*/React.createElement(
|
|
441
|
+
})), resultsVisible && results !== null ? /*#__PURE__*/React.createElement("div", {
|
|
441
442
|
className: styles.results,
|
|
442
443
|
style: _objectSpread({}, getStyleFromBox(resultsBoxStyle))
|
|
443
|
-
})) : /*#__PURE__*/React.createElement(Button, {
|
|
444
|
+
}, /*#__PURE__*/React.createElement(Text, results)) : /*#__PURE__*/React.createElement(Button, {
|
|
444
445
|
className: styles.submitButton,
|
|
445
446
|
disabled: validated !== null,
|
|
446
447
|
type: "button",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-game-sort",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.720",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"access": "public",
|
|
88
88
|
"registry": "https://registry.npmjs.org/"
|
|
89
89
|
},
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "ed934ee1ce23cfdee83089f1cb4fffcb777381f0"
|
|
91
91
|
}
|