1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import * as React from 'react';
|
4 | import PropTypes from 'prop-types';
|
5 | import debounce from '../utils/debounce';
|
6 | const styles = {
|
7 | width: 99,
|
8 | height: 99,
|
9 | position: 'absolute',
|
10 | top: -9999,
|
11 | overflow: 'scroll'
|
12 | };
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 | export default function ScrollbarSize(props) {
|
20 | const {
|
21 | onChange
|
22 | } = props,
|
23 | other = _objectWithoutPropertiesLoose(props, ["onChange"]);
|
24 |
|
25 | const scrollbarHeight = React.useRef();
|
26 | const nodeRef = React.useRef(null);
|
27 |
|
28 | const setMeasurements = () => {
|
29 | scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
|
30 | };
|
31 |
|
32 | React.useEffect(() => {
|
33 | const handleResize = debounce(() => {
|
34 | const prevHeight = scrollbarHeight.current;
|
35 | setMeasurements();
|
36 |
|
37 | if (prevHeight !== scrollbarHeight.current) {
|
38 | onChange(scrollbarHeight.current);
|
39 | }
|
40 | });
|
41 | window.addEventListener('resize', handleResize);
|
42 | return () => {
|
43 | handleResize.clear();
|
44 | window.removeEventListener('resize', handleResize);
|
45 | };
|
46 | }, [onChange]);
|
47 | React.useEffect(() => {
|
48 | setMeasurements();
|
49 | onChange(scrollbarHeight.current);
|
50 | }, [onChange]);
|
51 | return React.createElement("div", _extends({
|
52 | style: styles,
|
53 | ref: nodeRef
|
54 | }, other));
|
55 | }
|
56 | process.env.NODE_ENV !== "production" ? ScrollbarSize.propTypes = {
|
57 | onChange: PropTypes.func.isRequired
|
58 | } : void 0; |
\ | No newline at end of file |