@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
38 lines (37 loc) • 1.63 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useCloseOnEscape = 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");
/**
* Registers global detection of the Escape key. It will only call the {@link PopupModel}'s `hide`
* event if the provided model's `state.stackRef` element is the topmost in the stack.
*
* This should be used with popup elements that are dismissible like Tooltips, Modals, non-modal
* dialogs, dropdown menus, etc.
*/
exports.useCloseOnEscape = (0, common_1.createElemPropsHook)(usePopupModel_1.usePopupModel)(model => {
const onKeyDown = react_1.default.useCallback((event) => {
if ((event.key === 'Esc' || event.key === 'Escape') &&
canvas_kit_popup_stack_1.PopupStack.isTopmost(model.state.stackRef.current)) {
model.events.hide(event);
}
}, [model.state.stackRef, model.events]);
const visible = model.state.visibility !== 'hidden';
// `useLayoutEffect` for automation
react_1.default.useLayoutEffect(() => {
if (!visible) {
return;
}
document.addEventListener('keydown', onKeyDown);
return () => {
document.removeEventListener('keydown', onKeyDown);
};
}, [onKeyDown, visible]);
return {};
});