sergiodt
/
vn-verdnaturachat
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chore: Migrate containers: FormContainer to Typescript (#3922) 

* Chore: Migrate containers: FormContainer to Typescript

* minor tweak

* theme fix

* fix react.reactelement[]

* minor tweak

Co-authored-by: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>
This commit is contained in:
Reinaldo Neto 2022-03-25 14:55:20 -03:00 committed by GitHub
parent 6418803517
commit 744712b8d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 80 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
app/containers/FormContainer.tsx
View File

@ -5,15 +5,15 @@ import { themes } from '../constants/colors';
import sharedStyles from '../views/Styles';
import scrollPersistTaps from '../utils/scrollPersistTaps';
import KeyboardView from '../presentation/KeyboardView';
import { useTheme } from '../theme';
import StatusBar from './StatusBar';
import AppVersion from './AppVersion';
import { isTablet } from '../utils/deviceInfo';
import SafeAreaView from './SafeAreaView';
interface IFormContainer extends ScrollViewProps {
theme: string;
testID: string;
children: React.ReactNode;
children: React.ReactElement | React.ReactElement[] | null;
}
const styles = StyleSheet.create({
@ -22,27 +22,31 @@ const styles = StyleSheet.create({
}
});
export const FormContainerInner = ({ children }: { children: React.ReactNode }): JSX.Element => (
export const FormContainerInner = ({ children }: { children: (React.ReactElement | null)[] }) => (
<View style={[sharedStyles.container, isTablet && sharedStyles.tabletScreenContent]}>{children}</View>
);
const FormContainer = ({ children, theme, testID, ...props }: IFormContainer): JSX.Element => (
<KeyboardView
style={{ backgroundColor: themes[theme].backgroundColor }}
contentContainerStyle={sharedStyles.container}
keyboardVerticalOffset={128}>
<StatusBar />
<ScrollView
style={sharedStyles.container}
contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}
{...scrollPersistTaps}
{...props}>
<SafeAreaView testID={testID} style={{ backgroundColor: themes[theme].backgroundColor }}>
{children}
<AppVersion theme={theme} />
</SafeAreaView>
</ScrollView>
</KeyboardView>
);
const FormContainer = ({ children, testID, ...props }: IFormContainer) => {
const { theme } = useTheme();
return (
<KeyboardView
style={{ backgroundColor: themes[theme].backgroundColor }}
contentContainerStyle={sharedStyles.container}
keyboardVerticalOffset={128}>
<StatusBar />
<ScrollView
style={sharedStyles.container}
contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}
{...scrollPersistTaps}
{...props}>
<SafeAreaView testID={testID} style={{ backgroundColor: themes[theme].backgroundColor }}>
{children}
<AppVersion theme={theme} />
</SafeAreaView>
</ScrollView>
</KeyboardView>
);
};
export default FormContainer;

2
app/views/ForgotPasswordView.tsx
View File

@ -92,7 +92,7 @@ class ForgotPasswordView extends React.Component<IForgotPasswordViewProps, IForg
const { theme } = this.props;
return (
<FormContainer theme={theme} testID='forgot-password-view'>
<FormContainer testID='forgot-password-view'>
<FormContainerInner>
<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, { color: themes[theme].titleText }]}>
{I18n.t('Forgot_password')}

2
app/views/LoginView.tsx
View File

@ -229,7 +229,7 @@ class LoginView extends React.Component<ILoginViewProps, any> {
render() {
const { Accounts_ShowFormLogin, theme, navigation } = this.props;
return (
<FormContainer theme={theme} testID='login-view'>
<FormContainer testID='login-view'>
<FormContainerInner>
<LoginServices separator={Accounts_ShowFormLogin} navigation={navigation} theme={theme} />
{this.renderUserForm()}

2
app/views/NewServerView/index.tsx
View File

@ -321,7 +321,7 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
const marginTop = previousServer ? 0 : 35;
return (
<FormContainer theme={theme} testID='new-server-view' keyboardShouldPersistTaps='never'>
<FormContainer testID='new-server-view' keyboardShouldPersistTaps='never'>
<FormContainerInner>
<Image
style={[

96
app/views/RegisterView.tsx
View File

@ -172,60 +172,64 @@ class RegisterView extends React.Component<IProps, any> {
return null;
}
try {
return Object.keys(this.parsedCustomFields).map((key, index, array) => {
if (this.parsedCustomFields[key].type === 'select') {
const options = this.parsedCustomFields[key].options.map((option: string) => ({ label: option, value: option }));
return (
<RNPickerSelect
key={key}
items={options}
onValueChange={value => {
const newValue: { [key: string]: string | number } = {};
newValue[key] = value;
this.setState({ customFields: { ...customFields, ...newValue } });
}}
value={customFields[key]}>
return (
<>
{Object.keys(this.parsedCustomFields).map((key, index, array) => {
if (this.parsedCustomFields[key].type === 'select') {
const options = this.parsedCustomFields[key].options.map((option: string) => ({ label: option, value: option }));
return (
<RNPickerSelect
key={key}
items={options}
onValueChange={value => {
const newValue: { [key: string]: string | number } = {};
newValue[key] = value;
this.setState({ customFields: { ...customFields, ...newValue } });
}}
value={customFields[key]}>
<TextInput
inputRef={(e: any) => {
// @ts-ignore
this[key] = e;
}}
placeholder={key}
value={customFields[key]}
testID='register-view-custom-picker'
theme={theme}
/>
</RNPickerSelect>
);
}
return (
<TextInput
inputRef={e => {
// @ts-ignore
this[key] = e;
}}
key={key}
label={key}
placeholder={key}
value={customFields[key]}
testID='register-view-custom-picker'
onChangeText={(value: string) => {
const newValue: { [key: string]: string | number } = {};
newValue[key] = value;
this.setState({ customFields: { ...customFields, ...newValue } });
}}
onSubmitEditing={() => {
if (array.length - 1 > index) {
// @ts-ignore
return this[array[index + 1]].focus();
}
this.avatarUrl.focus();
}}
containerStyle={styles.inputContainer}
theme={theme}
/>
</RNPickerSelect>
);
}
return (
<TextInput
inputRef={(e: any) => {
// @ts-ignore
this[key] = e;
}}
key={key}
label={key}
placeholder={key}
value={customFields[key]}
onChangeText={(value: string) => {
const newValue: { [key: string]: string | number } = {};
newValue[key] = value;
this.setState({ customFields: { ...customFields, ...newValue } });
}}
onSubmitEditing={() => {
if (array.length - 1 > index) {
// @ts-ignore
return this[array[index + 1]].focus();
}
this.avatarUrl.focus();
}}
containerStyle={styles.inputContainer}
theme={theme}
/>
);
});
);
})}
</>
);
} catch (error) {
return null;
}
@ -235,7 +239,7 @@ class RegisterView extends React.Component<IProps, any> {
const { saving } = this.state;
const { theme, showLoginButton, navigation } = this.props;
return (
<FormContainer theme={theme} testID='register-view'>
<FormContainer testID='register-view'>
<FormContainerInner>
<LoginServices navigation={navigation} theme={theme} separator />
<Text style={[styles.title, sharedStyles.textBold, { color: themes[theme].titleText }]}>{I18n.t('Sign_Up')}</Text>

2
app/views/SendEmailConfirmationView.tsx
View File

@ -62,7 +62,7 @@ const SendEmailConfirmationView = ({ navigation, route }: ISendEmailConfirmation
}, []);
return (
<FormContainer theme={theme} testID='send-email-confirmation-view'>
<FormContainer testID='send-email-confirmation-view'>
<FormContainerInner>
<TextInput
autoFocus

2
app/views/WorkspaceView/index.tsx
View File

@ -74,7 +74,7 @@ class WorkspaceView extends React.Component<IWorkSpaceProp, any> {
const { theme, Site_Name, Site_Url, Assets_favicon_512, server, showLoginButton } = this.props;
return (
<FormContainer theme={theme} testID='workspace-view'>
<FormContainer testID='workspace-view'>
<FormContainerInner>
<View style={styles.alignItemsCenter}>
<ServerAvatar theme={theme} url={server} image={Assets_favicon_512?.url ?? Assets_favicon_512?.defaultUrl} />