From ca7dd520c9d3e8dc385508e1268f397b9bf2f36d Mon Sep 17 00:00:00 2001 From: Rahul kushwaha Date: Thu, 8 Jun 2023 07:30:34 +0530 Subject: [PATCH 1/3] fire hover event on supported devices only --- src/components/Hoverable/index.js | 84 +++++++++++++++++-------------- 1 file changed, 46 insertions(+), 38 deletions(-) diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js index 2cbfd4b583d0..6621981cc5ca 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -1,6 +1,8 @@ import _ from 'underscore'; import React, {Component} from 'react'; +import {View} from 'react-native'; import {propTypes, defaultProps} from './hoverablePropTypes'; +import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; /** * It is necessary to create a Hoverable component instead of relying solely on Pressable support for hover state, @@ -15,6 +17,8 @@ class Hoverable extends Component { }; this.wrapperView = null; + // Skip hover on not supported devices like mWeb + this.hasHoverSupport = DeviceCapabilities.hasHoverSupport(); } componentDidMount() { @@ -74,48 +78,52 @@ class Hoverable extends Component { } if (_.isFunction(child)) { - child = child(this.state.isHovered); + child = child(this.state.isHovered && this.hasHoverSupport); } - return React.cloneElement(React.Children.only(child), { - ref: (el) => { - this.wrapperView = el; - - // Call the original ref, if any - const {ref} = child; - if (_.isFunction(ref)) { - ref(el); - return; - } - - if (_.isObject(ref)) { - ref.current = el; - } - }, - onMouseEnter: (el) => { - this.setIsHovered(true); - - if (_.isFunction(child.props.onMouseEnter)) { - child.props.onMouseEnter(el); - } - }, - onMouseLeave: (el) => { - this.setIsHovered(false); - - if (_.isFunction(child.props.onMouseLeave)) { - child.props.onMouseLeave(el); - } - }, - onBlur: (el) => { - if (!this.wrapperView.contains(el.relatedTarget)) { + return this.hasHoverSupport ? ( + React.cloneElement(React.Children.only(child), { + ref: (el) => { + this.wrapperView = el; + + // Call the original ref, if any + const {ref} = child; + if (_.isFunction(ref)) { + ref(el); + return; + } + + if (_.isObject(ref)) { + ref.current = el; + } + }, + onMouseEnter: (el) => { + this.setIsHovered(true); + + if (_.isFunction(child.props.onMouseEnter)) { + child.props.onMouseEnter(el); + } + }, + onMouseLeave: (el) => { this.setIsHovered(false); - } - if (_.isFunction(child.props.onBlur)) { - child.props.onBlur(el); - } - }, - }); + if (_.isFunction(child.props.onMouseLeave)) { + child.props.onMouseLeave(el); + } + }, + onBlur: (el) => { + if (!this.wrapperView.contains(el.relatedTarget)) { + this.setIsHovered(false); + } + + if (_.isFunction(child.props.onBlur)) { + child.props.onBlur(el); + } + }, + }) + ) : ( + {child} + ); } } From 486204822051ed28eb0cad49b182ea8708ac1b0e Mon Sep 17 00:00:00 2001 From: Rahul kushwaha Date: Thu, 8 Jun 2023 23:31:00 +0530 Subject: [PATCH 2/3] return child early if no HoverSupport --- src/components/Hoverable/index.js | 86 ++++++++++++++++--------------- 1 file changed, 44 insertions(+), 42 deletions(-) diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js index 6621981cc5ca..a203685cd789 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -77,53 +77,55 @@ class Hoverable extends Component { child = this.props.children[0]; } + // return child if device doesn't has hoverSupport + if (!this.hasHoverSupport) { + const childrenWithHoverState = _.isFunction(child) ? child(false) : child; + return {childrenWithHoverState}; + } + if (_.isFunction(child)) { - child = child(this.state.isHovered && this.hasHoverSupport); + child = child(this.state.isHovered); } - return this.hasHoverSupport ? ( - React.cloneElement(React.Children.only(child), { - ref: (el) => { - this.wrapperView = el; - - // Call the original ref, if any - const {ref} = child; - if (_.isFunction(ref)) { - ref(el); - return; - } - - if (_.isObject(ref)) { - ref.current = el; - } - }, - onMouseEnter: (el) => { - this.setIsHovered(true); - - if (_.isFunction(child.props.onMouseEnter)) { - child.props.onMouseEnter(el); - } - }, - onMouseLeave: (el) => { + return React.cloneElement(React.Children.only(child), { + ref: (el) => { + this.wrapperView = el; + + // Call the original ref, if any + const {ref} = child; + if (_.isFunction(ref)) { + ref(el); + return; + } + + if (_.isObject(ref)) { + ref.current = el; + } + }, + onMouseEnter: (el) => { + this.setIsHovered(true); + + if (_.isFunction(child.props.onMouseEnter)) { + child.props.onMouseEnter(el); + } + }, + onMouseLeave: (el) => { + this.setIsHovered(false); + + if (_.isFunction(child.props.onMouseLeave)) { + child.props.onMouseLeave(el); + } + }, + onBlur: (el) => { + if (!this.wrapperView.contains(el.relatedTarget)) { this.setIsHovered(false); + } - if (_.isFunction(child.props.onMouseLeave)) { - child.props.onMouseLeave(el); - } - }, - onBlur: (el) => { - if (!this.wrapperView.contains(el.relatedTarget)) { - this.setIsHovered(false); - } - - if (_.isFunction(child.props.onBlur)) { - child.props.onBlur(el); - } - }, - }) - ) : ( - {child} - ); + if (_.isFunction(child.props.onBlur)) { + child.props.onBlur(el); + } + }, + }); } } From 1ae3a727ae0a314cf8bd0541dfedc76191ac0be9 Mon Sep 17 00:00:00 2001 From: Rahul kushwaha Date: Thu, 8 Jun 2023 23:35:49 +0530 Subject: [PATCH 3/3] removed comments --- src/components/Hoverable/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js index a203685cd789..d14e055fbb13 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -17,7 +17,6 @@ class Hoverable extends Component { }; this.wrapperView = null; - // Skip hover on not supported devices like mWeb this.hasHoverSupport = DeviceCapabilities.hasHoverSupport(); } @@ -77,7 +76,6 @@ class Hoverable extends Component { child = this.props.children[0]; } - // return child if device doesn't has hoverSupport if (!this.hasHoverSupport) { const childrenWithHoverState = _.isFunction(child) ? child(false) : child; return {childrenWithHoverState};