UNPKG

@mui/material

Version:

Quickly build beautiful React apps. MUI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

59 lines (54 loc) 1.87 kB
import _extends from "@babel/runtime/helpers/esm/extends"; import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties"; import * as React from 'react'; import PropTypes from 'prop-types'; import debounce from '../utils/debounce'; import { ownerWindow } from '../utils'; import { jsx as _jsx } from "react/jsx-runtime"; var 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. */ export default function ScrollbarSize(props) { var onChange = props.onChange, other = _objectWithoutProperties(props, ["onChange"]); var scrollbarHeight = React.useRef(); var nodeRef = React.useRef(null); var setMeasurements = function setMeasurements() { scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight; }; React.useEffect(function () { var handleResize = debounce(function () { var prevHeight = scrollbarHeight.current; setMeasurements(); if (prevHeight !== scrollbarHeight.current) { onChange(scrollbarHeight.current); } }); var containerWindow = ownerWindow(nodeRef.current); containerWindow.addEventListener('resize', handleResize); return function () { handleResize.clear(); containerWindow.removeEventListener('resize', handleResize); }; }, [onChange]); React.useEffect(function () { setMeasurements(); onChange(scrollbarHeight.current); }, [onChange]); return /*#__PURE__*/_jsx("div", _extends({ style: styles, ref: nodeRef }, other)); } process.env.NODE_ENV !== "production" ? ScrollbarSize.propTypes = { onChange: PropTypes.func.isRequired } : void 0;