Merge pull request #22891 from rayane-djouah/Migrate-BasePasswordPopo…

…ver.js-to-function-component

Migrate BasePasswordPopover.js to function component

src/components/PasswordPopover/BasePasswordPopover.js

@@ -1,12 +1,11 @@
 import {View} from 'react-native';
-import React, {Component} from 'react';
+import React, {useState, useRef, useEffect} from 'react';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
 import Text from '../Text';
 import Popover from '../Popover';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import compose from '../../libs/compose';
-import withWindowDimensions from '../withWindowDimensions';
+import useWindowDimensions from '../../hooks/useWindowDimensions';
+import useLocalize from '../../hooks/useLocalize';
 import TextInput from '../TextInput';
 import KeyboardSpacer from '../KeyboardSpacer';
 import {propTypes as passwordPopoverPropTypes, defaultProps as passwordPopoverDefaultProps} from './passwordPopoverPropTypes';
@@ -19,76 +18,74 @@ const propTypes = {
     shouldDelayFocus: PropTypes.bool,
 
     ...passwordPopoverPropTypes,
-    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     shouldDelayFocus: false,
     ...passwordPopoverDefaultProps,
 };
 
-class BasePasswordPopover extends Component {
-    constructor(props) {
-        super(props);
+function BasePasswordPopover({isVisible, onClose, anchorPosition, viewportOffsetTop, shouldDelayFocus, onSubmit, submitButtonText}) {
+    const {windowHeight, isSmallScreenWidth} = useWindowDimensions();
+    const {translate} = useLocalize();
+    const [password, setPassword] = useState('');
+    const passwordInput = useRef(null);
 
-        this.passwordInput = undefined;
-
-        this.focusInput = this.focusInput.bind(this);
-
-        this.state = {
-            password: '',
-        };
-    }
+    useEffect(() => {
+        if (isVisible) {
+            return;
+        }
+        setPassword('');
+    }, [isVisible]);
 
     /**
      * Focus the password input
      */
-    focusInput() {
-        if (!this.passwordInput) {
+    const focusInput = () => {
+        if (!passwordInput.current) {
             return;
         }
-        this.passwordInput.focus();
-    }
+        passwordInput.current.focus();
+    };
 
-    render() {
-        return (
-            <Popover
-                isVisible={this.props.isVisible}
-                onClose={this.props.onClose}
-                anchorPosition={this.props.anchorPosition}
-                onModalShow={this.focusInput}
-                outerStyle={{maxHeight: this.props.windowHeight, marginTop: this.props.viewportOffsetTop}}
-            >
-                <View style={[styles.m5, !this.props.isSmallScreenWidth ? styles.sidebarPopover : '']}>
-                    <Text style={[styles.mb3]}>{this.props.translate('passwordForm.pleaseFillPassword')}</Text>
-                    <TextInput
-                        label={this.props.translate('common.password')}
-                        accessibilityLabel={this.props.translate('common.password')}
-                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                        ref={(el) => (this.passwordInput = el)}
-                        secureTextEntry
-                        autoCompleteType="password"
-                        textContentType="password"
-                        value={this.state.currentPassword}
-                        onChangeText={(password) => this.setState({password})}
-                        returnKeyType="done"
-                        onSubmitEditing={() => this.props.onSubmit(this.state.password)}
-                        style={styles.mt3}
-                        autoFocus
-                        shouldDelayFocus={this.props.shouldDelayFocus}
-                    />
-                    <Button
-                        onPress={() => this.props.onSubmit(this.state.password)}
-                        style={styles.mt3}
-                        text={this.props.submitButtonText}
-                    />
-                </View>
-                <KeyboardSpacer />
-            </Popover>
-        );
-    }
+    return (
+        <Popover
+            isVisible={isVisible}
+            onClose={onClose}
+            anchorPosition={anchorPosition}
+            onModalShow={focusInput}
+            outerStyle={{maxHeight: windowHeight, marginTop: viewportOffsetTop}}
+        >
+            <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
+                <Text style={[styles.mb3]}>{translate('passwordForm.pleaseFillPassword')}</Text>
+                <TextInput
+                    label={translate('common.password')}
+                    accessibilityLabel={translate('common.password')}
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                    ref={passwordInput}
+                    secureTextEntry
+                    autoCompleteType="password"
+                    textContentType="password"
+                    value={password}
+                    onChangeText={setPassword}
+                    returnKeyType="done"
+                    onSubmitEditing={() => onSubmit(password)}
+                    style={styles.mt3}
+                    autoFocus
+                    shouldDelayFocus={shouldDelayFocus}
+                />
+                <Button
+                    onPress={() => onSubmit(password)}
+                    style={styles.mt3}
+                    text={submitButtonText}
+                />
+            </View>
+            <KeyboardSpacer />
+        </Popover>
+    );
 }
 
 BasePasswordPopover.propTypes = propTypes;
 BasePasswordPopover.defaultProps = defaultProps;
-export default compose(withViewportOffsetTop, withWindowDimensions, withLocalize)(BasePasswordPopover);
+BasePasswordPopover.displayName = 'BasePasswordPopover';
+export default withViewportOffsetTop(BasePasswordPopover);