frontend/hooks/useMinimizedFab.ts (view raw)
1import {useRef, useState} from 'react';
2import useEventListener from './useEventListener';
3
4const useMinimizedFab = () => {
5 const [isFabMinimized, setIsFabMinimized] = useState(false);
6 const element = useRef(
7 typeof document !== 'undefined'
8 ? document.getElementById('event-content')
9 : null
10 );
11
12 useEventListener(
13 'scroll',
14 event => {
15 if (typeof document != 'undefined') {
16 const positionFromTop = event.target.scrollTop;
17 const positionFromBottom =
18 event.target.scrollHeight -
19 event.target.offsetHeight -
20 event.target.scrollTop;
21
22 if (
23 (positionFromTop < 20 || positionFromBottom < 20) &&
24 isFabMinimized
25 ) {
26 setIsFabMinimized(false);
27 } else if (
28 !isFabMinimized &&
29 positionFromTop > 20 &&
30 positionFromBottom > 20
31 ) {
32 setIsFabMinimized(true);
33 }
34 }
35 },
36 element
37 );
38
39 return isFabMinimized;
40};
41
42export default useMinimizedFab;