@micromag/screen-game-sort 0.3.715 → 0.3.717

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.
Files changed (3) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +179 -146
  3. 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{margin-bottom:10px}.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:10px;-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:10px;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;padding:10px}.micromag-screen-game-sort-submitButton:disabled{opacity:.5}
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}
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","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"};
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","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"};
29
29
 
30
30
  var propTypes = {
31
31
  layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
@@ -33,12 +33,19 @@ var propTypes = {
33
33
  // eslint-disable-next-line react/forbid-prop-types
34
34
  items: PropTypes.array,
35
35
  spacing: PropTypes.number,
36
- buttonStyles: PropTypes.shape({}),
36
+ itemsLayout: PropTypes.oneOf(['label-bottom', 'label-top', 'no-label', 'label-over']),
37
+ itemsBoxStyle: PropTypes$1.boxStyle,
38
+ itemsTextStyle: PropTypes$1.textStyle,
39
+ resultsTextStyle: PropTypes$1.textStyle,
40
+ validBoxStyle: PropTypes$1.boxStyle,
41
+ invalidBoxStyle: PropTypes$1.boxStyle,
42
+ submitBoxStyle: PropTypes$1.boxStyle,
43
+ submitTextStyle: PropTypes$1.textStyle,
44
+ submitButtonLabel: PropTypes.string,
45
+ validatedButtonLabel: PropTypes.string,
37
46
  background: PropTypes$1.backgroundElement,
38
47
  header: PropTypes$1.header,
39
48
  footer: PropTypes$1.footer,
40
- id: PropTypes.string,
41
- index: PropTypes.number,
42
49
  current: PropTypes.bool,
43
50
  active: PropTypes.bool,
44
51
  className: PropTypes.string
@@ -47,13 +54,20 @@ var defaultProps = {
47
54
  layout: 'top',
48
55
  heading: null,
49
56
  items: null,
50
- buttonStyles: null,
51
57
  spacing: 20,
58
+ itemsLayout: 'label-bottom',
59
+ itemsBoxStyle: null,
60
+ itemsTextStyle: null,
61
+ resultsTextStyle: null,
62
+ validBoxStyle: null,
63
+ invalidBoxStyle: null,
64
+ submitBoxStyle: null,
65
+ submitTextStyle: null,
66
+ submitButtonLabel: null,
67
+ validatedButtonLabel: null,
52
68
  background: null,
53
69
  header: null,
54
70
  footer: null,
55
- id: null,
56
- index: null,
57
71
  current: true,
58
72
  active: true,
59
73
  className: null
@@ -62,14 +76,21 @@ var ShareScreen = function ShareScreen(_ref) {
62
76
  var layout = _ref.layout,
63
77
  heading = _ref.heading,
64
78
  items = _ref.items,
65
- buttonStyles = _ref.buttonStyles,
66
79
  spacing = _ref.spacing,
80
+ itemsLayout = _ref.itemsLayout,
81
+ itemsBoxStyle = _ref.itemsBoxStyle,
82
+ itemsTextStyle = _ref.itemsTextStyle,
83
+ resultsTextStyle = _ref.resultsTextStyle,
84
+ validBoxStyle = _ref.validBoxStyle,
85
+ invalidBoxStyle = _ref.invalidBoxStyle,
86
+ submitBoxStyle = _ref.submitBoxStyle,
87
+ submitTextStyle = _ref.submitTextStyle,
88
+ submitButtonLabel = _ref.submitButtonLabel,
89
+ validatedButtonLabel = _ref.validatedButtonLabel,
67
90
  background = _ref.background,
68
91
  header = _ref.header,
69
- footer = _ref.footer;
70
- _ref.id;
71
- _ref.index;
72
- var current = _ref.current,
92
+ footer = _ref.footer,
93
+ current = _ref.current,
73
94
  active = _ref.active,
74
95
  className = _ref.className;
75
96
  var intl = useIntl();
@@ -101,23 +122,6 @@ var ShareScreen = function ShareScreen(_ref) {
101
122
  openWebView: openWebView,
102
123
  isPreview: isPreview
103
124
  });
104
- var _ref2 = buttonStyles || {},
105
- _ref2$layout = _ref2.layout,
106
- buttonLayout = _ref2$layout === void 0 ? null : _ref2$layout,
107
- _ref2$textStyle = _ref2.textStyle,
108
- buttonTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle,
109
- _ref2$boxStyle = _ref2.boxStyle,
110
- buttonBoxStyle = _ref2$boxStyle === void 0 ? null : _ref2$boxStyle,
111
- _ref2$validBoxStyle = _ref2.validBoxStyle,
112
- validBoxStyle = _ref2$validBoxStyle === void 0 ? null : _ref2$validBoxStyle,
113
- _ref2$invalidBoxStyle = _ref2.invalidBoxStyle,
114
- invalidBoxStyle = _ref2$invalidBoxStyle === void 0 ? null : _ref2$invalidBoxStyle,
115
- _ref2$submitBoxStyle = _ref2.submitBoxStyle,
116
- submitBoxStyle = _ref2$submitBoxStyle === void 0 ? null : _ref2$submitBoxStyle,
117
- _ref2$submitButtonLab = _ref2.submitButtonLabel,
118
- submitButtonLabel = _ref2$submitButtonLab === void 0 ? null : _ref2$submitButtonLab,
119
- _ref2$validatedButton = _ref2.validatedButtonLabel,
120
- validatedButtonLabel = _ref2$validatedButton === void 0 ? null : _ref2$validatedButton;
121
125
  var _useDimensionObserver = useDimensionObserver(),
122
126
  headerRef = _useDimensionObserver.ref,
123
127
  _useDimensionObserver2 = _useDimensionObserver.height,
@@ -133,6 +137,20 @@ var ShareScreen = function ShareScreen(_ref) {
133
137
  setSortedItems = _useState2[1];
134
138
  var sortedItemsRef = useRef(sortedItems);
135
139
  var currentItemsRef = useRef(items);
140
+ var elementsRef = useRef([]);
141
+ var _useState3 = useState(false),
142
+ _useState4 = _slicedToArray(_useState3, 2),
143
+ initialSorted = _useState4[0],
144
+ setInitialSorted = _useState4[1];
145
+ var _useState5 = useState(null),
146
+ _useState6 = _slicedToArray(_useState5, 2),
147
+ validated = _useState6[0],
148
+ setValidated = _useState6[1];
149
+ var initialSortedItemsRef = useRef(sortedItems);
150
+ var _useState7 = useState(false),
151
+ _useState8 = _slicedToArray(_useState7, 2),
152
+ resultsVisible = _useState8[0],
153
+ setResultsVisible = _useState8[1];
136
154
  useEffect(function () {
137
155
  if (currentItemsRef.current !== items) {
138
156
  var newSortedItems = isView ? shuffle(items || []) : items || [];
@@ -165,18 +183,13 @@ var ShareScreen = function ShareScreen(_ref) {
165
183
  _useSprings2 = _slicedToArray(_useSprings, 2),
166
184
  springs = _useSprings2[0],
167
185
  api = _useSprings2[1];
168
- var itemsRef = useRef([]);
169
- var _useState3 = useState(false),
170
- _useState4 = _slicedToArray(_useState3, 2),
171
- initialSorted = _useState4[0],
172
- setInitialSorted = _useState4[1];
173
186
  var updateSpring = useCallback(function (currentItems) {
174
- var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
175
- dragItem = _ref3.dragItem,
176
- dragY = _ref3.dragY,
177
- _ref3$initial = _ref3.initial,
178
- initial = _ref3$initial === void 0 ? false : _ref3$initial;
179
- var heights = itemsRef.current.map(function (item) {
187
+ var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
188
+ dragItem = _ref2.dragItem,
189
+ dragY = _ref2.dragY,
190
+ _ref2$initial = _ref2.initial,
191
+ initial = _ref2$initial === void 0 ? false : _ref2$initial;
192
+ var heights = elementsRef.current.map(function (item) {
180
193
  var _item$getBoundingClie;
181
194
  return (item === null || item === void 0 || (_item$getBoundingClie = item.getBoundingClientRect()) === null || _item$getBoundingClie === void 0 ? void 0 : _item$getBoundingClie.height) || 0;
182
195
  });
@@ -221,7 +234,6 @@ var ShareScreen = function ShareScreen(_ref) {
221
234
  setInitialSorted(true);
222
235
  }
223
236
  }, [api]);
224
- var initialSortedItemsRef = useRef(sortedItems);
225
237
  useEffect(function () {
226
238
  if (!isView) {
227
239
  return;
@@ -230,17 +242,13 @@ var ShareScreen = function ShareScreen(_ref) {
230
242
  initial: initialSortedItemsRef.current === sortedItems
231
243
  });
232
244
  }, [sortedItems]);
233
- var _useState5 = useState(null),
234
- _useState6 = _slicedToArray(_useState5, 2),
235
- validated = _useState6[0],
236
- setValidated = _useState6[1];
237
- var bind = useDrag(function (_ref4) {
238
- var _ref4$args = _slicedToArray(_ref4.args, 1),
239
- itemIndex = _ref4$args[0],
240
- dragActive = _ref4.active,
241
- _ref4$movement = _slicedToArray(_ref4.movement, 2),
242
- movementY = _ref4$movement[1],
243
- tap = _ref4.tap;
245
+ var bind = useDrag(function (_ref3) {
246
+ var _ref3$args = _slicedToArray(_ref3.args, 1),
247
+ itemIndex = _ref3$args[0],
248
+ dragActive = _ref3.active,
249
+ _ref3$movement = _slicedToArray(_ref3.movement, 2),
250
+ movementY = _ref3$movement[1],
251
+ tap = _ref3.tap;
244
252
  var item = items[itemIndex] || {};
245
253
  if (tap) {
246
254
  var currentIndex = sortedItems.findIndex(function (it) {
@@ -254,29 +262,29 @@ var ShareScreen = function ShareScreen(_ref) {
254
262
  return it === item;
255
263
  });
256
264
  var heights = sortedItems.map(function (sortedItem) {
257
- var _itemsRef$current$ind;
258
- var index = items.findIndex(function (it) {
265
+ var _elementsRef$current$;
266
+ var elementIndex = items.findIndex(function (it) {
259
267
  return it === sortedItem;
260
268
  });
261
- 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;
269
+ 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;
262
270
  });
263
- var ys = heights.map(function (itemHeight, index) {
264
- var endY = itemHeight + heights.slice(0, index).reduce(function (acc, h) {
271
+ var ys = heights.map(function (itemHeight, heightIndex) {
272
+ var endY = itemHeight + heights.slice(0, heightIndex).reduce(function (acc, h) {
265
273
  return acc + h;
266
274
  }, 0);
267
275
  return {
268
- isStart: index === 0,
269
- isEnd: index === heights.length - 1,
276
+ isStart: heightIndex === 0,
277
+ isEnd: heightIndex === heights.length - 1,
270
278
  start: endY - itemHeight,
271
279
  end: endY
272
280
  };
273
281
  });
274
282
  var newY = ys[sortedIndex].end - heights[sortedIndex] / 2 + movementY;
275
- var newIndex = ys.findIndex(function (_ref5) {
276
- var isStart = _ref5.isStart,
277
- isEnd = _ref5.isEnd,
278
- start = _ref5.start,
279
- end = _ref5.end;
283
+ var newIndex = ys.findIndex(function (_ref4) {
284
+ var isStart = _ref4.isStart,
285
+ isEnd = _ref4.isEnd,
286
+ start = _ref4.start,
287
+ end = _ref4.end;
280
288
  return (isStart || newY >= start) && (isEnd || newY < end);
281
289
  });
282
290
  if (dragActive) {
@@ -290,29 +298,18 @@ var ShareScreen = function ShareScreen(_ref) {
290
298
  setSortedItems(sortedItemsRef.current);
291
299
  // updateIndex(item, newIndex !== -1 ? newIndex : sortedIndex);
292
300
  }
293
- // console.log({
294
- // movementY,
295
- // newY,
296
- // itemIndex,
297
- // sortedIndex,
298
- // newIndex,
299
- // ys,
300
- // items: sortedItemsRef.current.map(({ label }) => label),
301
- // });
302
301
  }, {
303
302
  axis: 'y',
304
303
  preventDefault: true,
305
304
  filterTaps: true,
306
305
  enabled: isView && active && current && validated === null
307
- // preventScroll: 250,
308
- // preventScrollAxis: 'y',
309
306
  });
310
307
  var onClickSubmit = useCallback(function () {
311
- setValidated(items.map(function (it, index) {
308
+ setValidated(items.map(function (it, itemIndex) {
312
309
  var sortedIndex = sortedItems.findIndex(function (sortedItem) {
313
310
  return sortedItem === it;
314
311
  });
315
- return index === sortedIndex;
312
+ return itemIndex === sortedIndex;
316
313
  }));
317
314
  }, [items, sortedItems]);
318
315
  useEffect(function () {
@@ -321,13 +318,14 @@ var ShareScreen = function ShareScreen(_ref) {
321
318
  }
322
319
  var timeout = setTimeout(function () {
323
320
  setSortedItems(items);
324
- }, 2000);
321
+ setResultsVisible(true);
322
+ }, 1000);
325
323
  return function () {
326
324
  clearTimeout(timeout);
327
325
  };
328
326
  }, [validated]);
329
327
  return /*#__PURE__*/React.createElement("div", {
330
- className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.sorted, initialSorted || !isView), styles.isPlaceholder, isPlaceholder)]),
328
+ className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.sorted, initialSorted || !isView), styles.resultsVisible, resultsVisible), styles.isPlaceholder, isPlaceholder)]),
331
329
  "data-screen-ready": true
332
330
  }, /*#__PURE__*/React.createElement(Container, {
333
331
  width: width,
@@ -382,70 +380,79 @@ var ShareScreen = function ShareScreen(_ref) {
382
380
  className: styles.items,
383
381
  emptyClassName: styles.emptyItems,
384
382
  isEmpty: (items || []).length === 0
385
- }, springs.map(function (props, itemIndex) {
383
+ }, springs.map(function (_ref6, itemIndex) {
384
+ var y = _ref6.y,
385
+ scale = _ref6.scale;
386
386
  var item = items[itemIndex] || {};
387
387
  var _ref7 = item || {},
388
388
  _ref7$visual = _ref7.visual,
389
389
  visual = _ref7$visual === void 0 ? null : _ref7$visual,
390
390
  itemLabel = _ref7.label,
391
391
  _ref7$boxStyle = _ref7.boxStyle,
392
- boxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle;
392
+ boxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle,
393
+ _ref7$results = _ref7.results,
394
+ results = _ref7$results === void 0 ? null : _ref7$results;
393
395
  var finalLabel = isString(itemLabel) ? {
394
396
  body: itemLabel
395
397
  } : itemLabel || {};
396
398
  var _ref8 = finalLabel || {},
397
399
  _ref8$body = _ref8.body,
398
400
  label = _ref8$body === void 0 ? null : _ref8$body,
399
- _ref8$textStyle = _ref8.textStyle,
400
- textStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
401
+ labelTextStyle = _ref8.textStyle;
401
402
  var isEmpty = label === null && visual === null;
402
403
  var isValid = validated !== null && validated[itemIndex];
403
404
  return /*#__PURE__*/React.createElement(animated.div, Object.assign({
404
405
  key: "button-".concat(itemIndex),
405
406
  className: classNames([styles.item, _defineProperty(_defineProperty(_defineProperty({}, styles.isEmpty, isEmpty), styles.valid, validated !== null && isValid), styles.invalid, validated !== null && !isValid)]),
406
- style: props,
407
407
  ref: function ref(_ref1) {
408
- itemsRef.current[itemIndex] = _ref1;
409
- }
410
- }, bind(itemIndex)), /*#__PURE__*/React.createElement("div", {
411
- 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')]),
412
- style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(buttonBoxStyle)), getStyleFromBox(boxStyle)), getStyleFromBox(validated && isValid ? validBoxStyle : null)), getStyleFromBox(validated && !isValid ? invalidBoxStyle : null))
408
+ elementsRef.current[itemIndex] = _ref1;
409
+ },
410
+ style: _objectSpread(_objectSpread({
411
+ transform: y.to(function (yValue) {
412
+ return "translateY(".concat(yValue, ")");
413
+ })
414
+ }, getStyleFromBox(itemsTextStyle)), getStyleFromText(labelTextStyle))
415
+ }, bind(itemIndex)), /*#__PURE__*/React.createElement(animated.div, {
416
+ 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')]),
417
+ style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({
418
+ transform: scale.to(function (scaleValue) {
419
+ return "scale(".concat(scaleValue, ")");
420
+ })
421
+ }, getStyleFromBox(itemsBoxStyle)), getStyleFromBox(boxStyle)), getStyleFromBox(validated && isValid ? validBoxStyle : null)), getStyleFromBox(validated && !isValid ? invalidBoxStyle : null))
413
422
  // onClick={(e) => onItemClick(e, item, itemIndex)}
414
423
  }, visual !== null ? /*#__PURE__*/React.createElement(Visual, {
415
424
  className: styles.buttonVisual,
416
425
  imageClassName: styles.thumbnail,
417
426
  media: visual,
418
427
  width: "auto"
419
- }) : null, label !== null ? /*#__PURE__*/React.createElement(Text, Object.assign({
428
+ }) : null, label !== null || results !== null && resultsVisible ? /*#__PURE__*/React.createElement("div", {
420
429
  className: styles.buttonLabel
421
- }, finalLabel, {
422
- textStyle: _objectSpread(_objectSpread({}, getStyleFromText(buttonTextStyle)), getStyleFromText(textStyle))
423
- })) : null));
430
+ }, label !== null ? /*#__PURE__*/React.createElement(Text, Object.assign({}, finalLabel, {
431
+ style: null,
432
+ className: styles.label
433
+ })) : null, results !== null && resultsVisible ? /*#__PURE__*/React.createElement(Text, Object.assign({}, results, {
434
+ className: styles.results,
435
+ style: _objectSpread(_objectSpread({}, getStyleFromText(resultsTextStyle)), getStyleFromText(results.textStyle || null))
436
+ })) : null) : null));
424
437
  })), /*#__PURE__*/React.createElement(Button, {
425
438
  className: styles.submitButton,
426
439
  disabled: validated !== null,
427
440
  type: "button",
428
441
  onClick: onClickSubmit,
429
- style: getStyleFromBox(submitBoxStyle)
430
- }, validated !== null ? /*#__PURE__*/React.createElement(Text, Object.assign({
431
- className: styles.buttonLabel,
432
- body: intl.formatMessage({
433
- id: "CTculh",
434
- defaultMessage: [{
435
- "type": 0,
436
- "value": "Validated"
437
- }]
438
- })
439
- }, validatedButtonLabel)) : /*#__PURE__*/React.createElement(Text, Object.assign({
440
- className: styles.buttonLabel,
441
- body: intl.formatMessage({
442
- id: "IbZVf0",
443
- defaultMessage: [{
444
- "type": 0,
445
- "value": "Submit"
446
- }]
447
- })
448
- }, submitButtonLabel))), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
442
+ style: _objectSpread(_objectSpread({}, getStyleFromBox(submitBoxStyle)), getStyleFromText(submitTextStyle))
443
+ }, validated !== null ? validatedButtonLabel || intl.formatMessage({
444
+ id: "CTculh",
445
+ defaultMessage: [{
446
+ "type": 0,
447
+ "value": "Validated"
448
+ }]
449
+ }) : submitButtonLabel || intl.formatMessage({
450
+ id: "IbZVf0",
451
+ defaultMessage: [{
452
+ "type": 0,
453
+ "value": "Submit"
454
+ }]
455
+ })), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
449
456
  className: styles.footer,
450
457
  ref: footerRef,
451
458
  style: {
@@ -518,24 +525,28 @@ var definition = {
518
525
  })
519
526
  }, {
520
527
  name: 'items',
521
- type: 'buttons',
528
+ type: 'game-sort-items',
522
529
  label: defineMessage({
523
- id: "l5uLMd",
530
+ id: "fbUW2U",
524
531
  defaultMessage: [{
525
532
  "type": 0,
526
- "value": "Buttons"
533
+ "value": "Items"
527
534
  }]
528
535
  }),
529
- itemsProps: {
530
- excludedFields: ['url', 'inWebView']
531
- },
532
536
  isSection: true
533
537
  }, {
534
- name: 'buttonStyles',
538
+ label: defineMessage({
539
+ id: "83959F",
540
+ defaultMessage: [{
541
+ "type": 0,
542
+ "value": "Items style"
543
+ }]
544
+ }),
535
545
  type: 'fields',
536
546
  isList: true,
547
+ isSection: true,
537
548
  fields: [{
538
- name: 'layout',
549
+ name: 'itemsLayout',
539
550
  type: 'button-layout',
540
551
  label: defineMessage({
541
552
  id: "OPxJx/",
@@ -545,7 +556,7 @@ var definition = {
545
556
  }]
546
557
  })
547
558
  }, {
548
- name: 'textStyle',
559
+ name: 'itemsTextStyle',
549
560
  type: 'text-style-form',
550
561
  label: defineMessage({
551
562
  id: "rzXCu2",
@@ -555,73 +566,95 @@ var definition = {
555
566
  }]
556
567
  })
557
568
  }, {
558
- name: 'boxStyle',
569
+ name: 'resultsTextStyle',
570
+ type: 'text-style-form',
571
+ label: defineMessage({
572
+ id: "ex1Bgx",
573
+ defaultMessage: [{
574
+ "type": 0,
575
+ "value": "Results style"
576
+ }]
577
+ })
578
+ }, {
579
+ name: 'itemsBoxStyle',
559
580
  type: 'box-style-form',
560
581
  label: defineMessage({
561
- id: "rlOUqL",
582
+ id: "p1pghO",
562
583
  defaultMessage: [{
563
584
  "type": 0,
564
- "value": "Buttons style"
585
+ "value": "Box style"
565
586
  }]
566
587
  })
567
588
  }, {
568
589
  name: 'validBoxStyle',
569
590
  type: 'box-style-form',
570
591
  label: defineMessage({
571
- id: "wJm7+k",
592
+ id: "ao5VYd",
572
593
  defaultMessage: [{
573
594
  "type": 0,
574
- "value": "Valid buttons style"
595
+ "value": "Valid box style"
575
596
  }]
576
597
  })
577
598
  }, {
578
599
  name: 'invalidBoxStyle',
579
600
  type: 'box-style-form',
580
601
  label: defineMessage({
581
- id: "0N19DP",
602
+ id: "JLYWNN",
582
603
  defaultMessage: [{
583
604
  "type": 0,
584
- "value": "Invalid buttons style"
605
+ "value": "Invalid box style"
585
606
  }]
586
607
  })
587
- }, {
588
- name: 'submitBoxStyle',
589
- type: 'box-style-form',
608
+ }]
609
+ }, {
610
+ label: defineMessage({
611
+ id: "WjigmA",
612
+ defaultMessage: [{
613
+ "type": 0,
614
+ "value": "Submit button"
615
+ }]
616
+ }),
617
+ type: 'fields',
618
+ isList: true,
619
+ isSection: true,
620
+ fields: [{
621
+ name: 'submitButtonLabel',
622
+ type: 'text',
590
623
  label: defineMessage({
591
- id: "9QP1Kj",
624
+ id: "Cg3LGu",
592
625
  defaultMessage: [{
593
626
  "type": 0,
594
- "value": "Submit button style"
627
+ "value": "Label"
595
628
  }]
596
629
  })
597
630
  }, {
598
- name: 'validatedBoxStyle',
599
- type: 'box-style-form',
631
+ name: 'validatedButtonLabel',
632
+ type: 'text',
600
633
  label: defineMessage({
601
- id: "6EF9gy",
634
+ id: "wROB6F",
602
635
  defaultMessage: [{
603
636
  "type": 0,
604
- "value": "Validated button style"
637
+ "value": "Validated label"
605
638
  }]
606
639
  })
607
640
  }, {
608
- name: 'submitButtonLabel',
609
- type: 'text-element',
641
+ name: 'submitBoxStyle',
642
+ type: 'box-style-form',
610
643
  label: defineMessage({
611
- id: "Vuj0dX",
644
+ id: "nno1Pq",
612
645
  defaultMessage: [{
613
646
  "type": 0,
614
- "value": "Submit button label"
647
+ "value": "Button style"
615
648
  }]
616
649
  })
617
650
  }, {
618
- name: 'validatedButtonLabel',
619
- type: 'text-element',
651
+ name: 'submitTextStyle',
652
+ type: 'box-style-form',
620
653
  label: defineMessage({
621
- id: "tbrIgP",
654
+ id: "OEckOD",
622
655
  defaultMessage: [{
623
656
  "type": 0,
624
- "value": "Validated button label"
657
+ "value": "Text style"
625
658
  }]
626
659
  })
627
660
  }]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-game-sort",
3
- "version": "0.3.715",
3
+ "version": "0.3.717",
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": "24575ee9b20a4a0b7780137b9f3472b990f773a5"
90
+ "gitHead": "a9f034623044063dc0a971b964c9eedecfac4bb7"
91
91
  }