Refactor Hoverable component into functional #29052
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,211 @@ | ||
| 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'; | ||
|
|
||
| /** | ||
| * Maps the children of a Hoverable component to | ||
| * - a function that is called with the parameter | ||
| * - the child itself if it is the only child | ||
| * @param {Array|Function|ReactNode} children - The children to map. | ||
| * @param {Object} callbackParam - The parameter to pass to the children function. | ||
| * @returns {ReactNode} The mapped children. | ||
| */ | ||
| function mapChildren(children, callbackParam) { | ||
| if (_.isArray(children) && children.length === 1) { | ||
| return children[0]; | ||
| } | ||
|
|
||
| if (_.isFunction(children)) { | ||
| return children(callbackParam); | ||
| } | ||
|
|
||
| return children; | ||
| } | ||
|
|
||
| /** | ||
| * Assigns a ref to an element, either by setting the current property of the ref object or by calling the ref function | ||
| * @param {Object|Function} ref - The ref object or function. | ||
| * @param {HTMLElement} el - The element to assign the ref to. | ||
| */ | ||
| function assignRef(ref, el) { | ||
| if (!ref) { | ||
| return; | ||
| } | ||
|
|
||
| if (_.has(ref, 'current')) { | ||
| // eslint-disable-next-line no-param-reassign | ||
| ref.current = el; | ||
| } | ||
|
|
||
| if (_.isFunction(ref)) { | ||
| ref(el); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * 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 | ||
| */ | ||
|
|
||
| const Hoverable = React.forwardRef(({disabled, onHoverIn, onHoverOut, children, shouldHandleScroll}, outerRef) => { | ||
| const [isHovered, setIsHovered] = useState(false); | ||
|
|
||
| const isScrolling = useRef(false); | ||
| const isHoveredRef = useRef(false); | ||
| const ref = useRef(null); | ||
|
|
||
| const updateIsHoveredOnScrolling = useCallback( | ||
| (hovered) => { | ||
| if (disabled) { | ||
| return; | ||
| } | ||
|
|
||
| isHoveredRef.current = hovered; | ||
|
|
||
| if (shouldHandleScroll && isScrolling.current) { | ||
| return; | ||
| } | ||
| setIsHovered(hovered); | ||
| }, | ||
| [disabled, shouldHandleScroll], | ||
| ); | ||
|
|
||
| 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) => { | ||
| isScrolling.current = 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( | ||
|
There was a problem hiding this comment. This function could be inside useEffect with mouseover listener as it is not used anywhere else |
||
| (e) => { | ||
kacper-mikolajczak marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| 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]); | ||
|
|
||
| // Expose inner ref to parent through outerRef. This enable us to use ref both in parent and child. | ||
| useImperativeHandle(outerRef, () => ref.current, []); | ||
|
|
||
| const child = useMemo(() => React.Children.only(mapChildren(children, isHovered)), [children, isHovered]); | ||
|
|
||
| const enableHoveredOnMouseEnter = useCallback( | ||
| (el) => { | ||
kacper-mikolajczak marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| updateIsHoveredOnScrolling(true); | ||
|
|
||
| if (_.isFunction(child.props.onMouseEnter)) { | ||
| child.props.onMouseEnter(el); | ||
| } | ||
| }, | ||
| [child.props, updateIsHoveredOnScrolling], | ||
| ); | ||
|
|
||
| const disableHoveredOnMouseLeave = useCallback( | ||
| (el) => { | ||
kacper-mikolajczak marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| updateIsHoveredOnScrolling(false); | ||
|
|
||
| if (_.isFunction(child.props.onMouseLeave)) { | ||
| child.props.onMouseLeave(el); | ||
| } | ||
| }, | ||
| [child.props, updateIsHoveredOnScrolling], | ||
| ); | ||
|
|
||
| const disableHoveredOnBlur = useCallback( | ||
| (el) => { | ||
kacper-mikolajczak marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| // 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: (el) => { | ||
| ref.current = el; | ||
| assignRef(child.ref, el); | ||
| }, | ||
| onMouseEnter: enableHoveredOnMouseEnter, | ||
| onMouseLeave: disableHoveredOnMouseLeave, | ||
| onBlur: disableHoveredOnBlur, | ||
| }); | ||
| }); | ||
|
|
||
| Hoverable.propTypes = propTypes; | ||
| Hoverable.defaultProps = defaultProps; | ||
| Hoverable.displayName = 'Hoverable'; | ||
|
|
||
| export default Hoverable; | ||
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
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 think about adding comments for
mapChildrenandassignRefto clarify why we have this logic.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.
Thanks for the idea, done ✅
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.
Thank you, looks good!
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.
@kacper-mikolajczak, do we need to extract this logic outside of the component? Usually, if logic is extracted should be moved to utils or helpers dir
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.
@ArekChr Those helpers are not really that universal to move them into utils - I did not want to bloat the component body no more, thus extracted them away. This might help to reduce the cognitive load when studying the component, wdyt?
If not, is there a convention we use for such local helpers? Shall we create a separate file under component's directory called
utils/helpers?Thanks for pointing this out!
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 agree that local functions simplify readability. For me, it can stay as it is. But
assignRefseems to be a universal function. It could be moved to, e.g. react utils or helpers. @Beamanator, any thoughts?