UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

45 lines (44 loc) 2.16 kB
"use strict"; 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 {}; });