From 744712b8d58bcab85c8e518902bfdbdc0fbdd498 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Date: Fri, 25 Mar 2022 14:55:20 -0300 Subject: [PATCH] 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 --- app/containers/FormContainer.tsx | 46 ++++++------ app/views/ForgotPasswordView.tsx | 2 +- app/views/LoginView.tsx | 2 +- app/views/NewServerView/index.tsx | 2 +- app/views/RegisterView.tsx | 96 +++++++++++++------------ app/views/SendEmailConfirmationView.tsx | 2 +- app/views/WorkspaceView/index.tsx | 2 +- 7 files changed, 80 insertions(+), 72 deletions(-) diff --git a/app/containers/FormContainer.tsx b/app/containers/FormContainer.tsx index ff233952a..8c862b54d 100644 --- a/app/containers/FormContainer.tsx +++ b/app/containers/FormContainer.tsx @@ -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)[] }) => ( {children} ); -const FormContainer = ({ children, theme, testID, ...props }: IFormContainer): JSX.Element => ( - - - - - {children} - - - - -); +const FormContainer = ({ children, testID, ...props }: IFormContainer) => { + const { theme } = useTheme(); + + return ( + + + + + {children} + + + + + ); +}; export default FormContainer; diff --git a/app/views/ForgotPasswordView.tsx b/app/views/ForgotPasswordView.tsx index 375d089d4..0153f81fd 100644 --- a/app/views/ForgotPasswordView.tsx +++ b/app/views/ForgotPasswordView.tsx @@ -92,7 +92,7 @@ class ForgotPasswordView extends React.Component + {I18n.t('Forgot_password')} diff --git a/app/views/LoginView.tsx b/app/views/LoginView.tsx index d5b136dd5..0f66cba65 100644 --- a/app/views/LoginView.tsx +++ b/app/views/LoginView.tsx @@ -229,7 +229,7 @@ class LoginView extends React.Component { render() { const { Accounts_ShowFormLogin, theme, navigation } = this.props; return ( - + {this.renderUserForm()} diff --git a/app/views/NewServerView/index.tsx b/app/views/NewServerView/index.tsx index 51f20a980..50917ceb5 100644 --- a/app/views/NewServerView/index.tsx +++ b/app/views/NewServerView/index.tsx @@ -321,7 +321,7 @@ class NewServerView extends React.Component + { 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 ( - { - 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 ( + { + const newValue: { [key: string]: string | number } = {}; + newValue[key] = value; + this.setState({ customFields: { ...customFields, ...newValue } }); + }} + value={customFields[key]}> + { + // @ts-ignore + this[key] = e; + }} + placeholder={key} + value={customFields[key]} + testID='register-view-custom-picker' + theme={theme} + /> + + ); + } + + return ( { // @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} /> - - ); - } - - return ( - { - // @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 { const { saving } = this.state; const { theme, showLoginButton, navigation } = this.props; return ( - + {I18n.t('Sign_Up')} diff --git a/app/views/SendEmailConfirmationView.tsx b/app/views/SendEmailConfirmationView.tsx index a3aad4979..6fb1f008c 100644 --- a/app/views/SendEmailConfirmationView.tsx +++ b/app/views/SendEmailConfirmationView.tsx @@ -62,7 +62,7 @@ const SendEmailConfirmationView = ({ navigation, route }: ISendEmailConfirmation }, []); return ( - + { const { theme, Site_Name, Site_Url, Assets_favicon_512, server, showLoginButton } = this.props; return ( - +