refactor: rename isVisible to isInViewport

Author: mrholek

packages/coreui-react/src/components/carousel/CCarousel.tsx

@@ -11,7 +11,7 @@ import React, {
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { isVisible } from '../../utils'
+import { isInViewport } from '../../utils'
 import { useForkedRef } from '../../utils/hooks'
 
 export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
@@ -157,7 +157,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
     const nextItemWhenVisible = () => {
       // Don't call next when the page isn't visible
       // or the carousel or its parent isn't visible
-      if (!document.hidden && carouselRef.current && isVisible(carouselRef.current)) {
+      if (!document.hidden && carouselRef.current && isInViewport(carouselRef.current)) {
         if (animating) {
           return
         }
@@ -195,7 +195,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
     }
 
     const handleScroll = () => {
-      if (!document.hidden && carouselRef.current && isVisible(carouselRef.current)) {
+      if (!document.hidden && carouselRef.current && isInViewport(carouselRef.current)) {
         setVisible(true)
       } else {
         setVisible(false)

packages/coreui-react/src/components/sidebar/CSidebar.tsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { isVisible } from '../../utils'
+import { isInViewport } from '../../utils'
 import { useForkedRef } from '../../utils/hooks'
 import { CBackdrop } from '../backdrop/CBackdrop'
 
@@ -95,15 +95,15 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 
     useEffect(() => {
       sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
-      sidebarRef.current && setInViewport(isVisible(sidebarRef.current))
+      sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
 
       window.addEventListener('resize', () => handleResize())
       window.addEventListener('mouseup', handleClickOutside)
       window.addEventListener('keyup', handleKeyup)
 
       sidebarRef.current?.addEventListener('mouseup', handleOnClick)
       sidebarRef.current?.addEventListener('transitionend', () => {
-        sidebarRef.current && setInViewport(isVisible(sidebarRef.current))
+        sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
       })
 
       return () => {
@@ -113,7 +113,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 
         sidebarRef.current?.removeEventListener('mouseup', handleOnClick)
         sidebarRef.current?.removeEventListener('transitionend', () => {
-          sidebarRef.current && setInViewport(isVisible(sidebarRef.current))
+          sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
         })
       }
     })
@@ -124,7 +124,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 
     const handleResize = () => {
       sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
-      sidebarRef.current && setInViewport(isVisible(sidebarRef.current))
+      sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
     }
 
     const handleKeyup = (event: Event) => {

packages/coreui-react/src/utils/index.ts

@@ -1,3 +1,3 @@
-import isVisible from './isVisible'
+import isInViewport from './isInViewport'
 
-export { isVisible }
+export { isInViewport }

packages/coreui-react/src/utils/isInViewport.ts

@@ -0,0 +1,11 @@
+const isInViewport = (element: HTMLElement) => {
+  const rect = element.getBoundingClientRect()
+  return (
+    Math.floor(rect.top) >= 0 &&
+    Math.floor(rect.left) >= 0 &&
+    Math.floor(rect.bottom) <= (window.innerHeight || document.documentElement.clientHeight) &&
+    Math.floor(rect.right) <= (window.innerWidth || document.documentElement.clientWidth)
+  )
+}
+
+export default isInViewport