useScrollLocker.js 1.1 KB

1234567891011121314151617181920212223242526272829
  1. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  2. import * as React from 'react';
  3. import { updateCSS, removeCSS } from "rc-util/es/Dom/dynamicCSS";
  4. import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
  5. import { getTargetScrollBarSize } from "rc-util/es/getScrollBarSize";
  6. import { isBodyOverflowing } from "./util";
  7. var UNIQUE_ID = "rc-util-locker-".concat(Date.now());
  8. var uuid = 0;
  9. export default function useScrollLocker(lock) {
  10. var mergedLock = !!lock;
  11. var _React$useState = React.useState(function () {
  12. uuid += 1;
  13. return "".concat(UNIQUE_ID, "_").concat(uuid);
  14. }),
  15. _React$useState2 = _slicedToArray(_React$useState, 1),
  16. id = _React$useState2[0];
  17. useLayoutEffect(function () {
  18. if (mergedLock) {
  19. var scrollbarSize = getTargetScrollBarSize(document.body).width;
  20. var isOverflow = isBodyOverflowing();
  21. updateCSS("\nhtml body {\n overflow-y: hidden;\n ".concat(isOverflow ? "width: calc(100% - ".concat(scrollbarSize, "px);") : '', "\n}"), id);
  22. } else {
  23. removeCSS(id);
  24. }
  25. return function () {
  26. removeCSS(id);
  27. };
  28. }, [mergedLock, id]);
  29. }