@folklore/ads 0.0.13 → 0.0.15

package/dist/cjs.js

@@ -7,10 +7,10 @@ var classNames = require('classnames');
 var isFunction = require('lodash/isFunction');
 var isObject = require('lodash/isObject');
 var React = require('react');
-var debounce = require('lodash/debounce');
 var isArray = require('lodash/isArray');
 var sortBy = require('lodash/sortBy');
 var uniqBy = require('lodash/uniqBy');
+var debounce = require('lodash/debounce');
 var EventEmitter = require('wolfy87-eventemitter');
 var createDebug = require('debug');
 var jsxRuntime = require('react/jsx-runtime');
@@ -24,10 +24,10 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var isFunction__default = /*#__PURE__*/_interopDefaultLegacy(isFunction);
 var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
 var sortBy__default = /*#__PURE__*/_interopDefaultLegacy(sortBy);
 var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
 var createDebug__default = /*#__PURE__*/_interopDefaultLegacy(createDebug);
 
@@ -864,16 +864,20 @@ function useAd(path, size) {
   // Listen to render event
   React.useEffect(() => {
     if (slot === null) {
+      if (renderEvent !== null) {
+        setRenderEvent(null);
+      }
       return () => {};
     }
     const onSlotRender = event => {
       const newRenderEvent = {
         ...event,
-        ...(slot !== null ? slot.getRenderedSize() : null)
+        ...(slot !== null ? slot.getRenderedSize() : null),
+        slot
       };
       setRenderEvent(newRenderEvent);
       if (onRender !== null) {
-        onRender(newRenderEvent, slot);
+        onRender(newRenderEvent);
       }
       const {
         isEmpty = true
@@ -919,6 +923,9 @@ const propTypes = {
   refreshInterval: PropTypes__default["default"].number,
   alwaysRender: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
+  shouldKeepSize: PropTypes__default["default"].bool,
+  withoutStyle: PropTypes__default["default"].bool,
+  withoutMinimumSize: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   emptyClassName: PropTypes__default["default"].string,
   adClassName: PropTypes__default["default"].string,
@@ -933,6 +940,9 @@ const defaultProps = {
   refreshInterval: null,
   alwaysRender: true,
   disabled: false,
+  shouldKeepSize: false,
+  withoutStyle: false,
+  withoutMinimumSize: false,
   className: null,
   emptyClassName: null,
   adClassName: null,
@@ -949,6 +959,9 @@ function Ad(_ref) {
     refreshInterval,
     alwaysRender,
     disabled,
+    shouldKeepSize,
+    withoutStyle,
+    withoutMinimumSize,
     className,
     emptyClassName,
     adClassName,
@@ -963,6 +976,7 @@ function Ad(_ref) {
   const finalPath = path || (slot !== null ? slot.path || null : null) || (slotName !== null ? slotsPath[slotName] : null) || slotsPath.default || null;
   const finalSize = size || (slot !== null ? slot.size || null : null);
   const finalSizeMapping = sizeMapping || (slot !== null ? slot.sizeMapping || null : null);
+  const minimumSize = React.useMemo(() => getMinimumAdSize(finalSizeMapping !== null ? finalSizeMapping.reduce((allSizes, sizeMap) => [...allSizes, sizeMap[1]], [finalSize]) : finalSize), [finalSizeMapping, finalSize]);
 
   // Targeting
   const contextTargeting = useAdsTargeting();
@@ -981,6 +995,39 @@ function Ad(_ref) {
       targeting: otherProps || {}
     };
   }, [allTargeting, refreshInterval]);
+  const lastRenderedSize = React.useRef(null);
+  const wasDisabled = React.useRef(disabled);
+  const onAdRender = React.useCallback(event => {
+    const {
+      isEmpty: newIsEmpty = true
+    } = event || {};
+    const newIsRendered = !newIsEmpty;
+    if (disabled) {
+      wasDisabled.current = true;
+    } else if (!disabled && newIsRendered) {
+      wasDisabled.current = false;
+    }
+    const waitingNextRender = wasDisabled.current && !newIsRendered;
+    const keepSize = shouldKeepSize && (disabled || waitingNextRender) && lastRenderedSize.current !== null;
+    if (onRender !== null) {
+      onRender({
+        ...event,
+        keepSize
+      });
+    }
+  }, [onRender, shouldKeepSize, disabled]);
+  React.useEffect(() => {
+    if (!disabled) {
+      return;
+    }
+    const keepSize = shouldKeepSize && lastRenderedSize.current !== null;
+    if (onRender !== null) {
+      onRender({
+        isEmpty: true,
+        keepSize
+      });
+    }
+  }, [disabled]);
 
   // Create ad
   const {
@@ -989,6 +1036,7 @@ function Ad(_ref) {
     width,
     height,
     isEmpty,
+    isRendered,
     refObserver,
     slot: slotObject = null
   } = useAd(finalPath, finalSize, {
@@ -996,7 +1044,7 @@ function Ad(_ref) {
     targeting: finalAdTargeting.targeting,
     refreshInterval: finalAdTargeting.refreshInterval,
     alwaysRender,
-    onRender,
+    onRender: onAdRender,
     disabled
   });
   if (slotRef !== null && isFunction__default["default"](slotRef)) {
@@ -1005,28 +1053,57 @@ function Ad(_ref) {
     // eslint-disable-next-line no-param-reassign
     slotRef.current = slotObject;
   }
-
-  // Get size
-
+  if (isRendered) {
+    lastRenderedSize.current = {
+      width,
+      height
+    };
+  }
+  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;
   if (id === null) {
     return null;
   }
+  let adStyle = null;
+  if (isRendered) {
+    adStyle = {
+      width,
+      height
+    };
+  } else if (shouldKeepSize && (disabled || waitingNextRender)) {
+    adStyle = lastRenderedSize.current;
+  } else if (!withoutMinimumSize) {
+    adStyle = minimumSize;
+  }
+  let containerStyle = null;
+  if (adsDisabled) {
+    containerStyle = {
+      display: 'none',
+      visibility: 'hidden'
+    };
+  } else if (isEmpty && !keepSize) {
+    containerStyle = {
+      height: 0,
+      paddingBottom: 0,
+      overflow: 'hidden',
+      opacity: 0
+    };
+  }
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     id: id !== null ? `${id}-container` : null,
     className: classNames__default["default"]([className, {
       [emptyClassName]: emptyClassName !== null && isEmpty
     }]),
-    style: adsDisabled ? {
-      display: 'none',
-      visibility: 'hidden'
-    } : null,
+    style: !withoutStyle ? containerStyle : null,
     ref: refObserver,
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: adClassName,
-      style: {
-        width,
-        height
-      },
+      style: adStyle,
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
         id: id
       })

package/dist/es.js

@@ -3,10 +3,10 @@ import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';
 import isObject from 'lodash/isObject';
 import React, { useContext, useState, useRef, useMemo, useEffect, useCallback } from 'react';
-import debounce from 'lodash/debounce';
 import isArray from 'lodash/isArray';
 import sortBy from 'lodash/sortBy';
 import uniqBy from 'lodash/uniqBy';
+import debounce from 'lodash/debounce';
 import EventEmitter from 'wolfy87-eventemitter';
 import createDebug from 'debug';
 import { jsx } from 'react/jsx-runtime';
@@ -846,16 +846,20 @@ function useAd(path, size) {
   // Listen to render event
   useEffect(() => {
     if (slot === null) {
+      if (renderEvent !== null) {
+        setRenderEvent(null);
+      }
       return () => {};
     }
     const onSlotRender = event => {
       const newRenderEvent = {
         ...event,
-        ...(slot !== null ? slot.getRenderedSize() : null)
+        ...(slot !== null ? slot.getRenderedSize() : null),
+        slot
       };
       setRenderEvent(newRenderEvent);
       if (onRender !== null) {
-        onRender(newRenderEvent, slot);
+        onRender(newRenderEvent);
       }
       const {
         isEmpty = true
@@ -901,6 +905,9 @@ const propTypes = {
   refreshInterval: PropTypes.number,
   alwaysRender: PropTypes.bool,
   disabled: PropTypes.bool,
+  shouldKeepSize: PropTypes.bool,
+  withoutStyle: PropTypes.bool,
+  withoutMinimumSize: PropTypes.bool,
   className: PropTypes.string,
   emptyClassName: PropTypes.string,
   adClassName: PropTypes.string,
@@ -915,6 +922,9 @@ const defaultProps = {
   refreshInterval: null,
   alwaysRender: true,
   disabled: false,
+  shouldKeepSize: false,
+  withoutStyle: false,
+  withoutMinimumSize: false,
   className: null,
   emptyClassName: null,
   adClassName: null,
@@ -931,6 +941,9 @@ function Ad(_ref) {
     refreshInterval,
     alwaysRender,
     disabled,
+    shouldKeepSize,
+    withoutStyle,
+    withoutMinimumSize,
     className,
     emptyClassName,
     adClassName,
@@ -945,6 +958,7 @@ function Ad(_ref) {
   const finalPath = path || (slot !== null ? slot.path || null : null) || (slotName !== null ? slotsPath[slotName] : null) || slotsPath.default || null;
   const finalSize = size || (slot !== null ? slot.size || null : null);
   const finalSizeMapping = sizeMapping || (slot !== null ? slot.sizeMapping || null : null);
+  const minimumSize = useMemo(() => getMinimumAdSize(finalSizeMapping !== null ? finalSizeMapping.reduce((allSizes, sizeMap) => [...allSizes, sizeMap[1]], [finalSize]) : finalSize), [finalSizeMapping, finalSize]);
 
   // Targeting
   const contextTargeting = useAdsTargeting();
@@ -963,6 +977,39 @@ function Ad(_ref) {
       targeting: otherProps || {}
     };
   }, [allTargeting, refreshInterval]);
+  const lastRenderedSize = useRef(null);
+  const wasDisabled = useRef(disabled);
+  const onAdRender = useCallback(event => {
+    const {
+      isEmpty: newIsEmpty = true
+    } = event || {};
+    const newIsRendered = !newIsEmpty;
+    if (disabled) {
+      wasDisabled.current = true;
+    } else if (!disabled && newIsRendered) {
+      wasDisabled.current = false;
+    }
+    const waitingNextRender = wasDisabled.current && !newIsRendered;
+    const keepSize = shouldKeepSize && (disabled || waitingNextRender) && lastRenderedSize.current !== null;
+    if (onRender !== null) {
+      onRender({
+        ...event,
+        keepSize
+      });
+    }
+  }, [onRender, shouldKeepSize, disabled]);
+  useEffect(() => {
+    if (!disabled) {
+      return;
+    }
+    const keepSize = shouldKeepSize && lastRenderedSize.current !== null;
+    if (onRender !== null) {
+      onRender({
+        isEmpty: true,
+        keepSize
+      });
+    }
+  }, [disabled]);
 
   // Create ad
   const {
@@ -971,6 +1018,7 @@ function Ad(_ref) {
     width,
     height,
     isEmpty,
+    isRendered,
     refObserver,
     slot: slotObject = null
   } = useAd(finalPath, finalSize, {
@@ -978,7 +1026,7 @@ function Ad(_ref) {
     targeting: finalAdTargeting.targeting,
     refreshInterval: finalAdTargeting.refreshInterval,
     alwaysRender,
-    onRender,
+    onRender: onAdRender,
     disabled
   });
   if (slotRef !== null && isFunction(slotRef)) {
@@ -987,28 +1035,57 @@ function Ad(_ref) {
     // eslint-disable-next-line no-param-reassign
     slotRef.current = slotObject;
   }
-
-  // Get size
-
+  if (isRendered) {
+    lastRenderedSize.current = {
+      width,
+      height
+    };
+  }
+  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;
   if (id === null) {
     return null;
   }
+  let adStyle = null;
+  if (isRendered) {
+    adStyle = {
+      width,
+      height
+    };
+  } else if (shouldKeepSize && (disabled || waitingNextRender)) {
+    adStyle = lastRenderedSize.current;
+  } else if (!withoutMinimumSize) {
+    adStyle = minimumSize;
+  }
+  let containerStyle = null;
+  if (adsDisabled) {
+    containerStyle = {
+      display: 'none',
+      visibility: 'hidden'
+    };
+  } else if (isEmpty && !keepSize) {
+    containerStyle = {
+      height: 0,
+      paddingBottom: 0,
+      overflow: 'hidden',
+      opacity: 0
+    };
+  }
   return /*#__PURE__*/jsx("div", {
     id: id !== null ? `${id}-container` : null,
     className: classNames([className, {
       [emptyClassName]: emptyClassName !== null && isEmpty
     }]),
-    style: adsDisabled ? {
-      display: 'none',
-      visibility: 'hidden'
-    } : null,
+    style: !withoutStyle ? containerStyle : null,
     ref: refObserver,
     children: /*#__PURE__*/jsx("div", {
       className: adClassName,
-      style: {
-        width,
-        height
-      },
+      style: adStyle,
       children: /*#__PURE__*/jsx("div", {
         id: id
       })

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/ads",
-    "version": "0.0.13",
+    "version": "0.0.15",
     "description": "Ads library",
     "keywords": [
         "javascript",
@@ -50,7 +50,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "9888055874220611cb49266e2d6943747a783946",
+    "gitHead": "02f9a585bd24267dc0032cab26ce37b0a0a7d316",
     "dependencies": {
         "@folklore/hooks": "^0.0.41",
         "@folklore/tracking": "^0.0.16",