@micromag/screen-timeline 0.3.425 → 0.3.429
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 +1 -2
- package/lib/index.js +61 -83
- package/package.json +21 -13
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-timeline-container .micromag-screen-timeline-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-timeline-container .micromag-screen-timeline-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-timeline-container{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-background{z-index:0}.micromag-screen-timeline-container .micromag-screen-timeline-content{z-index:1}.micromag-screen-timeline-container .micromag-screen-timeline-empty{height:50px;margin-right:10px}.micromag-screen-timeline-container .micromag-screen-timeline-emptyTitle{width:100%}.micromag-screen-timeline-container .micromag-screen-timeline-item{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-element{display:-ms-flexbox;display:flex}.micromag-screen-timeline-container .micromag-screen-timeline-element.micromag-screen-timeline-hidden .micromag-screen-timeline-body{display:none;visibility:hidden}.micromag-screen-timeline-container .micromag-screen-timeline-timeline{-ms-flex-negative:0;-ms-flex-align:center;align-items:center;-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;flex-shrink:0;padding-right:20px;width:15px}.micromag-screen-timeline-container .micromag-screen-timeline-line{-ms-flex-positive:1;flex-grow:1;width:1px}.micromag-screen-timeline-container .micromag-screen-timeline-line.micromag-screen-timeline-hidden{width:auto}.micromag-screen-timeline-container .micromag-screen-timeline-bullet{border-style:solid;border-width:1px;height:15px;margin:2px 0;width:15px}.micromag-screen-timeline-container .micromag-screen-timeline-body{-ms-flex-positive:1;flex-grow:1}.micromag-screen-timeline-container .micromag-screen-timeline-body.micromag-screen-timeline-last{margin-bottom:20px}.micromag-screen-timeline-container .micromag-screen-timeline-description,.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container .micromag-screen-timeline-title{padding:8px 0}.micromag-screen-timeline-container .micromag-screen-timeline-image,.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container .micromag-screen-timeline-video{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer{overflow:hidden}.micromag-screen-timeline-container .micromag-screen-timeline-callToAction{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out
|
|
1
|
+
.micromag-screen-timeline-container .micromag-screen-timeline-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-timeline-container .micromag-screen-timeline-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-timeline-container{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-background{z-index:0}.micromag-screen-timeline-container .micromag-screen-timeline-content{z-index:1}.micromag-screen-timeline-container .micromag-screen-timeline-empty{height:50px;margin-right:10px}.micromag-screen-timeline-container .micromag-screen-timeline-emptyTitle{width:100%}.micromag-screen-timeline-container .micromag-screen-timeline-item{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-element{display:-webkit-box;display:-ms-flexbox;display:flex}.micromag-screen-timeline-container .micromag-screen-timeline-element.micromag-screen-timeline-hidden .micromag-screen-timeline-body{display:none;visibility:hidden}.micromag-screen-timeline-container .micromag-screen-timeline-timeline{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-negative:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:content-box;box-sizing:content-box;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;flex-shrink:0;padding-right:20px;width:15px}.micromag-screen-timeline-container .micromag-screen-timeline-line{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:1px}.micromag-screen-timeline-container .micromag-screen-timeline-line.micromag-screen-timeline-hidden{width:auto}.micromag-screen-timeline-container .micromag-screen-timeline-bullet{border-style:solid;border-width:1px;height:15px;margin:2px 0;width:15px}.micromag-screen-timeline-container .micromag-screen-timeline-body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.micromag-screen-timeline-container .micromag-screen-timeline-body.micromag-screen-timeline-last{margin-bottom:20px}.micromag-screen-timeline-container .micromag-screen-timeline-description,.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container .micromag-screen-timeline-title{padding:8px 0}.micromag-screen-timeline-container .micromag-screen-timeline-image,.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container .micromag-screen-timeline-video{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer{overflow:hidden}.micromag-screen-timeline-container .micromag-screen-timeline-callToAction{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-timeline-container .micromag-screen-timeline-callToAction a{padding:0}.micromag-screen-timeline-container .micromag-screen-timeline-callToAction.micromag-screen-timeline-disabled{opacity:0;pointer-events:none}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-scroll{padding:10px}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-timeline{padding-right:0}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-bullet{background-color:hsla(0,0%,100%,.6);border-color:hsla(0,0%,100%,.6);height:10px;mix-blend-mode:difference;width:10px}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-body.micromag-screen-timeline-last{margin-bottom:4px}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-description,.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-title{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:center;padding:2px 0}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-line{background-color:hsla(0,0%,100%,.6);mix-blend-mode:difference}.micromag-screen-timeline-container.micromag-screen-timeline-circleBulletShape .micromag-screen-timeline-bullet{border-radius:50%}.micromag-screen-timeline-container.micromag-screen-timeline-withoutLines .micromag-screen-timeline-timeline{visibility:hidden}
|
package/es/index.js
CHANGED
|
@@ -63,7 +63,6 @@ var defaultProps = {
|
|
|
63
63
|
className: null
|
|
64
64
|
};
|
|
65
65
|
var Timeline = function Timeline(_ref) {
|
|
66
|
-
var _ref10;
|
|
67
66
|
var layout = _ref.layout,
|
|
68
67
|
title = _ref.title,
|
|
69
68
|
items = _ref.items,
|
|
@@ -289,7 +288,7 @@ var Timeline = function Timeline(_ref) {
|
|
|
289
288
|
setScrolledBottom(false);
|
|
290
289
|
}, [setScrolledBottom]);
|
|
291
290
|
return /*#__PURE__*/React.createElement("div", {
|
|
292
|
-
className: classNames([styles.container, (
|
|
291
|
+
className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder), styles["".concat(bulletShape, "BulletShape")], bulletShape !== null), styles.withoutLines, itemsCount < 2)]),
|
|
293
292
|
"data-screen-ready": ready
|
|
294
293
|
}, /*#__PURE__*/React.createElement(Container, {
|
|
295
294
|
width: width,
|
package/lib/index.js
CHANGED
|
@@ -28,46 +28,25 @@ var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructur
|
|
|
28
28
|
var _extends = require('@babel/runtime/helpers/extends');
|
|
29
29
|
var appleNews = require('@micromag/transforms/apple-news');
|
|
30
30
|
|
|
31
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
32
|
-
|
|
33
|
-
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
34
|
-
var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
|
|
35
|
-
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
|
|
36
|
-
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
|
|
37
|
-
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
38
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
39
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
40
|
-
var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
|
|
41
|
-
var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
|
|
42
|
-
var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
|
|
43
|
-
var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
|
|
44
|
-
var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
|
|
45
|
-
var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
|
|
46
|
-
var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
|
|
47
|
-
var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
|
|
48
|
-
var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
|
|
49
|
-
var _objectDestructuringEmpty__default = /*#__PURE__*/_interopDefaultLegacy(_objectDestructuringEmpty);
|
|
50
|
-
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
51
|
-
|
|
52
31
|
var styles = {"container":"micromag-screen-timeline-container","background":"micromag-screen-timeline-background","empty":"micromag-screen-timeline-empty","content":"micromag-screen-timeline-content","emptyTitle":"micromag-screen-timeline-emptyTitle","item":"micromag-screen-timeline-item","element":"micromag-screen-timeline-element","hidden":"micromag-screen-timeline-hidden","body":"micromag-screen-timeline-body","timeline":"micromag-screen-timeline-timeline","line":"micromag-screen-timeline-line","bullet":"micromag-screen-timeline-bullet","last":"micromag-screen-timeline-last","title":"micromag-screen-timeline-title","description":"micromag-screen-timeline-description","imageContainer":"micromag-screen-timeline-imageContainer","image":"micromag-screen-timeline-image","video":"micromag-screen-timeline-video","callToAction":"micromag-screen-timeline-callToAction","disabled":"micromag-screen-timeline-disabled","isPlaceholder":"micromag-screen-timeline-isPlaceholder","scroll":"micromag-screen-timeline-scroll","circleBulletShape":"micromag-screen-timeline-circleBulletShape","withoutLines":"micromag-screen-timeline-withoutLines"};
|
|
53
32
|
|
|
54
33
|
var propTypes = {
|
|
55
|
-
layout:
|
|
34
|
+
layout: PropTypes.oneOf(['normal', 'title-description-image', 'title-image-description', 'image-title-description']),
|
|
56
35
|
title: core.PropTypes.headingElement,
|
|
57
|
-
items:
|
|
36
|
+
items: PropTypes.arrayOf(core.PropTypes.textElement),
|
|
58
37
|
bulletColor: core.PropTypes.color,
|
|
59
38
|
lineColor: core.PropTypes.color,
|
|
60
|
-
bulletShape:
|
|
61
|
-
bulletFilled:
|
|
62
|
-
illustrated:
|
|
63
|
-
spacing:
|
|
39
|
+
bulletShape: PropTypes.oneOf(['circle', 'square']),
|
|
40
|
+
bulletFilled: PropTypes.bool,
|
|
41
|
+
illustrated: PropTypes.bool,
|
|
42
|
+
spacing: PropTypes.number,
|
|
64
43
|
header: core.PropTypes.header,
|
|
65
44
|
footer: core.PropTypes.footer,
|
|
66
45
|
background: core.PropTypes.backgroundElement,
|
|
67
|
-
current:
|
|
68
|
-
active:
|
|
69
|
-
type:
|
|
70
|
-
className:
|
|
46
|
+
current: PropTypes.bool,
|
|
47
|
+
active: PropTypes.bool,
|
|
48
|
+
type: PropTypes.string,
|
|
49
|
+
className: PropTypes.string
|
|
71
50
|
};
|
|
72
51
|
var defaultProps = {
|
|
73
52
|
layout: 'normal',
|
|
@@ -88,7 +67,6 @@ var defaultProps = {
|
|
|
88
67
|
className: null
|
|
89
68
|
};
|
|
90
69
|
var Timeline = function Timeline(_ref) {
|
|
91
|
-
var _ref10;
|
|
92
70
|
var layout = _ref.layout,
|
|
93
71
|
title = _ref.title,
|
|
94
72
|
items = _ref.items,
|
|
@@ -127,7 +105,7 @@ var Timeline = function Timeline(_ref) {
|
|
|
127
105
|
isStatic = _useScreenRenderConte.isStatic,
|
|
128
106
|
isCapture = _useScreenRenderConte.isCapture;
|
|
129
107
|
var finalItems = React.useMemo(function () {
|
|
130
|
-
return isPlaceholder ?
|
|
108
|
+
return isPlaceholder ? _toConsumableArray(new Array(5)).map(function () {
|
|
131
109
|
return {};
|
|
132
110
|
}) : items || [null];
|
|
133
111
|
}, [isPlaceholder, items]);
|
|
@@ -141,7 +119,7 @@ var Timeline = function Timeline(_ref) {
|
|
|
141
119
|
return acc + (image !== null ? 1 : 0);
|
|
142
120
|
}, 0) : 0;
|
|
143
121
|
var _useState = React.useState(0),
|
|
144
|
-
_useState2 =
|
|
122
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
145
123
|
imagesLoaded = _useState2[0],
|
|
146
124
|
setImagesLoaded = _useState2[1];
|
|
147
125
|
var ready = imagesLoaded >= imagesCount;
|
|
@@ -158,7 +136,7 @@ var Timeline = function Timeline(_ref) {
|
|
|
158
136
|
var firstLineRef = React.useRef(null);
|
|
159
137
|
var firstContentRef = React.useRef(null);
|
|
160
138
|
var _useState3 = React.useState(0),
|
|
161
|
-
_useState4 =
|
|
139
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
162
140
|
imageWidth = _useState4[0],
|
|
163
141
|
setImageWidth = _useState4[1];
|
|
164
142
|
React.useEffect(function () {
|
|
@@ -184,7 +162,7 @@ var Timeline = function Timeline(_ref) {
|
|
|
184
162
|
var typesCount = elementsTypes.length;
|
|
185
163
|
var _ref4 = description || {},
|
|
186
164
|
descriptionTextStyle = _ref4.textStyle;
|
|
187
|
-
return /*#__PURE__*/
|
|
165
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
188
166
|
className: styles.item,
|
|
189
167
|
key: "item-".concat(itemI)
|
|
190
168
|
}, elementsTypes.map(function (elementType, typeI) {
|
|
@@ -193,11 +171,11 @@ var Timeline = function Timeline(_ref) {
|
|
|
193
171
|
switch (elementType) {
|
|
194
172
|
case 'title':
|
|
195
173
|
hasElement = hasItemTitle;
|
|
196
|
-
elementContent = /*#__PURE__*/
|
|
174
|
+
elementContent = /*#__PURE__*/React.createElement("div", {
|
|
197
175
|
className: styles.title
|
|
198
|
-
}, /*#__PURE__*/
|
|
176
|
+
}, /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
199
177
|
placeholder: "title",
|
|
200
|
-
emptyLabel: /*#__PURE__*/
|
|
178
|
+
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
201
179
|
id: "bmO4Ss",
|
|
202
180
|
defaultMessage: [{
|
|
203
181
|
"type": 0,
|
|
@@ -206,15 +184,15 @@ var Timeline = function Timeline(_ref) {
|
|
|
206
184
|
}),
|
|
207
185
|
emptyClassName: styles.empty,
|
|
208
186
|
isEmpty: !hasItemTitle
|
|
209
|
-
}, hasItemTitle ? /*#__PURE__*/
|
|
187
|
+
}, hasItemTitle ? /*#__PURE__*/React.createElement(Heading, itemTitle) : null));
|
|
210
188
|
break;
|
|
211
189
|
case 'image':
|
|
212
190
|
hasElement = hasImage;
|
|
213
|
-
elementContent = /*#__PURE__*/
|
|
191
|
+
elementContent = /*#__PURE__*/React.createElement("div", {
|
|
214
192
|
className: styles.imageContainer
|
|
215
|
-
}, /*#__PURE__*/
|
|
193
|
+
}, /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
216
194
|
placeholder: "image",
|
|
217
|
-
emptyLabel: /*#__PURE__*/
|
|
195
|
+
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
218
196
|
id: "ebsPd4",
|
|
219
197
|
defaultMessage: [{
|
|
220
198
|
"type": 0,
|
|
@@ -223,7 +201,7 @@ var Timeline = function Timeline(_ref) {
|
|
|
223
201
|
}),
|
|
224
202
|
emptyClassName: styles.empty,
|
|
225
203
|
isEmpty: !hasImage
|
|
226
|
-
}, hasImage ? /*#__PURE__*/
|
|
204
|
+
}, hasImage ? /*#__PURE__*/React.createElement(Visual, {
|
|
227
205
|
className: styles.image,
|
|
228
206
|
videoClassName: styles.video,
|
|
229
207
|
media: image,
|
|
@@ -238,11 +216,11 @@ var Timeline = function Timeline(_ref) {
|
|
|
238
216
|
break;
|
|
239
217
|
case 'description':
|
|
240
218
|
hasElement = hasDescription;
|
|
241
|
-
elementContent = /*#__PURE__*/
|
|
219
|
+
elementContent = /*#__PURE__*/React.createElement("div", {
|
|
242
220
|
className: styles.description
|
|
243
|
-
}, /*#__PURE__*/
|
|
221
|
+
}, /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
244
222
|
placeholder: "text",
|
|
245
|
-
emptyLabel: /*#__PURE__*/
|
|
223
|
+
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
246
224
|
id: "507VAi",
|
|
247
225
|
defaultMessage: [{
|
|
248
226
|
"type": 0,
|
|
@@ -251,8 +229,8 @@ var Timeline = function Timeline(_ref) {
|
|
|
251
229
|
}),
|
|
252
230
|
emptyClassName: styles.empty,
|
|
253
231
|
isEmpty: !hasDescription
|
|
254
|
-
}, hasDescription ? /*#__PURE__*/
|
|
255
|
-
textStyle:
|
|
232
|
+
}, hasDescription ? /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
|
|
233
|
+
textStyle: _objectSpread({}, descriptionTextStyle)
|
|
256
234
|
})) : null));
|
|
257
235
|
break;
|
|
258
236
|
default:
|
|
@@ -264,24 +242,24 @@ var Timeline = function Timeline(_ref) {
|
|
|
264
242
|
var lastType = typeI === typesCount - 1;
|
|
265
243
|
var topLineHidden = firstItem && typeI <= titleIndex || lastItem && typeI > titleIndex;
|
|
266
244
|
var bottomLineHidden = firstItem && typeI < titleIndex || lastItem && typeI >= titleIndex;
|
|
267
|
-
return /*#__PURE__*/
|
|
245
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
268
246
|
key: "element-".concat(elementType),
|
|
269
|
-
className:
|
|
247
|
+
className: classNames([styles.element, styles["element-".concat(elementType)], _defineProperty({}, styles.hidden, (isView || isStatic) && !hasElement)]),
|
|
270
248
|
ref: itemI === 0 ? firstContentRef : null
|
|
271
|
-
}, /*#__PURE__*/
|
|
249
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
272
250
|
className: styles.timeline,
|
|
273
251
|
ref: itemI === 0 ? firstLineRef : null
|
|
274
|
-
}, /*#__PURE__*/
|
|
275
|
-
className:
|
|
276
|
-
style:
|
|
277
|
-
}), elementType === 'title' ? /*#__PURE__*/
|
|
252
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
253
|
+
className: classNames([styles.line, _defineProperty({}, styles.hidden, topLineHidden)]),
|
|
254
|
+
style: _objectSpread({}, !topLineHidden ? utils.getStyleFromColor(lineColor, 'backgroundColor') : null)
|
|
255
|
+
}), elementType === 'title' ? /*#__PURE__*/React.createElement("div", {
|
|
278
256
|
className: styles.bullet,
|
|
279
|
-
style:
|
|
280
|
-
}) : null, /*#__PURE__*/
|
|
281
|
-
className:
|
|
282
|
-
style:
|
|
283
|
-
})), /*#__PURE__*/
|
|
284
|
-
className:
|
|
257
|
+
style: _objectSpread(_objectSpread({}, utils.getStyleFromColor(bulletColor, 'borderColor')), bulletFilled ? utils.getStyleFromColor(bulletColor, 'backgroundColor') : null)
|
|
258
|
+
}) : null, /*#__PURE__*/React.createElement("div", {
|
|
259
|
+
className: classNames([styles.line, _defineProperty({}, styles.hidden, bottomLineHidden)]),
|
|
260
|
+
style: _objectSpread({}, !bottomLineHidden ? utils.getStyleFromColor(lineColor, 'backgroundColor') : null)
|
|
261
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
262
|
+
className: classNames([styles.body, _defineProperty({}, styles.last, lastType && !lastItem)])
|
|
285
263
|
}, elementContent));
|
|
286
264
|
}));
|
|
287
265
|
});
|
|
@@ -296,7 +274,7 @@ var Timeline = function Timeline(_ref) {
|
|
|
296
274
|
isPreview: isPreview
|
|
297
275
|
});
|
|
298
276
|
var _useState5 = React.useState(false),
|
|
299
|
-
_useState6 =
|
|
277
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
300
278
|
scrolledBottom = _useState6[0],
|
|
301
279
|
setScrolledBottom = _useState6[1];
|
|
302
280
|
var _useDimensionObserver = hooks.useDimensionObserver(),
|
|
@@ -313,45 +291,45 @@ var Timeline = function Timeline(_ref) {
|
|
|
313
291
|
var onScrolledNotBottom = React.useCallback(function () {
|
|
314
292
|
setScrolledBottom(false);
|
|
315
293
|
}, [setScrolledBottom]);
|
|
316
|
-
return /*#__PURE__*/
|
|
317
|
-
className:
|
|
294
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
295
|
+
className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder), styles["".concat(bulletShape, "BulletShape")], bulletShape !== null), styles.withoutLines, itemsCount < 2)]),
|
|
318
296
|
"data-screen-ready": ready
|
|
319
|
-
}, /*#__PURE__*/
|
|
297
|
+
}, /*#__PURE__*/React.createElement(Container, {
|
|
320
298
|
width: width,
|
|
321
299
|
height: height,
|
|
322
300
|
className: styles.content
|
|
323
|
-
}, /*#__PURE__*/
|
|
301
|
+
}, /*#__PURE__*/React.createElement(Scroll, {
|
|
324
302
|
className: styles.scroll,
|
|
325
303
|
verticalAlign: "middle",
|
|
326
304
|
disabled: scrollingDisabled,
|
|
327
305
|
onScrolledBottom: onScrolledBottom,
|
|
328
306
|
onScrolledNotBottom: onScrolledNotBottom
|
|
329
|
-
}, /*#__PURE__*/
|
|
307
|
+
}, /*#__PURE__*/React.createElement(Layout, {
|
|
330
308
|
style: !isPlaceholder ? {
|
|
331
309
|
padding: spacing,
|
|
332
310
|
paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
|
|
333
311
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight || spacing)
|
|
334
312
|
} : null
|
|
335
|
-
}, !isPlaceholder && hasHeader ? /*#__PURE__*/
|
|
313
|
+
}, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
|
|
336
314
|
style: {
|
|
337
315
|
paddingBottom: spacing
|
|
338
316
|
}
|
|
339
|
-
}, /*#__PURE__*/
|
|
317
|
+
}, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
340
318
|
placeholder: "Title",
|
|
341
|
-
emptyLabel: /*#__PURE__*/
|
|
319
|
+
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
342
320
|
id: "BSTWf8",
|
|
343
321
|
defaultMessage: [{
|
|
344
322
|
"type": 0,
|
|
345
323
|
"value": "Title"
|
|
346
324
|
}]
|
|
347
325
|
}),
|
|
348
|
-
emptyClassName:
|
|
326
|
+
emptyClassName: classNames([styles.empty, styles.emptyTitle]),
|
|
349
327
|
isEmpty: !hasTitle
|
|
350
|
-
}, hasTitle ? /*#__PURE__*/
|
|
328
|
+
}, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
|
|
351
329
|
className: styles.title
|
|
352
|
-
}, title)) : null), timelineElements)), !isPlaceholder && hasFooter ? /*#__PURE__*/
|
|
330
|
+
}, title)) : null), timelineElements)), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
|
|
353
331
|
ref: footerRef,
|
|
354
|
-
className:
|
|
332
|
+
className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
|
|
355
333
|
style: {
|
|
356
334
|
transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
|
|
357
335
|
paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
|
|
@@ -359,7 +337,7 @@ var Timeline = function Timeline(_ref) {
|
|
|
359
337
|
paddingTop: spacing / 2,
|
|
360
338
|
paddingBottom: spacing / 2
|
|
361
339
|
}
|
|
362
|
-
}, /*#__PURE__*/
|
|
340
|
+
}, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
|
|
363
341
|
background: background,
|
|
364
342
|
width: width,
|
|
365
343
|
height: height,
|
|
@@ -376,8 +354,8 @@ Timeline.propTypes = propTypes;
|
|
|
376
354
|
Timeline.defaultProps = defaultProps;
|
|
377
355
|
|
|
378
356
|
var TimelineIllustratedScreen = function TimelineIllustratedScreen(_ref) {
|
|
379
|
-
var props =
|
|
380
|
-
return /*#__PURE__*/
|
|
357
|
+
var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
358
|
+
return /*#__PURE__*/React.createElement(Timeline, Object.assign({}, props, {
|
|
381
359
|
illustrated: true
|
|
382
360
|
}));
|
|
383
361
|
};
|
|
@@ -393,12 +371,12 @@ var transform = function transform(newStory, _ref) {
|
|
|
393
371
|
var _Text2 = appleNews.Text(titleStory, it.description),
|
|
394
372
|
descriptionStory = _Text2.story,
|
|
395
373
|
descriptionComponent = _Text2.component;
|
|
396
|
-
var _Container = appleNews.Container(descriptionStory, [].concat(
|
|
374
|
+
var _Container = appleNews.Container(descriptionStory, [].concat(_toConsumableArray(titleComponent ? [titleComponent] : []), _toConsumableArray(descriptionComponent ? [descriptionComponent] : []))),
|
|
397
375
|
containerStory = _Container.story,
|
|
398
376
|
containerComponent = _Container.component;
|
|
399
377
|
return {
|
|
400
378
|
story: containerStory,
|
|
401
|
-
components: [].concat(
|
|
379
|
+
components: [].concat(_toConsumableArray(acc.components || []), _toConsumableArray(containerComponent ? [containerComponent] : []))
|
|
402
380
|
};
|
|
403
381
|
}, {
|
|
404
382
|
story: newStory,
|
|
@@ -411,8 +389,8 @@ var transform = function transform(newStory, _ref) {
|
|
|
411
389
|
var _Container2 = appleNews.Container(reducedStory, reducedComponents),
|
|
412
390
|
bigContainerStory = _Container2.story,
|
|
413
391
|
bigContainerComponent = _Container2.component;
|
|
414
|
-
return
|
|
415
|
-
components: [].concat(
|
|
392
|
+
return _objectSpread(_objectSpread({}, bigContainerStory), {}, {
|
|
393
|
+
components: [].concat(_toConsumableArray(newStory.components || []), _toConsumableArray(bigContainerComponent ? [bigContainerComponent] : []))
|
|
416
394
|
});
|
|
417
395
|
};
|
|
418
396
|
|
|
@@ -779,4 +757,4 @@ var definition = [{
|
|
|
779
757
|
|
|
780
758
|
exports.TimelineIllustratedScreen = TimelineIllustratedScreen;
|
|
781
759
|
exports.TimelineScreen = Timeline;
|
|
782
|
-
exports
|
|
760
|
+
exports.default = definition;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-timeline",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.429",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [
|
|
@@ -32,6 +32,14 @@
|
|
|
32
32
|
"license": "ISC",
|
|
33
33
|
"main": "lib/index.js",
|
|
34
34
|
"module": "es/index.js",
|
|
35
|
+
"style": "assets/css/styles.css",
|
|
36
|
+
"exports": {
|
|
37
|
+
".": {
|
|
38
|
+
"require": "./lib/index.js",
|
|
39
|
+
"import": "./es/index.js"
|
|
40
|
+
},
|
|
41
|
+
"./assets/css/*.css": "./assets/css/*.css"
|
|
42
|
+
},
|
|
35
43
|
"files": [
|
|
36
44
|
"lib",
|
|
37
45
|
"es",
|
|
@@ -50,17 +58,17 @@
|
|
|
50
58
|
},
|
|
51
59
|
"dependencies": {
|
|
52
60
|
"@babel/runtime": "^7.13.10",
|
|
53
|
-
"@micromag/core": "^0.3.
|
|
54
|
-
"@micromag/element-background": "^0.3.
|
|
55
|
-
"@micromag/element-container": "^0.3.
|
|
56
|
-
"@micromag/element-footer": "^0.3.
|
|
57
|
-
"@micromag/element-header": "^0.3.
|
|
58
|
-
"@micromag/element-heading": "^0.3.
|
|
59
|
-
"@micromag/element-layout": "^0.3.
|
|
60
|
-
"@micromag/element-scroll": "^0.3.
|
|
61
|
-
"@micromag/element-text": "^0.3.
|
|
62
|
-
"@micromag/element-visual": "^0.3.
|
|
63
|
-
"@micromag/transforms": "^0.3.
|
|
61
|
+
"@micromag/core": "^0.3.429",
|
|
62
|
+
"@micromag/element-background": "^0.3.429",
|
|
63
|
+
"@micromag/element-container": "^0.3.429",
|
|
64
|
+
"@micromag/element-footer": "^0.3.429",
|
|
65
|
+
"@micromag/element-header": "^0.3.429",
|
|
66
|
+
"@micromag/element-heading": "^0.3.429",
|
|
67
|
+
"@micromag/element-layout": "^0.3.429",
|
|
68
|
+
"@micromag/element-scroll": "^0.3.429",
|
|
69
|
+
"@micromag/element-text": "^0.3.429",
|
|
70
|
+
"@micromag/element-visual": "^0.3.429",
|
|
71
|
+
"@micromag/transforms": "^0.3.429",
|
|
64
72
|
"classnames": "^2.2.6",
|
|
65
73
|
"lodash": "^4.17.21",
|
|
66
74
|
"prop-types": "^15.7.2",
|
|
@@ -71,5 +79,5 @@
|
|
|
71
79
|
"access": "public",
|
|
72
80
|
"registry": "https://registry.npmjs.org/"
|
|
73
81
|
},
|
|
74
|
-
"gitHead": "
|
|
82
|
+
"gitHead": "f15e72b88ecfda4c54b87626513149b58572c52b"
|
|
75
83
|
}
|