@micromag/screen-timeline 0.3.392 → 0.3.394

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 +10 -16
  3. package/lib/index.js +9 -15
  4. package/package.json +2 -2
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-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}
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 .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;-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
@@ -7,7 +7,7 @@ import classNames from 'classnames';
7
7
  import PropTypes from 'prop-types';
8
8
  import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
9
9
  import { PropTypes as PropTypes$1 } from '@micromag/core';
10
- import { Transitions, ScreenElement } from '@micromag/core/components';
10
+ import { ScreenElement } from '@micromag/core/components';
11
11
  import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
12
12
  import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
13
13
  import { isTextFilled, getStyleFromColor, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
@@ -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","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"};
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","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"};
28
28
 
29
29
  var propTypes = {
30
30
  layout: PropTypes.oneOf(['normal', 'title-description-image', 'title-image-description', 'image-title-description']),
@@ -40,8 +40,8 @@ var propTypes = {
40
40
  background: PropTypes$1.backgroundElement,
41
41
  current: PropTypes.bool,
42
42
  active: PropTypes.bool,
43
- transitions: PropTypes$1.transitions,
44
- transitionStagger: PropTypes.number,
43
+ // transitions: MicromagPropTypes.transitions,
44
+ // transitionStagger: PropTypes.number,
45
45
  type: PropTypes.string,
46
46
  className: PropTypes.string
47
47
  };
@@ -59,8 +59,8 @@ var defaultProps = {
59
59
  background: null,
60
60
  current: true,
61
61
  active: true,
62
- transitions: null,
63
- transitionStagger: 75,
62
+ // transitions: null,
63
+ // transitionStagger: 75,
64
64
  type: null,
65
65
  className: null
66
66
  };
@@ -79,8 +79,6 @@ var Timeline = function Timeline(_ref) {
79
79
  background = _ref.background,
80
80
  current = _ref.current,
81
81
  active = _ref.active,
82
- transitions = _ref.transitions,
83
- transitionStagger = _ref.transitionStagger,
84
82
  type = _ref.type,
85
83
  className = _ref.className;
86
84
  var trackScreenEvent = useTrackScreenEvent(type);
@@ -122,7 +120,7 @@ var Timeline = function Timeline(_ref) {
122
120
  imagesLoaded = _useState2[0],
123
121
  setImagesLoaded = _useState2[1];
124
122
  var ready = imagesLoaded >= imagesCount;
125
- var transitionsPlaying = current && ready;
123
+ // const transitionsPlaying = current && ready;
126
124
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
127
125
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
128
126
  var backgroundPlaying = current && (isView || isEdit);
@@ -164,11 +162,6 @@ var Timeline = function Timeline(_ref) {
164
162
  return /*#__PURE__*/React.createElement("div", {
165
163
  className: styles.item,
166
164
  key: "item-".concat(itemI)
167
- }, /*#__PURE__*/React.createElement(Transitions, {
168
- transitions: transitions,
169
- playing: transitionsPlaying,
170
- delay: transitionStagger * itemI,
171
- disabled: transitionDisabled
172
165
  }, elementsTypes.map(function (elementType, typeI) {
173
166
  var elementContent = null;
174
167
  var hasElement = false;
@@ -239,6 +232,7 @@ var Timeline = function Timeline(_ref) {
239
232
  break;
240
233
  default:
241
234
  elementContent = null;
235
+ hasElement = false;
242
236
  }
243
237
  var firstItem = itemI === 0;
244
238
  var lastItem = itemI === itemsCount - 1;
@@ -247,7 +241,7 @@ var Timeline = function Timeline(_ref) {
247
241
  var bottomLineHidden = firstItem && typeI < titleIndex || lastItem && typeI >= titleIndex;
248
242
  return /*#__PURE__*/React.createElement("div", {
249
243
  key: "element-".concat(elementType),
250
- className: classNames([styles.element, styles["element-".concat(elementType)], _defineProperty({}, styles.hidden, isView && !hasElement)]),
244
+ className: classNames([styles.element, styles["element-".concat(elementType)], _defineProperty({}, styles.hidden, (isView || isStatic) && !hasElement)]),
251
245
  ref: itemI === 0 ? firstContentRef : null
252
246
  }, /*#__PURE__*/React.createElement("div", {
253
247
  className: styles.timeline,
@@ -264,7 +258,7 @@ var Timeline = function Timeline(_ref) {
264
258
  })), /*#__PURE__*/React.createElement("div", {
265
259
  className: classNames([styles.body, _defineProperty({}, styles.last, lastType && !lastItem)])
266
260
  }, elementContent));
267
- })));
261
+ }));
268
262
  });
269
263
 
270
264
  // Call to Action
package/lib/index.js CHANGED
@@ -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","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"};
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","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
53
 
54
54
  var propTypes = {
55
55
  layout: PropTypes__default["default"].oneOf(['normal', 'title-description-image', 'title-image-description', 'image-title-description']),
@@ -65,8 +65,8 @@ var propTypes = {
65
65
  background: core.PropTypes.backgroundElement,
66
66
  current: PropTypes__default["default"].bool,
67
67
  active: PropTypes__default["default"].bool,
68
- transitions: core.PropTypes.transitions,
69
- transitionStagger: PropTypes__default["default"].number,
68
+ // transitions: MicromagPropTypes.transitions,
69
+ // transitionStagger: PropTypes.number,
70
70
  type: PropTypes__default["default"].string,
71
71
  className: PropTypes__default["default"].string
72
72
  };
@@ -84,8 +84,8 @@ var defaultProps = {
84
84
  background: null,
85
85
  current: true,
86
86
  active: true,
87
- transitions: null,
88
- transitionStagger: 75,
87
+ // transitions: null,
88
+ // transitionStagger: 75,
89
89
  type: null,
90
90
  className: null
91
91
  };
@@ -104,8 +104,6 @@ var Timeline = function Timeline(_ref) {
104
104
  background = _ref.background,
105
105
  current = _ref.current,
106
106
  active = _ref.active,
107
- transitions = _ref.transitions,
108
- transitionStagger = _ref.transitionStagger,
109
107
  type = _ref.type,
110
108
  className = _ref.className;
111
109
  var trackScreenEvent = hooks.useTrackScreenEvent(type);
@@ -147,7 +145,7 @@ var Timeline = function Timeline(_ref) {
147
145
  imagesLoaded = _useState2[0],
148
146
  setImagesLoaded = _useState2[1];
149
147
  var ready = imagesLoaded >= imagesCount;
150
- var transitionsPlaying = current && ready;
148
+ // const transitionsPlaying = current && ready;
151
149
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
152
150
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
153
151
  var backgroundPlaying = current && (isView || isEdit);
@@ -189,11 +187,6 @@ var Timeline = function Timeline(_ref) {
189
187
  return /*#__PURE__*/React__default["default"].createElement("div", {
190
188
  className: styles.item,
191
189
  key: "item-".concat(itemI)
192
- }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
193
- transitions: transitions,
194
- playing: transitionsPlaying,
195
- delay: transitionStagger * itemI,
196
- disabled: transitionDisabled
197
190
  }, elementsTypes.map(function (elementType, typeI) {
198
191
  var elementContent = null;
199
192
  var hasElement = false;
@@ -264,6 +257,7 @@ var Timeline = function Timeline(_ref) {
264
257
  break;
265
258
  default:
266
259
  elementContent = null;
260
+ hasElement = false;
267
261
  }
268
262
  var firstItem = itemI === 0;
269
263
  var lastItem = itemI === itemsCount - 1;
@@ -272,7 +266,7 @@ var Timeline = function Timeline(_ref) {
272
266
  var bottomLineHidden = firstItem && typeI < titleIndex || lastItem && typeI >= titleIndex;
273
267
  return /*#__PURE__*/React__default["default"].createElement("div", {
274
268
  key: "element-".concat(elementType),
275
- className: classNames__default["default"]([styles.element, styles["element-".concat(elementType)], _defineProperty__default["default"]({}, styles.hidden, isView && !hasElement)]),
269
+ className: classNames__default["default"]([styles.element, styles["element-".concat(elementType)], _defineProperty__default["default"]({}, styles.hidden, (isView || isStatic) && !hasElement)]),
276
270
  ref: itemI === 0 ? firstContentRef : null
277
271
  }, /*#__PURE__*/React__default["default"].createElement("div", {
278
272
  className: styles.timeline,
@@ -289,7 +283,7 @@ var Timeline = function Timeline(_ref) {
289
283
  })), /*#__PURE__*/React__default["default"].createElement("div", {
290
284
  className: classNames__default["default"]([styles.body, _defineProperty__default["default"]({}, styles.last, lastType && !lastItem)])
291
285
  }, elementContent));
292
- })));
286
+ }));
293
287
  });
294
288
 
295
289
  // Call to Action
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-timeline",
3
- "version": "0.3.392",
3
+ "version": "0.3.394",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -71,5 +71,5 @@
71
71
  "access": "public",
72
72
  "registry": "https://registry.npmjs.org/"
73
73
  },
74
- "gitHead": "a89c27913e03f3085515d16530419b4193da985d"
74
+ "gitHead": "6412a7312e041b9dd21c2cb69478ab346358de67"
75
75
  }