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

   1 import type React from 'react';
   2 import { useContext, useEffect } from 'react';
   3
   4 import { FloatingEllipsisContext } from '../FloatingEllipsisContext';
   5 import type { FloatingEllipsisContextValue, FloatingEllipsisEventType } from './useFloatingEllipsisContext';
   6
   7 const VISIBILITY_CLASS = 'floating-ellipsis-hidden';
   8
   9 export const useFloatingEllipsisEventBasedUpdater = ({
  10     visibilityControlRef,
  11     elem,
  12 }: {
  13     visibilityControlRef: React.RefObject<HTMLDivElement>;
  14     elem: React.RefObject<HTMLDivElement>;
  15 }): (() => void) => {
  16     const { events, getDimensions } = useContext<FloatingEllipsisContextValue>(FloatingEllipsisContext);
  17
  18     const updateVisibility = () => {
  19         if (!elem.current) {
  20             return;
  21         }
  22         const { scrollWidth, scrollLeft } = getDimensions();
  23
  24         if (!visibilityControlRef.current) {
  25             return;
  26         }
  27         const rightEnd = visibilityControlRef.current.offsetLeft + visibilityControlRef.current.offsetWidth;
  28         const elemWidth = elem.current?.offsetWidth || 0;
  29         const visible = rightEnd > scrollWidth + scrollLeft;
  30         if (visible) {
  31             elem.current.style.left = `${scrollWidth + scrollLeft - elemWidth}px`;
  32             elem.current.classList.remove(VISIBILITY_CLASS);
  33         } else {
  34             elem.current.classList.add(VISIBILITY_CLASS);
  35         }
  36     };
  37
  38     useEffect(() => {
  39         const eventTypes: FloatingEllipsisEventType[] = ['resize', 'scroll'];
  40         eventTypes.forEach((eventType) => events.addEventListener(eventType, updateVisibility));
  41         return () => {
  42             eventTypes.forEach((eventType) => events.removeEventListener(eventType, updateVisibility));
  43         };
  44     }, [events]);
  45
  46     return updateVisibility;
  47 };