SW/mattermost-mobile
2
0
Fork 0
forked from Ivasoft/mattermost-mobile
Code Issues Pull Requests Packages Projects Releases Wiki Activity

allow scrolling in the login screen when keyboard is opened (#7144)

Browse Source
This commit is contained in:
Elias Nahum
2023-02-16 14:00:26 +02:00
committed by GitHub
parent a78e6ff673
commit 3f2769aa0f
2 changed files with 5 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app/screens/login/form.tsx
View File

@@ -2,9 +2,9 @@
// See LICENSE.txt for license information.
import {useManagedConfig} from '@mattermost/react-native-emm';
import React, {MutableRefObject, useCallback, useEffect, useMemo, useRef, useState} from 'react';
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import {useIntl} from 'react-intl';
import {Keyboard, Platform, TextInput, TouchableOpacity, useWindowDimensions, View} from 'react-native';
import {Keyboard, TextInput, TouchableOpacity, View} from 'react-native';
import Button from 'react-native-button';
import {login} from '@actions/remote/session';
@@ -14,7 +14,6 @@ import FloatingTextInput from '@components/floating_text_input_label';
import FormattedText from '@components/formatted_text';
import Loading from '@components/loading';
import {FORGOT_PASSWORD, MFA} from '@constants/screens';
import {useIsTablet} from '@hooks/device';
import {t} from '@i18n';
import {goToScreen, loginAnimationOptions, resetToHome, resetToTeams} from '@screens/navigation';
import {buttonBackgroundStyle, buttonTextStyle} from '@utils/buttonStyles';
@@ -23,13 +22,10 @@ import {preventDoubleTap} from '@utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import type {LaunchProps} from '@typings/launch';
import type {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
interface LoginProps extends LaunchProps {
config: Partial<ClientConfig>;
keyboardAwareRef: MutableRefObject<KeyboardAwareScrollView | null>;
license: Partial<ClientLicense>;
numberSSOs: number;
serverDisplayName: string;
theme: Theme;
}
@@ -53,6 +49,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
},
forgotPasswordBtn: {
borderColor: 'transparent',
width: '50%',
},
forgotPasswordError: {
marginTop: 30,
@@ -76,10 +73,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
},
}));
const LoginForm = ({config, extra, keyboardAwareRef, numberSSOs, serverDisplayName, launchError, launchType, license, serverUrl, theme}: LoginProps) => {
const LoginForm = ({config, extra, serverDisplayName, launchError, launchType, license, serverUrl, theme}: LoginProps) => {
const styles = getStyleSheet(theme);
const isTablet = useIsTablet();
const dimensions = useWindowDimensions();
const loginRef = useRef<TextInput>(null);
const passwordRef = useRef<TextInput>(null);
const intl = useIntl();
@@ -94,33 +89,6 @@ const LoginForm = ({config, extra, keyboardAwareRef, numberSSOs, serverDisplayNa
const usernameEnabled = config.EnableSignInWithUsername === 'true';
const ldapEnabled = license.IsLicensed === 'true' && config.EnableLdap === 'true' && license.LDAP === 'true';
const focus = () => {
if (Platform.OS === 'ios') {
let ssoOffset = 0;
switch (numberSSOs) {
case 0:
ssoOffset = 0;
break;
case 1:
case 2:
ssoOffset = 48;
break;
default:
ssoOffset = 3 * 48;
break;
}
let offsetY = 150 - ssoOffset;
if (isTablet) {
const {width, height} = dimensions;
const isLandscape = width > height;
offsetY = (isLandscape ? 230 : 150) - ssoOffset;
}
requestAnimationFrame(() => {
keyboardAwareRef.current?.scrollToPosition(0, offsetY);
});
}
};
const preSignIn = preventDoubleTap(async () => {
setIsLoading(true);
@@ -231,19 +199,6 @@ const LoginForm = ({config, extra, keyboardAwareRef, numberSSOs, serverDisplayNa
passwordRef?.current?.focus();
}, []);
const onBlur = useCallback(() => {
if (Platform.OS === 'ios') {
const reset = !passwordRef.current?.isFocused() && !loginRef.current?.isFocused();
if (reset) {
keyboardAwareRef.current?.scrollToPosition(0, 0);
}
}
}, []);
const onFocus = useCallback(() => {
focus();
}, [dimensions]);
const onLogin = useCallback(() => {
Keyboard.dismiss();
preSignIn();
@@ -360,9 +315,7 @@ const LoginForm = ({config, extra, keyboardAwareRef, numberSSOs, serverDisplayNa
error={error ? ' ' : ''}
keyboardType='email-address'
label={createLoginPlaceholder()}
onBlur={onBlur}
onChangeText={onLoginChange}
onFocus={onFocus}
onSubmitEditing={focusPassword}
ref={loginRef}
returnKeyType='next'
@@ -382,9 +335,7 @@ const LoginForm = ({config, extra, keyboardAwareRef, numberSSOs, serverDisplayNa
error={error}
keyboardType='default'
label={intl.formatMessage({id: 'login.password', defaultMessage: 'Password'})}
onBlur={onBlur}
onChangeText={onPasswordChange}
onFocus={onFocus}
onSubmitEditing={onLogin}
ref={passwordRef}
returnKeyType='join'

4
app/screens/login/index.tsx
View File

@@ -211,7 +211,7 @@ const LoginOptions = ({
<KeyboardAwareScrollView
bounces={true}
contentContainerStyle={[styles.innerContainer, additionalContainerStyle]}
enableAutomaticScroll={Platform.OS === 'android'}
enableAutomaticScroll={true}
enableOnAndroid={false}
enableResetScrollToCoords={true}
extraScrollHeight={0}
@@ -228,11 +228,9 @@ const LoginOptions = ({
<Form
config={config}
extra={extra}
keyboardAwareRef={keyboardAwareRef}
license={license}
launchError={launchError}
launchType={launchType}
numberSSOs={numberSSOs}
theme={theme}
serverDisplayName={serverDisplayName}
serverUrl={serverUrl}