applications/drive/src/app/components/FolderTree/hooks/useFloatingEllipsisContext.ts

   1 import type { RefObject } from 'react';
   2 import { useEffect, useState } from 'react';
   3
   4 export type FloatingEllipsisEventType = 'resize' | 'scroll';
   5
   6 export interface FloatingEllipsisContextValue {
   7     events: EventTarget;
   8     getDimensions: () => FloatingEllipsisContainerDimensions;
   9 }
  10
  11 interface FloatingEllipsisContainerDimensions {
  12     scrollWidth: number;
  13     scrollLeft: number;
  14 }
  15
  16 export const useFloatingEllipsisContext = ({
  17     containerRef,
  18     resizableRef,
  19 }: {
  20     containerRef: RefObject<HTMLDivElement>;
  21     resizableRef?: RefObject<HTMLElement>;
  22 }): FloatingEllipsisContextValue => {
  23     const [events] = useState<EventTarget>(new EventTarget());
  24     const getDimensions = (): FloatingEllipsisContainerDimensions => ({
  25         scrollWidth: containerRef.current?.clientWidth ?? 0,
  26         scrollLeft: containerRef.current?.scrollLeft ?? 0,
  27     });
  28     const [context] = useState<FloatingEllipsisContextValue>({
  29         events,
  30         getDimensions,
  31     });
  32
  33     const triggerScroll = () => events.dispatchEvent(new Event('scroll' as FloatingEllipsisEventType));
  34
  35     const resizeObserver = new ResizeObserver(() => {
  36         events.dispatchEvent(new Event('resize' as FloatingEllipsisEventType));
  37     });
  38
  39     useEffect(() => {
  40         if (!containerRef.current) {
  41             return;
  42         }
  43         resizeObserver.observe(containerRef.current);
  44         containerRef.current.addEventListener('scroll', triggerScroll);
  45
  46         if (resizableRef?.current) {
  47             resizeObserver.observe(resizableRef.current);
  48         }
  49
  50         return () => {
  51             if (!containerRef.current) {
  52                 return;
  53             }
  54             resizeObserver.disconnect();
  55             containerRef.current.removeEventListener('scroll', triggerScroll);
  56         };
  57     }, []);
  58
  59     return context;
  60 };