Chore: Migrate ShareListView to Typescript

app/presentation/DirectoryItem/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, View } from 'react-native';
+import { Text, View, ViewStyle } from 'react-native';
 
 import Touch from '../../utils/touch';
 import Avatar from '../../containers/Avatar';
@@ -10,7 +10,7 @@ import { themes } from '../../constants/colors';
 export { ROW_HEIGHT };
 
 interface IDirectoryItemLabel {
-	text: string;
+	text?: string;
 	theme: string;
 }
 
@@ -21,9 +21,9 @@ interface IDirectoryItem {
 	type: string;
 	onPress(): void;
 	testID: string;
-	style: any;
-	rightLabel: string;
-	rid: string;
+	style?: ViewStyle;
+	rightLabel?: string;
+	rid?: string;
 	theme: string;
 	teamMain?: boolean;
 }
@@ -32,7 +32,7 @@ const DirectoryItemLabel = React.memo(({ text, theme }: IDirectoryItemLabel) =>
 	if (!text) {
 		return null;
 	}
-	return <Text style={[styles.directoryItemLabel, { color: themes[theme!].auxiliaryText }]}>{text}</Text>;
+	return <Text style={[styles.directoryItemLabel, { color: themes[theme].auxiliaryText }]}>{text}</Text>;
 });
 
 const DirectoryItem = ({

app/views/ShareListView/Header/Header.ios.js → app/views/ShareListView/Header/Header.ios.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
 import { Keyboard, StyleSheet, View } from 'react-native';
 import ShareExtension from 'rn-extensions-share';
 
@@ -8,6 +7,7 @@ import * as HeaderButton from '../../../containers/HeaderButton';
 import { themes } from '../../../constants/colors';
 import sharedStyles from '../../Styles';
 import { animateNextTransition } from '../../../utils/layoutAnimation';
+import { IShareListHeaderIos } from './interface';
 
 const styles = StyleSheet.create({
 	container: {
@@ -16,10 +16,10 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Header = React.memo(({ searching, onChangeSearchText, initSearch, cancelSearch, theme }) => {
+const Header = React.memo(({ searching, onChangeSearchText, initSearch, cancelSearch, theme }: IShareListHeaderIos) => {
 	const [text, setText] = useState('');
 
-	const onChangeText = searchText => {
+	const onChangeText = (searchText: string) => {
 		onChangeSearchText(searchText);
 		setText(searchText);
 	};
@@ -59,12 +59,4 @@ const Header = React.memo(({ searching, onChangeSearchText, initSearch, cancelSe
 	);
 });
 
-Header.propTypes = {
-	searching: PropTypes.bool,
-	onChangeSearchText: PropTypes.func,
-	initSearch: PropTypes.func,
-	cancelSearch: PropTypes.func,
-	theme: PropTypes.string
-};
-
 export default Header;

app/views/ShareListView/Header/Header.android.js → app/views/ShareListView/Header/Header.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import PropTypes from 'prop-types';
 
 import TextInput from '../../../presentation/TextInput';
 import I18n from '../../../i18n';
 import { themes } from '../../../constants/colors';
 import sharedStyles from '../../Styles';
+import { IShareListHeader } from './interface';
 
 const styles = StyleSheet.create({
 	container: {
@@ -24,7 +24,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Header = React.memo(({ searching, onChangeSearchText, theme }) => {
+const Header = React.memo(({ searching, onChangeSearchText, theme }: IShareListHeader) => {
 	const titleColorStyle = { color: themes[theme].headerTintColor };
 	const isLight = theme === 'light';
 	if (searching) {
@@ -43,10 +43,4 @@ const Header = React.memo(({ searching, onChangeSearchText, theme }) => {
 	return <Text style={[styles.title, titleColorStyle]}>{I18n.t('Send_to')}</Text>;
 });
 
-Header.propTypes = {
-	searching: PropTypes.bool,
-	onChangeSearchText: PropTypes.func,
-	theme: PropTypes.string
-};
-
 export default Header;

app/views/ShareListView/Header/index.js → app/views/ShareListView/Header/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import Header from './Header';
+import { IShareListHeader } from './interface';
 
-const ShareListHeader = React.memo(({ searching, initSearch, cancelSearch, search, theme }) => {
-	const onSearchChangeText = text => {
-		search(text.trim());
+const ShareListHeader = React.memo(({ searching, initSearch, cancelSearch, onChangeSearchText, theme }: IShareListHeader) => {
+	const onSearchChangeText = (text: string) => {
+		onChangeSearchText(text.trim());
 	};
 
 	return (
@@ -19,12 +19,4 @@ const ShareListHeader = React.memo(({ searching, initSearch, cancelSearch, searc
 	);
 });
 
-ShareListHeader.propTypes = {
-	searching: PropTypes.bool,
-	initSearch: PropTypes.func,
-	cancelSearch: PropTypes.func,
-	search: PropTypes.func,
-	theme: PropTypes.string
-};
-
 export default ShareListHeader;

app/views/ShareListView/Header/interface.ts

@@ -0,0 +1,13 @@
+import { TextInputProps } from 'react-native';
+
+type RequiredOnChangeText = Required<Pick<TextInputProps, 'onChangeText'>>;
+
+export interface IShareListHeader {
+	searching: boolean;
+	onChangeSearchText: RequiredOnChangeText['onChangeText'];
+	theme: string;
+	initSearch?: () => void;
+	cancelSearch?: () => void;
+}
+
+export type IShareListHeaderIos = Required<IShareListHeader>;