@micromag/screen-timeline 0.2.404 → 0.2.408

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 (3) hide show
  1. package/es/index.js +31 -26
  2. package/lib/index.js +37 -32
  3. package/package.json +12 -12
package/es/index.js CHANGED
@@ -3,22 +3,22 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
3
3
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
4
4
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
5
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
6
- import React, { useState, useCallback, useRef, useEffect } from 'react';
7
- import PropTypes from 'prop-types';
8
- import classNames from 'classnames';
9
6
  import { PropTypes as PropTypes$1 } from '@micromag/core';
10
7
  import { Transitions, ScreenElement } from '@micromag/core/components';
11
8
  import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
12
9
  import { useTrackScreenEvent, useResizeObserver } from '@micromag/core/hooks';
13
10
  import { isTextFilled, getStyleFromColor } from '@micromag/core/utils';
14
11
  import Background from '@micromag/element-background';
12
+ import CallToAction from '@micromag/element-call-to-action';
15
13
  import Container from '@micromag/element-container';
14
+ import Heading from '@micromag/element-heading';
16
15
  import Layout from '@micromag/element-layout';
16
+ import Scroll from '@micromag/element-scroll';
17
17
  import Text from '@micromag/element-text';
18
18
  import Visual from '@micromag/element-visual';
19
- import Heading from '@micromag/element-heading';
20
- import Scroll from '@micromag/element-scroll';
21
- import CallToAction from '@micromag/element-call-to-action';
19
+ import classNames from 'classnames';
20
+ import PropTypes from 'prop-types';
21
+ import React, { useState, useCallback, useRef, useEffect } from 'react';
22
22
  import _extends from '@babel/runtime/helpers/extends';
23
23
  import { Text as Text$1, Container as Container$1 } from '@micromag/transforms/apple-news';
24
24
 
@@ -36,6 +36,7 @@ var propTypes = {
36
36
  background: PropTypes$1.backgroundElement,
37
37
  callToAction: PropTypes$1.callToAction,
38
38
  current: PropTypes.bool,
39
+ active: PropTypes.bool,
39
40
  transitions: PropTypes$1.transitions,
40
41
  transitionStagger: PropTypes.number,
41
42
  type: PropTypes.string,
@@ -53,6 +54,7 @@ var defaultProps = {
53
54
  background: null,
54
55
  callToAction: null,
55
56
  current: true,
57
+ active: true,
56
58
  transitions: null,
57
59
  transitionStagger: 75,
58
60
  type: null,
@@ -73,6 +75,7 @@ var Timeline = function Timeline(_ref) {
73
75
  background = _ref.background,
74
76
  callToAction = _ref.callToAction,
75
77
  current = _ref.current,
78
+ active = _ref.active,
76
79
  transitions = _ref.transitions,
77
80
  transitionStagger = _ref.transitionStagger,
78
81
  type = _ref.type,
@@ -118,6 +121,7 @@ var Timeline = function Timeline(_ref) {
118
121
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
119
122
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
120
123
  var backgroundPlaying = current && (isView || isEdit);
124
+ var backgroundShouldLoad = current || active || !isView;
121
125
  var onImageLoaded = useCallback(function () {
122
126
  setImagesLoaded(imagesLoaded + 1);
123
127
  }, [imagesLoaded, setImagesLoaded]);
@@ -184,25 +188,6 @@ var Timeline = function Timeline(_ref) {
184
188
  }, hasElement ? /*#__PURE__*/React.createElement(Heading, title) : null));
185
189
  break;
186
190
 
187
- case 'description':
188
- default:
189
- hasElement = hasDescription;
190
- elementContent = /*#__PURE__*/React.createElement("div", {
191
- className: styles.description
192
- }, /*#__PURE__*/React.createElement(ScreenElement, {
193
- placeholder: "text",
194
- emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
195
- id: "507VAi",
196
- defaultMessage: [{
197
- "type": 0,
198
- "value": "Description"
199
- }]
200
- }),
201
- emptyClassName: styles.empty,
202
- isEmpty: !hasDescription
203
- }, hasElement ? /*#__PURE__*/React.createElement(Text, description) : null));
204
- break;
205
-
206
191
  case 'image':
207
192
  hasElement = hasImage;
208
193
  elementContent = /*#__PURE__*/React.createElement("div", {
@@ -227,6 +212,25 @@ var Timeline = function Timeline(_ref) {
227
212
  onLoaded: onImageLoaded
228
213
  }) : null));
229
214
  break;
215
+
216
+ case 'description':
217
+ default:
218
+ hasElement = hasDescription;
219
+ elementContent = /*#__PURE__*/React.createElement("div", {
220
+ className: styles.description
221
+ }, /*#__PURE__*/React.createElement(ScreenElement, {
222
+ placeholder: "text",
223
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
224
+ id: "507VAi",
225
+ defaultMessage: [{
226
+ "type": 0,
227
+ "value": "Description"
228
+ }]
229
+ }),
230
+ emptyClassName: styles.empty,
231
+ isEmpty: !hasDescription
232
+ }, hasElement ? /*#__PURE__*/React.createElement(Text, description) : null));
233
+ break;
230
234
  }
231
235
 
232
236
  var firstItem = itemI === 0;
@@ -290,7 +294,8 @@ var Timeline = function Timeline(_ref) {
290
294
  background: background,
291
295
  width: width,
292
296
  height: height,
293
- playing: backgroundPlaying
297
+ playing: backgroundPlaying,
298
+ shouldLoad: backgroundShouldLoad
294
299
  }) : null, /*#__PURE__*/React.createElement(Container, {
295
300
  width: width,
296
301
  height: height
package/lib/index.js CHANGED
@@ -7,22 +7,22 @@ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
7
7
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
8
8
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
9
9
  var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
10
- var React = require('react');
11
- var PropTypes = require('prop-types');
12
- var classNames = require('classnames');
13
10
  var core = require('@micromag/core');
14
11
  var components = require('@micromag/core/components');
15
12
  var contexts = require('@micromag/core/contexts');
16
13
  var hooks = require('@micromag/core/hooks');
17
14
  var utils = require('@micromag/core/utils');
18
15
  var Background = require('@micromag/element-background');
16
+ var CallToAction = require('@micromag/element-call-to-action');
19
17
  var Container = require('@micromag/element-container');
18
+ var Heading = require('@micromag/element-heading');
20
19
  var Layout = require('@micromag/element-layout');
20
+ var Scroll = require('@micromag/element-scroll');
21
21
  var Text = require('@micromag/element-text');
22
22
  var Visual = require('@micromag/element-visual');
23
- var Heading = require('@micromag/element-heading');
24
- var Scroll = require('@micromag/element-scroll');
25
- var CallToAction = require('@micromag/element-call-to-action');
23
+ var classNames = require('classnames');
24
+ var PropTypes = require('prop-types');
25
+ var React = require('react');
26
26
  var _extends = require('@babel/runtime/helpers/extends');
27
27
  var appleNews = require('@micromag/transforms/apple-news');
28
28
 
@@ -32,17 +32,17 @@ var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
32
32
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
33
33
  var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
34
34
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
35
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
36
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
37
- var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
38
35
  var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
36
+ var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
39
37
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
38
+ var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
40
39
  var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
40
+ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
41
41
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
42
42
  var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
43
- var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
44
- var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
45
- var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
43
+ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
44
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
45
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
46
46
  var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
47
47
 
48
48
  var styles = {"container":"micromag-screen-timeline-container","empty":"micromag-screen-timeline-empty","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","content":"micromag-screen-timeline-content","lastContent":"micromag-screen-timeline-lastContent","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","isPlaceholder":"micromag-screen-timeline-isPlaceholder","scroll":"micromag-screen-timeline-scroll","circleBulletShape":"micromag-screen-timeline-circleBulletShape","withoutLines":"micromag-screen-timeline-withoutLines"};
@@ -59,6 +59,7 @@ var propTypes = {
59
59
  background: core.PropTypes.backgroundElement,
60
60
  callToAction: core.PropTypes.callToAction,
61
61
  current: PropTypes__default["default"].bool,
62
+ active: PropTypes__default["default"].bool,
62
63
  transitions: core.PropTypes.transitions,
63
64
  transitionStagger: PropTypes__default["default"].number,
64
65
  type: PropTypes__default["default"].string,
@@ -76,6 +77,7 @@ var defaultProps = {
76
77
  background: null,
77
78
  callToAction: null,
78
79
  current: true,
80
+ active: true,
79
81
  transitions: null,
80
82
  transitionStagger: 75,
81
83
  type: null,
@@ -96,6 +98,7 @@ var Timeline = function Timeline(_ref) {
96
98
  background = _ref.background,
97
99
  callToAction = _ref.callToAction,
98
100
  current = _ref.current,
101
+ active = _ref.active,
99
102
  transitions = _ref.transitions,
100
103
  transitionStagger = _ref.transitionStagger,
101
104
  type = _ref.type,
@@ -141,6 +144,7 @@ var Timeline = function Timeline(_ref) {
141
144
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
142
145
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
143
146
  var backgroundPlaying = current && (isView || isEdit);
147
+ var backgroundShouldLoad = current || active || !isView;
144
148
  var onImageLoaded = React.useCallback(function () {
145
149
  setImagesLoaded(imagesLoaded + 1);
146
150
  }, [imagesLoaded, setImagesLoaded]);
@@ -207,25 +211,6 @@ var Timeline = function Timeline(_ref) {
207
211
  }, hasElement ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], title) : null));
208
212
  break;
209
213
 
210
- case 'description':
211
- default:
212
- hasElement = hasDescription;
213
- elementContent = /*#__PURE__*/React__default["default"].createElement("div", {
214
- className: styles.description
215
- }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
216
- placeholder: "text",
217
- emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
218
- id: "507VAi",
219
- defaultMessage: [{
220
- "type": 0,
221
- "value": "Description"
222
- }]
223
- }),
224
- emptyClassName: styles.empty,
225
- isEmpty: !hasDescription
226
- }, hasElement ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], description) : null));
227
- break;
228
-
229
214
  case 'image':
230
215
  hasElement = hasImage;
231
216
  elementContent = /*#__PURE__*/React__default["default"].createElement("div", {
@@ -250,6 +235,25 @@ var Timeline = function Timeline(_ref) {
250
235
  onLoaded: onImageLoaded
251
236
  }) : null));
252
237
  break;
238
+
239
+ case 'description':
240
+ default:
241
+ hasElement = hasDescription;
242
+ elementContent = /*#__PURE__*/React__default["default"].createElement("div", {
243
+ className: styles.description
244
+ }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
245
+ placeholder: "text",
246
+ emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
247
+ id: "507VAi",
248
+ defaultMessage: [{
249
+ "type": 0,
250
+ "value": "Description"
251
+ }]
252
+ }),
253
+ emptyClassName: styles.empty,
254
+ isEmpty: !hasDescription
255
+ }, hasElement ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], description) : null));
256
+ break;
253
257
  }
254
258
 
255
259
  var firstItem = itemI === 0;
@@ -313,7 +317,8 @@ var Timeline = function Timeline(_ref) {
313
317
  background: background,
314
318
  width: width,
315
319
  height: height,
316
- playing: backgroundPlaying
320
+ playing: backgroundPlaying,
321
+ shouldLoad: backgroundShouldLoad
317
322
  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
318
323
  width: width,
319
324
  height: height
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-timeline",
3
- "version": "0.2.404",
3
+ "version": "0.2.408",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,16 +49,16 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.2.404",
53
- "@micromag/element-background": "^0.2.404",
54
- "@micromag/element-call-to-action": "^0.2.404",
55
- "@micromag/element-container": "^0.2.404",
56
- "@micromag/element-heading": "^0.2.404",
57
- "@micromag/element-layout": "^0.2.404",
58
- "@micromag/element-scroll": "^0.2.404",
59
- "@micromag/element-text": "^0.2.404",
60
- "@micromag/element-visual": "^0.2.404",
61
- "@micromag/transforms": "^0.2.404",
52
+ "@micromag/core": "^0.2.405",
53
+ "@micromag/element-background": "^0.2.407",
54
+ "@micromag/element-call-to-action": "^0.2.405",
55
+ "@micromag/element-container": "^0.2.405",
56
+ "@micromag/element-heading": "^0.2.405",
57
+ "@micromag/element-layout": "^0.2.405",
58
+ "@micromag/element-scroll": "^0.2.405",
59
+ "@micromag/element-text": "^0.2.405",
60
+ "@micromag/element-visual": "^0.2.407",
61
+ "@micromag/transforms": "^0.2.405",
62
62
  "classnames": "^2.2.6",
63
63
  "lodash": "^4.17.21",
64
64
  "prop-types": "^15.7.2",
@@ -68,5 +68,5 @@
68
68
  "publishConfig": {
69
69
  "access": "public"
70
70
  },
71
- "gitHead": "34d5345cb0dad79206bb6b7a25f02742663023ee"
71
+ "gitHead": "4bc2ba99622adef74bd0da42cb52d1a575c1a544"
72
72
  }