Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
191bfee
commit b38b22f
Showing
5 changed files
with
179 additions
and
132 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| // Copyright 2020-2021 Signal Messenger, LLC | ||
| // SPDX-License-Identifier: AGPL-3.0-only | ||
|
|
||
| import React, { Ref, useCallback, useEffect, useRef } from 'react'; | ||
| import { noop } from 'lodash'; | ||
|
|
||
| import { refMerger } from '../util/refMerger'; | ||
| import type { InteractionModeType } from '../state/ducks/conversations'; | ||
|
|
||
| type PropsType = { | ||
| children: React.ReactNode; | ||
| interactionMode: InteractionModeType; | ||
| // Matches Popper's RefHandler type | ||
| innerRef: Ref<HTMLElement>; | ||
| 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/>. | ||
| export const TooltipEventWrapper: React.FC<PropsType> = ({ | ||
| onHoverChanged, | ||
| children, | ||
| interactionMode, | ||
| innerRef, | ||
| }) => { | ||
| const wrapperRef = useRef<HTMLSpanElement | null>(null); | ||
|
|
||
| const on = useCallback(() => { | ||
| onHoverChanged(true); | ||
| }, [onHoverChanged]); | ||
|
|
||
| const off = useCallback(() => { | ||
| onHoverChanged(false); | ||
| }, [onHoverChanged]); | ||
|
|
||
| const onFocus = useCallback(() => { | ||
| if (interactionMode === 'keyboard') { | ||
| on(); | ||
| } | ||
| }, [on, interactionMode]); | ||
|
|
||
| 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={onFocus} | ||
| onBlur={off} | ||
| ref={refMerger<HTMLSpanElement>(innerRef, wrapperRef)} | ||
| > | ||
| {children} | ||
| </span> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| // Copyright 2021 Signal Messenger, LLC | ||
| // SPDX-License-Identifier: AGPL-3.0-only | ||
|
|
||
| import React, { Ref } from 'react'; | ||
| import { connect } from 'react-redux'; | ||
|
|
||
| import { mapDispatchToProps } from '../actions'; | ||
| import { StateType } from '../reducer'; | ||
|
|
||
| import { TooltipEventWrapper } from '../../components/TooltipEventWrapper'; | ||
| import { getInteractionMode } from '../selectors/user'; | ||
|
|
||
| type ExternalProps = { | ||
| // Matches Popper's RefHandler type | ||
| innerRef: Ref<HTMLElement>; | ||
| children: React.ReactNode; | ||
| onHoverChanged: (_: boolean) => void; | ||
| }; | ||
|
|
||
| const mapStateToProps = (state: StateType, props: ExternalProps) => { | ||
| return { | ||
| ...props, | ||
| interactionMode: getInteractionMode(state), | ||
| }; | ||
| }; | ||
|
|
||
| const smart = connect(mapStateToProps, mapDispatchToProps); | ||
|
|
||
| export const SmartTooltipEventWrapper = smart(TooltipEventWrapper); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters