@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
43 lines (42 loc) • 1.85 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useTransferOnFullscreenExit = void 0;
const react_1 = __importDefault(require("react"));
const screenfull_1 = __importDefault(require("screenfull"));
const canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
const common_1 = require("@workday/canvas-kit-react/common");
const usePopupModel_1 = require("./usePopupModel");
/**
* Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
* would not operate correctly with other popups on the screen.
*
* Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
* Doing so would open the popup when the intention was to close it.
*/
exports.useTransferOnFullscreenExit = (0, common_1.createElemPropsHook)(usePopupModel_1.usePopupModel)(model => {
const handler = react_1.default.useCallback((event) => {
if (!screenfull_1.default.isFullscreen && model.state.stackRef.current) {
canvas_kit_popup_stack_1.PopupStack.transferToCurrentContext({
element: model.state.stackRef.current,
owner: model.state.targetRef.current,
});
}
}, [model.state.stackRef, model.state.targetRef]);
const visible = model.state.visibility !== 'hidden';
react_1.default.useEffect(() => {
if (!visible) {
return;
}
if (screenfull_1.default.isEnabled) {
screenfull_1.default.on('change', handler);
return () => {
screenfull_1.default.off('change', handler);
};
}
return;
}, [handler, visible]);
return {};
});