Hoverable component refactored from class into functional approach #27223
+134
−141
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,189 +1,181 @@ | ||
| import _ from 'underscore'; | ||
| import React, {useEffect, useCallback, useState, useRef, useMemo, useImperativeHandle} from 'react'; | ||
| import {DeviceEventEmitter} from 'react-native'; | ||
| import {propTypes, defaultProps} from './hoverablePropTypes'; | ||
| import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; | ||
| import CONST from '../../CONST'; | ||
|
|
||
| function mapChildren(children, callbackParam) { | ||
| if (_.isArray(children) && children.length === 1) { | ||
| return children[0]; | ||
| } | ||
|
|
||
| if (_.isFunction(children)) { | ||
| return children(callbackParam); | ||
| } | ||
|
|
||
| return children; | ||
| } | ||
|
|
||
| /** | ||
| * It is necessary to create a Hoverable component instead of relying solely on Pressable support for hover state, | ||
| * because nesting Pressables causes issues where the hovered state of the child cannot be easily propagated to the | ||
| * parent. https://github.com/necolas/react-native-web/issues/1875 | ||
| */ | ||
|
|
||
| function InnerHoverable({disabled, onHoverIn, onHoverOut, children, shouldHandleScroll}, outerRef) { | ||
| const [isHovered, setIsHovered] = useState(false); | ||
| const [isScrolling, setIsScrolling] = useState(false); | ||
|
|
||
| const isHoveredRef = useRef(false); | ||
| const ref = useRef(null); | ||
|
|
||
| const updateIsHoveredOnScrolling = useCallback( | ||
| (hovered) => { | ||
| if (disabled) { | ||
| return; | ||
| } | ||
|
|
||
|
There was a problem hiding this comment. @kacper-mikolajczak It seems this listener has been not migrated, There was a problem hiding this comment. Great catch, thanks! Done ✅ |
||
| isHoveredRef.current = hovered; | ||
|
|
||
| if (shouldHandleScroll && isScrolling) { | ||
| return; | ||
| } | ||
| setIsHovered(hovered); | ||
| }, | ||
| [disabled, shouldHandleScroll, isScrolling], | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| const unsetHoveredWhenDocumentIsHidden = () => document.visibilityState === 'hidden' && setIsHovered(false); | ||
|
|
||
| document.addEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden); | ||
|
|
||
| return () => document.removeEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden); | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| if (!shouldHandleScroll) { | ||
| return; | ||
| } | ||
|
|
||
| const scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, (scrolling) => { | ||
| setIsScrolling(scrolling); | ||
| if (!scrolling) { | ||
| setIsHovered(isHoveredRef.current); | ||
| } | ||
| }); | ||
|
|
||
| return scrollingListener.remove; | ||
| }, [shouldHandleScroll]); | ||
|
|
||
| /** | ||
| * Checks the hover state of a component and updates it based on the event target. | ||
| * This is necessary to handle cases where the hover state might get stuck due to an unreliable mouseleave trigger, | ||
| * such as when an element is removed before the mouseleave event is triggered. | ||
| * @param {Event} e - The hover event object. | ||
| */ | ||
| const unsetHoveredIfOutside = useCallback( | ||
| (e) => { | ||
| if (!ref.current || !isHovered) { | ||
| return; | ||
| } | ||
|
|
||
| if (ref.current.contains(e.target)) { | ||
| return; | ||
| } | ||
|
|
||
| setIsHovered(false); | ||
| }, | ||
| [isHovered], | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (!DeviceCapabilities.hasHoverSupport()) { | ||
| return; | ||
| } | ||
|
|
||
| document.addEventListener('mouseover', unsetHoveredIfOutside); | ||
|
|
||
| return () => document.removeEventListener('mouseover', unsetHoveredIfOutside); | ||
| }, [unsetHoveredIfOutside]); | ||
|
|
||
| useEffect(() => { | ||
| if (!disabled || !isHovered) { | ||
| return; | ||
| } | ||
| setIsHovered(false); | ||
| }, [disabled, isHovered]); | ||
|
|
||
| useEffect(() => { | ||
| if (disabled) { | ||
| return; | ||
| } | ||
| if (onHoverIn && isHovered) { | ||
| return onHoverIn(); | ||
| } | ||
| if (onHoverOut && !isHovered) { | ||
| return onHoverOut(); | ||
| } | ||
| }, [disabled, isHovered, onHoverIn, onHoverOut]); | ||
|
|
||
| useImperativeHandle(outerRef, () => ref.current, []); | ||
Beamanator marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| const child = useMemo(() => React.Children.only(mapChildren(children, isHovered)), [children, isHovered]); | ||
|
|
||
| const onMouseEnter = useCallback( | ||
| (el) => { | ||
| updateIsHoveredOnScrolling(true); | ||
|
|
||
| if (_.isFunction(child.props.onMouseEnter)) { | ||
| child.props.onMouseEnter(el); | ||
| } | ||
| }, | ||
| [child.props, updateIsHoveredOnScrolling], | ||
| ); | ||
|
|
||
| const onMouseLeave = useCallback( | ||
| (el) => { | ||
| updateIsHoveredOnScrolling(false); | ||
|
|
||
| if (_.isFunction(child.props.onMouseLeave)) { | ||
| child.props.onMouseLeave(el); | ||
| } | ||
| }, | ||
| [child.props, updateIsHoveredOnScrolling], | ||
| ); | ||
|
|
||
| const onBlur = useCallback( | ||
| (el) => { | ||
| // Check if the blur event occurred due to clicking outside the element | ||
| // and the wrapperView contains the element that caused the blur and reset isHovered | ||
| if (!ref.current.contains(el.target) && !ref.current.contains(el.relatedTarget)) { | ||
| setIsHovered(false); | ||
| } | ||
|
|
||
| if (_.isFunction(child.props.onBlur)) { | ||
| child.props.onBlur(el); | ||
| } | ||
| }, | ||
| [child.props], | ||
| ); | ||
|
|
||
| if (!DeviceCapabilities.hasHoverSupport()) { | ||
| return child; | ||
| } | ||
|
|
||
| return React.cloneElement(child, { | ||
| ref, | ||
| onMouseEnter, | ||
| onMouseLeave, | ||
| onBlur, | ||
| }); | ||
| } | ||
|
|
||
| const Hoverable = React.forwardRef(InnerHoverable); | ||
|
|
||
| Hoverable.propTypes = propTypes; | ||
| Hoverable.defaultProps = defaultProps; | ||
|
There was a problem hiding this comment. Add a displayName field There was a problem hiding this comment. AFAIK, there is no need to set There was a problem hiding this comment. Yeah, but this standard is from Expensify codebase There was a problem hiding this comment. Sure, let's keep it this way then :) |
||
| Hoverable.displayName = 'Hoverable'; | ||
|
|
||
| export default Hoverable; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would suggest replacing
isScrollingstate in favour ofisScrollingRef. Since usingisScrollingstate will re-render theHoverablecomponent and we can avoid it by using ref, which gives us a similar functionality but with less re-renders.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Got you @hurali97! I've implemented suggested changes 👍 Let's review it once again and we are good to go :)