@folklore/ads 0.0.104 → 0.0.106

package/dist/cjs.js

@@ -1203,7 +1203,8 @@ function Ad(_ref) {
   const {
     slots = null,
     slotsPath = null,
-    viewport: contextViewport = null
+    viewport: contextViewport = null,
+    ads
   } = useAdsContext();
   const {
     default: defaultSlotPath = null
@@ -1244,29 +1245,23 @@ function Ad(_ref) {
     } = allTargeting || {};
     return {
       refreshInterval: refreshAds !== null && refreshAds === 'inactive' ? null : providedRefreshInterval,
-      disabled: providedDisabled || targetingDisabled,
+      disabled: providedDisabled || targetingDisabled || ads.isDisabled(),
       viewport: providedViewport || contextViewport || targetingViewport,
       targeting: otherProps || {}
     };
-  }, [slotName, contextTargeting, providedTargeting, providedRefreshInterval, providedDisabled, providedViewport, contextViewport]);
-  const lastRenderedSize = React.useRef(null);
-  const wasDisabled = React.useRef(disabled);
-  React.useEffect(() => {}, []);
+  }, [slotName, contextTargeting, providedTargeting, ads, providedRefreshInterval, providedDisabled, providedViewport, contextViewport]);
+  const [lastRenderedSize, setLastRenderedSize] = React.useState(null);
   const onAdRender = React.useCallback(event => {
     const {
       isEmpty: newIsEmpty = true,
       width: newWidth,
       height: newHeight
     } = event || {};
-    if (disabled) {
-      wasDisabled.current = true;
-    } else if (!disabled && !newIsEmpty) {
-      wasDisabled.current = false;
-    }
-    lastRenderedSize.current = !newIsEmpty ? {
+    const isRendered = !newIsEmpty;
+    setLastRenderedSize(isRendered ? {
       width: newWidth,
       height: newHeight
-    } : null;
+    } : null);
     if (onRender !== null) {
       onRender(event);
     }
@@ -1287,7 +1282,6 @@ function Ad(_ref) {
 
   // Create ad
   const {
-    disabled: adsDisabled,
     id,
     width,
     height,
@@ -1317,13 +1311,7 @@ function Ad(_ref) {
     // eslint-disable-next-line no-param-reassign
     slotRef.current = slotObject;
   }
-  if (disabled) {
-    wasDisabled.current = true;
-  } else if (!disabled && isRendered) {
-    wasDisabled.current = false;
-  }
-  const waitingNextRender = wasDisabled.current && !isRendered;
-  const keepSize = shouldKeepSize && (disabled || waitingNextRender) && lastRenderedSize.current !== null;
+  const keepSize = shouldKeepSize && lastRenderedSize !== null && !isRendered;
   if (id === null && !keepSize) {
     return null;
   }
@@ -1333,13 +1321,13 @@ function Ad(_ref) {
       width,
       height
     } : null;
-  } else if (shouldKeepSize && (disabled || waitingNextRender)) {
-    adStyle = lastRenderedSize.current;
+  } else if (keepSize) {
+    adStyle = lastRenderedSize;
   } else if (!withoutMinimumSize) {
     adStyle = minimumSize;
   }
   let containerStyle = null;
-  if (adsDisabled) {
+  if (disabled) {
     containerStyle = {
       display: 'none',
       visibility: 'hidden'
@@ -1355,7 +1343,7 @@ function Ad(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     id: id !== null ? `${id}-container` : null,
     className: classNames([className, {
-      [emptyClassName]: emptyClassName !== null && isEmpty
+      [emptyClassName]: emptyClassName !== null && isEmpty && !keepSize
     }]),
     style: !withoutStyle ? containerStyle : null,
     ref: refObserver,

package/dist/es.js

@@ -1201,7 +1201,8 @@ function Ad(_ref) {
   const {
     slots = null,
     slotsPath = null,
-    viewport: contextViewport = null
+    viewport: contextViewport = null,
+    ads
   } = useAdsContext();
   const {
     default: defaultSlotPath = null
@@ -1242,29 +1243,23 @@ function Ad(_ref) {
     } = allTargeting || {};
     return {
       refreshInterval: refreshAds !== null && refreshAds === 'inactive' ? null : providedRefreshInterval,
-      disabled: providedDisabled || targetingDisabled,
+      disabled: providedDisabled || targetingDisabled || ads.isDisabled(),
       viewport: providedViewport || contextViewport || targetingViewport,
       targeting: otherProps || {}
     };
-  }, [slotName, contextTargeting, providedTargeting, providedRefreshInterval, providedDisabled, providedViewport, contextViewport]);
-  const lastRenderedSize = useRef(null);
-  const wasDisabled = useRef(disabled);
-  useEffect(() => {}, []);
+  }, [slotName, contextTargeting, providedTargeting, ads, providedRefreshInterval, providedDisabled, providedViewport, contextViewport]);
+  const [lastRenderedSize, setLastRenderedSize] = useState(null);
   const onAdRender = useCallback(event => {
     const {
       isEmpty: newIsEmpty = true,
       width: newWidth,
       height: newHeight
     } = event || {};
-    if (disabled) {
-      wasDisabled.current = true;
-    } else if (!disabled && !newIsEmpty) {
-      wasDisabled.current = false;
-    }
-    lastRenderedSize.current = !newIsEmpty ? {
+    const isRendered = !newIsEmpty;
+    setLastRenderedSize(isRendered ? {
       width: newWidth,
       height: newHeight
-    } : null;
+    } : null);
     if (onRender !== null) {
       onRender(event);
     }
@@ -1285,7 +1280,6 @@ function Ad(_ref) {
 
   // Create ad
   const {
-    disabled: adsDisabled,
     id,
     width,
     height,
@@ -1315,13 +1309,7 @@ function Ad(_ref) {
     // eslint-disable-next-line no-param-reassign
     slotRef.current = slotObject;
   }
-  if (disabled) {
-    wasDisabled.current = true;
-  } else if (!disabled && isRendered) {
-    wasDisabled.current = false;
-  }
-  const waitingNextRender = wasDisabled.current && !isRendered;
-  const keepSize = shouldKeepSize && (disabled || waitingNextRender) && lastRenderedSize.current !== null;
+  const keepSize = shouldKeepSize && lastRenderedSize !== null && !isRendered;
   if (id === null && !keepSize) {
     return null;
   }
@@ -1331,13 +1319,13 @@ function Ad(_ref) {
       width,
       height
     } : null;
-  } else if (shouldKeepSize && (disabled || waitingNextRender)) {
-    adStyle = lastRenderedSize.current;
+  } else if (keepSize) {
+    adStyle = lastRenderedSize;
   } else if (!withoutMinimumSize) {
     adStyle = minimumSize;
   }
   let containerStyle = null;
-  if (adsDisabled) {
+  if (disabled) {
     containerStyle = {
       display: 'none',
       visibility: 'hidden'
@@ -1353,7 +1341,7 @@ function Ad(_ref) {
   return /*#__PURE__*/jsx("div", {
     id: id !== null ? `${id}-container` : null,
     className: classNames([className, {
-      [emptyClassName]: emptyClassName !== null && isEmpty
+      [emptyClassName]: emptyClassName !== null && isEmpty && !keepSize
     }]),
     style: !withoutStyle ? containerStyle : null,
     ref: refObserver,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/ads",
-    "version": "0.0.104",
+    "version": "0.0.106",
     "description": "Ads library",
     "keywords": [
         "javascript",
@@ -50,7 +50,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "2d8bb885c7367b26f1b384e30ef8fe9c2ccfee08",
+    "gitHead": "5dcc85d03e017aecc2d19a4fa174382ece4a3225",
     "dependencies": {
         "@folklore/hooks": "^0.0.72",
         "@folklore/tracking": "^0.0.29",