Use focus trap for CallingLobby

This commit is contained in:
Fedor Indutny 2021-10-25 07:58:09 -07:00 committed by GitHub
parent 191bfee18c
commit b38b22f49d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 179 additions and 132 deletions

View file

@ -3,62 +3,12 @@
import React from 'react';
import classNames from 'classnames';
import { noop } from 'lodash';
import { Manager, Reference, Popper } from 'react-popper';
import type { StrictModifiers } from '@popperjs/core';
import { Theme, themeClassName } from '../util/theme';
import { refMerger } from '../util/refMerger';
import { offsetDistanceModifier } from '../util/popperUtil';
type EventWrapperPropsType = {
children: React.ReactNode;
onHoverChanged: (_: boolean) => void;
};
// React doesn't reliably fire `onMouseLeave` or `onMouseOut` events if wrapping a
// disabled button. This uses native browser events to avoid that.
//
// See <https://lecstor.com/react-disabled-button-onmouseleave/>.
const TooltipEventWrapper = React.forwardRef<
HTMLSpanElement,
EventWrapperPropsType
>(({ onHoverChanged, children }, ref) => {
const wrapperRef = React.useRef<HTMLSpanElement | null>(null);
const on = React.useCallback(() => {
onHoverChanged(true);
}, [onHoverChanged]);
const off = React.useCallback(() => {
onHoverChanged(false);
}, [onHoverChanged]);
React.useEffect(() => {
const wrapperEl = wrapperRef.current;
if (!wrapperEl) {
return noop;
}
wrapperEl.addEventListener('mouseenter', on);
wrapperEl.addEventListener('mouseleave', off);
return () => {
wrapperEl.removeEventListener('mouseenter', on);
wrapperEl.removeEventListener('mouseleave', off);
};
}, [on, off]);
return (
<span
onFocus={on}
onBlur={off}
ref={refMerger<HTMLSpanElement>(ref, wrapperRef)}
>
{children}
</span>
);
});
import { SmartTooltipEventWrapper } from '../state/smart/TooltipEventWrapper';
export enum TooltipPlacement {
Top = 'top',
@ -97,9 +47,12 @@ export const Tooltip: React.FC<PropsType> = ({
<Manager>
<Reference>
{({ ref }) => (
<TooltipEventWrapper ref={ref} onHoverChanged={setIsHovering}>
<SmartTooltipEventWrapper
innerRef={ref}
onHoverChanged={setIsHovering}
>
{children}
</TooltipEventWrapper>
</SmartTooltipEventWrapper>
)}
</Reference>
<Popper