@micromag/screen-timeline 0.2.405 → 0.2.409
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/index.js +31 -26
- package/lib/index.js +37 -32
- 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
|
|
20
|
-
import
|
|
21
|
-
import
|
|
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
|
|
24
|
-
var
|
|
25
|
-
var
|
|
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
|
|
44
|
-
var
|
|
45
|
-
var
|
|
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.
|
|
3
|
+
"version": "0.2.409",
|
|
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.
|
|
53
|
-
"@micromag/element-background": "^0.2.
|
|
54
|
-
"@micromag/element-call-to-action": "^0.2.
|
|
55
|
-
"@micromag/element-container": "^0.2.
|
|
56
|
-
"@micromag/element-heading": "^0.2.
|
|
57
|
-
"@micromag/element-layout": "^0.2.
|
|
58
|
-
"@micromag/element-scroll": "^0.2.
|
|
59
|
-
"@micromag/element-text": "^0.2.
|
|
60
|
-
"@micromag/element-visual": "^0.2.
|
|
61
|
-
"@micromag/transforms": "^0.2.
|
|
52
|
+
"@micromag/core": "^0.2.409",
|
|
53
|
+
"@micromag/element-background": "^0.2.409",
|
|
54
|
+
"@micromag/element-call-to-action": "^0.2.409",
|
|
55
|
+
"@micromag/element-container": "^0.2.409",
|
|
56
|
+
"@micromag/element-heading": "^0.2.409",
|
|
57
|
+
"@micromag/element-layout": "^0.2.409",
|
|
58
|
+
"@micromag/element-scroll": "^0.2.409",
|
|
59
|
+
"@micromag/element-text": "^0.2.409",
|
|
60
|
+
"@micromag/element-visual": "^0.2.409",
|
|
61
|
+
"@micromag/transforms": "^0.2.409",
|
|
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": "
|
|
71
|
+
"gitHead": "4c16c3bb63644d1bd5b7d50086098337317ee3f6"
|
|
72
72
|
}
|