diff --git a/src/components/PasswordPopover/BasePasswordPopover.js b/src/components/PasswordPopover/BasePasswordPopover.js
index 16e6ab4a1440..ee61f92bb77a 100644
--- a/src/components/PasswordPopover/BasePasswordPopover.js
+++ b/src/components/PasswordPopover/BasePasswordPopover.js
@@ -1,5 +1,5 @@
import {View} from 'react-native';
-import React, {Component} from 'react';
+import React, {useState, useRef} from 'react';
import PropTypes from 'prop-types';
import styles from '../../styles/styles';
import Text from '../Text';
@@ -27,68 +27,58 @@ const defaultProps = {
...passwordPopoverDefaultProps,
};
-class BasePasswordPopover extends Component {
- constructor(props) {
- super(props);
-
- this.passwordInput = undefined;
-
- this.focusInput = this.focusInput.bind(this);
-
- this.state = {
- password: '',
- };
- }
+function BasePasswordPopover({isVisible, onClose, anchorPosition, windowHeight, viewportOffsetTop, isSmallScreenWidth, translate, shouldDelayFocus, onSubmit, submitButtonText}) {
+ const [password, setPassword] = useState('');
+ const passwordInput = useRef(null);
/**
* Focus the password input
*/
- focusInput() {
- if (!this.passwordInput) {
+ const focusInput = () => {
+ if (!passwordInput.current) {
return;
}
- this.passwordInput.focus();
- }
+ passwordInput.current.focus();
+ };
- render() {
- return (
-
-
- {this.props.translate('passwordForm.pleaseFillPassword')}
- (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}
- />
-
-
-
- );
- }
+ return (
+
+
+ {translate('passwordForm.pleaseFillPassword')}
+ onSubmit(password)}
+ style={styles.mt3}
+ autoFocus
+ shouldDelayFocus={shouldDelayFocus}
+ />
+
+
+
+ );
}
BasePasswordPopover.propTypes = propTypes;
BasePasswordPopover.defaultProps = defaultProps;
+BasePasswordPopover.displayName = 'BasePasswordPopover';
export default compose(withViewportOffsetTop, withWindowDimensions, withLocalize)(BasePasswordPopover);