@micromag/screen-game-sort 0.3.719 → 0.3.721
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 +31 -13
- 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']),
|
|
@@ -133,7 +133,8 @@ var ShareScreen = function ShareScreen(_ref) {
|
|
|
133
133
|
footerRef = _useDimensionObserver3.ref,
|
|
134
134
|
_useDimensionObserver4 = _useDimensionObserver3.height,
|
|
135
135
|
footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
|
|
136
|
-
|
|
136
|
+
var trackingEnabled = isView;
|
|
137
|
+
var trackEvent = useTrackScreenEvent('game-sort');
|
|
137
138
|
var _useState = useState(isView ? shuffle(items || []) : items || []),
|
|
138
139
|
_useState2 = _slicedToArray(_useState, 2),
|
|
139
140
|
sortedItems = _useState2[0],
|
|
@@ -154,6 +155,7 @@ var ShareScreen = function ShareScreen(_ref) {
|
|
|
154
155
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
155
156
|
resultsVisible = _useState8[0],
|
|
156
157
|
setResultsVisible = _useState8[1];
|
|
158
|
+
var dragEnabled = isView && active && current && validated === null;
|
|
157
159
|
useEffect(function () {
|
|
158
160
|
if (currentItemsRef.current !== items) {
|
|
159
161
|
var newSortedItems = isView ? shuffle(items || []) : items || [];
|
|
@@ -259,6 +261,9 @@ var ShareScreen = function ShareScreen(_ref) {
|
|
|
259
261
|
});
|
|
260
262
|
var _newIndex = currentIndex === 0 ? sortedItems.length - 1 : currentIndex - 1;
|
|
261
263
|
updateIndex(item, _newIndex);
|
|
264
|
+
if (trackingEnabled) {
|
|
265
|
+
trackEvent('tap', "item_".concat(itemIndex));
|
|
266
|
+
}
|
|
262
267
|
return;
|
|
263
268
|
}
|
|
264
269
|
var sortedIndex = sortedItems.findIndex(function (it) {
|
|
@@ -299,22 +304,35 @@ var ShareScreen = function ShareScreen(_ref) {
|
|
|
299
304
|
});
|
|
300
305
|
} else {
|
|
301
306
|
setSortedItems(sortedItemsRef.current);
|
|
307
|
+
if (trackingEnabled) {
|
|
308
|
+
trackEvent('drag', "item_".concat(itemIndex));
|
|
309
|
+
}
|
|
302
310
|
// updateIndex(item, newIndex !== -1 ? newIndex : sortedIndex);
|
|
303
311
|
}
|
|
304
312
|
}, {
|
|
305
313
|
axis: 'y',
|
|
306
314
|
preventDefault: true,
|
|
307
315
|
filterTaps: true,
|
|
308
|
-
enabled:
|
|
316
|
+
enabled: dragEnabled
|
|
309
317
|
});
|
|
310
318
|
var onClickSubmit = useCallback(function () {
|
|
311
|
-
|
|
319
|
+
var newValidated = items.map(function (it, itemIndex) {
|
|
312
320
|
var sortedIndex = sortedItems.findIndex(function (sortedItem) {
|
|
313
321
|
return sortedItem === it;
|
|
314
322
|
});
|
|
315
323
|
return itemIndex === sortedIndex;
|
|
316
|
-
})
|
|
317
|
-
|
|
324
|
+
});
|
|
325
|
+
setValidated(newValidated);
|
|
326
|
+
var allValid = newValidated.reduce(function (acc, isValid) {
|
|
327
|
+
return acc && isValid;
|
|
328
|
+
}, true);
|
|
329
|
+
var invalidCount = newValidated.filter(function (isValid) {
|
|
330
|
+
return !isValid;
|
|
331
|
+
}).length;
|
|
332
|
+
if (trackingEnabled) {
|
|
333
|
+
trackEvent('submit', allValid ? 'valid' : "invalid_".concat(invalidCount));
|
|
334
|
+
}
|
|
335
|
+
}, [items, sortedItems, trackingEnabled, trackEvent]);
|
|
318
336
|
useEffect(function () {
|
|
319
337
|
if (validated === null) {
|
|
320
338
|
return function () {};
|
|
@@ -328,7 +346,7 @@ var ShareScreen = function ShareScreen(_ref) {
|
|
|
328
346
|
};
|
|
329
347
|
}, [validated]);
|
|
330
348
|
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)]),
|
|
349
|
+
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
350
|
"data-screen-ready": true
|
|
333
351
|
}, /*#__PURE__*/React.createElement(Container, {
|
|
334
352
|
width: width,
|
|
@@ -414,7 +432,7 @@ var ShareScreen = function ShareScreen(_ref) {
|
|
|
414
432
|
transform: y.to(function (yValue) {
|
|
415
433
|
return "translateY(".concat(yValue, ")");
|
|
416
434
|
})
|
|
417
|
-
},
|
|
435
|
+
}, getStyleFromText(itemsTextStyle)), getStyleFromText(labelTextStyle))
|
|
418
436
|
}, bind(itemIndex)), /*#__PURE__*/React.createElement(animated.div, {
|
|
419
437
|
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
438
|
style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({
|
|
@@ -431,16 +449,16 @@ var ShareScreen = function ShareScreen(_ref) {
|
|
|
431
449
|
}) : null, label !== null || itemResults !== null && resultsVisible ? /*#__PURE__*/React.createElement("div", {
|
|
432
450
|
className: styles.buttonLabel
|
|
433
451
|
}, label !== null ? /*#__PURE__*/React.createElement(Text, Object.assign({}, finalLabel, {
|
|
434
|
-
|
|
452
|
+
textStyle: _objectSpread(_objectSpread({}, itemsTextStyle), labelTextStyle),
|
|
435
453
|
className: styles.label
|
|
436
454
|
})) : null, itemResults !== null && resultsVisible ? /*#__PURE__*/React.createElement(Text, Object.assign({}, itemResults, {
|
|
437
455
|
className: styles.buttonResults,
|
|
438
|
-
|
|
456
|
+
textStyle: _objectSpread(_objectSpread({}, itemsResultsTextStyle), itemResults.textStyle)
|
|
439
457
|
})) : null) : null));
|
|
440
|
-
})), resultsVisible && results !== null ? /*#__PURE__*/React.createElement(
|
|
458
|
+
})), resultsVisible && results !== null ? /*#__PURE__*/React.createElement("div", {
|
|
441
459
|
className: styles.results,
|
|
442
460
|
style: _objectSpread({}, getStyleFromBox(resultsBoxStyle))
|
|
443
|
-
})) : /*#__PURE__*/React.createElement(Button, {
|
|
461
|
+
}, /*#__PURE__*/React.createElement(Text, results)) : /*#__PURE__*/React.createElement(Button, {
|
|
444
462
|
className: styles.submitButton,
|
|
445
463
|
disabled: validated !== null,
|
|
446
464
|
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.721",
|
|
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": "d4258416750551d2cd7a77d87e417055e94492d0"
|
|
91
91
|
}
|