@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
114 lines • 4.33 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { createRef, useCallback, useEffect, useRef } from 'react';
export function useMultipleFocusControl(restoreFocus, activeDrawersIds) {
const refs = useRef({});
activeDrawersIds.forEach(drawerId => {
if (!refs.current[drawerId]) {
refs.current[drawerId] = {
toggle: createRef(),
close: createRef(),
slider: createRef(),
};
}
});
const doFocus = useCallback((drawerId, open = true) => {
var _a, _b, _c, _d, _e, _f;
if (!shouldFocus.current) {
return;
}
const ref = refs.current[drawerId];
if (open) {
previousFocusedElement.current =
document.activeElement !== document.body ? document.activeElement : undefined;
if ((_a = ref === null || ref === void 0 ? void 0 : ref.slider) === null || _a === void 0 ? void 0 : _a.current) {
(_b = ref.slider.current) === null || _b === void 0 ? void 0 : _b.focus();
}
else {
(_d = (_c = ref === null || ref === void 0 ? void 0 : ref.close) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.focus();
}
}
else {
if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {
previousFocusedElement.current.focus();
previousFocusedElement.current = undefined;
}
else {
(_f = (_e = ref === null || ref === void 0 ? void 0 : ref.toggle) === null || _e === void 0 ? void 0 : _e.current) === null || _f === void 0 ? void 0 : _f.focus();
}
}
shouldFocus.current = false;
}, [refs, restoreFocus]);
const setFocus = (params) => {
const { force = false, drawerId = null, open = true } = params || {};
shouldFocus.current = true;
if (force && (!drawerId || activeDrawersIds.includes(drawerId))) {
doFocus(drawerId, open);
}
};
const loseFocus = useCallback(() => {
previousFocusedElement.current = undefined;
}, []);
const previousFocusedElement = useRef();
const shouldFocus = useRef(false);
useEffect(() => {
doFocus(activeDrawersIds[0]);
}, [activeDrawersIds, doFocus]);
return {
refs: refs.current,
setFocus,
loseFocus,
};
}
export function useFocusControl(isOpen, restoreFocus = false, activeDrawerId) {
const refs = {
toggle: useRef(null),
close: useRef(null),
slider: useRef(null),
};
const previousFocusedElement = useRef();
const shouldFocus = useRef(false);
const doFocus = () => {
var _a, _b, _c;
if (!shouldFocus.current) {
return;
}
if (isOpen) {
previousFocusedElement.current =
document.activeElement !== document.body ? document.activeElement : undefined;
if (refs.slider.current) {
(_a = refs.slider.current) === null || _a === void 0 ? void 0 : _a.focus();
}
else {
(_b = refs.close.current) === null || _b === void 0 ? void 0 : _b.focus();
}
}
else {
if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {
previousFocusedElement.current.focus();
previousFocusedElement.current = undefined;
}
else {
(_c = refs.toggle.current) === null || _c === void 0 ? void 0 : _c.focus();
}
}
shouldFocus.current = false;
};
const setFocus = (force) => {
shouldFocus.current = true;
if (force && isOpen) {
doFocus();
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(doFocus, [isOpen, activeDrawerId]);
const loseFocus = useCallback(() => {
previousFocusedElement.current = undefined;
}, []);
return {
refs,
setFocus,
loseFocus,
};
}
//# sourceMappingURL=use-focus-control.js.map