packages/shared/lib/helpers/collapsibleSidebar.ts

   1 import type { RefObject } from 'react';
   2 import { useEffect } from 'react';
   3 import { useState } from 'react';
   4
   5 import { TelemetryCollapsibleLeftSidebarEvents, TelemetryMeasurementGroups } from '@proton/shared/lib/api/telemetry';
   6 import { sendTelemetryReport } from '@proton/shared/lib/helpers/metrics';
   7
   8 import type { APP_NAMES } from '../constants';
   9 import type { Api } from '../interfaces';
  10
  11 export const enum COLLAPSE_EVENTS {
  12     COLLAPSE = 'COLLAPSE',
  13     EXPAND = 'EXPAND',
  14 }
  15 export const enum SOURCE_EVENT {
  16     BUTTON_SIDEBAR = 'BUTTON_SIDEBAR',
  17     BUTTON_FOLDERS = 'BUTTON_FOLDERS',
  18     BUTTON_LABELS = 'BUTTON_LABELS',
  19 }
  20
  21 export const sendRequestCollapsibleSidebarReport = ({
  22     api,
  23     action,
  24     application,
  25     sourceEvent,
  26 }: {
  27     api: Api;
  28     action: COLLAPSE_EVENTS;
  29     application: APP_NAMES;
  30     sourceEvent: SOURCE_EVENT;
  31 }) => {
  32     void sendTelemetryReport({
  33         api,
  34         measurementGroup: TelemetryMeasurementGroups.collapsibleLeftSidebar,
  35         event: TelemetryCollapsibleLeftSidebarEvents.toggleLeftSidebar,
  36         dimensions: {
  37             action,
  38             application,
  39             sourceEvent,
  40         },
  41     });
  42 };
  43
  44 interface Props {
  45     navigationRef: RefObject<HTMLElement>;
  46 }
  47
  48 const checkIsScrollPresent = ({ navigationRef }: Props) => {
  49     if (!navigationRef?.current) {
  50         return false;
  51     }
  52
  53     const navigationScrollHeight = navigationRef.current.scrollHeight;
  54     const navigationClientHeight = navigationRef.current.clientHeight;
  55
  56     return navigationClientHeight !== navigationScrollHeight;
  57 };
  58
  59 export const useLeftSidebarButton = ({ navigationRef }: Props) => {
  60     const [isScrollPresent, setIsScrollPresent] = useState(false);
  61
  62     useEffect(() => {
  63         const intervalID = window.setInterval(() => {
  64             setIsScrollPresent(checkIsScrollPresent({ navigationRef }));
  65         }, 350); // we'll optimize with observers later
  66
  67         return () => {
  68             clearInterval(intervalID);
  69         };
  70     }, []);
  71
  72     return { isScrollPresent };
  73 };