Use focus trap for CallingLobby
This commit is contained in:
parent
191bfee18c
commit
b38b22f49d
5 changed files with 179 additions and 132 deletions
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue