@micromag/screen-timeline 0.3.389 → 0.3.392

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 +14 -13
  3. package/lib/index.js +15 -14
  4. package/package.json +16 -14
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-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}
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-element.micromag-screen-timeline-hidden{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;-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
@@ -1,6 +1,6 @@
1
1
  import { FormattedMessage, defineMessage } from 'react-intl';
2
- import _objectSpread from '@babel/runtime/helpers/objectSpread2';
3
2
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
+ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
4
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
5
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
6
6
  import classNames from 'classnames';
@@ -24,7 +24,7 @@ import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructurin
24
24
  import _extends from '@babel/runtime/helpers/extends';
25
25
  import { Text as Text$1, Container as Container$1 } from '@micromag/transforms/apple-news';
26
26
 
27
- 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"};
27
+ 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","hidden":"micromag-screen-timeline-hidden","timeline":"micromag-screen-timeline-timeline","line":"micromag-screen-timeline-line","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"};
28
28
 
29
29
  var propTypes = {
30
30
  layout: PropTypes.oneOf(['normal', 'title-description-image', 'title-image-description', 'image-title-description']),
@@ -65,7 +65,7 @@ var defaultProps = {
65
65
  className: null
66
66
  };
67
67
  var Timeline = function Timeline(_ref) {
68
- var _ref9;
68
+ var _ref10;
69
69
  var layout = _ref.layout,
70
70
  items = _ref.items,
71
71
  bulletColor = _ref.bulletColor,
@@ -170,8 +170,8 @@ var Timeline = function Timeline(_ref) {
170
170
  delay: transitionStagger * itemI,
171
171
  disabled: transitionDisabled
172
172
  }, elementsTypes.map(function (elementType, typeI) {
173
+ var elementContent = null;
173
174
  var hasElement = false;
174
- var elementContent;
175
175
  switch (elementType) {
176
176
  case 'title':
177
177
  hasElement = hasTitle;
@@ -188,7 +188,7 @@ var Timeline = function Timeline(_ref) {
188
188
  }),
189
189
  emptyClassName: styles.empty,
190
190
  isEmpty: !hasTitle
191
- }, hasElement ? /*#__PURE__*/React.createElement(Heading, title) : null));
191
+ }, hasTitle ? /*#__PURE__*/React.createElement(Heading, title) : null));
192
192
  break;
193
193
  case 'image':
194
194
  hasElement = hasImage;
@@ -205,7 +205,7 @@ var Timeline = function Timeline(_ref) {
205
205
  }),
206
206
  emptyClassName: styles.empty,
207
207
  isEmpty: !hasImage
208
- }, hasElement ? /*#__PURE__*/React.createElement(Visual, {
208
+ }, hasImage ? /*#__PURE__*/React.createElement(Visual, {
209
209
  className: styles.image,
210
210
  videoClassName: styles.video,
211
211
  media: image,
@@ -219,7 +219,6 @@ var Timeline = function Timeline(_ref) {
219
219
  }) : null));
220
220
  break;
221
221
  case 'description':
222
- default:
223
222
  hasElement = hasDescription;
224
223
  elementContent = /*#__PURE__*/React.createElement("div", {
225
224
  className: styles.description
@@ -234,10 +233,12 @@ var Timeline = function Timeline(_ref) {
234
233
  }),
235
234
  emptyClassName: styles.empty,
236
235
  isEmpty: !hasDescription
237
- }, hasElement ? /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
238
- textStyle: getStyleFromColor(descriptionTextStyle)
236
+ }, hasDescription ? /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
237
+ textStyle: _objectSpread({}, descriptionTextStyle)
239
238
  })) : null));
240
239
  break;
240
+ default:
241
+ elementContent = null;
241
242
  }
242
243
  var firstItem = itemI === 0;
243
244
  var lastItem = itemI === itemsCount - 1;
@@ -246,7 +247,7 @@ var Timeline = function Timeline(_ref) {
246
247
  var bottomLineHidden = firstItem && typeI < titleIndex || lastItem && typeI >= titleIndex;
247
248
  return /*#__PURE__*/React.createElement("div", {
248
249
  key: "element-".concat(elementType),
249
- className: classNames([styles.element, styles["element-".concat(elementType)]]),
250
+ className: classNames([styles.element, styles["element-".concat(elementType)], _defineProperty({}, styles.hidden, isView && !hasElement)]),
250
251
  ref: itemI === 0 ? firstContentRef : null
251
252
  }, /*#__PURE__*/React.createElement("div", {
252
253
  className: styles.timeline,
@@ -283,8 +284,8 @@ var Timeline = function Timeline(_ref) {
283
284
  footerRef = _useDimensionObserver.ref,
284
285
  _useDimensionObserver2 = _useDimensionObserver.height,
285
286
  footerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
286
- var onScrolledBottom = useCallback(function (_ref8) {
287
- var initial = _ref8.initial;
287
+ var onScrolledBottom = useCallback(function (_ref9) {
288
+ var initial = _ref9.initial;
288
289
  if (initial) {
289
290
  trackScreenEvent('scroll', 'Screen');
290
291
  }
@@ -294,7 +295,7 @@ var Timeline = function Timeline(_ref) {
294
295
  setScrolledBottom(false);
295
296
  }, [setScrolledBottom]);
296
297
  return /*#__PURE__*/React.createElement("div", {
297
- className: classNames([styles.container, (_ref9 = {}, _defineProperty(_ref9, className, className !== null), _defineProperty(_ref9, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref9, styles["".concat(bulletShape, "BulletShape")], bulletShape !== null), _defineProperty(_ref9, styles.withoutLines, itemsCount < 2), _ref9)]),
298
+ className: classNames([styles.container, (_ref10 = {}, _defineProperty(_ref10, className, className !== null), _defineProperty(_ref10, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref10, styles["".concat(bulletShape, "BulletShape")], bulletShape !== null), _defineProperty(_ref10, styles.withoutLines, itemsCount < 2), _ref10)]),
298
299
  "data-screen-ready": ready
299
300
  }, /*#__PURE__*/React.createElement(Container, {
300
301
  width: width,
package/lib/index.js CHANGED
@@ -3,8 +3,8 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var reactIntl = require('react-intl');
6
- var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
7
6
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
+ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
8
8
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
9
9
  var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
10
10
  var classNames = require('classnames');
@@ -30,8 +30,8 @@ var appleNews = require('@micromag/transforms/apple-news');
30
30
 
31
31
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
32
32
 
33
- var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
34
33
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
34
+ var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
35
35
  var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
36
36
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
37
37
  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
@@ -49,7 +49,7 @@ var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
49
49
  var _objectDestructuringEmpty__default = /*#__PURE__*/_interopDefaultLegacy(_objectDestructuringEmpty);
50
50
  var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
51
51
 
52
- 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"};
52
+ 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","hidden":"micromag-screen-timeline-hidden","timeline":"micromag-screen-timeline-timeline","line":"micromag-screen-timeline-line","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"};
53
53
 
54
54
  var propTypes = {
55
55
  layout: PropTypes__default["default"].oneOf(['normal', 'title-description-image', 'title-image-description', 'image-title-description']),
@@ -90,7 +90,7 @@ var defaultProps = {
90
90
  className: null
91
91
  };
92
92
  var Timeline = function Timeline(_ref) {
93
- var _ref9;
93
+ var _ref10;
94
94
  var layout = _ref.layout,
95
95
  items = _ref.items,
96
96
  bulletColor = _ref.bulletColor,
@@ -195,8 +195,8 @@ var Timeline = function Timeline(_ref) {
195
195
  delay: transitionStagger * itemI,
196
196
  disabled: transitionDisabled
197
197
  }, elementsTypes.map(function (elementType, typeI) {
198
+ var elementContent = null;
198
199
  var hasElement = false;
199
- var elementContent;
200
200
  switch (elementType) {
201
201
  case 'title':
202
202
  hasElement = hasTitle;
@@ -213,7 +213,7 @@ var Timeline = function Timeline(_ref) {
213
213
  }),
214
214
  emptyClassName: styles.empty,
215
215
  isEmpty: !hasTitle
216
- }, hasElement ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], title) : null));
216
+ }, hasTitle ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], title) : null));
217
217
  break;
218
218
  case 'image':
219
219
  hasElement = hasImage;
@@ -230,7 +230,7 @@ var Timeline = function Timeline(_ref) {
230
230
  }),
231
231
  emptyClassName: styles.empty,
232
232
  isEmpty: !hasImage
233
- }, hasElement ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
233
+ }, hasImage ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
234
234
  className: styles.image,
235
235
  videoClassName: styles.video,
236
236
  media: image,
@@ -244,7 +244,6 @@ var Timeline = function Timeline(_ref) {
244
244
  }) : null));
245
245
  break;
246
246
  case 'description':
247
- default:
248
247
  hasElement = hasDescription;
249
248
  elementContent = /*#__PURE__*/React__default["default"].createElement("div", {
250
249
  className: styles.description
@@ -259,10 +258,12 @@ var Timeline = function Timeline(_ref) {
259
258
  }),
260
259
  emptyClassName: styles.empty,
261
260
  isEmpty: !hasDescription
262
- }, hasElement ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, description, {
263
- textStyle: utils.getStyleFromColor(descriptionTextStyle)
261
+ }, hasDescription ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, description, {
262
+ textStyle: _objectSpread__default["default"]({}, descriptionTextStyle)
264
263
  })) : null));
265
264
  break;
265
+ default:
266
+ elementContent = null;
266
267
  }
267
268
  var firstItem = itemI === 0;
268
269
  var lastItem = itemI === itemsCount - 1;
@@ -271,7 +272,7 @@ var Timeline = function Timeline(_ref) {
271
272
  var bottomLineHidden = firstItem && typeI < titleIndex || lastItem && typeI >= titleIndex;
272
273
  return /*#__PURE__*/React__default["default"].createElement("div", {
273
274
  key: "element-".concat(elementType),
274
- className: classNames__default["default"]([styles.element, styles["element-".concat(elementType)]]),
275
+ className: classNames__default["default"]([styles.element, styles["element-".concat(elementType)], _defineProperty__default["default"]({}, styles.hidden, isView && !hasElement)]),
275
276
  ref: itemI === 0 ? firstContentRef : null
276
277
  }, /*#__PURE__*/React__default["default"].createElement("div", {
277
278
  className: styles.timeline,
@@ -308,8 +309,8 @@ var Timeline = function Timeline(_ref) {
308
309
  footerRef = _useDimensionObserver.ref,
309
310
  _useDimensionObserver2 = _useDimensionObserver.height,
310
311
  footerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
311
- var onScrolledBottom = React.useCallback(function (_ref8) {
312
- var initial = _ref8.initial;
312
+ var onScrolledBottom = React.useCallback(function (_ref9) {
313
+ var initial = _ref9.initial;
313
314
  if (initial) {
314
315
  trackScreenEvent('scroll', 'Screen');
315
316
  }
@@ -319,7 +320,7 @@ var Timeline = function Timeline(_ref) {
319
320
  setScrolledBottom(false);
320
321
  }, [setScrolledBottom]);
321
322
  return /*#__PURE__*/React__default["default"].createElement("div", {
322
- className: classNames__default["default"]([styles.container, (_ref9 = {}, _defineProperty__default["default"](_ref9, className, className !== null), _defineProperty__default["default"](_ref9, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref9, styles["".concat(bulletShape, "BulletShape")], bulletShape !== null), _defineProperty__default["default"](_ref9, styles.withoutLines, itemsCount < 2), _ref9)]),
323
+ className: classNames__default["default"]([styles.container, (_ref10 = {}, _defineProperty__default["default"](_ref10, className, className !== null), _defineProperty__default["default"](_ref10, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref10, styles["".concat(bulletShape, "BulletShape")], bulletShape !== null), _defineProperty__default["default"](_ref10, styles.withoutLines, itemsCount < 2), _ref10)]),
323
324
  "data-screen-ready": ready
324
325
  }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
325
326
  width: width,
package/package.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "name": "@micromag/screen-timeline",
3
- "version": "0.3.389",
3
+ "version": "0.3.392",
4
+ "private": false,
4
5
  "description": "",
5
6
  "keywords": [
6
7
  "javascript"
@@ -49,17 +50,17 @@
49
50
  },
50
51
  "dependencies": {
51
52
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.389",
53
- "@micromag/element-background": "^0.3.389",
54
- "@micromag/element-container": "^0.3.389",
55
- "@micromag/element-footer": "^0.3.389",
56
- "@micromag/element-header": "^0.3.389",
57
- "@micromag/element-heading": "^0.3.389",
58
- "@micromag/element-layout": "^0.3.389",
59
- "@micromag/element-scroll": "^0.3.389",
60
- "@micromag/element-text": "^0.3.389",
61
- "@micromag/element-visual": "^0.3.389",
62
- "@micromag/transforms": "^0.3.389",
53
+ "@micromag/core": "^0.3.390",
54
+ "@micromag/element-background": "^0.3.390",
55
+ "@micromag/element-container": "^0.3.390",
56
+ "@micromag/element-footer": "^0.3.390",
57
+ "@micromag/element-header": "^0.3.390",
58
+ "@micromag/element-heading": "^0.3.390",
59
+ "@micromag/element-layout": "^0.3.390",
60
+ "@micromag/element-scroll": "^0.3.390",
61
+ "@micromag/element-text": "^0.3.390",
62
+ "@micromag/element-visual": "^0.3.390",
63
+ "@micromag/transforms": "^0.3.390",
63
64
  "classnames": "^2.2.6",
64
65
  "lodash": "^4.17.21",
65
66
  "prop-types": "^15.7.2",
@@ -67,7 +68,8 @@
67
68
  "uuid": "^9.0.0"
68
69
  },
69
70
  "publishConfig": {
70
- "access": "public"
71
+ "access": "public",
72
+ "registry": "https://registry.npmjs.org/"
71
73
  },
72
- "gitHead": "67cbf19814ac1142a26e35df2e3959405aebf149"
74
+ "gitHead": "a89c27913e03f3085515d16530419b4193da985d"
73
75
  }