frontend/src/components/QuickAccessVisibleState.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import { FC, createContext, useContext, useEffect, useRef, useState } from 'react';

const QuickAccessVisibleState = createContext<boolean>(true);

export const useQuickAccessVisible = () => useContext(QuickAccessVisibleState);

export const QuickAccessVisibleStateProvider: FC<{}> = ({ children }) => {
  const divRef = useRef<HTMLDivElement>(null);
  const [visible, setVisible] = useState<boolean>(false);
  useEffect(() => {
    const doc: Document | void | null = divRef?.current?.ownerDocument;
    if (!doc) return;
    setVisible(doc.visibilityState == 'visible');
    const onChange = (e: Event) => {
      setVisible(doc.visibilityState == 'visible');
    };
    doc.addEventListener('visibilitychange', onChange);
    return () => {
      doc.removeEventListener('visibilitychange', onChange);
    };
  }, [divRef]);
  return (
    <div ref={divRef}>
      <QuickAccessVisibleState.Provider value={visible}>{children}</QuickAccessVisibleState.Provider>
    </div>
  );
};