@micromag/screen-timeline 0.3.310 → 0.3.318

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 (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +70 -103
  3. package/lib/index.js +71 -103
  4. package/package.json +13 -13
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-timeline-container .micromag-screen-timeline-background{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-timeline-container .micromag-screen-timeline-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.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-item{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-element{display:-webkit-flex;display:-ms-flexbox;display:flex}.micromag-screen-timeline-container .micromag-screen-timeline-timeline{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:15px;padding-right:20px}.micromag-screen-timeline-container .micromag-screen-timeline-line{-webkit-flex-grow: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{width:15px;height:15px;margin:2px 0;border-width:1px;border-style:solid}.micromag-screen-timeline-container .micromag-screen-timeline-body{-webkit-flex-grow: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{position:absolute;bottom:0;left:0;width:100%;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.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{width:10px;height:10px;border-color:hsla(0,0%,100%,.6);background-color:hsla(0,0%,100%,.6);mix-blend-mode:difference}.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{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%;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}
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-item{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-element{display:-ms-flexbox;display:flex}.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;-o-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{-ms-flex-pack:center;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
@@ -19,10 +19,11 @@ import Layout from '@micromag/element-layout';
19
19
  import Scroll from '@micromag/element-scroll';
20
20
  import Text from '@micromag/element-text';
21
21
  import Visual from '@micromag/element-visual';
22
+ import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
22
23
  import _extends from '@babel/runtime/helpers/extends';
23
24
  import { Text as Text$1, Container as Container$1 } from '@micromag/transforms/apple-news';
24
25
 
25
- var styles = {"container":"micromag-screen-timeline-container","background":"micromag-screen-timeline-background","empty":"micromag-screen-timeline-empty","content":"micromag-screen-timeline-content","item":"micromag-screen-timeline-item","element":"micromag-screen-timeline-element","timeline":"micromag-screen-timeline-timeline","line":"micromag-screen-timeline-line","hidden":"micromag-screen-timeline-hidden","bullet":"micromag-screen-timeline-bullet","body":"micromag-screen-timeline-body","last":"micromag-screen-timeline-last","description":"micromag-screen-timeline-description","imageContainer":"micromag-screen-timeline-imageContainer","title":"micromag-screen-timeline-title","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"};
26
+ var styles = {"container":"micromag-screen-timeline-container","background":"micromag-screen-timeline-background","empty":"micromag-screen-timeline-empty","content":"micromag-screen-timeline-content","item":"micromag-screen-timeline-item","element":"micromag-screen-timeline-element","timeline":"micromag-screen-timeline-timeline","line":"micromag-screen-timeline-line","hidden":"micromag-screen-timeline-hidden","bullet":"micromag-screen-timeline-bullet","body":"micromag-screen-timeline-body","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"};
26
27
 
27
28
  var propTypes = {
28
29
  layout: PropTypes.oneOf(['normal', 'title-description-image', 'title-image-description', 'image-title-description']),
@@ -60,54 +61,45 @@ var defaultProps = {
60
61
  type: null,
61
62
  className: null
62
63
  };
63
-
64
64
  var Timeline = function Timeline(_ref) {
65
65
  var _ref10;
66
-
67
66
  var layout = _ref.layout,
68
- items = _ref.items,
69
- bulletColor = _ref.bulletColor,
70
- lineColor = _ref.lineColor,
71
- bulletShape = _ref.bulletShape,
72
- bulletFilled = _ref.bulletFilled,
73
- illustrated = _ref.illustrated,
74
- spacing = _ref.spacing,
75
- background = _ref.background,
76
- callToAction = _ref.callToAction,
77
- current = _ref.current,
78
- active = _ref.active,
79
- transitions = _ref.transitions,
80
- transitionStagger = _ref.transitionStagger,
81
- type = _ref.type,
82
- className = _ref.className;
67
+ items = _ref.items,
68
+ bulletColor = _ref.bulletColor,
69
+ lineColor = _ref.lineColor,
70
+ bulletShape = _ref.bulletShape,
71
+ bulletFilled = _ref.bulletFilled,
72
+ illustrated = _ref.illustrated,
73
+ spacing = _ref.spacing,
74
+ background = _ref.background,
75
+ callToAction = _ref.callToAction,
76
+ current = _ref.current,
77
+ active = _ref.active,
78
+ transitions = _ref.transitions,
79
+ transitionStagger = _ref.transitionStagger,
80
+ type = _ref.type,
81
+ className = _ref.className;
83
82
  var trackScreenEvent = useTrackScreenEvent(type);
84
-
85
83
  var _useScreenSize = useScreenSize(),
86
- width = _useScreenSize.width,
87
- height = _useScreenSize.height,
88
- resolution = _useScreenSize.resolution;
89
-
84
+ width = _useScreenSize.width,
85
+ height = _useScreenSize.height,
86
+ resolution = _useScreenSize.resolution;
90
87
  var _useViewerContext = useViewerContext(),
91
- viewerTopHeight = _useViewerContext.topHeight,
92
- viewerBottomHeight = _useViewerContext.bottomHeight,
93
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
94
-
88
+ viewerTopHeight = _useViewerContext.topHeight,
89
+ viewerBottomHeight = _useViewerContext.bottomHeight,
90
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
95
91
  var _useViewerWebView = useViewerWebView(),
96
- openWebView = _useViewerWebView.open;
97
-
92
+ openWebView = _useViewerWebView.open;
98
93
  var _usePlaybackContext = usePlaybackContext(),
99
- muted = _usePlaybackContext.muted;
100
-
94
+ muted = _usePlaybackContext.muted;
101
95
  var mediaRef = usePlaybackMediaRef(current);
102
-
103
96
  var _useScreenRenderConte = useScreenRenderContext(),
104
- isView = _useScreenRenderConte.isView,
105
- isPreview = _useScreenRenderConte.isPreview,
106
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
107
- isEdit = _useScreenRenderConte.isEdit,
108
- isStatic = _useScreenRenderConte.isStatic,
109
- isCapture = _useScreenRenderConte.isCapture;
110
-
97
+ isView = _useScreenRenderConte.isView,
98
+ isPreview = _useScreenRenderConte.isPreview,
99
+ isPlaceholder = _useScreenRenderConte.isPlaceholder,
100
+ isEdit = _useScreenRenderConte.isEdit,
101
+ isStatic = _useScreenRenderConte.isStatic,
102
+ isCapture = _useScreenRenderConte.isCapture;
111
103
  var finalItems = useMemo(function () {
112
104
  return isPlaceholder ? _toConsumableArray(new Array(5)).map(function () {
113
105
  return {};
@@ -117,17 +109,14 @@ var Timeline = function Timeline(_ref) {
117
109
  var hasItems = finalItems !== null && itemsCount;
118
110
  var imagesCount = hasItems ? finalItems.reduce(function (acc, curr) {
119
111
  var _ref2 = curr || {},
120
- _ref2$image = _ref2.image,
121
- image = _ref2$image === void 0 ? null : _ref2$image;
122
-
112
+ _ref2$image = _ref2.image,
113
+ image = _ref2$image === void 0 ? null : _ref2$image;
123
114
  return acc + (image !== null ? 1 : 0);
124
115
  }, 0) : 0;
125
-
126
116
  var _useState = useState(0),
127
- _useState2 = _slicedToArray(_useState, 2),
128
- imagesLoaded = _useState2[0],
129
- setImagesLoaded = _useState2[1];
130
-
117
+ _useState2 = _slicedToArray(_useState, 2),
118
+ imagesLoaded = _useState2[0],
119
+ setImagesLoaded = _useState2[1];
131
120
  var ready = imagesLoaded >= imagesCount;
132
121
  var transitionsPlaying = current && ready;
133
122
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
@@ -141,40 +130,33 @@ var Timeline = function Timeline(_ref) {
141
130
  }, [setImagesLoaded]);
142
131
  var firstLineRef = useRef(null);
143
132
  var firstContentRef = useRef(null);
144
-
145
133
  var _useState3 = useState(0),
146
- _useState4 = _slicedToArray(_useState3, 2),
147
- imageWidth = _useState4[0],
148
- setImageWidth = _useState4[1];
149
-
134
+ _useState4 = _slicedToArray(_useState3, 2),
135
+ imageWidth = _useState4[0],
136
+ setImageWidth = _useState4[1];
150
137
  useEffect(function () {
151
138
  setImageWidth(firstContentRef.current.offsetWidth - firstLineRef.current.offsetWidth);
152
139
  }, [width, height]);
153
140
  var timelineElements = (finalItems || []).map(function (item, itemI) {
154
141
  var _ref3 = item || {},
155
- _ref3$title = _ref3.title,
156
- title = _ref3$title === void 0 ? null : _ref3$title,
157
- _ref3$description = _ref3.description,
158
- description = _ref3$description === void 0 ? null : _ref3$description,
159
- _ref3$image = _ref3.image,
160
- image = _ref3$image === void 0 ? null : _ref3$image;
161
-
142
+ _ref3$title = _ref3.title,
143
+ title = _ref3$title === void 0 ? null : _ref3$title,
144
+ _ref3$description = _ref3.description,
145
+ description = _ref3$description === void 0 ? null : _ref3$description,
146
+ _ref3$image = _ref3.image,
147
+ image = _ref3$image === void 0 ? null : _ref3$image;
162
148
  var hasTitle = isTextFilled(title);
163
149
  var hasDescription = isTextFilled(description);
164
150
  var hasImage = image !== null;
165
151
  var elementsTypes = (layout === 'normal' ? 'title-description-image' : layout).split('-');
166
152
  var titleIndex = elementsTypes.indexOf('title');
167
153
  var imageIndex = elementsTypes.indexOf('image');
168
-
169
154
  if (!illustrated) {
170
155
  elementsTypes.splice(imageIndex, 1);
171
156
  }
172
-
173
157
  var typesCount = elementsTypes.length;
174
-
175
158
  var _ref4 = description || {},
176
- descriptionTextStyle = _ref4.textStyle;
177
-
159
+ descriptionTextStyle = _ref4.textStyle;
178
160
  return /*#__PURE__*/React.createElement("div", {
179
161
  className: styles.item,
180
162
  key: "item-".concat(itemI)
@@ -186,7 +168,6 @@ var Timeline = function Timeline(_ref) {
186
168
  }, elementsTypes.map(function (elementType, typeI) {
187
169
  var hasElement = false;
188
170
  var elementContent;
189
-
190
171
  switch (elementType) {
191
172
  case 'title':
192
173
  hasElement = hasTitle;
@@ -205,7 +186,6 @@ var Timeline = function Timeline(_ref) {
205
186
  isEmpty: !hasTitle
206
187
  }, hasElement ? /*#__PURE__*/React.createElement(Heading, title) : null));
207
188
  break;
208
-
209
189
  case 'image':
210
190
  hasElement = hasImage;
211
191
  elementContent = /*#__PURE__*/React.createElement("div", {
@@ -234,7 +214,6 @@ var Timeline = function Timeline(_ref) {
234
214
  onLoaded: onImageLoaded
235
215
  }) : null));
236
216
  break;
237
-
238
217
  case 'description':
239
218
  default:
240
219
  hasElement = hasDescription;
@@ -256,7 +235,6 @@ var Timeline = function Timeline(_ref) {
256
235
  })) : null));
257
236
  break;
258
237
  }
259
-
260
238
  var firstItem = itemI === 0;
261
239
  var lastItem = itemI === itemsCount - 1;
262
240
  var lastType = typeI === typesCount - 1;
@@ -282,29 +260,26 @@ var Timeline = function Timeline(_ref) {
282
260
  className: classNames([styles.body, _defineProperty({}, styles.last, lastType && !lastItem)])
283
261
  }, elementContent));
284
262
  })));
285
- }); // Call to Action
263
+ });
286
264
 
287
- var _ref8 = callToAction || {},
288
- _ref8$active = _ref8.active,
289
- hasCallToAction = _ref8$active === void 0 ? false : _ref8$active;
265
+ // Call to Action
290
266
 
267
+ var _ref8 = callToAction || {},
268
+ _ref8$active = _ref8.active,
269
+ hasCallToAction = _ref8$active === void 0 ? false : _ref8$active;
291
270
  var _useState5 = useState(false),
292
- _useState6 = _slicedToArray(_useState5, 2),
293
- scrolledBottom = _useState6[0],
294
- setScrolledBottom = _useState6[1];
295
-
271
+ _useState6 = _slicedToArray(_useState5, 2),
272
+ scrolledBottom = _useState6[0],
273
+ setScrolledBottom = _useState6[1];
296
274
  var _useDimensionObserver = useDimensionObserver(),
297
- callToActionRef = _useDimensionObserver.ref,
298
- _useDimensionObserver2 = _useDimensionObserver.height,
299
- callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
300
-
275
+ callToActionRef = _useDimensionObserver.ref,
276
+ _useDimensionObserver2 = _useDimensionObserver.height,
277
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
301
278
  var onScrolledBottom = useCallback(function (_ref9) {
302
279
  var initial = _ref9.initial;
303
-
304
280
  if (initial) {
305
281
  trackScreenEvent('scroll', 'Screen');
306
282
  }
307
-
308
283
  setScrolledBottom(true);
309
284
  }, [trackScreenEvent]);
310
285
  var onScrolledNotBottom = useCallback(function () {
@@ -356,13 +331,11 @@ var Timeline = function Timeline(_ref) {
356
331
  className: styles.container
357
332
  }) : null);
358
333
  };
359
-
360
334
  Timeline.propTypes = propTypes;
361
335
  Timeline.defaultProps = defaultProps;
362
336
 
363
337
  var TimelineIllustratedScreen = function TimelineIllustratedScreen(_ref) {
364
- var props = _extends({}, _ref);
365
-
338
+ var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
366
339
  return /*#__PURE__*/React.createElement(Timeline, Object.assign({}, props, {
367
340
  illustrated: true
368
341
  }));
@@ -370,21 +343,18 @@ var TimelineIllustratedScreen = function TimelineIllustratedScreen(_ref) {
370
343
 
371
344
  var transform = function transform(newStory, _ref) {
372
345
  var _ref$items = _ref.items,
373
- items = _ref$items === void 0 ? [] : _ref$items;
346
+ items = _ref$items === void 0 ? [] : _ref$items;
374
347
  var allItems = items || [];
375
348
  var list = allItems.reduce(function (acc, it) {
376
349
  var _Text = Text$1(acc.story, it.title),
377
- titleStory = _Text.story,
378
- titleComponent = _Text.component;
379
-
350
+ titleStory = _Text.story,
351
+ titleComponent = _Text.component;
380
352
  var _Text2 = Text$1(titleStory, it.description),
381
- descriptionStory = _Text2.story,
382
- descriptionComponent = _Text2.component;
383
-
353
+ descriptionStory = _Text2.story,
354
+ descriptionComponent = _Text2.component;
384
355
  var _Container = Container$1(descriptionStory, [].concat(_toConsumableArray(titleComponent ? [titleComponent] : []), _toConsumableArray(descriptionComponent ? [descriptionComponent] : []))),
385
- containerStory = _Container.story,
386
- containerComponent = _Container.component;
387
-
356
+ containerStory = _Container.story,
357
+ containerComponent = _Container.component;
388
358
  return {
389
359
  story: containerStory,
390
360
  components: [].concat(_toConsumableArray(acc.components || []), _toConsumableArray(containerComponent ? [containerComponent] : []))
@@ -393,16 +363,13 @@ var transform = function transform(newStory, _ref) {
393
363
  story: newStory,
394
364
  components: []
395
365
  });
396
-
397
366
  var _ref2 = list || {},
398
- reducedStory = _ref2.story,
399
- _ref2$components = _ref2.components,
400
- reducedComponents = _ref2$components === void 0 ? [] : _ref2$components;
401
-
367
+ reducedStory = _ref2.story,
368
+ _ref2$components = _ref2.components,
369
+ reducedComponents = _ref2$components === void 0 ? [] : _ref2$components;
402
370
  var _Container2 = Container$1(reducedStory, reducedComponents),
403
- bigContainerStory = _Container2.story,
404
- bigContainerComponent = _Container2.component;
405
-
371
+ bigContainerStory = _Container2.story,
372
+ bigContainerComponent = _Container2.component;
406
373
  return _objectSpread(_objectSpread({}, bigContainerStory), {}, {
407
374
  components: [].concat(_toConsumableArray(newStory.components || []), _toConsumableArray(bigContainerComponent ? [bigContainerComponent] : []))
408
375
  });
package/lib/index.js CHANGED
@@ -23,6 +23,7 @@ var Layout = require('@micromag/element-layout');
23
23
  var Scroll = require('@micromag/element-scroll');
24
24
  var Text = require('@micromag/element-text');
25
25
  var Visual = require('@micromag/element-visual');
26
+ var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
26
27
  var _extends = require('@babel/runtime/helpers/extends');
27
28
  var appleNews = require('@micromag/transforms/apple-news');
28
29
 
@@ -43,9 +44,10 @@ var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
43
44
  var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
44
45
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
45
46
  var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
47
+ var _objectDestructuringEmpty__default = /*#__PURE__*/_interopDefaultLegacy(_objectDestructuringEmpty);
46
48
  var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
47
49
 
48
- var styles = {"container":"micromag-screen-timeline-container","background":"micromag-screen-timeline-background","empty":"micromag-screen-timeline-empty","content":"micromag-screen-timeline-content","item":"micromag-screen-timeline-item","element":"micromag-screen-timeline-element","timeline":"micromag-screen-timeline-timeline","line":"micromag-screen-timeline-line","hidden":"micromag-screen-timeline-hidden","bullet":"micromag-screen-timeline-bullet","body":"micromag-screen-timeline-body","last":"micromag-screen-timeline-last","description":"micromag-screen-timeline-description","imageContainer":"micromag-screen-timeline-imageContainer","title":"micromag-screen-timeline-title","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"};
50
+ var styles = {"container":"micromag-screen-timeline-container","background":"micromag-screen-timeline-background","empty":"micromag-screen-timeline-empty","content":"micromag-screen-timeline-content","item":"micromag-screen-timeline-item","element":"micromag-screen-timeline-element","timeline":"micromag-screen-timeline-timeline","line":"micromag-screen-timeline-line","hidden":"micromag-screen-timeline-hidden","bullet":"micromag-screen-timeline-bullet","body":"micromag-screen-timeline-body","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"};
49
51
 
50
52
  var propTypes = {
51
53
  layout: PropTypes__default["default"].oneOf(['normal', 'title-description-image', 'title-image-description', 'image-title-description']),
@@ -83,54 +85,45 @@ var defaultProps = {
83
85
  type: null,
84
86
  className: null
85
87
  };
86
-
87
88
  var Timeline = function Timeline(_ref) {
88
89
  var _ref10;
89
-
90
90
  var layout = _ref.layout,
91
- items = _ref.items,
92
- bulletColor = _ref.bulletColor,
93
- lineColor = _ref.lineColor,
94
- bulletShape = _ref.bulletShape,
95
- bulletFilled = _ref.bulletFilled,
96
- illustrated = _ref.illustrated,
97
- spacing = _ref.spacing,
98
- background = _ref.background,
99
- callToAction = _ref.callToAction,
100
- current = _ref.current,
101
- active = _ref.active,
102
- transitions = _ref.transitions,
103
- transitionStagger = _ref.transitionStagger,
104
- type = _ref.type,
105
- className = _ref.className;
91
+ items = _ref.items,
92
+ bulletColor = _ref.bulletColor,
93
+ lineColor = _ref.lineColor,
94
+ bulletShape = _ref.bulletShape,
95
+ bulletFilled = _ref.bulletFilled,
96
+ illustrated = _ref.illustrated,
97
+ spacing = _ref.spacing,
98
+ background = _ref.background,
99
+ callToAction = _ref.callToAction,
100
+ current = _ref.current,
101
+ active = _ref.active,
102
+ transitions = _ref.transitions,
103
+ transitionStagger = _ref.transitionStagger,
104
+ type = _ref.type,
105
+ className = _ref.className;
106
106
  var trackScreenEvent = hooks.useTrackScreenEvent(type);
107
-
108
107
  var _useScreenSize = contexts.useScreenSize(),
109
- width = _useScreenSize.width,
110
- height = _useScreenSize.height,
111
- resolution = _useScreenSize.resolution;
112
-
108
+ width = _useScreenSize.width,
109
+ height = _useScreenSize.height,
110
+ resolution = _useScreenSize.resolution;
113
111
  var _useViewerContext = contexts.useViewerContext(),
114
- viewerTopHeight = _useViewerContext.topHeight,
115
- viewerBottomHeight = _useViewerContext.bottomHeight,
116
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
117
-
112
+ viewerTopHeight = _useViewerContext.topHeight,
113
+ viewerBottomHeight = _useViewerContext.bottomHeight,
114
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
118
115
  var _useViewerWebView = contexts.useViewerWebView(),
119
- openWebView = _useViewerWebView.open;
120
-
116
+ openWebView = _useViewerWebView.open;
121
117
  var _usePlaybackContext = contexts.usePlaybackContext(),
122
- muted = _usePlaybackContext.muted;
123
-
118
+ muted = _usePlaybackContext.muted;
124
119
  var mediaRef = contexts.usePlaybackMediaRef(current);
125
-
126
120
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
127
- isView = _useScreenRenderConte.isView,
128
- isPreview = _useScreenRenderConte.isPreview,
129
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
130
- isEdit = _useScreenRenderConte.isEdit,
131
- isStatic = _useScreenRenderConte.isStatic,
132
- isCapture = _useScreenRenderConte.isCapture;
133
-
121
+ isView = _useScreenRenderConte.isView,
122
+ isPreview = _useScreenRenderConte.isPreview,
123
+ isPlaceholder = _useScreenRenderConte.isPlaceholder,
124
+ isEdit = _useScreenRenderConte.isEdit,
125
+ isStatic = _useScreenRenderConte.isStatic,
126
+ isCapture = _useScreenRenderConte.isCapture;
134
127
  var finalItems = React.useMemo(function () {
135
128
  return isPlaceholder ? _toConsumableArray__default["default"](new Array(5)).map(function () {
136
129
  return {};
@@ -140,17 +133,14 @@ var Timeline = function Timeline(_ref) {
140
133
  var hasItems = finalItems !== null && itemsCount;
141
134
  var imagesCount = hasItems ? finalItems.reduce(function (acc, curr) {
142
135
  var _ref2 = curr || {},
143
- _ref2$image = _ref2.image,
144
- image = _ref2$image === void 0 ? null : _ref2$image;
145
-
136
+ _ref2$image = _ref2.image,
137
+ image = _ref2$image === void 0 ? null : _ref2$image;
146
138
  return acc + (image !== null ? 1 : 0);
147
139
  }, 0) : 0;
148
-
149
140
  var _useState = React.useState(0),
150
- _useState2 = _slicedToArray__default["default"](_useState, 2),
151
- imagesLoaded = _useState2[0],
152
- setImagesLoaded = _useState2[1];
153
-
141
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
142
+ imagesLoaded = _useState2[0],
143
+ setImagesLoaded = _useState2[1];
154
144
  var ready = imagesLoaded >= imagesCount;
155
145
  var transitionsPlaying = current && ready;
156
146
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
@@ -164,40 +154,33 @@ var Timeline = function Timeline(_ref) {
164
154
  }, [setImagesLoaded]);
165
155
  var firstLineRef = React.useRef(null);
166
156
  var firstContentRef = React.useRef(null);
167
-
168
157
  var _useState3 = React.useState(0),
169
- _useState4 = _slicedToArray__default["default"](_useState3, 2),
170
- imageWidth = _useState4[0],
171
- setImageWidth = _useState4[1];
172
-
158
+ _useState4 = _slicedToArray__default["default"](_useState3, 2),
159
+ imageWidth = _useState4[0],
160
+ setImageWidth = _useState4[1];
173
161
  React.useEffect(function () {
174
162
  setImageWidth(firstContentRef.current.offsetWidth - firstLineRef.current.offsetWidth);
175
163
  }, [width, height]);
176
164
  var timelineElements = (finalItems || []).map(function (item, itemI) {
177
165
  var _ref3 = item || {},
178
- _ref3$title = _ref3.title,
179
- title = _ref3$title === void 0 ? null : _ref3$title,
180
- _ref3$description = _ref3.description,
181
- description = _ref3$description === void 0 ? null : _ref3$description,
182
- _ref3$image = _ref3.image,
183
- image = _ref3$image === void 0 ? null : _ref3$image;
184
-
166
+ _ref3$title = _ref3.title,
167
+ title = _ref3$title === void 0 ? null : _ref3$title,
168
+ _ref3$description = _ref3.description,
169
+ description = _ref3$description === void 0 ? null : _ref3$description,
170
+ _ref3$image = _ref3.image,
171
+ image = _ref3$image === void 0 ? null : _ref3$image;
185
172
  var hasTitle = utils.isTextFilled(title);
186
173
  var hasDescription = utils.isTextFilled(description);
187
174
  var hasImage = image !== null;
188
175
  var elementsTypes = (layout === 'normal' ? 'title-description-image' : layout).split('-');
189
176
  var titleIndex = elementsTypes.indexOf('title');
190
177
  var imageIndex = elementsTypes.indexOf('image');
191
-
192
178
  if (!illustrated) {
193
179
  elementsTypes.splice(imageIndex, 1);
194
180
  }
195
-
196
181
  var typesCount = elementsTypes.length;
197
-
198
182
  var _ref4 = description || {},
199
- descriptionTextStyle = _ref4.textStyle;
200
-
183
+ descriptionTextStyle = _ref4.textStyle;
201
184
  return /*#__PURE__*/React__default["default"].createElement("div", {
202
185
  className: styles.item,
203
186
  key: "item-".concat(itemI)
@@ -209,7 +192,6 @@ var Timeline = function Timeline(_ref) {
209
192
  }, elementsTypes.map(function (elementType, typeI) {
210
193
  var hasElement = false;
211
194
  var elementContent;
212
-
213
195
  switch (elementType) {
214
196
  case 'title':
215
197
  hasElement = hasTitle;
@@ -228,7 +210,6 @@ var Timeline = function Timeline(_ref) {
228
210
  isEmpty: !hasTitle
229
211
  }, hasElement ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], title) : null));
230
212
  break;
231
-
232
213
  case 'image':
233
214
  hasElement = hasImage;
234
215
  elementContent = /*#__PURE__*/React__default["default"].createElement("div", {
@@ -257,7 +238,6 @@ var Timeline = function Timeline(_ref) {
257
238
  onLoaded: onImageLoaded
258
239
  }) : null));
259
240
  break;
260
-
261
241
  case 'description':
262
242
  default:
263
243
  hasElement = hasDescription;
@@ -279,7 +259,6 @@ var Timeline = function Timeline(_ref) {
279
259
  })) : null));
280
260
  break;
281
261
  }
282
-
283
262
  var firstItem = itemI === 0;
284
263
  var lastItem = itemI === itemsCount - 1;
285
264
  var lastType = typeI === typesCount - 1;
@@ -305,29 +284,26 @@ var Timeline = function Timeline(_ref) {
305
284
  className: classNames__default["default"]([styles.body, _defineProperty__default["default"]({}, styles.last, lastType && !lastItem)])
306
285
  }, elementContent));
307
286
  })));
308
- }); // Call to Action
287
+ });
309
288
 
310
- var _ref8 = callToAction || {},
311
- _ref8$active = _ref8.active,
312
- hasCallToAction = _ref8$active === void 0 ? false : _ref8$active;
289
+ // Call to Action
313
290
 
291
+ var _ref8 = callToAction || {},
292
+ _ref8$active = _ref8.active,
293
+ hasCallToAction = _ref8$active === void 0 ? false : _ref8$active;
314
294
  var _useState5 = React.useState(false),
315
- _useState6 = _slicedToArray__default["default"](_useState5, 2),
316
- scrolledBottom = _useState6[0],
317
- setScrolledBottom = _useState6[1];
318
-
295
+ _useState6 = _slicedToArray__default["default"](_useState5, 2),
296
+ scrolledBottom = _useState6[0],
297
+ setScrolledBottom = _useState6[1];
319
298
  var _useDimensionObserver = hooks.useDimensionObserver(),
320
- callToActionRef = _useDimensionObserver.ref,
321
- _useDimensionObserver2 = _useDimensionObserver.height,
322
- callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
323
-
299
+ callToActionRef = _useDimensionObserver.ref,
300
+ _useDimensionObserver2 = _useDimensionObserver.height,
301
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
324
302
  var onScrolledBottom = React.useCallback(function (_ref9) {
325
303
  var initial = _ref9.initial;
326
-
327
304
  if (initial) {
328
305
  trackScreenEvent('scroll', 'Screen');
329
306
  }
330
-
331
307
  setScrolledBottom(true);
332
308
  }, [trackScreenEvent]);
333
309
  var onScrolledNotBottom = React.useCallback(function () {
@@ -379,13 +355,11 @@ var Timeline = function Timeline(_ref) {
379
355
  className: styles.container
380
356
  }) : null);
381
357
  };
382
-
383
358
  Timeline.propTypes = propTypes;
384
359
  Timeline.defaultProps = defaultProps;
385
360
 
386
361
  var TimelineIllustratedScreen = function TimelineIllustratedScreen(_ref) {
387
- var props = _extends__default["default"]({}, _ref);
388
-
362
+ var props = _extends__default["default"]({}, (_objectDestructuringEmpty__default["default"](_ref), _ref));
389
363
  return /*#__PURE__*/React__default["default"].createElement(Timeline, Object.assign({}, props, {
390
364
  illustrated: true
391
365
  }));
@@ -393,21 +367,18 @@ var TimelineIllustratedScreen = function TimelineIllustratedScreen(_ref) {
393
367
 
394
368
  var transform = function transform(newStory, _ref) {
395
369
  var _ref$items = _ref.items,
396
- items = _ref$items === void 0 ? [] : _ref$items;
370
+ items = _ref$items === void 0 ? [] : _ref$items;
397
371
  var allItems = items || [];
398
372
  var list = allItems.reduce(function (acc, it) {
399
373
  var _Text = appleNews.Text(acc.story, it.title),
400
- titleStory = _Text.story,
401
- titleComponent = _Text.component;
402
-
374
+ titleStory = _Text.story,
375
+ titleComponent = _Text.component;
403
376
  var _Text2 = appleNews.Text(titleStory, it.description),
404
- descriptionStory = _Text2.story,
405
- descriptionComponent = _Text2.component;
406
-
377
+ descriptionStory = _Text2.story,
378
+ descriptionComponent = _Text2.component;
407
379
  var _Container = appleNews.Container(descriptionStory, [].concat(_toConsumableArray__default["default"](titleComponent ? [titleComponent] : []), _toConsumableArray__default["default"](descriptionComponent ? [descriptionComponent] : []))),
408
- containerStory = _Container.story,
409
- containerComponent = _Container.component;
410
-
380
+ containerStory = _Container.story,
381
+ containerComponent = _Container.component;
411
382
  return {
412
383
  story: containerStory,
413
384
  components: [].concat(_toConsumableArray__default["default"](acc.components || []), _toConsumableArray__default["default"](containerComponent ? [containerComponent] : []))
@@ -416,16 +387,13 @@ var transform = function transform(newStory, _ref) {
416
387
  story: newStory,
417
388
  components: []
418
389
  });
419
-
420
390
  var _ref2 = list || {},
421
- reducedStory = _ref2.story,
422
- _ref2$components = _ref2.components,
423
- reducedComponents = _ref2$components === void 0 ? [] : _ref2$components;
424
-
391
+ reducedStory = _ref2.story,
392
+ _ref2$components = _ref2.components,
393
+ reducedComponents = _ref2$components === void 0 ? [] : _ref2$components;
425
394
  var _Container2 = appleNews.Container(reducedStory, reducedComponents),
426
- bigContainerStory = _Container2.story,
427
- bigContainerComponent = _Container2.component;
428
-
395
+ bigContainerStory = _Container2.story,
396
+ bigContainerComponent = _Container2.component;
429
397
  return _objectSpread__default["default"](_objectSpread__default["default"]({}, bigContainerStory), {}, {
430
398
  components: [].concat(_toConsumableArray__default["default"](newStory.components || []), _toConsumableArray__default["default"](bigContainerComponent ? [bigContainerComponent] : []))
431
399
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-timeline",
3
- "version": "0.3.310",
3
+ "version": "0.3.318",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,24 +49,24 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.307",
53
- "@micromag/element-background": "^0.3.307",
54
- "@micromag/element-call-to-action": "^0.3.310",
55
- "@micromag/element-container": "^0.3.307",
56
- "@micromag/element-heading": "^0.3.307",
57
- "@micromag/element-layout": "^0.3.307",
58
- "@micromag/element-scroll": "^0.3.307",
59
- "@micromag/element-text": "^0.3.307",
60
- "@micromag/element-visual": "^0.3.307",
61
- "@micromag/transforms": "^0.3.307",
52
+ "@micromag/core": "^0.3.318",
53
+ "@micromag/element-background": "^0.3.318",
54
+ "@micromag/element-call-to-action": "^0.3.318",
55
+ "@micromag/element-container": "^0.3.318",
56
+ "@micromag/element-heading": "^0.3.318",
57
+ "@micromag/element-layout": "^0.3.318",
58
+ "@micromag/element-scroll": "^0.3.318",
59
+ "@micromag/element-text": "^0.3.318",
60
+ "@micromag/element-visual": "^0.3.318",
61
+ "@micromag/transforms": "^0.3.318",
62
62
  "classnames": "^2.2.6",
63
63
  "lodash": "^4.17.21",
64
64
  "prop-types": "^15.7.2",
65
65
  "react-intl": "^5.12.1",
66
- "uuid": "^8.3.2"
66
+ "uuid": "^9.0.0"
67
67
  },
68
68
  "publishConfig": {
69
69
  "access": "public"
70
70
  },
71
- "gitHead": "c2f4fbfcf0f643737a77f99dccf4d353f7856c2c"
71
+ "gitHead": "7d1a296e0c0d410e1225279e1f19e3a7715bfa96"
72
72
  }