@micromag/screen-game-sort 0.3.739 → 0.3.741
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 +19 -10
- 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{
|
|
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{position:relative;-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-itemInner{padding-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!important}.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
|
@@ -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","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"};
|
|
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","itemInner":"micromag-screen-game-sort-itemInner","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']),
|
|
@@ -133,16 +133,21 @@ var GameSort = function GameSort(_ref) {
|
|
|
133
133
|
footerRef = _useDimensionObserver3.ref,
|
|
134
134
|
_useDimensionObserver4 = _useDimensionObserver3.height,
|
|
135
135
|
footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
|
|
136
|
+
var _useDimensionObserver5 = useDimensionObserver(),
|
|
137
|
+
itemsRef = _useDimensionObserver5.ref,
|
|
138
|
+
_useDimensionObserver6 = _useDimensionObserver5.height,
|
|
139
|
+
itemsHeight = _useDimensionObserver6 === void 0 ? 0 : _useDimensionObserver6;
|
|
136
140
|
var trackingEnabled = isView;
|
|
137
141
|
var trackEvent = useTrackScreenEvent('game-sort');
|
|
138
142
|
var items = useMemo(function () {
|
|
139
143
|
return (initialItems || []).map(function (item, itemIndex) {
|
|
140
144
|
return _objectSpread({
|
|
141
|
-
id: itemIndex
|
|
145
|
+
id: "item-".concat(itemIndex)
|
|
142
146
|
}, item);
|
|
143
147
|
});
|
|
144
148
|
}, [initialItems]);
|
|
145
|
-
var
|
|
149
|
+
var shouldShuffle = isView;
|
|
150
|
+
var _useState = useState(shouldShuffle ? shuffle(items || []) : items || []),
|
|
146
151
|
_useState2 = _slicedToArray(_useState, 2),
|
|
147
152
|
sortedItems = _useState2[0],
|
|
148
153
|
setSortedItems = _useState2[1];
|
|
@@ -165,7 +170,7 @@ var GameSort = function GameSort(_ref) {
|
|
|
165
170
|
var dragEnabled = isView && active && current && validated === null;
|
|
166
171
|
useEffect(function () {
|
|
167
172
|
if (currentItemsRef.current !== items && !isView) {
|
|
168
|
-
var newSortedItems =
|
|
173
|
+
var newSortedItems = shouldShuffle ? shuffle(items || []) : items || [];
|
|
169
174
|
setSortedItems(newSortedItems);
|
|
170
175
|
sortedItemsRef.current = newSortedItems;
|
|
171
176
|
currentItemsRef.current = items;
|
|
@@ -265,7 +270,7 @@ var GameSort = function GameSort(_ref) {
|
|
|
265
270
|
updateSpring(sortedItems, {
|
|
266
271
|
initial: initialSortedItemsRef.current === sortedItems
|
|
267
272
|
});
|
|
268
|
-
}, [sortedItems]);
|
|
273
|
+
}, [sortedItems, itemsHeight]);
|
|
269
274
|
var bind = useDrag(function (_ref3) {
|
|
270
275
|
var _ref3$args = _slicedToArray(_ref3.args, 1),
|
|
271
276
|
itemIndex = _ref3$args[0],
|
|
@@ -410,7 +415,10 @@ var GameSort = function GameSort(_ref) {
|
|
|
410
415
|
isEmpty: !heading || (heading === null || heading === void 0 ? void 0 : heading.body) === ''
|
|
411
416
|
}, heading ? /*#__PURE__*/React.createElement(Heading, Object.assign({
|
|
412
417
|
className: classNames([styles.heading])
|
|
413
|
-
}, heading)) : null), /*#__PURE__*/React.createElement(
|
|
418
|
+
}, heading)) : null), /*#__PURE__*/React.createElement("div", {
|
|
419
|
+
className: styles.items,
|
|
420
|
+
ref: itemsRef
|
|
421
|
+
}, /*#__PURE__*/React.createElement(Spacer, {
|
|
414
422
|
key: "spacer",
|
|
415
423
|
size: 5
|
|
416
424
|
}), /*#__PURE__*/React.createElement(ScreenElement, {
|
|
@@ -423,7 +431,6 @@ var GameSort = function GameSort(_ref) {
|
|
|
423
431
|
"value": "Buttons"
|
|
424
432
|
}]
|
|
425
433
|
}),
|
|
426
|
-
className: styles.items,
|
|
427
434
|
emptyClassName: styles.emptyItems,
|
|
428
435
|
isEmpty: (items || []).length === 0
|
|
429
436
|
}, springs.map(function (_ref6, itemIndex) {
|
|
@@ -462,7 +469,9 @@ var GameSort = function GameSort(_ref) {
|
|
|
462
469
|
return "translateY(".concat(yValue, ")");
|
|
463
470
|
})
|
|
464
471
|
}, getStyleFromText(itemsTextStyle)), getStyleFromText(labelTextStyle))
|
|
465
|
-
}, bind(itemIndex)), /*#__PURE__*/React.createElement(
|
|
472
|
+
}, bind(itemIndex)), /*#__PURE__*/React.createElement("div", {
|
|
473
|
+
className: styles.itemInner
|
|
474
|
+
}, /*#__PURE__*/React.createElement(animated.div, {
|
|
466
475
|
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')]),
|
|
467
476
|
style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({
|
|
468
477
|
transform: scale.to(function (scaleValue) {
|
|
@@ -483,8 +492,8 @@ var GameSort = function GameSort(_ref) {
|
|
|
483
492
|
})) : null, itemResults !== null && resultsVisible ? /*#__PURE__*/React.createElement(Text, Object.assign({}, itemResults, {
|
|
484
493
|
className: styles.buttonResults,
|
|
485
494
|
textStyle: _objectSpread(_objectSpread({}, itemsResultsTextStyle), itemResults.textStyle)
|
|
486
|
-
})) : null) : null));
|
|
487
|
-
})), resultsVisible && results !== null ? /*#__PURE__*/React.createElement("div", {
|
|
495
|
+
})) : null) : null)));
|
|
496
|
+
}))), resultsVisible && results !== null ? /*#__PURE__*/React.createElement("div", {
|
|
488
497
|
className: styles.results,
|
|
489
498
|
style: _objectSpread({}, getStyleFromBox(resultsBoxStyle))
|
|
490
499
|
}, /*#__PURE__*/React.createElement(Text, results)) : /*#__PURE__*/React.createElement(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.741",
|
|
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": "ed43809bc288996ae1b0111ec234909c0cb0d2f0"
|
|
91
91
|
}
|