1 | "use strict";
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.default = void 0;
|
7 |
|
8 | var _react = require("react");
|
9 |
|
10 | var _utils = require("./utils");
|
11 |
|
12 | const useScrollbarSize = () => {
|
13 | const [dimensions, setDimensions] = (0, _react.useState)({
|
14 | height: 0,
|
15 | width: 0
|
16 | });
|
17 | const element = (0, _react.useRef)(null);
|
18 |
|
19 | (0, _react.useEffect)(() => {
|
20 | const getElement = () => {
|
21 | if (element.current == null) {
|
22 |
|
23 | element.current = document.createElement('div');
|
24 | element.current.style.width = '99px';
|
25 | element.current.style.height = '99px';
|
26 | element.current.style.overflow = 'scroll';
|
27 | element.current.style.position = 'absolute';
|
28 | element.current.style.top = '-9999px';
|
29 | element.current.setAttribute('aria-hidden', 'true');
|
30 | element.current.setAttribute('role', 'presentation');
|
31 | }
|
32 |
|
33 | return element.current;
|
34 | };
|
35 |
|
36 | const updateState = () => {
|
37 | const {
|
38 | offsetHeight,
|
39 | clientHeight,
|
40 | offsetWidth,
|
41 | clientWidth
|
42 | } = getElement();
|
43 | const scrollbarHeight = offsetHeight - clientHeight;
|
44 | const scrollbarWidth = offsetWidth - clientWidth;
|
45 | setDimensions(currentDimensions => {
|
46 | const {
|
47 | height,
|
48 | width
|
49 | } = currentDimensions;
|
50 | return height !== scrollbarHeight || width !== scrollbarWidth ? {
|
51 | height: scrollbarHeight,
|
52 | width: scrollbarWidth
|
53 | } : currentDimensions;
|
54 | });
|
55 | };
|
56 |
|
57 | const handleResize = (0, _utils.debounce)(updateState, 100);
|
58 |
|
59 | window.addEventListener('resize', handleResize);
|
60 | document.body.appendChild(getElement());
|
61 | updateState();
|
62 | const elementToRemove = getElement();
|
63 |
|
64 | return () => {
|
65 | handleResize.cancel();
|
66 | window.removeEventListener('resize', handleResize);
|
67 | document.body.removeChild(elementToRemove);
|
68 | };
|
69 | }, []);
|
70 | return dimensions;
|
71 | };
|
72 |
|
73 | var _default = useScrollbarSize;
|
74 | exports.default = _default; |
\ | No newline at end of file |