@micromag/element-background 0.2.404 → 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.
Files changed (3) hide show
  1. package/es/index.js +26 -24
  2. package/lib/index.js +26 -24
  3. package/package.json +4 -4
package/es/index.js CHANGED
@@ -7,7 +7,6 @@ import classNames from 'classnames';
7
7
  import { PropTypes as PropTypes$1 } from '@micromag/core';
8
8
  import { getStyleFromColor, getOptimalImageUrl, getLayersFromBackground } from '@micromag/core/utils';
9
9
  import { getSizeWithinBounds } from '@folklore/size';
10
- import { useIntersectionObserver } from '@micromag/core/hooks';
11
10
  import Video from '@micromag/element-video';
12
11
 
13
12
  var styles = {"container":"micromag-element-background-container","layer":"micromag-element-background-layer","layers":"micromag-element-background-layers","video":"micromag-element-background-video","videoContainer":"micromag-element-background-videoContainer","right":"micromag-element-background-right","background":"micromag-element-background-background","bottom":"micromag-element-background-bottom"};
@@ -24,7 +23,8 @@ var propTypes$1 = {
24
23
  className: PropTypes.string,
25
24
  playing: PropTypes.bool,
26
25
  children: PropTypes.node,
27
- loadingMode: PropTypes.string
26
+ loadingMode: PropTypes.string,
27
+ shouldLoad: PropTypes.bool
28
28
  };
29
29
  var defaultProps$1 = {
30
30
  width: null,
@@ -38,7 +38,8 @@ var defaultProps$1 = {
38
38
  className: null,
39
39
  playing: false,
40
40
  children: null,
41
- loadingMode: 'lazy'
41
+ loadingMode: 'lazy',
42
+ shouldLoad: true
42
43
  };
43
44
 
44
45
  var Background = function Background(_ref) {
@@ -53,7 +54,8 @@ var Background = function Background(_ref) {
53
54
  className = _ref.className,
54
55
  playing = _ref.playing,
55
56
  children = _ref.children,
56
- loadingMode = _ref.loadingMode;
57
+ loadingMode = _ref.loadingMode,
58
+ shouldLoad = _ref.shouldLoad;
57
59
 
58
60
  var _ref2 = media || {},
59
61
  _ref2$type = _ref2.type,
@@ -71,21 +73,14 @@ var Background = function Background(_ref) {
71
73
  var isVideo = mediaType === 'video';
72
74
  var isImage = mediaType === 'image'; // Lazy load
73
75
 
74
- var _useIntersectionObser = useIntersectionObserver({
75
- disabled: loadingMode !== 'lazy',
76
- rootMargin: '-10px'
77
- }),
78
- intersectingRef = _useIntersectionObser.ref,
79
- isIntersecting = _useIntersectionObser.entry.isIntersecting;
76
+ var newShouldLoad = shouldLoad || loadingMode !== 'lazy';
77
+ var wasLoadedRef = useRef(newShouldLoad);
80
78
 
81
- var shouldLoadRef = useRef(isIntersecting || loadingMode !== 'lazy');
82
-
83
- if (isIntersecting && !shouldLoadRef.current) {
84
- shouldLoadRef.current = isIntersecting;
79
+ if (newShouldLoad && !wasLoadedRef.current) {
80
+ wasLoadedRef.current = newShouldLoad;
85
81
  }
86
82
 
87
- var shouldLoad = shouldLoadRef.current;
88
- console.log(shouldLoad, isIntersecting); // color
83
+ var finalShouldLoad = wasLoadedRef.current; // color
89
84
 
90
85
  var containerStyle = _objectSpread({
91
86
  width: width,
@@ -97,7 +92,7 @@ var Background = function Background(_ref) {
97
92
  var finalUrl = getOptimalImageUrl(isVideo ? {
98
93
  url: mediaThumbnailUrl
99
94
  } : media, width, height);
100
- containerStyle.backgroundImage = finalUrl !== null && shouldLoad ? "url(\"".concat(finalUrl, "\")") : null;
95
+ containerStyle.backgroundImage = finalUrl !== null && finalShouldLoad ? "url(\"".concat(finalUrl, "\")") : null;
101
96
  containerStyle.backgroundRepeat = repeat ? 'repeat' : 'no-repeat';
102
97
  containerStyle.backgroundPosition = [horizontalAlign, verticalAlign].join(' ');
103
98
 
@@ -142,10 +137,9 @@ var Background = function Background(_ref) {
142
137
  autoPlay: playing,
143
138
  initialMuted: true,
144
139
  loop: true,
145
- preload: shouldLoad ? 'auto' : 'metadata'
140
+ preload: finalShouldLoad ? 'auto' : 'metadata'
146
141
  })) : null, /*#__PURE__*/React.createElement("div", {
147
- className: styles.content,
148
- ref: intersectingRef
142
+ className: styles.content
149
143
  }, children));
150
144
  };
151
145
 
@@ -159,7 +153,9 @@ var propTypes = {
159
153
  background: PropTypes.oneOfType([PropTypes$1.backgroundElement, PropTypes.arrayOf(PropTypes$1.backgroundElement)]),
160
154
  playing: PropTypes.bool,
161
155
  children: PropTypes.node,
162
- className: PropTypes.string
156
+ className: PropTypes.string,
157
+ loadingMode: PropTypes.string,
158
+ shouldLoad: PropTypes.bool
163
159
  };
164
160
  var defaultProps = {
165
161
  width: null,
@@ -167,7 +163,9 @@ var defaultProps = {
167
163
  background: [],
168
164
  playing: false,
169
165
  children: null,
170
- className: null
166
+ className: null,
167
+ loadingMode: 'lazy',
168
+ shouldLoad: true
171
169
  };
172
170
 
173
171
  var BackgroundLayers = function BackgroundLayers(_ref) {
@@ -176,7 +174,9 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
176
174
  background = _ref.background,
177
175
  playing = _ref.playing,
178
176
  children = _ref.children,
179
- className = _ref.className;
177
+ className = _ref.className,
178
+ loadingMode = _ref.loadingMode,
179
+ shouldLoad = _ref.shouldLoad;
180
180
  var hasSize = width > 0 && height > 0;
181
181
  var layers = useMemo(function () {
182
182
  return getLayersFromBackground(background);
@@ -214,7 +214,9 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
214
214
  className: styles.background,
215
215
  playing: playing,
216
216
  horizontalAlign: horizontalAlign,
217
- verticalAlign: verticalAlign
217
+ verticalAlign: verticalAlign,
218
+ loadingMode: loadingMode,
219
+ shouldLoad: shouldLoad
218
220
  }, layer)));
219
221
  })), /*#__PURE__*/React.createElement("div", {
220
222
  className: styles.content
package/lib/index.js CHANGED
@@ -11,7 +11,6 @@ var classNames = require('classnames');
11
11
  var core = require('@micromag/core');
12
12
  var utils = require('@micromag/core/utils');
13
13
  var size = require('@folklore/size');
14
- var hooks = require('@micromag/core/hooks');
15
14
  var Video = require('@micromag/element-video');
16
15
 
17
16
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -38,7 +37,8 @@ var propTypes$1 = {
38
37
  className: PropTypes__default["default"].string,
39
38
  playing: PropTypes__default["default"].bool,
40
39
  children: PropTypes__default["default"].node,
41
- loadingMode: PropTypes__default["default"].string
40
+ loadingMode: PropTypes__default["default"].string,
41
+ shouldLoad: PropTypes__default["default"].bool
42
42
  };
43
43
  var defaultProps$1 = {
44
44
  width: null,
@@ -52,7 +52,8 @@ var defaultProps$1 = {
52
52
  className: null,
53
53
  playing: false,
54
54
  children: null,
55
- loadingMode: 'lazy'
55
+ loadingMode: 'lazy',
56
+ shouldLoad: true
56
57
  };
57
58
 
58
59
  var Background = function Background(_ref) {
@@ -67,7 +68,8 @@ var Background = function Background(_ref) {
67
68
  className = _ref.className,
68
69
  playing = _ref.playing,
69
70
  children = _ref.children,
70
- loadingMode = _ref.loadingMode;
71
+ loadingMode = _ref.loadingMode,
72
+ shouldLoad = _ref.shouldLoad;
71
73
 
72
74
  var _ref2 = media || {},
73
75
  _ref2$type = _ref2.type,
@@ -85,21 +87,14 @@ var Background = function Background(_ref) {
85
87
  var isVideo = mediaType === 'video';
86
88
  var isImage = mediaType === 'image'; // Lazy load
87
89
 
88
- var _useIntersectionObser = hooks.useIntersectionObserver({
89
- disabled: loadingMode !== 'lazy',
90
- rootMargin: '-10px'
91
- }),
92
- intersectingRef = _useIntersectionObser.ref,
93
- isIntersecting = _useIntersectionObser.entry.isIntersecting;
90
+ var newShouldLoad = shouldLoad || loadingMode !== 'lazy';
91
+ var wasLoadedRef = React.useRef(newShouldLoad);
94
92
 
95
- var shouldLoadRef = React.useRef(isIntersecting || loadingMode !== 'lazy');
96
-
97
- if (isIntersecting && !shouldLoadRef.current) {
98
- shouldLoadRef.current = isIntersecting;
93
+ if (newShouldLoad && !wasLoadedRef.current) {
94
+ wasLoadedRef.current = newShouldLoad;
99
95
  }
100
96
 
101
- var shouldLoad = shouldLoadRef.current;
102
- console.log(shouldLoad, isIntersecting); // color
97
+ var finalShouldLoad = wasLoadedRef.current; // color
103
98
 
104
99
  var containerStyle = _objectSpread__default["default"]({
105
100
  width: width,
@@ -111,7 +106,7 @@ var Background = function Background(_ref) {
111
106
  var finalUrl = utils.getOptimalImageUrl(isVideo ? {
112
107
  url: mediaThumbnailUrl
113
108
  } : media, width, height);
114
- containerStyle.backgroundImage = finalUrl !== null && shouldLoad ? "url(\"".concat(finalUrl, "\")") : null;
109
+ containerStyle.backgroundImage = finalUrl !== null && finalShouldLoad ? "url(\"".concat(finalUrl, "\")") : null;
115
110
  containerStyle.backgroundRepeat = repeat ? 'repeat' : 'no-repeat';
116
111
  containerStyle.backgroundPosition = [horizontalAlign, verticalAlign].join(' ');
117
112
 
@@ -156,10 +151,9 @@ var Background = function Background(_ref) {
156
151
  autoPlay: playing,
157
152
  initialMuted: true,
158
153
  loop: true,
159
- preload: shouldLoad ? 'auto' : 'metadata'
154
+ preload: finalShouldLoad ? 'auto' : 'metadata'
160
155
  })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
161
- className: styles.content,
162
- ref: intersectingRef
156
+ className: styles.content
163
157
  }, children));
164
158
  };
165
159
 
@@ -173,7 +167,9 @@ var propTypes = {
173
167
  background: PropTypes__default["default"].oneOfType([core.PropTypes.backgroundElement, PropTypes__default["default"].arrayOf(core.PropTypes.backgroundElement)]),
174
168
  playing: PropTypes__default["default"].bool,
175
169
  children: PropTypes__default["default"].node,
176
- className: PropTypes__default["default"].string
170
+ className: PropTypes__default["default"].string,
171
+ loadingMode: PropTypes__default["default"].string,
172
+ shouldLoad: PropTypes__default["default"].bool
177
173
  };
178
174
  var defaultProps = {
179
175
  width: null,
@@ -181,7 +177,9 @@ var defaultProps = {
181
177
  background: [],
182
178
  playing: false,
183
179
  children: null,
184
- className: null
180
+ className: null,
181
+ loadingMode: 'lazy',
182
+ shouldLoad: true
185
183
  };
186
184
 
187
185
  var BackgroundLayers = function BackgroundLayers(_ref) {
@@ -190,7 +188,9 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
190
188
  background = _ref.background,
191
189
  playing = _ref.playing,
192
190
  children = _ref.children,
193
- className = _ref.className;
191
+ className = _ref.className,
192
+ loadingMode = _ref.loadingMode,
193
+ shouldLoad = _ref.shouldLoad;
194
194
  var hasSize = width > 0 && height > 0;
195
195
  var layers = React.useMemo(function () {
196
196
  return utils.getLayersFromBackground(background);
@@ -228,7 +228,9 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
228
228
  className: styles.background,
229
229
  playing: playing,
230
230
  horizontalAlign: horizontalAlign,
231
- verticalAlign: verticalAlign
231
+ verticalAlign: verticalAlign,
232
+ loadingMode: loadingMode,
233
+ shouldLoad: shouldLoad
232
234
  }, layer)));
233
235
  })), /*#__PURE__*/React__default["default"].createElement("div", {
234
236
  className: styles.content
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-background",
3
- "version": "0.2.404",
3
+ "version": "0.2.409",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -48,8 +48,8 @@
48
48
  "dependencies": {
49
49
  "@babel/runtime": "^7.13.10",
50
50
  "@folklore/size": "^0.1.15",
51
- "@micromag/core": "^0.2.404",
52
- "@micromag/element-video": "^0.2.404",
51
+ "@micromag/core": "^0.2.409",
52
+ "@micromag/element-video": "^0.2.409",
53
53
  "classnames": "^2.2.6",
54
54
  "lodash": "^4.17.21",
55
55
  "prop-types": "^15.7.2",
@@ -59,5 +59,5 @@
59
59
  "publishConfig": {
60
60
  "access": "public"
61
61
  },
62
- "gitHead": "34d5345cb0dad79206bb6b7a25f02742663023ee"
62
+ "gitHead": "4c16c3bb63644d1bd5b7d50086098337317ee3f6"
63
63
  }