From e8d23791d3f22fa9c4b97090602eb4466d1c1550 Mon Sep 17 00:00:00 2001
From: Gerzon Z <gerzonzcanario@gmail.com>
Date: Tue, 22 Mar 2022 14:01:54 -0400
Subject: [PATCH] Chore: Evaluate TextInput - TypeScript (#3908)

* update `TextInput` component

update: ActivityIndicator

* remove: `any`

* update: `TextInput` on `UIKit`

* Fix returnKeyType

Co-authored-by: Diego Mello <diegolmello@gmail.com>
---
 app/containers/MessageBox/index.tsx        |  5 ++---
 app/containers/TextInput.tsx               | 13 +++++++------
 app/containers/UIKit/MultiSelect/index.tsx |  1 -
 app/containers/UIKit/index.tsx             |  6 ++----
 app/presentation/TextInput.tsx             |  2 +-
 app/views/CreateDiscussionView/index.tsx   |  1 -
 app/views/RegisterView.tsx                 |  2 +-
 7 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/app/containers/MessageBox/index.tsx b/app/containers/MessageBox/index.tsx
index 058cf0d4b..d68bf8d27 100644
--- a/app/containers/MessageBox/index.tsx
+++ b/app/containers/MessageBox/index.tsx
@@ -9,7 +9,7 @@ import { Q } from '@nozbe/watermelondb';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 
 import { generateTriggerId } from '../../lib/methods/actions';
-import TextInput from '../../presentation/TextInput';
+import TextInput, { IThemedTextInput } from '../../presentation/TextInput';
 import { userTyping as userTypingAction } from '../../actions/room';
 import RocketChat from '../../lib/rocketchat';
 import styles from './styles';
@@ -1038,7 +1038,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 			tmid
 		} = this.props;
 
-		const isAndroidTablet =
+		const isAndroidTablet: Partial<IThemedTextInput> =
 			isTablet && isAndroid
 				? {
 						multiline: false,
@@ -1090,7 +1090,6 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 				<TextInput
 					ref={component => (this.component = component)}
 					style={[styles.textBoxInput, { color: themes[theme].bodyText }]}
-					// @ts-ignore
 					returnKeyType='default'
 					keyboardType='twitter'
 					blurOnSubmit={false}
diff --git a/app/containers/TextInput.tsx b/app/containers/TextInput.tsx
index 1ec1f1e19..0224a6ef5 100644
--- a/app/containers/TextInput.tsx
+++ b/app/containers/TextInput.tsx
@@ -52,10 +52,7 @@ const styles = StyleSheet.create({
 
 export interface IRCTextInputProps extends TextInputProps {
 	label?: string;
-	error?: {
-		error: any;
-		reason: any;
-	};
+	error?: any;
 	loading?: boolean;
 	containerStyle?: StyleProp<ViewStyle>;
 	inputStyle?: StyleProp<TextStyle>;
@@ -68,7 +65,11 @@ export interface IRCTextInputProps extends TextInputProps {
 	theme: string;
 }
 
-export default class RCTextInput extends React.PureComponent<IRCTextInputProps, any> {
+interface IRCTextInputState {
+	showPassword: boolean;
+}
+
+export default class RCTextInput extends React.PureComponent<IRCTextInputProps, IRCTextInputState> {
 	static defaultProps = {
 		error: {},
 		theme: 'light'
@@ -120,7 +121,7 @@ export default class RCTextInput extends React.PureComponent<IRCTextInputProps,
 	}
 
 	tooglePassword = () => {
-		this.setState((prevState: any) => ({ showPassword: !prevState.showPassword }));
+		this.setState(prevState => ({ showPassword: !prevState.showPassword }));
 	};
 
 	render() {
diff --git a/app/containers/UIKit/MultiSelect/index.tsx b/app/containers/UIKit/MultiSelect/index.tsx
index 1853b4028..1038d4777 100644
--- a/app/containers/UIKit/MultiSelect/index.tsx
+++ b/app/containers/UIKit/MultiSelect/index.tsx
@@ -126,7 +126,6 @@ export const MultiSelect = React.memo(
 					<View style={[styles.content, { backgroundColor: themes[theme].backgroundColor }]}>
 						<TextInput
 							testID='multi-select-search'
-							/* @ts-ignore*/
 							onChangeText={onSearch || onSearchChange}
 							placeholder={I18n.t('Search')}
 							theme={theme}
diff --git a/app/containers/UIKit/index.tsx b/app/containers/UIKit/index.tsx
index f53ffbead..77c660967 100644
--- a/app/containers/UIKit/index.tsx
+++ b/app/containers/UIKit/index.tsx
@@ -187,16 +187,14 @@ class ModalParser extends UiKitParserModal {
 		return (
 			// @ts-ignore
 			<TextInput
-				id={actionId}
+				key={actionId}
 				placeholder={plainText(placeholder)}
-				onInput={action}
 				multiline={multiline}
 				loading={loading}
-				onChangeText={(text: any) => action({ value: text })}
+				onChangeText={text => action({ value: text })}
 				inputStyle={multiline && styles.multiline}
 				containerStyle={styles.input}
 				value={value}
-				// @ts-ignore
 				error={{ error }}
 				theme={theme}
 			/>
diff --git a/app/presentation/TextInput.tsx b/app/presentation/TextInput.tsx
index 6b6e61a9e..6f1ac31b3 100644
--- a/app/presentation/TextInput.tsx
+++ b/app/presentation/TextInput.tsx
@@ -10,7 +10,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IThemedTextInput extends IRCTextInputProps {
+export interface IThemedTextInput extends IRCTextInputProps {
 	style: StyleProp<TextStyle>;
 	theme: string;
 }
diff --git a/app/views/CreateDiscussionView/index.tsx b/app/views/CreateDiscussionView/index.tsx
index 34cebd894..e57095b80 100644
--- a/app/views/CreateDiscussionView/index.tsx
+++ b/app/views/CreateDiscussionView/index.tsx
@@ -175,7 +175,6 @@ class CreateChannelView extends React.Component<ICreateChannelViewProps, any> {
 							testID='multi-select-discussion-name'
 							placeholder={I18n.t('A_meaningful_name_for_the_discussion_room')}
 							containerStyle={styles.inputStyle}
-							/* @ts-ignore*/
 							defaultValue={name}
 							onChangeText={(text: string) => this.setState({ name: text })}
 							theme={theme}
diff --git a/app/views/RegisterView.tsx b/app/views/RegisterView.tsx
index a4f1d025d..9d2023fb4 100644
--- a/app/views/RegisterView.tsx
+++ b/app/views/RegisterView.tsx
@@ -186,7 +186,7 @@ class RegisterView extends React.Component<IProps, any> {
 							}}
 							value={customFields[key]}>
 							<TextInput
-								inputRef={(e: any) => {
+								inputRef={e => {
 									// @ts-ignore
 									this[key] = e;
 								}}