seti-ramesesv1
Version:
Reusable components and context for Next.js apps
62 lines (58 loc) • 1.87 kB
JavaScript
import * as React from 'react';
import PropTypes from '../../../../../_virtual/index.js';
import { jsx } from 'react/jsx-runtime';
import useEnhancedEffect from '../../../utils/esm/useEnhancedEffect/useEnhancedEffect.js';
import debounce from '../../../utils/esm/debounce/debounce.js';
import ownerWindow from '../../../utils/esm/ownerWindow/ownerWindow.js';
const styles = {
width: 99,
height: 99,
position: 'absolute',
top: -9999,
overflow: 'scroll'
};
/**
* @ignore - internal component.
* The component originates from https://github.com/STORIS/react-scrollbar-size.
* It has been moved into the core in order to minimize the bundle size.
*/
function ScrollbarSize(props) {
const {
onChange,
...other
} = props;
const scrollbarHeight = React.useRef();
const nodeRef = React.useRef(null);
const setMeasurements = () => {
scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
};
useEnhancedEffect(() => {
const handleResize = debounce(() => {
const prevHeight = scrollbarHeight.current;
setMeasurements();
if (prevHeight !== scrollbarHeight.current) {
onChange(scrollbarHeight.current);
}
});
const containerWindow = ownerWindow(nodeRef.current);
containerWindow.addEventListener('resize', handleResize);
return () => {
handleResize.clear();
containerWindow.removeEventListener('resize', handleResize);
};
}, [onChange]);
React.useEffect(() => {
setMeasurements();
onChange(scrollbarHeight.current);
}, [onChange]);
return /*#__PURE__*/jsx("div", {
style: styles,
...other,
ref: nodeRef
});
}
process.env.NODE_ENV !== "production" ? ScrollbarSize.propTypes = {
onChange: PropTypes.func.isRequired
} : void 0;
export { ScrollbarSize as default };
//# sourceMappingURL=ScrollbarSize.js.map