From 7b2185d361653d35462a4eb40e24f1c4f5eb1ae2 Mon Sep 17 00:00:00 2001 From: Tanuj Singh Date: Thu, 8 Aug 2019 00:50:16 +0530 Subject: [PATCH] [IMPROVEMENT] Use autoFocus rather than timeout + focus (#1071) * autofocus replaced timout+focus * removed inputRef * Unnecessary focus on NewServerView when passing server as props * Removed unnecessary code --- app/views/CreateChannelView.js | 11 +----- app/views/ForgotPasswordView.js | 14 +------- app/views/LoginView.js | 20 ++--------- app/views/NewServerView.js | 34 ++++++++----------- app/views/RegisterView.js | 14 +------- .../RoomsListView/Header/Header.android.js | 5 ++- app/views/RoomsListView/Header/index.js | 14 -------- app/views/SearchMessagesView/index.js | 6 +--- app/views/SetUsernameView.js | 11 +----- 9 files changed, 23 insertions(+), 106 deletions(-) diff --git a/app/views/CreateChannelView.js b/app/views/CreateChannelView.js index a21f5131..46b98992 100644 --- a/app/views/CreateChannelView.js +++ b/app/views/CreateChannelView.js @@ -120,9 +120,6 @@ class CreateChannelView extends React.Component { componentDidMount() { const { navigation } = this.props; navigation.setParams({ submit: this.submit }); - this.timeout = setTimeout(() => { - this.channelNameRef.focus(); - }, 600); } shouldComponentUpdate(nextProps, nextState) { @@ -181,12 +178,6 @@ class CreateChannelView extends React.Component { } } - componentWillUnmount() { - if (this.timeout) { - clearTimeout(this.timeout); - } - } - onChangeText = (channelName) => { const { navigation } = this.props; navigation.setParams({ showSubmit: channelName.trim().length > 0 }); @@ -322,7 +313,7 @@ class CreateChannelView extends React.Component { this.channelNameRef = ref} + autoFocus style={styles.input} label={I18n.t('Channel_Name')} value={channelName} diff --git a/app/views/ForgotPasswordView.js b/app/views/ForgotPasswordView.js index 123aa5e0..b8e26c08 100644 --- a/app/views/ForgotPasswordView.js +++ b/app/views/ForgotPasswordView.js @@ -32,12 +32,6 @@ export default class ForgotPasswordView extends React.Component { isFetching: false } - componentDidMount() { - this.timeout = setTimeout(() => { - this.emailInput.focus(); - }, 600); - } - shouldComponentUpdate(nextProps, nextState) { const { email, invalidEmail, isFetching } = this.state; if (nextState.email !== email) { @@ -52,12 +46,6 @@ export default class ForgotPasswordView extends React.Component { return false; } - componentWillUnmount() { - if (this.timeout) { - clearTimeout(this.timeout); - } - } - validate = (email) => { if (!isValidEmail(email)) { this.setState({ invalidEmail: true }); @@ -99,7 +87,7 @@ export default class ForgotPasswordView extends React.Component { {I18n.t('Forgot_password')} { this.emailInput = e; }} + autoFocus placeholder={I18n.t('Email')} keyboardType='email-address' iconLeft='mail' diff --git a/app/views/LoginView.js b/app/views/LoginView.js index a408a004..1b38fc9d 100644 --- a/app/views/LoginView.js +++ b/app/views/LoginView.js @@ -73,12 +73,6 @@ class LoginView extends React.Component { this.setTitle(Site_Name); } - componentDidMount() { - this.timeout = setTimeout(() => { - this.usernameInput.focus(); - }, 600); - } - componentWillReceiveProps(nextProps) { const { Site_Name, error } = this.props; if (nextProps.Site_Name && nextProps.Site_Name !== Site_Name) { @@ -87,11 +81,6 @@ class LoginView extends React.Component { if (nextProps.error && nextProps.error.error === 'totp-required') { LayoutAnimation.easeInEaseOut(); this.setState({ showTOTP: true }); - setTimeout(() => { - if (this.codeInput && this.codeInput.focus) { - this.codeInput.focus(); - } - }, 300); return; } Alert.alert(I18n.t('Oops'), I18n.t('Login_error')); @@ -138,12 +127,6 @@ class LoginView extends React.Component { return false; } - componentWillUnmount() { - if (this.timeout) { - clearTimeout(this.timeout); - } - } - setTitle = (title) => { const { navigation } = this.props; navigation.setParams({ title }); @@ -189,6 +172,7 @@ class LoginView extends React.Component { {I18n.t('Whats_your_2fa')} this.codeInput = ref} + autoFocus onChangeText={value => this.setState({ code: value })} keyboardType='numeric' returnKeyType='send' @@ -217,7 +201,7 @@ class LoginView extends React.Component { {I18n.t('Login')} { this.usernameInput = e; }} + autoFocus placeholder={Accounts_EmailOrUsernamePlaceholder || I18n.t('Username_or_email')} keyboardType='email-address' returnKeyType='next' diff --git a/app/views/NewServerView.js b/app/views/NewServerView.js index e53a5860..ab4833b2 100644 --- a/app/views/NewServerView.js +++ b/app/views/NewServerView.js @@ -58,20 +58,20 @@ class NewServerView extends React.Component { connectServer: PropTypes.func.isRequired } - state = { - text: '' + constructor(props) { + super(props); + const server = props.navigation.getParam('server'); + this.state = { + text: server || '', + autoFocus: !server + }; } componentDidMount() { - const { navigation, connectServer } = this.props; - const server = navigation.getParam('server'); - if (server) { - connectServer(server); - this.setState({ text: server }); - } else { - this.timeout = setTimeout(() => { - this.input.focus(); - }, 600); + const { text } = this.state; + const { connectServer } = this.props; + if (text) { + connectServer(text); } } @@ -87,12 +87,6 @@ class NewServerView extends React.Component { return false; } - componentWillUnmount() { - if (this.timeout) { - clearTimeout(this.timeout); - } - } - onChangeText = (text) => { this.setState({ text }); } @@ -150,7 +144,7 @@ class NewServerView extends React.Component { render() { const { connecting } = this.props; - const { text } = this.state; + const { text, autoFocus } = this.state; return ( {I18n.t('Sign_in_your_server')} this.input = e} + autoFocus={autoFocus} containerStyle={styles.inputContainer} placeholder={defaultServer} value={text} @@ -177,7 +171,7 @@ class NewServerView extends React.Component { title={I18n.t('Connect')} type='primary' onPress={this.submit} - disabled={text.length === 0} + disabled={!text} loading={connecting} testID='new-server-view-button' /> diff --git a/app/views/RegisterView.js b/app/views/RegisterView.js index 0b403ec6..8da73df6 100644 --- a/app/views/RegisterView.js +++ b/app/views/RegisterView.js @@ -65,12 +65,6 @@ class RegisterView extends React.Component { }; } - componentDidMount() { - this.timeout = setTimeout(() => { - this.nameInput.focus(); - }, 600); - } - shouldComponentUpdate(nextProps, nextState) { const { customFields } = this.state; if (!equal(nextState.customFields, customFields)) { @@ -87,12 +81,6 @@ class RegisterView extends React.Component { } } - componentWillUnmount() { - if (this.timeout) { - clearTimeout(this.timeout); - } - } - setTitle = (title) => { const { navigation } = this.props; navigation.setParams({ title }); @@ -201,7 +189,7 @@ class RegisterView extends React.Component { {I18n.t('Sign_Up')} { this.nameInput = e; }} + autoFocus placeholder={I18n.t('Name')} returnKeyType='next' iconLeft='user' diff --git a/app/views/RoomsListView/Header/Header.android.js b/app/views/RoomsListView/Header/Header.android.js index 333677fc..f331e81a 100644 --- a/app/views/RoomsListView/Header/Header.android.js +++ b/app/views/RoomsListView/Header/Header.android.js @@ -43,13 +43,13 @@ const styles = StyleSheet.create({ }); const Header = React.memo(({ - connecting, isFetching, serverName, showServerDropdown, setSearchInputRef, showSearchHeader, onSearchChangeText, onPress + connecting, isFetching, serverName, showServerDropdown, showSearchHeader, onSearchChangeText, onPress }) => { if (showSearchHeader) { return ( { - this.searchInputRef.focus(); - }, 300); - } - } - onSearchChangeText = (text) => { const { setSearch } = this.props; setSearch(text.trim()); @@ -51,10 +42,6 @@ class RoomsListHeaderView extends PureComponent { } } - setSearchInputRef = (ref) => { - this.searchInputRef = ref; - } - render() { const { serverName, showServerDropdown, showSearchHeader, connecting, isFetching @@ -67,7 +54,6 @@ class RoomsListHeaderView extends PureComponent { showSearchHeader={showSearchHeader} connecting={connecting} isFetching={isFetching} - setSearchInputRef={this.setSearchInputRef} onPress={this.onPress} onSearchChangeText={text => this.onSearchChangeText(text)} /> diff --git a/app/views/SearchMessagesView/index.js b/app/views/SearchMessagesView/index.js index 6f8580e1..20a7e068 100644 --- a/app/views/SearchMessagesView/index.js +++ b/app/views/SearchMessagesView/index.js @@ -38,10 +38,6 @@ class SearchMessagesView extends React.Component { this.rid = props.navigation.getParam('rid'); } - componentDidMount() { - this.name.focus(); - } - shouldComponentUpdate(nextProps, nextState) { const { loading, searchText, messages } = this.state; if (nextState.loading !== loading) { @@ -128,7 +124,7 @@ class SearchMessagesView extends React.Component { { this.name = e; }} + autoFocus label={I18n.t('Search')} onChangeText={this.search} placeholder={I18n.t('Search_Messages')} diff --git a/app/views/SetUsernameView.js b/app/views/SetUsernameView.js index eabdd6ed..9994f7c6 100644 --- a/app/views/SetUsernameView.js +++ b/app/views/SetUsernameView.js @@ -53,9 +53,6 @@ class SetUsernameView extends React.Component { } async componentDidMount() { - this.timeout = setTimeout(() => { - this.usernameInput.focus(); - }, 600); const suggestion = await RocketChat.getUsernameSuggestion(); if (suggestion.success) { this.setState({ username: suggestion.result }); @@ -73,12 +70,6 @@ class SetUsernameView extends React.Component { return false; } - componentWillUnmount() { - if (this.timeout) { - clearTimeout(this.timeout); - } - } - submit = async() => { const { username } = this.state; const { loginRequest, token } = this.props; @@ -107,7 +98,7 @@ class SetUsernameView extends React.Component { {I18n.t('Username')} {I18n.t('Set_username_subtitle')} this.usernameInput = e} + autoFocus placeholder={I18n.t('Username')} returnKeyType='send' iconLeft='at'