Merge pull request #24076 from huzaifa-99/16208-migrate-TextInput-indexjs-to-functional-comp

Migrated Textinput/index.js to functional component

Author: stitesExpensify

src/components/TextInput/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect, useRef} from 'react';
 import _ from 'underscore';
 import styles from '../../styles/styles';
 import * as styleConst from './styleConst';
@@ -7,65 +7,66 @@ import * as baseTextInputPropTypes from './baseTextInputPropTypes';
 import DomUtils from '../../libs/DomUtils';
 import Visibility from '../../libs/Visibility';
 
-class TextInput extends React.Component {
-    componentDidMount() {
-        if (this.props.disableKeyboard) {
-            this.textInput.setAttribute('inputmode', 'none');
+function TextInput(props) {
+    const textInputRef = useRef(null);
+    const removeVisibilityListenerRef = useRef(null);
+
+    useEffect(() => {
+        if (props.disableKeyboard) {
+            textInputRef.current.setAttribute('inputmode', 'none');
         }
 
-        if (this.props.name) {
-            this.textInput.setAttribute('name', this.props.name);
+        if (props.name) {
+            textInputRef.current.setAttribute('name', props.name);
         }
 
-        // Forcefully activate the soft keyboard when the user switches between tabs while input was focused.
-        this.removeVisibilityListener = Visibility.onVisibilityChange(() => {
-            if (!Visibility.isVisible() || !this.textInput || DomUtils.getActiveElement() !== this.textInput) {
+        removeVisibilityListenerRef.current = Visibility.onVisibilityChange(() => {
+            if (!Visibility.isVisible() || !textInputRef.current || DomUtils.getActiveElement() !== textInputRef.current) {
                 return;
             }
-            this.textInput.blur();
-            this.textInput.focus();
+            textInputRef.current.blur();
+            textInputRef.current.focus();
         });
-    }
-
-    componentWillUnmount() {
-        if (!this.removeVisibilityListener) {
-            return;
-        }
-        this.removeVisibilityListener();
-    }
 
-    render() {
-        const isLabeledMultiline = Boolean(this.props.label.length) && this.props.multiline;
-        const labelAnimationStyle = {
-            '--active-label-translate-y': `${styleConst.ACTIVE_LABEL_TRANSLATE_Y}px`,
-            '--active-label-scale': `${styleConst.ACTIVE_LABEL_SCALE}`,
-            '--label-transition-duration': `${styleConst.LABEL_ANIMATION_DURATION}ms`,
+        return () => {
+            if (!removeVisibilityListenerRef.current) return;
+            removeVisibilityListenerRef.current();
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const isLabeledMultiline = Boolean(props.label.length) && props.multiline;
+    const labelAnimationStyle = {
+        '--active-label-translate-y': `${styleConst.ACTIVE_LABEL_TRANSLATE_Y}px`,
+        '--active-label-scale': `${styleConst.ACTIVE_LABEL_SCALE}`,
+        '--label-transition-duration': `${styleConst.LABEL_ANIMATION_DURATION}ms`,
+    };
 
-        return (
-            <BaseTextInput
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...this.props}
-                innerRef={(el) => {
-                    this.textInput = el;
-                    if (!this.props.innerRef) {
-                        return;
-                    }
+    return (
+        <BaseTextInput
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            innerRef={(el) => {
+                textInputRef.current = el;
+                if (!props.innerRef) {
+                    return;
+                }
 
-                    if (_.isFunction(this.props.innerRef)) {
-                        this.props.innerRef(el);
-                        return;
-                    }
+                if (_.isFunction(props.innerRef)) {
+                    props.innerRef(el);
+                    return;
+                }
 
-                    this.props.innerRef.current = el;
-                }}
-                inputStyle={[styles.baseTextInput, styles.textInputDesktop, isLabeledMultiline ? styles.textInputMultiline : {}, ...this.props.inputStyle]}
-                textInputContainerStyles={[labelAnimationStyle, ...this.props.textInputContainerStyles]}
-            />
-        );
-    }
+                // eslint-disable-next-line no-param-reassign
+                props.innerRef.current = el;
+            }}
+            inputStyle={[styles.baseTextInput, styles.textInputDesktop, isLabeledMultiline ? styles.textInputMultiline : {}, ...props.inputStyle]}
+            textInputContainerStyles={[labelAnimationStyle, ...props.textInputContainerStyles]}
+        />
+    );
 }
 
+TextInput.displayName = 'TextInput';
 TextInput.propTypes = baseTextInputPropTypes.propTypes;
 TextInput.defaultProps = baseTextInputPropTypes.defaultProps;