Merge pull request #23241 from kosmydel/@swm/migration/options-list

Migrate OptionsList/index.js to a functional component

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);

src/components/OptionsList/index.js

@@ -1,68 +1,57 @@
-import React, {Component, forwardRef} from 'react';
+import React, {forwardRef, useEffect, useRef, useCallback} from 'react';
 import {Keyboard} from 'react-native';
 import _ from 'underscore';
 import BaseOptionsList from './BaseOptionsList';
 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);
-    }
-
-    componentDidMount() {
+    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', this.touchStart);
-        document.addEventListener('touchend', this.touchEnd);
-    }
+        document.addEventListener('touchstart', touchStart);
+        document.addEventListener('touchend', touchEnd);
 
-    componentWillUnmount() {
-        if (!DeviceCapabilities.canUseTouchScreen()) {
+        return () => {
+            document.removeEventListener('touchstart', touchStart);
+            document.removeEventListener('touchend', touchEnd);
+        };
+    }, []);
+
+    const onScroll = useCallback(() => {
+        // Only dismiss the keyboard whenever the user scrolls the screen
+        if (!isScreenTouched.current) {
             return;
         }
+        Keyboard.dismiss();
+    }, []);
 
-        document.removeEventListener('touchstart', this.touchStart);
-        document.removeEventListener('touchend', this.touchEnd);
-    }
-
-    touchStart() {
-        this.isScreenTouched = true;
-    }
-
-    touchEnd() {
-        this.isScreenTouched = false;
-    }
-
-    render() {
-        return (
-            <BaseOptionsList
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {..._.omit(this.props, 'forwardedRef')}
-                ref={this.props.forwardedRef}
-                onScroll={() => {
-                    // Only dismiss the keyboard whenever the user scrolls the screen
-                    if (!this.isScreenTouched) {
-                        return;
-                    }
-                    Keyboard.dismiss();
-                }}
-            />
-        );
-    }
+    return (
+        <BaseOptionsList
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {..._.omit(props, 'forwardedRef')}
+            ref={props.forwardedRef}
+            onScroll={onScroll}
+        />
+    );
 }
 
-OptionsList.propTypes = {
-    ...propTypes,
-};
+OptionsList.displayName = 'OptionsList';
+OptionsList.propTypes = propTypes;
 OptionsList.defaultProps = defaultProps;
 
 export default withWindowDimensions(