1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- import KeyCode from "rc-util/es/KeyCode";
- import raf from "rc-util/es/raf";
- import * as React from "react";
- var ESC = KeyCode.ESC,
- TAB = KeyCode.TAB;
- export default function useAccessibility(_ref) {
- var visible = _ref.visible,
- triggerRef = _ref.triggerRef,
- onVisibleChange = _ref.onVisibleChange,
- autoFocus = _ref.autoFocus,
- overlayRef = _ref.overlayRef;
- var focusMenuRef = React.useRef(false);
- var handleCloseMenuAndReturnFocus = function handleCloseMenuAndReturnFocus() {
- if (visible) {
- var _triggerRef$current, _triggerRef$current$f;
- (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || (_triggerRef$current$f = _triggerRef$current.focus) === null || _triggerRef$current$f === void 0 || _triggerRef$current$f.call(_triggerRef$current);
- onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(false);
- }
- };
- var focusMenu = function focusMenu() {
- var _overlayRef$current;
- if ((_overlayRef$current = overlayRef.current) !== null && _overlayRef$current !== void 0 && _overlayRef$current.focus) {
- overlayRef.current.focus();
- focusMenuRef.current = true;
- return true;
- }
- return false;
- };
- var handleKeyDown = function handleKeyDown(event) {
- switch (event.keyCode) {
- case ESC:
- handleCloseMenuAndReturnFocus();
- break;
- case TAB:
- {
- var focusResult = false;
- if (!focusMenuRef.current) {
- focusResult = focusMenu();
- }
- if (focusResult) {
- event.preventDefault();
- } else {
- handleCloseMenuAndReturnFocus();
- }
- break;
- }
- }
- };
- React.useEffect(function () {
- if (visible) {
- window.addEventListener("keydown", handleKeyDown);
- if (autoFocus) {
- // FIXME: hack with raf
- raf(focusMenu, 3);
- }
- return function () {
- window.removeEventListener("keydown", handleKeyDown);
- focusMenuRef.current = false;
- };
- }
- return function () {
- focusMenuRef.current = false;
- };
- }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
- }
|