blob: 69de63cc6a7ab31b07ccdc248f21a5904ce78637 (
plain)
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
import React, { useEffect, useRef } from 'react';
import styled from 'styled-components';
import useActions from '../lib/actionsHook';
import userInterface from '../redux/userinterface/actions';
import { useSelector } from '../redux/store';
import { MacOsScrollbarVisibility } from '../../shared/ipc-schema';
const StyledContainer = styled.div({
position: 'absolute',
visibility: 'hidden',
overflowY: 'scroll',
overflowX: 'hidden',
width: '1px',
height: '0px',
});
// This component is used to determine wheter scrollbars should be always visible or only visible
// while scrolling when the system setting for this is set to "Automatic". This is detected by
// testing if any space is taken by a scrollbar.
export default function MacOsScrollbarDetection() {
const visibility = useSelector((state) => state.userInterface.macOsScrollbarVisibility);
const { setMacOsScrollbarVisibility } = useActions(userInterface);
const ref = useRef() as React.RefObject<HTMLDivElement>;
useEffect(() => {
if (visibility === MacOsScrollbarVisibility.automatic) {
// If the width is 0 then the 1 px width of the parent has been used by the scrollbar.
const newVisibility =
ref.current?.offsetWidth === 0
? MacOsScrollbarVisibility.always
: MacOsScrollbarVisibility.whenScrolling;
setMacOsScrollbarVisibility(newVisibility);
}
}, [visibility]);
return (
<StyledContainer>
<div ref={ref} />
</StyledContainer>
);
}
|
