From 7b33a2cb7dcec35b4155694dfebee9845e4d4e15 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Wed, 19 Jul 2023 16:31:43 +0200 Subject: [PATCH 1/4] Migrate OptionsList --- src/components/OptionsList/index.js | 78 +++++++++++++---------------- 1 file changed, 34 insertions(+), 44 deletions(-) diff --git a/src/components/OptionsList/index.js b/src/components/OptionsList/index.js index ac0d920ddcb0..80ee286e6626 100644 --- a/src/components/OptionsList/index.js +++ b/src/components/OptionsList/index.js @@ -1,4 +1,4 @@ -import React, {Component, forwardRef} from 'react'; +import React, {forwardRef, useEffect, useRef} from 'react'; import {Keyboard} from 'react-native'; import _ from 'underscore'; import BaseOptionsList from './BaseOptionsList'; @@ -6,60 +6,50 @@ import withWindowDimensions from '../withWindowDimensions'; import {propTypes, defaultProps} from './optionsListPropTypes'; import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; -class OptionsList extends Component { - constructor(props) { - super(props); +function OptionsList(props) { + const isScreenTouched = useRef(false); - this.touchStart = this.touchStart.bind(this); - this.touchEnd = this.touchEnd.bind(this); - } + const touchStart = () => { + isScreenTouched.current = true; + }; - componentDidMount() { + const touchEnd = () => { + isScreenTouched.current = false; + }; + + useEffect(() => { if (!DeviceCapabilities.canUseTouchScreen()) { - return; + return undefined; } // We're setting `isScreenTouched` in this listener only for web platforms with touchscreen (mWeb) where // we want to dismiss the keyboard only when the list is scrolled by the user and not when it's scrolled programmatically. - document.addEventListener('touchstart', this.touchStart); - document.addEventListener('touchend', this.touchEnd); - } - - componentWillUnmount() { - if (!DeviceCapabilities.canUseTouchScreen()) { - return; - } + document.addEventListener('touchstart', touchStart); + document.addEventListener('touchend', touchEnd); - document.removeEventListener('touchstart', this.touchStart); - document.removeEventListener('touchend', this.touchEnd); - } + return () => { + document.removeEventListener('touchstart', touchStart); + document.removeEventListener('touchend', touchEnd); + }; + }, []); - touchStart() { - this.isScreenTouched = true; - } - - touchEnd() { - this.isScreenTouched = false; - } - - render() { - return ( - { - // Only dismiss the keyboard whenever the user scrolls the screen - if (!this.isScreenTouched) { - return; - } - Keyboard.dismiss(); - }} - /> - ); - } + return ( + { + // Only dismiss the keyboard whenever the user scrolls the screen + if (!isScreenTouched.current) { + return; + } + Keyboard.dismiss(); + }} + /> + ); } +OptionsList.displayName = 'OptionsList'; OptionsList.propTypes = { ...propTypes, }; From 261beee609af0e10af0ca146360a34b558757949 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Wed, 19 Jul 2023 16:49:24 +0200 Subject: [PATCH 2/4] Add useCallback --- src/components/OptionsList/index.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/OptionsList/index.js b/src/components/OptionsList/index.js index 80ee286e6626..f158168eb7f5 100644 --- a/src/components/OptionsList/index.js +++ b/src/components/OptionsList/index.js @@ -1,4 +1,4 @@ -import React, {forwardRef, useEffect, useRef} from 'react'; +import React, {forwardRef, useEffect, useRef, useCallback} from 'react'; import {Keyboard} from 'react-native'; import _ from 'underscore'; import BaseOptionsList from './BaseOptionsList'; @@ -19,7 +19,7 @@ function OptionsList(props) { useEffect(() => { if (!DeviceCapabilities.canUseTouchScreen()) { - return undefined; + return; } // We're setting `isScreenTouched` in this listener only for web platforms with touchscreen (mWeb) where @@ -33,18 +33,20 @@ function OptionsList(props) { }; }, []); + const onScroll = useCallback(() => { + // Only dismiss the keyboard whenever the user scrolls the screen + if (!isScreenTouched.current) { + return; + } + Keyboard.dismiss(); + }, []); + return ( { - // Only dismiss the keyboard whenever the user scrolls the screen - if (!isScreenTouched.current) { - return; - } - Keyboard.dismiss(); - }} + onScroll={onScroll} /> ); } From a081d169c58eebcf553e622e19948f19aaf70fb1 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 20 Jul 2023 10:35:53 +0200 Subject: [PATCH 3/4] Address review --- src/components/OptionsList/index.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/src/components/OptionsList/index.js b/src/components/OptionsList/index.js index f158168eb7f5..2164b479df94 100644 --- a/src/components/OptionsList/index.js +++ b/src/components/OptionsList/index.js @@ -9,19 +9,18 @@ import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; function OptionsList(props) { const isScreenTouched = useRef(false); - const touchStart = () => { - isScreenTouched.current = true; - }; - - const touchEnd = () => { - isScreenTouched.current = false; - }; - useEffect(() => { if (!DeviceCapabilities.canUseTouchScreen()) { return; } + const touchStart = () => { + isScreenTouched.current = true; + }; + const touchEnd = () => { + isScreenTouched.current = false; + }; + // We're setting `isScreenTouched` in this listener only for web platforms with touchscreen (mWeb) where // we want to dismiss the keyboard only when the list is scrolled by the user and not when it's scrolled programmatically. document.addEventListener('touchstart', touchStart); @@ -52,9 +51,7 @@ function OptionsList(props) { } OptionsList.displayName = 'OptionsList'; -OptionsList.propTypes = { - ...propTypes, -}; +OptionsList.propTypes = propTypes; OptionsList.defaultProps = defaultProps; export default withWindowDimensions( From e11f985873272d82147ae9211d680067e59d172b Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 20 Jul 2023 12:45:13 +0200 Subject: [PATCH 4/4] Move functions to useEffect --- .../KeyboardDismissingFlatList/index.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/KeyboardDismissingFlatList/index.js b/src/components/KeyboardDismissingFlatList/index.js index c8fc8fb27147..0ca8504d96ab 100644 --- a/src/components/KeyboardDismissingFlatList/index.js +++ b/src/components/KeyboardDismissingFlatList/index.js @@ -5,19 +5,19 @@ import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; function KeyboardDismissingFlatList(props) { const isScreenTouched = useRef(false); - const touchStart = () => { - isScreenTouched.current = true; - }; - - const touchEnd = () => { - isScreenTouched.current = false; - }; - useEffect(() => { if (!DeviceCapabilities.canUseTouchScreen()) { return; } + const touchStart = () => { + isScreenTouched.current = true; + }; + + const touchEnd = () => { + isScreenTouched.current = false; + }; + // We're setting `isScreenTouched` in this listener only for web platforms with touchscreen (mWeb) where // we want to dismiss the keyboard only when the list is scrolled by the user and not when it's scrolled programmatically. document.addEventListener('touchstart', touchStart);