@micromag/screen-ranking 0.3.410 → 0.3.412
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 +47 -13
- package/lib/index.js +46 -12
- package/package.json +2 -2
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-ranking-container .micromag-screen-ranking-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-ranking-container .micromag-screen-ranking-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-ranking-container{position:relative}.micromag-screen-ranking-container .micromag-screen-ranking-background{z-index:0}.micromag-screen-ranking-container .micromag-screen-ranking-content{z-index:1}.micromag-screen-ranking-container .micromag-screen-ranking-empty{height:50px;margin-right:10px}.micromag-screen-ranking-container .micromag-screen-ranking-item{padding:10px 0;position:relative}.micromag-screen-ranking-container .micromag-screen-ranking-item:first-child{padding-top:0}.micromag-screen-ranking-container .micromag-screen-ranking-rankText{font-size:48px}.micromag-screen-ranking-container .micromag-screen-ranking-description,.micromag-screen-ranking-container .micromag-screen-ranking-
|
|
1
|
+
.micromag-screen-ranking-container .micromag-screen-ranking-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-ranking-container .micromag-screen-ranking-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-ranking-container .micromag-screen-ranking-emptyTitle{height:100px;width:100%}.micromag-screen-ranking-container{position:relative}.micromag-screen-ranking-container .micromag-screen-ranking-background{z-index:0}.micromag-screen-ranking-container .micromag-screen-ranking-content{z-index:1}.micromag-screen-ranking-container .micromag-screen-ranking-empty{height:50px;margin-right:10px}.micromag-screen-ranking-container .micromag-screen-ranking-emptyTitle{min-width:100%}.micromag-screen-ranking-container .micromag-screen-ranking-item{padding:10px 0;position:relative}.micromag-screen-ranking-container .micromag-screen-ranking-item:first-child{padding-top:0}.micromag-screen-ranking-container .micromag-screen-ranking-rankText{font-size:48px}.micromag-screen-ranking-container .micromag-screen-ranking-description,.micromag-screen-ranking-container .micromag-screen-ranking-itemTitle{padding:8px 0}.micromag-screen-ranking-container .micromag-screen-ranking-callToAction{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-ranking-container .micromag-screen-ranking-callToAction a{padding:0}.micromag-screen-ranking-container .micromag-screen-ranking-callToAction.micromag-screen-ranking-disabled{opacity:0;pointer-events:none}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-elementsContainer{display:table;width:100%}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-item{display:table-row;padding:0}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-label,.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-rank{display:table-cell;padding:10px 0;vertical-align:top}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-rank{padding-right:20px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-rank{color:hsla(0,0%,100%,.6);font-size:16px;mix-blend-mode:difference;text-align:left}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-scroll{padding:5px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-description,.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-itemTitle{-ms-flex-pack:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;padding:0}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-item{padding:1px 0}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder.micromag-screen-ranking-sideLayout .micromag-screen-ranking-rank{padding-right:4px;padding-top:8px;width:24px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder.micromag-screen-ranking-sideLayout .micromag-screen-ranking-label{padding:5px 0}
|
package/es/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import classNames from 'classnames';
|
|
|
6
6
|
import PropTypes from 'prop-types';
|
|
7
7
|
import React, { useState, useCallback } from 'react';
|
|
8
8
|
import { PropTypes as PropTypes$1 } from '@micromag/core';
|
|
9
|
-
import {
|
|
9
|
+
import { ScreenElement, Transitions } from '@micromag/core/components';
|
|
10
10
|
import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
|
|
11
11
|
import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
|
|
12
12
|
import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
|
|
@@ -21,10 +21,11 @@ import Text from '@micromag/element-text';
|
|
|
21
21
|
import _objectSpread from '@babel/runtime/helpers/objectSpread2';
|
|
22
22
|
import { Text as Text$1, Container as Container$1 } from '@micromag/transforms/apple-news';
|
|
23
23
|
|
|
24
|
-
var styles = {"container":"micromag-screen-ranking-container","background":"micromag-screen-ranking-background","empty":"micromag-screen-ranking-empty","content":"micromag-screen-ranking-content","item":"micromag-screen-ranking-item","rankText":"micromag-screen-ranking-rankText","
|
|
24
|
+
var styles = {"container":"micromag-screen-ranking-container","background":"micromag-screen-ranking-background","empty":"micromag-screen-ranking-empty","emptyTitle":"micromag-screen-ranking-emptyTitle","content":"micromag-screen-ranking-content","item":"micromag-screen-ranking-item","rankText":"micromag-screen-ranking-rankText","itemTitle":"micromag-screen-ranking-itemTitle","description":"micromag-screen-ranking-description","callToAction":"micromag-screen-ranking-callToAction","disabled":"micromag-screen-ranking-disabled","sideLayout":"micromag-screen-ranking-sideLayout","elementsContainer":"micromag-screen-ranking-elementsContainer","rank":"micromag-screen-ranking-rank","label":"micromag-screen-ranking-label","isPlaceholder":"micromag-screen-ranking-isPlaceholder","scroll":"micromag-screen-ranking-scroll"};
|
|
25
25
|
|
|
26
26
|
var propTypes = {
|
|
27
27
|
layout: PropTypes.oneOf(['side', 'over']),
|
|
28
|
+
title: PropTypes$1.headingElement,
|
|
28
29
|
items: PropTypes.arrayOf(PropTypes$1.textElement),
|
|
29
30
|
numbersStyle: PropTypes$1.textStyle,
|
|
30
31
|
ascending: PropTypes.bool,
|
|
@@ -41,6 +42,7 @@ var propTypes = {
|
|
|
41
42
|
};
|
|
42
43
|
var defaultProps = {
|
|
43
44
|
layout: 'side',
|
|
45
|
+
title: null,
|
|
44
46
|
items: [null],
|
|
45
47
|
numbersStyle: null,
|
|
46
48
|
ascending: false,
|
|
@@ -58,6 +60,7 @@ var defaultProps = {
|
|
|
58
60
|
var RankingScreen = function RankingScreen(_ref) {
|
|
59
61
|
var _ref4;
|
|
60
62
|
var layout = _ref.layout,
|
|
63
|
+
title = _ref.title,
|
|
61
64
|
items = _ref.items,
|
|
62
65
|
numbersStyle = _ref.numbersStyle,
|
|
63
66
|
ascending = _ref.ascending,
|
|
@@ -101,33 +104,48 @@ var RankingScreen = function RankingScreen(_ref) {
|
|
|
101
104
|
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
102
105
|
var backgroundPlaying = current && (isView || isEdit);
|
|
103
106
|
var mediaShouldLoad = current || active;
|
|
107
|
+
var hasTitle = isTextFilled(title);
|
|
108
|
+
var titleElement = /*#__PURE__*/React.createElement(ScreenElement, {
|
|
109
|
+
placeholder: "Title",
|
|
110
|
+
emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
111
|
+
id: "BSTWf8",
|
|
112
|
+
defaultMessage: [{
|
|
113
|
+
"type": 0,
|
|
114
|
+
"value": "Title"
|
|
115
|
+
}]
|
|
116
|
+
}),
|
|
117
|
+
emptyClassName: classNames([styles.empty, styles.emptyTitle]),
|
|
118
|
+
isEmpty: !hasTitle
|
|
119
|
+
}, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
|
|
120
|
+
className: styles.title
|
|
121
|
+
}, title)) : null);
|
|
104
122
|
var elements = (finalItems || []).map(function (item, itemI) {
|
|
105
123
|
var _ref2 = item || {},
|
|
106
124
|
_ref2$title = _ref2.title,
|
|
107
|
-
|
|
125
|
+
itemTitle = _ref2$title === void 0 ? null : _ref2$title,
|
|
108
126
|
_ref2$description = _ref2.description,
|
|
109
127
|
description = _ref2$description === void 0 ? null : _ref2$description;
|
|
110
|
-
var
|
|
128
|
+
var hasItemTitle = isTextFilled(itemTitle);
|
|
111
129
|
var hasDescription = isTextFilled(description);
|
|
112
|
-
var
|
|
113
|
-
className: styles.
|
|
130
|
+
var itemTitleElement = /*#__PURE__*/React.createElement("div", {
|
|
131
|
+
className: styles.itemTitle
|
|
114
132
|
}, /*#__PURE__*/React.createElement(ScreenElement, {
|
|
115
133
|
placeholder: "title",
|
|
116
134
|
emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
117
|
-
id: "
|
|
135
|
+
id: "bmO4Ss",
|
|
118
136
|
defaultMessage: [{
|
|
119
137
|
"type": 0,
|
|
120
|
-
"value": "Title"
|
|
138
|
+
"value": "Entry Title"
|
|
121
139
|
}]
|
|
122
140
|
}),
|
|
123
141
|
emptyClassName: styles.empty,
|
|
124
|
-
isEmpty: !
|
|
125
|
-
},
|
|
142
|
+
isEmpty: !hasItemTitle
|
|
143
|
+
}, hasItemTitle ? /*#__PURE__*/React.createElement(Transitions, {
|
|
126
144
|
transitions: transitions,
|
|
127
145
|
playing: transitionPlaying,
|
|
128
146
|
delay: transitionStagger * itemI,
|
|
129
147
|
disabled: transitionDisabled
|
|
130
|
-
}, /*#__PURE__*/React.createElement(Heading,
|
|
148
|
+
}, /*#__PURE__*/React.createElement(Heading, itemTitle)) : null));
|
|
131
149
|
var descriptionElement = /*#__PURE__*/React.createElement("div", {
|
|
132
150
|
className: styles.description
|
|
133
151
|
}, /*#__PURE__*/React.createElement(ScreenElement, {
|
|
@@ -164,7 +182,7 @@ var RankingScreen = function RankingScreen(_ref) {
|
|
|
164
182
|
textStyle: numbersStyle
|
|
165
183
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
166
184
|
className: styles.label
|
|
167
|
-
},
|
|
185
|
+
}, itemTitleElement, descriptionElement));
|
|
168
186
|
});
|
|
169
187
|
|
|
170
188
|
// Call to Action
|
|
@@ -221,7 +239,9 @@ var RankingScreen = function RankingScreen(_ref) {
|
|
|
221
239
|
paddingTop: !isPlaceholder && hasHeader ? spacing : (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
222
240
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (foterHeight || spacing)
|
|
223
241
|
} : null
|
|
224
|
-
},
|
|
242
|
+
}, titleElement, /*#__PURE__*/React.createElement("div", {
|
|
243
|
+
className: styles.elementsContainer
|
|
244
|
+
}, elements))), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
|
|
225
245
|
ref: footerRef,
|
|
226
246
|
className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
|
|
227
247
|
style: {
|
|
@@ -325,6 +345,20 @@ var definition = {
|
|
|
325
345
|
"value": "Layout"
|
|
326
346
|
}]
|
|
327
347
|
})
|
|
348
|
+
}, {
|
|
349
|
+
name: 'title',
|
|
350
|
+
type: 'heading-element',
|
|
351
|
+
// inline: true,
|
|
352
|
+
theme: {
|
|
353
|
+
textStyle: 'heading1'
|
|
354
|
+
},
|
|
355
|
+
label: defineMessage({
|
|
356
|
+
id: "N25iDO",
|
|
357
|
+
defaultMessage: [{
|
|
358
|
+
"type": 0,
|
|
359
|
+
"value": "Title"
|
|
360
|
+
}]
|
|
361
|
+
})
|
|
328
362
|
}, {
|
|
329
363
|
name: 'items',
|
|
330
364
|
type: 'entries',
|
package/lib/index.js
CHANGED
|
@@ -43,10 +43,11 @@ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
|
|
|
43
43
|
var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
|
|
44
44
|
var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
|
|
45
45
|
|
|
46
|
-
var styles = {"container":"micromag-screen-ranking-container","background":"micromag-screen-ranking-background","empty":"micromag-screen-ranking-empty","content":"micromag-screen-ranking-content","item":"micromag-screen-ranking-item","rankText":"micromag-screen-ranking-rankText","
|
|
46
|
+
var styles = {"container":"micromag-screen-ranking-container","background":"micromag-screen-ranking-background","empty":"micromag-screen-ranking-empty","emptyTitle":"micromag-screen-ranking-emptyTitle","content":"micromag-screen-ranking-content","item":"micromag-screen-ranking-item","rankText":"micromag-screen-ranking-rankText","itemTitle":"micromag-screen-ranking-itemTitle","description":"micromag-screen-ranking-description","callToAction":"micromag-screen-ranking-callToAction","disabled":"micromag-screen-ranking-disabled","sideLayout":"micromag-screen-ranking-sideLayout","elementsContainer":"micromag-screen-ranking-elementsContainer","rank":"micromag-screen-ranking-rank","label":"micromag-screen-ranking-label","isPlaceholder":"micromag-screen-ranking-isPlaceholder","scroll":"micromag-screen-ranking-scroll"};
|
|
47
47
|
|
|
48
48
|
var propTypes = {
|
|
49
49
|
layout: PropTypes__default["default"].oneOf(['side', 'over']),
|
|
50
|
+
title: core.PropTypes.headingElement,
|
|
50
51
|
items: PropTypes__default["default"].arrayOf(core.PropTypes.textElement),
|
|
51
52
|
numbersStyle: core.PropTypes.textStyle,
|
|
52
53
|
ascending: PropTypes__default["default"].bool,
|
|
@@ -63,6 +64,7 @@ var propTypes = {
|
|
|
63
64
|
};
|
|
64
65
|
var defaultProps = {
|
|
65
66
|
layout: 'side',
|
|
67
|
+
title: null,
|
|
66
68
|
items: [null],
|
|
67
69
|
numbersStyle: null,
|
|
68
70
|
ascending: false,
|
|
@@ -80,6 +82,7 @@ var defaultProps = {
|
|
|
80
82
|
var RankingScreen = function RankingScreen(_ref) {
|
|
81
83
|
var _ref4;
|
|
82
84
|
var layout = _ref.layout,
|
|
85
|
+
title = _ref.title,
|
|
83
86
|
items = _ref.items,
|
|
84
87
|
numbersStyle = _ref.numbersStyle,
|
|
85
88
|
ascending = _ref.ascending,
|
|
@@ -123,33 +126,48 @@ var RankingScreen = function RankingScreen(_ref) {
|
|
|
123
126
|
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
124
127
|
var backgroundPlaying = current && (isView || isEdit);
|
|
125
128
|
var mediaShouldLoad = current || active;
|
|
129
|
+
var hasTitle = utils.isTextFilled(title);
|
|
130
|
+
var titleElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
131
|
+
placeholder: "Title",
|
|
132
|
+
emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
133
|
+
id: "BSTWf8",
|
|
134
|
+
defaultMessage: [{
|
|
135
|
+
"type": 0,
|
|
136
|
+
"value": "Title"
|
|
137
|
+
}]
|
|
138
|
+
}),
|
|
139
|
+
emptyClassName: classNames__default["default"]([styles.empty, styles.emptyTitle]),
|
|
140
|
+
isEmpty: !hasTitle
|
|
141
|
+
}, hasTitle ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
|
|
142
|
+
className: styles.title
|
|
143
|
+
}, title)) : null);
|
|
126
144
|
var elements = (finalItems || []).map(function (item, itemI) {
|
|
127
145
|
var _ref2 = item || {},
|
|
128
146
|
_ref2$title = _ref2.title,
|
|
129
|
-
|
|
147
|
+
itemTitle = _ref2$title === void 0 ? null : _ref2$title,
|
|
130
148
|
_ref2$description = _ref2.description,
|
|
131
149
|
description = _ref2$description === void 0 ? null : _ref2$description;
|
|
132
|
-
var
|
|
150
|
+
var hasItemTitle = utils.isTextFilled(itemTitle);
|
|
133
151
|
var hasDescription = utils.isTextFilled(description);
|
|
134
|
-
var
|
|
135
|
-
className: styles.
|
|
152
|
+
var itemTitleElement = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
153
|
+
className: styles.itemTitle
|
|
136
154
|
}, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
137
155
|
placeholder: "title",
|
|
138
156
|
emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
139
|
-
id: "
|
|
157
|
+
id: "bmO4Ss",
|
|
140
158
|
defaultMessage: [{
|
|
141
159
|
"type": 0,
|
|
142
|
-
"value": "Title"
|
|
160
|
+
"value": "Entry Title"
|
|
143
161
|
}]
|
|
144
162
|
}),
|
|
145
163
|
emptyClassName: styles.empty,
|
|
146
|
-
isEmpty: !
|
|
147
|
-
},
|
|
164
|
+
isEmpty: !hasItemTitle
|
|
165
|
+
}, hasItemTitle ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
|
|
148
166
|
transitions: transitions,
|
|
149
167
|
playing: transitionPlaying,
|
|
150
168
|
delay: transitionStagger * itemI,
|
|
151
169
|
disabled: transitionDisabled
|
|
152
|
-
}, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"],
|
|
170
|
+
}, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], itemTitle)) : null));
|
|
153
171
|
var descriptionElement = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
154
172
|
className: styles.description
|
|
155
173
|
}, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
@@ -186,7 +204,7 @@ var RankingScreen = function RankingScreen(_ref) {
|
|
|
186
204
|
textStyle: numbersStyle
|
|
187
205
|
}))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
188
206
|
className: styles.label
|
|
189
|
-
},
|
|
207
|
+
}, itemTitleElement, descriptionElement));
|
|
190
208
|
});
|
|
191
209
|
|
|
192
210
|
// Call to Action
|
|
@@ -243,7 +261,9 @@ var RankingScreen = function RankingScreen(_ref) {
|
|
|
243
261
|
paddingTop: !isPlaceholder && hasHeader ? spacing : (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
244
262
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (foterHeight || spacing)
|
|
245
263
|
} : null
|
|
246
|
-
},
|
|
264
|
+
}, titleElement, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
265
|
+
className: styles.elementsContainer
|
|
266
|
+
}, elements))), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
247
267
|
ref: footerRef,
|
|
248
268
|
className: classNames__default["default"]([styles.callToAction, _defineProperty__default["default"]({}, styles.disabled, !scrolledBottom)]),
|
|
249
269
|
style: {
|
|
@@ -347,6 +367,20 @@ var definition = {
|
|
|
347
367
|
"value": "Layout"
|
|
348
368
|
}]
|
|
349
369
|
})
|
|
370
|
+
}, {
|
|
371
|
+
name: 'title',
|
|
372
|
+
type: 'heading-element',
|
|
373
|
+
// inline: true,
|
|
374
|
+
theme: {
|
|
375
|
+
textStyle: 'heading1'
|
|
376
|
+
},
|
|
377
|
+
label: reactIntl.defineMessage({
|
|
378
|
+
id: "N25iDO",
|
|
379
|
+
defaultMessage: [{
|
|
380
|
+
"type": 0,
|
|
381
|
+
"value": "Title"
|
|
382
|
+
}]
|
|
383
|
+
})
|
|
350
384
|
}, {
|
|
351
385
|
name: 'items',
|
|
352
386
|
type: 'entries',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-ranking",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.412",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"access": "public",
|
|
72
72
|
"registry": "https://registry.npmjs.org/"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "4d0b827ed8a3282317d05f9c3a4c5346639c5fe7"
|
|
75
75
|
}
|