[IMPROVE] - migrating the UIKit container (in progress)

app/containers/Check.tsx

@@ -5,7 +5,7 @@ import { CustomIcon } from '../lib/Icons';
 import { themes } from '../constants/colors';
 
 type TCheck = {
-	style: object,
+	style?: object,
 	theme: string
 }
 const styles = StyleSheet.create({

app/containers/UIKit/MultiSelect/Chips.tsx

@@ -10,11 +10,28 @@ import { CustomIcon } from '../../../lib/Icons';
 
 import styles from './styles';
 
-const keyExtractor = item => item.value.toString();
+type TChip = {
+	item: {
+		value: string;
+		imageUrl: string;
+		text: string
+	};
+	onSelect: Function;
+	style: object;
+	theme: string;
+}
 
-const Chip = ({
+interface IChips {
-	item, onSelect, style, theme
+	items: [];
-}) => (
+	onSelect: Function;
+	style: object;
+	theme: string;
+}
+
+
+const keyExtractor = (item: any) => item.value.toString();
+
+const Chip = ({ item, onSelect, style, theme }: TChip) => (
 	<Touchable
 		key={item.value}
 		onPress={() => onSelect(item)}
@@ -29,24 +46,13 @@ const Chip = ({
 	</Touchable>
 );
 Chip.propTypes = {
-	item: PropTypes.object,
+
-	onSelect: PropTypes.func,
-	style: PropTypes.object,
-	theme: PropTypes.string
 };
 
-const Chips = ({
+const Chips = ({ items, onSelect, style, theme }: IChips) => (
-	items, onSelect, style, theme
-}) => (
 	<View style={styles.chips}>
 		{items.map(item => <Chip key={keyExtractor(item)} item={item} onSelect={onSelect} style={style} theme={theme} />)}
 	</View>
 );
-Chips.propTypes = {
-	items: PropTypes.array,
-	onSelect: PropTypes.func,
-	style: PropTypes.object,
-	theme: PropTypes.string
-};
 
 export default Chips;

app/containers/UIKit/MultiSelect/Input.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { View, Text } from 'react-native';
-import PropTypes from 'prop-types';
 import Touchable from 'react-native-platform-touchable';
 
 import { CustomIcon } from '../../../lib/Icons';
@@ -8,9 +7,19 @@ import { themes } from '../../../constants/colors';
 import ActivityIndicator from '../../ActivityIndicator';
 import styles from './styles';
 
+interface IInput {
+	children: JSX.Element;
+	onPress: Function;
+	theme: string;
+	inputStyle: object;
+	disabled: boolean;
+	placeholder: string;
+	loading: boolean;
+}
+
 const Input = ({
 	children, onPress, theme, loading, inputStyle, placeholder, disabled
-}) => (
+}: IInput) => (
 	<Touchable
 		onPress={onPress}
 		style={[{ backgroundColor: themes[theme].backgroundColor }, inputStyle]}
@@ -27,14 +36,5 @@ const Input = ({
 		</View>
 	</Touchable>
 );
-Input.propTypes = {
-	children: PropTypes.node,
-	onPress: PropTypes.func,
-	theme: PropTypes.string,
-	inputStyle: PropTypes.object,
-	disabled: PropTypes.bool,
-	placeholder: PropTypes.string,
-	loading: PropTypes.bool
-};
 
 export default Input;

app/containers/UIKit/MultiSelect/Items.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Text, FlatList } from 'react-native';
-import PropTypes from 'prop-types';
 import Touchable from 'react-native-platform-touchable';
 import FastImage from '@rocket.chat/react-native-fast-image';
 
@@ -11,12 +10,28 @@ import { themes } from '../../../constants/colors';
 
 import styles from './styles';
 
-const keyExtractor = item => item.value.toString();
+type TItem = {
+	item: {
+		value: { name: string; };
+		text: { text: string; };
+		imageUrl: string;
+	};
+	selected: any;
+	onSelect: Function;
+	theme: string;
+};
+
+interface IItems {
+	items: [];
+	selected: [];
+	onSelect: Function;
+	theme: string;
+}
+
+const keyExtractor = (item: any) => item.value.toString();
 
 // RectButton doesn't work on modal (Android)
-const Item = ({
+const Item = ({ item, selected, onSelect, theme }: TItem) => {
-	item, selected, onSelect, theme
-}) => {
 	const itemName = item.value.name || item.text.text.toLowerCase();
 	return (
 		<Touchable
@@ -36,16 +51,8 @@ const Item = ({
 		</Touchable>
 	);
 };
-Item.propTypes = {
-	item: PropTypes.object,
-	selected: PropTypes.number,
-	onSelect: PropTypes.func,
-	theme: PropTypes.string
-};
 
-const Items = ({
+const Items = ({ items, selected, onSelect, theme }: IItems) => (
-	items, selected, onSelect, theme
-}) => (
 	<FlatList
 		data={items}
 		style={[styles.items, { backgroundColor: themes[theme].backgroundColor }]}
@@ -56,11 +63,5 @@ const Items = ({
 		renderItem={({ item }) => <Item item={item} onSelect={onSelect} theme={theme} selected={selected.find(s => s === item.value)} />}
 	/>
 );
-Items.propTypes = {
-	items: PropTypes.array,
-	selected: PropTypes.array,
-	onSelect: PropTypes.func,
-	theme: PropTypes.string
-};
 
 export default Items;

app/containers/UIKit/MultiSelect/index.tsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import {
 	View, Text, TouchableWithoutFeedback, Modal, KeyboardAvoidingView, Animated, Easing, StyleSheet
 } from 'react-native';
-import PropTypes from 'prop-types';
 import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 
 import Button from '../../Button';
@@ -19,6 +18,21 @@ import Input from './Input';
 
 import styles from './styles';
 
+interface IMultiSelect {
+	options: [];
+	onChange: Function;
+	placeholder: object;
+	context: number;
+	loading: boolean;
+	multiselect: boolean;
+	onSearch: Function;
+	onClose: Function;
+	inputStyle: object;
+	value: [];
+	disabled: boolean;
+	theme: string;
+}
+
 const ANIMATION_DURATION = 200;
 const ANIMATION_PROPS = {
 	duration: ANIMATION_DURATION,
@@ -42,7 +56,7 @@ export const MultiSelect = React.memo(({
 	disabled,
 	inputStyle,
 	theme
-}) => {
+}: IMultiSelect) => {
 	const [selected, select] = useState(Array.isArray(values) ? values : []);
 	const [open, setOpen] = useState(false);
 	const [search, onSearchChange] = useState('');
@@ -186,20 +200,3 @@ export const MultiSelect = React.memo(({
 		</>
 	);
 });
-MultiSelect.propTypes = {
-	options: PropTypes.array,
-	onChange: PropTypes.func,
-	placeholder: PropTypes.object,
-	context: PropTypes.number,
-	loading: PropTypes.bool,
-	multiselect: PropTypes.bool,
-	onSearch: PropTypes.func,
-	onClose: PropTypes.func,
-	inputStyle: PropTypes.object,
-	value: PropTypes.array,
-	disabled: PropTypes.bool,
-	theme: PropTypes.string
-};
-MultiSelect.defaultProps = {
-	onClose: () => {}
-};