improve readability and maintainability

Author: sergio-toro

lib/use-visibility-sensor.js

@@ -21,6 +21,83 @@ function roundRectDown(rect) {
   };
 }
 
+function getContainmentRect(containment, offset) {
+  let containmentRect;
+  if (containment) {
+    const containmentDOMRect = containment.getBoundingClientRect();
+    containmentRect = {
+      top: containmentDOMRect.top,
+      left: containmentDOMRect.left,
+      bottom: containmentDOMRect.bottom,
+      right: containmentDOMRect.right
+    };
+  } else {
+    containmentRect = {
+      top: 0,
+      left: 0,
+      bottom: window.innerHeight || document.documentElement.clientHeight,
+      right: window.innerWidth || document.documentElement.clientWidth
+    };
+  }
+  // Check if visibility is wanted via offset?
+  const hasValidOffset = typeof offset === "object";
+  if (hasValidOffset) {
+    containmentRect.top += offset.top || 0;
+    containmentRect.left += offset.left || 0;
+    containmentRect.bottom -= offset.bottom || 0;
+    containmentRect.right -= offset.right || 0;
+  }
+
+  return containmentRect;
+}
+
+function getVisibilityRect(rect, containmentRect) {
+  return {
+    top: rect.top >= containmentRect.top,
+    left: rect.left >= containmentRect.left,
+    bottom: rect.bottom <= containmentRect.bottom,
+    right: rect.right <= containmentRect.right
+  };
+}
+
+function checkIsVisible(
+  rect,
+  containmentRect,
+  visibilityRect,
+  partialVisibility,
+  minTopValue
+) {
+  // https://github.com/joshwnj/react-visibility-sensor/pull/114
+  const hasSize = rect.height > 0 && rect.width > 0;
+  const isVisible =
+    hasSize &&
+    visibilityRect.top &&
+    visibilityRect.left &&
+    visibilityRect.bottom &&
+    visibilityRect.right;
+
+  // check for partial visibility
+  if (hasSize && partialVisibility) {
+    let partialVisible =
+      rect.top <= containmentRect.bottom &&
+      rect.bottom >= containmentRect.top &&
+      rect.left <= containmentRect.right &&
+      rect.right >= containmentRect.left;
+
+    // account for partial visibility on a single edge
+    if (typeof partialVisibility === "string") {
+      partialVisible = visibilityRect[partialVisibility];
+    }
+
+    // if we have minimum top visibility set by props, lets check, if it meets the passed value
+    // so if for instance element is at least 200px in viewport, then show it.
+    return minTopValue
+      ? partialVisible && rect.top <= containmentRect.bottom - minTopValue
+      : partialVisible;
+  }
+  return isVisible;
+}
+
 export default function useVisibilitySensor(
   nodeRef,
   {
@@ -52,78 +129,21 @@ export default function useVisibilitySensor(
   const visibilityCheck = useCallback(
     () => {
       const el = nodeRef && nodeRef.current;
-      let rect;
-      let containmentRect;
-
       // if the component has rendered to null, dont update visibility
       if (!el) {
         return;
       }
 
-      rect = normalizeRect(roundRectDown(el.getBoundingClientRect()));
-
-      if (containment) {
-        const containmentDOMRect = containment.getBoundingClientRect();
-        containmentRect = {
-          top: containmentDOMRect.top,
-          left: containmentDOMRect.left,
-          bottom: containmentDOMRect.bottom,
-          right: containmentDOMRect.right
-        };
-      } else {
-        containmentRect = {
-          top: 0,
-          left: 0,
-          bottom: window.innerHeight || document.documentElement.clientHeight,
-          right: window.innerWidth || document.documentElement.clientWidth
-        };
-      }
-
-      // Check if visibility is wanted via offset?
-      const hasValidOffset = typeof offset === "object";
-      if (hasValidOffset) {
-        containmentRect.top += offset.top || 0;
-        containmentRect.left += offset.left || 0;
-        containmentRect.bottom -= offset.bottom || 0;
-        containmentRect.right -= offset.right || 0;
-      }
-
-      const nextVisibilityRect = {
-        top: rect.top >= containmentRect.top,
-        left: rect.left >= containmentRect.left,
-        bottom: rect.bottom <= containmentRect.bottom,
-        right: rect.right <= containmentRect.right
-      };
-
-      // https://github.com/joshwnj/react-visibility-sensor/pull/114
-      const hasSize = rect.height > 0 && rect.width > 0;
-
-      let nextIsVisible =
-        hasSize &&
-        nextVisibilityRect.top &&
-        nextVisibilityRect.left &&
-        nextVisibilityRect.bottom &&
-        nextVisibilityRect.right;
-
-      // check for partial visibility
-      if (hasSize && partialVisibility) {
-        let partialVisible =
-          rect.top <= containmentRect.bottom &&
-          rect.bottom >= containmentRect.top &&
-          rect.left <= containmentRect.right &&
-          rect.right >= containmentRect.left;
-
-        // account for partial visibility on a single edge
-        if (typeof partialVisibility === "string") {
-          partialVisible = nextVisibilityRect[partialVisibility];
-        }
-
-        // if we have minimum top visibility set by props, lets check, if it meets the passed value
-        // so if for instance element is at least 200px in viewport, then show it.
-        nextIsVisible = minTopValue
-          ? partialVisible && rect.top <= containmentRect.bottom - minTopValue
-          : partialVisible;
-      }
+      const rect = normalizeRect(roundRectDown(el.getBoundingClientRect()));
+      const containmentRect = getContainmentRect(containment, offset);
+      const nextVisibilityRect = getVisibilityRect(rect, containmentRect);
+      const nextIsVisible = checkIsVisible(
+        rect,
+        containmentRect,
+        nextVisibilityRect,
+        partialVisibility,
+        minTopValue
+      );
 
       // notify the parent when the value changes
       if (isVisible !== nextIsVisible) {