@micromag/element-background 0.2.405 → 0.2.406

package/es/index.js

@@ -7,7 +7,6 @@ import classNames from 'classnames';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { getStyleFromColor, getOptimalImageUrl, getLayersFromBackground } from '@micromag/core/utils';
 import { getSizeWithinBounds } from '@folklore/size';
-import { useIntersectionObserver } from '@micromag/core/hooks';
 import Video from '@micromag/element-video';
 
 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 = {
   className: PropTypes.string,
   playing: PropTypes.bool,
   children: PropTypes.node,
-  loadingMode: PropTypes.string
+  loadingMode: PropTypes.string,
+  shouldLoad: PropTypes.bool
 };
 var defaultProps$1 = {
   width: null,
@@ -38,7 +38,8 @@ var defaultProps$1 = {
   className: null,
   playing: false,
   children: null,
-  loadingMode: 'lazy'
+  loadingMode: 'lazy',
+  shouldLoad: true
 };
 
 var Background = function Background(_ref) {
@@ -53,7 +54,8 @@ var Background = function Background(_ref) {
       className = _ref.className,
       playing = _ref.playing,
       children = _ref.children,
-      loadingMode = _ref.loadingMode;
+      loadingMode = _ref.loadingMode,
+      shouldLoad = _ref.shouldLoad;
 
   var _ref2 = media || {},
       _ref2$type = _ref2.type,
@@ -71,21 +73,14 @@ var Background = function Background(_ref) {
   var isVideo = mediaType === 'video';
   var isImage = mediaType === 'image'; // Lazy load
 
-  var _useIntersectionObser = useIntersectionObserver({
-    disabled: loadingMode !== 'lazy',
-    rootMargin: '-10px'
-  }),
-      intersectingRef = _useIntersectionObser.ref,
-      isIntersecting = _useIntersectionObser.entry.isIntersecting;
+  var newShouldLoad = shouldLoad || loadingMode !== 'lazy';
+  var wasLoadedRef = useRef(newShouldLoad);
 
-  var shouldLoadRef = useRef(isIntersecting || loadingMode !== 'lazy');
-
-  if (isIntersecting && !shouldLoadRef.current) {
-    shouldLoadRef.current = isIntersecting;
+  if (newShouldLoad && !wasLoadedRef.current) {
+    wasLoadedRef.current = newShouldLoad;
   }
 
-  var shouldLoad = shouldLoadRef.current;
-  console.log(shouldLoad, isIntersecting); // color
+  var finalShouldLoad = wasLoadedRef.current; // color
 
   var containerStyle = _objectSpread({
     width: width,
@@ -97,7 +92,7 @@ var Background = function Background(_ref) {
     var finalUrl = getOptimalImageUrl(isVideo ? {
       url: mediaThumbnailUrl
     } : media, width, height);
-    containerStyle.backgroundImage = finalUrl !== null && shouldLoad ? "url(\"".concat(finalUrl, "\")") : null;
+    containerStyle.backgroundImage = finalUrl !== null && finalShouldLoad ? "url(\"".concat(finalUrl, "\")") : null;
     containerStyle.backgroundRepeat = repeat ? 'repeat' : 'no-repeat';
     containerStyle.backgroundPosition = [horizontalAlign, verticalAlign].join(' ');
 
@@ -142,10 +137,9 @@ var Background = function Background(_ref) {
     autoPlay: playing,
     initialMuted: true,
     loop: true,
-    preload: shouldLoad ? 'auto' : 'metadata'
+    preload: finalShouldLoad ? 'auto' : 'metadata'
   })) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles.content,
-    ref: intersectingRef
+    className: styles.content
   }, children));
 };
 
@@ -159,7 +153,9 @@ var propTypes = {
   background: PropTypes.oneOfType([PropTypes$1.backgroundElement, PropTypes.arrayOf(PropTypes$1.backgroundElement)]),
   playing: PropTypes.bool,
   children: PropTypes.node,
-  className: PropTypes.string
+  className: PropTypes.string,
+  loadingMode: PropTypes.string,
+  shouldLoad: PropTypes.bool
 };
 var defaultProps = {
   width: null,
@@ -167,7 +163,9 @@ var defaultProps = {
   background: [],
   playing: false,
   children: null,
-  className: null
+  className: null,
+  loadingMode: 'lazy',
+  shouldLoad: true
 };
 
 var BackgroundLayers = function BackgroundLayers(_ref) {
@@ -176,7 +174,9 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
       background = _ref.background,
       playing = _ref.playing,
       children = _ref.children,
-      className = _ref.className;
+      className = _ref.className,
+      loadingMode = _ref.loadingMode,
+      shouldLoad = _ref.shouldLoad;
   var hasSize = width > 0 && height > 0;
   var layers = useMemo(function () {
     return getLayersFromBackground(background);
@@ -214,7 +214,9 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
       className: styles.background,
       playing: playing,
       horizontalAlign: horizontalAlign,
-      verticalAlign: verticalAlign
+      verticalAlign: verticalAlign,
+      loadingMode: loadingMode,
+      shouldLoad: shouldLoad
     }, layer)));
   })), /*#__PURE__*/React.createElement("div", {
     className: styles.content

package/lib/index.js

@@ -11,7 +11,6 @@ var classNames = require('classnames');
 var core = require('@micromag/core');
 var utils = require('@micromag/core/utils');
 var size = require('@folklore/size');
-var hooks = require('@micromag/core/hooks');
 var Video = require('@micromag/element-video');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -38,7 +37,8 @@ var propTypes$1 = {
   className: PropTypes__default["default"].string,
   playing: PropTypes__default["default"].bool,
   children: PropTypes__default["default"].node,
-  loadingMode: PropTypes__default["default"].string
+  loadingMode: PropTypes__default["default"].string,
+  shouldLoad: PropTypes__default["default"].bool
 };
 var defaultProps$1 = {
   width: null,
@@ -52,7 +52,8 @@ var defaultProps$1 = {
   className: null,
   playing: false,
   children: null,
-  loadingMode: 'lazy'
+  loadingMode: 'lazy',
+  shouldLoad: true
 };
 
 var Background = function Background(_ref) {
@@ -67,7 +68,8 @@ var Background = function Background(_ref) {
       className = _ref.className,
       playing = _ref.playing,
       children = _ref.children,
-      loadingMode = _ref.loadingMode;
+      loadingMode = _ref.loadingMode,
+      shouldLoad = _ref.shouldLoad;
 
   var _ref2 = media || {},
       _ref2$type = _ref2.type,
@@ -85,21 +87,14 @@ var Background = function Background(_ref) {
   var isVideo = mediaType === 'video';
   var isImage = mediaType === 'image'; // Lazy load
 
-  var _useIntersectionObser = hooks.useIntersectionObserver({
-    disabled: loadingMode !== 'lazy',
-    rootMargin: '-10px'
-  }),
-      intersectingRef = _useIntersectionObser.ref,
-      isIntersecting = _useIntersectionObser.entry.isIntersecting;
+  var newShouldLoad = shouldLoad || loadingMode !== 'lazy';
+  var wasLoadedRef = React.useRef(newShouldLoad);
 
-  var shouldLoadRef = React.useRef(isIntersecting || loadingMode !== 'lazy');
-
-  if (isIntersecting && !shouldLoadRef.current) {
-    shouldLoadRef.current = isIntersecting;
+  if (newShouldLoad && !wasLoadedRef.current) {
+    wasLoadedRef.current = newShouldLoad;
   }
 
-  var shouldLoad = shouldLoadRef.current;
-  console.log(shouldLoad, isIntersecting); // color
+  var finalShouldLoad = wasLoadedRef.current; // color
 
   var containerStyle = _objectSpread__default["default"]({
     width: width,
@@ -111,7 +106,7 @@ var Background = function Background(_ref) {
     var finalUrl = utils.getOptimalImageUrl(isVideo ? {
       url: mediaThumbnailUrl
     } : media, width, height);
-    containerStyle.backgroundImage = finalUrl !== null && shouldLoad ? "url(\"".concat(finalUrl, "\")") : null;
+    containerStyle.backgroundImage = finalUrl !== null && finalShouldLoad ? "url(\"".concat(finalUrl, "\")") : null;
     containerStyle.backgroundRepeat = repeat ? 'repeat' : 'no-repeat';
     containerStyle.backgroundPosition = [horizontalAlign, verticalAlign].join(' ');
 
@@ -156,10 +151,9 @@ var Background = function Background(_ref) {
     autoPlay: playing,
     initialMuted: true,
     loop: true,
-    preload: shouldLoad ? 'auto' : 'metadata'
+    preload: finalShouldLoad ? 'auto' : 'metadata'
   })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles.content,
-    ref: intersectingRef
+    className: styles.content
   }, children));
 };
 
@@ -173,7 +167,9 @@ var propTypes = {
   background: PropTypes__default["default"].oneOfType([core.PropTypes.backgroundElement, PropTypes__default["default"].arrayOf(core.PropTypes.backgroundElement)]),
   playing: PropTypes__default["default"].bool,
   children: PropTypes__default["default"].node,
-  className: PropTypes__default["default"].string
+  className: PropTypes__default["default"].string,
+  loadingMode: PropTypes__default["default"].string,
+  shouldLoad: PropTypes__default["default"].bool
 };
 var defaultProps = {
   width: null,
@@ -181,7 +177,9 @@ var defaultProps = {
   background: [],
   playing: false,
   children: null,
-  className: null
+  className: null,
+  loadingMode: 'lazy',
+  shouldLoad: true
 };
 
 var BackgroundLayers = function BackgroundLayers(_ref) {
@@ -190,7 +188,9 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
       background = _ref.background,
       playing = _ref.playing,
       children = _ref.children,
-      className = _ref.className;
+      className = _ref.className,
+      loadingMode = _ref.loadingMode,
+      shouldLoad = _ref.shouldLoad;
   var hasSize = width > 0 && height > 0;
   var layers = React.useMemo(function () {
     return utils.getLayersFromBackground(background);
@@ -228,7 +228,9 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
       className: styles.background,
       playing: playing,
       horizontalAlign: horizontalAlign,
-      verticalAlign: verticalAlign
+      verticalAlign: verticalAlign,
+      loadingMode: loadingMode,
+      shouldLoad: shouldLoad
     }, layer)));
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles.content

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-background",
-    "version": "0.2.405",
+    "version": "0.2.406",
     "description": "",
     "keywords": [
         "javascript"
@@ -59,5 +59,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "e3d172d92d78222d5307cc1513fee7eef9f28402"
+    "gitHead": "5e1a6de73674624b0cb3f9701140ea8850e6f35e"
 }