applications/mail/src/app/hooks/useHasScroll.ts

   1 import type { DependencyList, RefObject } from 'react';
   2 import { useEffect, useState } from 'react';
   3
   4 import debounce from '@proton/utils/debounce';
   5
   6 export const useHasScroll = (ref: RefObject<HTMLElement>, dependencies: DependencyList = []) => {
   7     const [hasVerticalScrollbar, setHasVerticalScrollbar] = useState(false);
   8     const [hasHorizontalScrollbar, setHasHorizontalScrollbar] = useState(false);
   9
  10     useEffect(() => {
  11         const element = ref.current;
  12         if (!element) {
  13             return;
  14         }
  15
  16         const handleResize = () => {
  17             const element = ref.current;
  18             if (!element) {
  19                 return;
  20             }
  21
  22             setHasVerticalScrollbar(element.scrollHeight > element.clientHeight);
  23             setHasHorizontalScrollbar(element.scrollWidth > element.clientWidth);
  24         };
  25
  26         // Initial check
  27         handleResize();
  28
  29         const debouncedHandleResize = debounce(handleResize, 100);
  30         element.addEventListener('resize', debouncedHandleResize);
  31
  32         // Must add an observer because nor resize or scroll event are enough
  33         const observer = new MutationObserver(debouncedHandleResize);
  34         observer.observe(element, { attributes: true, childList: true, subtree: true });
  35         return () => {
  36             element.removeEventListener('resize', debouncedHandleResize);
  37             observer.disconnect();
  38         };
  39     }, dependencies);
  40
  41     return [hasVerticalScrollbar, hasHorizontalScrollbar];
  42 };