@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
32 lines (31 loc) • 1.4 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDisableBodyScroll = void 0;
const react_1 = __importDefault(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const usePopupModel_1 = require("./usePopupModel");
const disableBodyScrollStyles = (0, canvas_kit_styling_1.createStyles)({ name: "ojxa4", styles: "overflow:hidden !important;" });
/**
* Disables body scroll by adding `overflow: hidden` to the body element. This effectively prevents
* page scrolling while the popup is visible.
*
* This should be used with popup elements that hide all other content and force the user to accept
* or dismiss the popup before continuing (i.e. Modals).
*/
exports.useDisableBodyScroll = (0, common_1.createElemPropsHook)(usePopupModel_1.usePopupModel)(model => {
const visible = model.state.visibility !== 'hidden';
react_1.default.useLayoutEffect(() => {
if (!visible) {
return;
}
document.body.classList.add(disableBodyScrollStyles);
return () => {
document.body.classList.remove(disableBodyScrollStyles);
};
}, [visible]);
return {};
});