packages/components/hooks/drawer/useDrawerWidth.ts

   1 import { useEffect, useState } from 'react';
   2
   3 import useDrawer from '@proton/components/hooks/drawer/useDrawer';
   4
   5 const useDrawerWidth = () => {
   6     const [sidebarWidth, setSidebarWidth] = useState(0);
   7     const [appWidth, setAppWidth] = useState(0);
   8     const { showDrawerSidebar, drawerSidebarMounted, appInView } = useDrawer();
   9
  10     useEffect(() => {
  11         if (!showDrawerSidebar || !drawerSidebarMounted) {
  12             setSidebarWidth(0);
  13             return;
  14         }
  15         const sidebarElement = window.document.querySelector('.drawer-sidebar');
  16
  17         if (!sidebarElement) {
  18             return;
  19         }
  20
  21         const sidebarResizeObserver = new ResizeObserver((entries) => {
  22             setSidebarWidth(entries[0].contentRect.width);
  23         });
  24
  25         // Only checks iframe root div widths changes (window resize or inner resize when column mailbox layout is set)
  26         sidebarResizeObserver.observe(sidebarElement);
  27
  28         return () => {
  29             sidebarResizeObserver.disconnect();
  30         };
  31     }, [showDrawerSidebar, drawerSidebarMounted]);
  32
  33     useEffect(() => {
  34         if (!appInView) {
  35             setAppWidth(0);
  36         }
  37
  38         const appElement = window.document.querySelector('.drawer-app');
  39
  40         if (!appElement) {
  41             return;
  42         }
  43
  44         const appResizeObserver = new ResizeObserver((entries) => {
  45             setAppWidth(entries[0].contentRect.width);
  46         });
  47
  48         appResizeObserver.observe(appElement);
  49
  50         return () => {
  51             appResizeObserver.disconnect();
  52         };
  53     }, [appInView]);
  54
  55     return appWidth + sidebarWidth;
  56 };
  57
  58 export default useDrawerWidth;