@micromag/screen-urbania-recommendation 0.3.106 → 0.3.107
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 +33 -11
- package/lib/index.js +32 -10
- package/package.json +11 -11
package/es/index.js
CHANGED
|
@@ -4,7 +4,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
|
|
|
4
4
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
5
5
|
import classNames from 'classnames';
|
|
6
6
|
import PropTypes$1 from 'prop-types';
|
|
7
|
-
import React, { useState, useCallback, useMemo } from 'react';
|
|
7
|
+
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
|
8
8
|
import { PropTypes } from '@micromag/core';
|
|
9
9
|
import { ScreenElement, PlaceholderTitle, PlaceholderText, TransitionsStagger } from '@micromag/core/components';
|
|
10
10
|
import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
|
|
@@ -95,6 +95,13 @@ var Recommendation = function Recommendation(_ref) {
|
|
|
95
95
|
isStatic = _useScreenRenderConte.isStatic,
|
|
96
96
|
isCapture = _useScreenRenderConte.isCapture;
|
|
97
97
|
|
|
98
|
+
var finalAnimateBackground = current && animateBackground && !isPlaceholder && !isStatic && !isPreview && !isEdit;
|
|
99
|
+
|
|
100
|
+
var _useState = useState(finalAnimateBackground),
|
|
101
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
102
|
+
animationStarted = _useState2[0],
|
|
103
|
+
setAnimationStarted = _useState2[1];
|
|
104
|
+
|
|
98
105
|
var hasCategory = isTextFilled(category);
|
|
99
106
|
var hasDate = isTextFilled(date);
|
|
100
107
|
var hasTitle = isTextFilled(title);
|
|
@@ -104,21 +111,36 @@ var Recommendation = function Recommendation(_ref) {
|
|
|
104
111
|
var hasTextCard = hasCategory || hasDate || hasTitle || hasSponsor || hasDescription;
|
|
105
112
|
var backgroundPlaying = current && (isView || isEdit);
|
|
106
113
|
var backgroundShouldLoad = current || active;
|
|
107
|
-
var finalAnimateBackground = current && animateBackground && !isPlaceholder && !isStatic && !isPreview && !isEdit;
|
|
108
114
|
var transitionPlaying = current;
|
|
109
115
|
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
110
116
|
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
111
|
-
var scrollTimein = setTimeout(function () {
|
|
112
|
-
return true;
|
|
113
|
-
}, 3000);
|
|
114
|
-
var finalScrollTimein = finalAnimateBackground && scrollTimein;
|
|
115
117
|
var hasCallToAction = callToAction !== null && callToAction.active === true;
|
|
116
118
|
|
|
117
|
-
var
|
|
118
|
-
|
|
119
|
-
scrolledBottom =
|
|
120
|
-
setScrolledBottom =
|
|
119
|
+
var _useState3 = useState(false),
|
|
120
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
121
|
+
scrolledBottom = _useState4[0],
|
|
122
|
+
setScrolledBottom = _useState4[1];
|
|
123
|
+
|
|
124
|
+
useEffect(function () {
|
|
125
|
+
var id = null;
|
|
121
126
|
|
|
127
|
+
if (animationStarted) {
|
|
128
|
+
id = setTimeout(function () {
|
|
129
|
+
setAnimationStarted(false);
|
|
130
|
+
}, 3000);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
return function () {
|
|
134
|
+
clearTimeout(id);
|
|
135
|
+
};
|
|
136
|
+
}, [animationStarted, finalAnimateBackground, setAnimationStarted]);
|
|
137
|
+
useEffect(function () {
|
|
138
|
+
if (!isView) {
|
|
139
|
+
setAnimationStarted(false);
|
|
140
|
+
} else {
|
|
141
|
+
setAnimationStarted(true);
|
|
142
|
+
}
|
|
143
|
+
}, [isView, setAnimationStarted]);
|
|
122
144
|
var onScrolledBottom = useCallback(function (_ref2) {
|
|
123
145
|
var initial = _ref2.initial;
|
|
124
146
|
|
|
@@ -263,7 +285,7 @@ var Recommendation = function Recommendation(_ref) {
|
|
|
263
285
|
width: width,
|
|
264
286
|
height: height
|
|
265
287
|
}, /*#__PURE__*/React.createElement(Scroll, {
|
|
266
|
-
disabled:
|
|
288
|
+
disabled: animationStarted || scrollingDisabled,
|
|
267
289
|
onScrolledBottom: onScrolledBottom,
|
|
268
290
|
onScrolledNotBottom: onScrolledNotBottom,
|
|
269
291
|
verticalAlign: "top"
|
package/lib/index.js
CHANGED
|
@@ -115,6 +115,13 @@ var Recommendation = function Recommendation(_ref) {
|
|
|
115
115
|
isStatic = _useScreenRenderConte.isStatic,
|
|
116
116
|
isCapture = _useScreenRenderConte.isCapture;
|
|
117
117
|
|
|
118
|
+
var finalAnimateBackground = current && animateBackground && !isPlaceholder && !isStatic && !isPreview && !isEdit;
|
|
119
|
+
|
|
120
|
+
var _useState = React.useState(finalAnimateBackground),
|
|
121
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
122
|
+
animationStarted = _useState2[0],
|
|
123
|
+
setAnimationStarted = _useState2[1];
|
|
124
|
+
|
|
118
125
|
var hasCategory = utils.isTextFilled(category);
|
|
119
126
|
var hasDate = utils.isTextFilled(date);
|
|
120
127
|
var hasTitle = utils.isTextFilled(title);
|
|
@@ -124,21 +131,36 @@ var Recommendation = function Recommendation(_ref) {
|
|
|
124
131
|
var hasTextCard = hasCategory || hasDate || hasTitle || hasSponsor || hasDescription;
|
|
125
132
|
var backgroundPlaying = current && (isView || isEdit);
|
|
126
133
|
var backgroundShouldLoad = current || active;
|
|
127
|
-
var finalAnimateBackground = current && animateBackground && !isPlaceholder && !isStatic && !isPreview && !isEdit;
|
|
128
134
|
var transitionPlaying = current;
|
|
129
135
|
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
130
136
|
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
131
|
-
var scrollTimein = setTimeout(function () {
|
|
132
|
-
return true;
|
|
133
|
-
}, 3000);
|
|
134
|
-
var finalScrollTimein = finalAnimateBackground && scrollTimein;
|
|
135
137
|
var hasCallToAction = callToAction !== null && callToAction.active === true;
|
|
136
138
|
|
|
137
|
-
var
|
|
138
|
-
|
|
139
|
-
scrolledBottom =
|
|
140
|
-
setScrolledBottom =
|
|
139
|
+
var _useState3 = React.useState(false),
|
|
140
|
+
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
141
|
+
scrolledBottom = _useState4[0],
|
|
142
|
+
setScrolledBottom = _useState4[1];
|
|
143
|
+
|
|
144
|
+
React.useEffect(function () {
|
|
145
|
+
var id = null;
|
|
141
146
|
|
|
147
|
+
if (animationStarted) {
|
|
148
|
+
id = setTimeout(function () {
|
|
149
|
+
setAnimationStarted(false);
|
|
150
|
+
}, 3000);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
return function () {
|
|
154
|
+
clearTimeout(id);
|
|
155
|
+
};
|
|
156
|
+
}, [animationStarted, finalAnimateBackground, setAnimationStarted]);
|
|
157
|
+
React.useEffect(function () {
|
|
158
|
+
if (!isView) {
|
|
159
|
+
setAnimationStarted(false);
|
|
160
|
+
} else {
|
|
161
|
+
setAnimationStarted(true);
|
|
162
|
+
}
|
|
163
|
+
}, [isView, setAnimationStarted]);
|
|
142
164
|
var onScrolledBottom = React.useCallback(function (_ref2) {
|
|
143
165
|
var initial = _ref2.initial;
|
|
144
166
|
|
|
@@ -283,7 +305,7 @@ var Recommendation = function Recommendation(_ref) {
|
|
|
283
305
|
width: width,
|
|
284
306
|
height: height
|
|
285
307
|
}, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
|
|
286
|
-
disabled:
|
|
308
|
+
disabled: animationStarted || scrollingDisabled,
|
|
287
309
|
onScrolledBottom: onScrolledBottom,
|
|
288
310
|
onScrolledNotBottom: onScrolledNotBottom,
|
|
289
311
|
verticalAlign: "top"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-urbania-recommendation",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.107",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -49,15 +49,15 @@
|
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@babel/runtime": "^7.13.10",
|
|
52
|
-
"@micromag/core": "^0.3.
|
|
53
|
-
"@micromag/element-background": "^0.3.
|
|
54
|
-
"@micromag/element-call-to-action": "^0.3.
|
|
55
|
-
"@micromag/element-container": "^0.3.
|
|
56
|
-
"@micromag/element-heading": "^0.3.
|
|
57
|
-
"@micromag/element-layout": "^0.3.
|
|
58
|
-
"@micromag/element-scroll": "^0.3.
|
|
59
|
-
"@micromag/element-text": "^0.3.
|
|
60
|
-
"@micromag/transforms": "^0.3.
|
|
52
|
+
"@micromag/core": "^0.3.107",
|
|
53
|
+
"@micromag/element-background": "^0.3.107",
|
|
54
|
+
"@micromag/element-call-to-action": "^0.3.107",
|
|
55
|
+
"@micromag/element-container": "^0.3.107",
|
|
56
|
+
"@micromag/element-heading": "^0.3.107",
|
|
57
|
+
"@micromag/element-layout": "^0.3.107",
|
|
58
|
+
"@micromag/element-scroll": "^0.3.107",
|
|
59
|
+
"@micromag/element-text": "^0.3.107",
|
|
60
|
+
"@micromag/transforms": "^0.3.107",
|
|
61
61
|
"classnames": "^2.2.6",
|
|
62
62
|
"lodash": "^4.17.21",
|
|
63
63
|
"prop-types": "^15.7.2",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "952ef450fe62328a0ae3ab6dbb3c3079bb66d17a"
|
|
71
71
|
}
|