@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
45 lines (44 loc) • 2.16 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useBringToTopOnClick = void 0;
const react_1 = __importDefault(require("react"));
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");
/**
* This hook will bring an element to the top of the stack when any element inside the provided
* {@link PopupModel}'s `state.stackRef` element is clicked. If {@link PopupPopper Popup.Popper} was
* used or `PopupStack.add` provided an `owner`, all "child" popups will also be brought to the top.
* A "child" popup is a Popup that was opened from another Popup. Usually this is a Tooltip or
* Select component inside something like a Modal.
*
* This should be used on popup elements that are meant to persist (i.e. Windows).
*/
exports.useBringToTopOnClick = (0, common_1.createElemPropsHook)(usePopupModel_1.usePopupModel)(model => {
const timer = react_1.default.useRef(-1);
const onClick = react_1.default.useCallback((event) => {
// requestAnimationFrame is used to control timing of when `bringToTop` is called.
// https://github.com/Workday/canvas-kit/pull/670#discussion_r436158184
timer.current = requestAnimationFrame(() => {
var _a;
if ((_a = model.state.stackRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
canvas_kit_popup_stack_1.PopupStack.bringToTop(model.state.stackRef.current);
}
});
}, [model.state.stackRef]);
const visible = model.state.visibility !== 'hidden';
react_1.default.useLayoutEffect(() => {
if (!visible) {
return;
}
document.addEventListener('click', onClick);
return () => {
cancelAnimationFrame(timer.current);
document.removeEventListener('click', onClick);
};
}, [visible, onClick]);
return {};
});