Chore: Evaluate UiKit - TypeScript

app/containers/ReactionsModal.tsx

@@ -74,7 +74,7 @@ interface IItem {
 
 interface IModalContent {
 	message?: TMessageModel;
-	onClose: Function;
+	onClose: () => void;
 	theme: string;
 }
 

app/containers/SearchBox.tsx

@@ -57,14 +57,14 @@ interface ISearchBox {
 	onChangeText: TextInputProps['onChangeText'];
 	onSubmitEditing?: () => void;
 	hasCancel?: boolean;
-	onCancelPress?: Function;
+	onCancelPress?: () => void;
 	theme?: string;
 	inputRef?: React.Ref<RNTextInput>;
 	testID?: string;
 	onFocus?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
 }
 
-const CancelButton = (onCancelPress: Function, theme: string) => (
+const CancelButton = (onCancelPress: () => void, theme: string) => (
 	<Touchable onPress={onCancelPress} style={styles.cancel}>
 		<Text style={[styles.cancelText, { color: themes[theme].headerTintColor }]}>{I18n.t('Cancel')}</Text>
 	</Touchable>
@@ -104,7 +104,7 @@ const SearchBox = ({
 				{...props}
 			/>
 		</View>
-		{hasCancel ? CancelButton(onCancelPress!, theme!) : null}
+		{hasCancel && onCancelPress ? CancelButton(onCancelPress, theme!) : null}
 	</View>
 );
 

app/containers/TextInput.tsx

@@ -54,7 +54,7 @@ export interface IRCTextInputProps extends TextInputProps {
 	label?: string;
 	error?: {
 		error: any;
-		reason: any;
+		reason?: any;
 	};
 	loading?: boolean;
 	containerStyle?: StyleProp<ViewStyle>;

app/containers/UIKit/Actions.tsx

@@ -4,8 +4,10 @@ import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 import Button from '../Button';
 import I18n from '../../i18n';
 import { IActions } from './interfaces';
+import { useTheme } from '../../theme';
 
-export const Actions = ({ blockId, appId, elements, parser, theme }: IActions) => {
+export const Actions = ({ blockId, appId, elements, parser }: IActions) => {
+	const { theme } = useTheme();
 	const [showMoreVisible, setShowMoreVisible] = useState(() => elements && elements.length > 5);
 	const renderedElements = showMoreVisible ? elements?.slice(0, 5) : elements;
 

app/containers/UIKit/DatePicker.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import DateTimePicker from '@react-native-community/datetimepicker';
+import DateTimePicker, { Event } from '@react-native-community/datetimepicker';
 import Touchable from 'react-native-platform-touchable';
 import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 import moment from 'moment';
@@ -11,6 +11,7 @@ import { themes } from '../../constants/colors';
 import sharedStyles from '../../views/Styles';
 import { CustomIcon } from '../../lib/Icons';
 import { isAndroid } from '../../utils/deviceInfo';
+import { useTheme } from '../../theme';
 import ActivityIndicator from '../ActivityIndicator';
 import { IDatePicker } from './interfaces';
 
@@ -36,14 +37,17 @@ const styles = StyleSheet.create({
 	}
 });
 
-export const DatePicker = ({ element, language, action, context, theme, loading, value, error }: IDatePicker) => {
+export const DatePicker = ({ element, language, action, context, loading, value, error }: IDatePicker) => {
+	const { theme } = useTheme();
 	const [show, onShow] = useState(false);
 	const initial_date = element?.initial_date;
 	const placeholder = element?.placeholder;
 
 	const [currentDate, onChangeDate] = useState(new Date(initial_date || value));
 
-	const onChange = ({ nativeEvent: { timestamp } }: any, date: any) => {
+	// timestamp as number exists in Event
+	// @ts-ignore
+	const onChange = ({ nativeEvent: { timestamp } }: Event, date?: Date) => {
 		const newDate = date || new Date(timestamp);
 		onChangeDate(newDate);
 		action({ value: moment(newDate).format('YYYY-MM-DD') });
@@ -52,7 +56,9 @@ export const DatePicker = ({ element, language, action, context, theme, loading,
 		}
 	};
 
-	let button = <Button title={textParser([placeholder])} onPress={() => onShow(!show)} loading={loading} theme={theme} />;
+	let button = placeholder ? (
+		<Button title={textParser([placeholder])} onPress={() => onShow(!show)} loading={loading} theme={theme} />
+	) : null;
 
 	if (context === BLOCK_CONTEXT.FORM) {
 		button = (

app/containers/UIKit/Image.tsx

@@ -6,7 +6,7 @@ import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 import ImageContainer from '../message/Image';
 import Navigation from '../../lib/Navigation';
 import { IThumb, IImage, IElement } from './interfaces';
-import { TThemeMode } from '../../definitions/ITheme';
+import { IAttachment } from '../../definitions';
 
 const styles = StyleSheet.create({
 	image: {
@@ -27,23 +27,22 @@ export const Thumb = ({ element, size = 88 }: IThumb) => (
 	<FastImage style={[{ width: size, height: size }, styles.image]} source={{ uri: element?.imageUrl }} />
 );
 
-export const Media = ({ element, theme }: IImage) => {
-	const showAttachment = (attachment: any) => Navigation.navigate('AttachmentView', { attachment });
+export const Media = ({ element }: IImage) => {
+	const showAttachment = (attachment: IAttachment) => Navigation.navigate('AttachmentView', { attachment });
 	const imageUrl = element?.imageUrl ?? '';
-	// @ts-ignore
-	// TODO: delete ts-ignore after refactor Markdown and ImageContainer
-	return <ImageContainer file={{ image_url: imageUrl }} imageUrl={imageUrl} showAttachment={showAttachment} theme={theme} />;
+
+	return <ImageContainer file={{ image_url: imageUrl }} imageUrl={imageUrl} showAttachment={showAttachment} />;
 };
 
-const genericImage = (theme: TThemeMode, element: IElement, context?: number) => {
+const genericImage = (element: IElement, context?: number) => {
 	switch (context) {
 		case BLOCK_CONTEXT.SECTION:
 			return <Thumb element={element} />;
 		case BLOCK_CONTEXT.CONTEXT:
 			return <ThumbContext element={element} />;
 		default:
-			return <Media element={element} theme={theme} />;
+			return <Media element={element} />;
 	}
 };
 
-export const Image = ({ element, context, theme }: IImage) => genericImage(theme, element, context);
+export const Image = ({ element, context }: IImage) => genericImage(element, context);

app/containers/UIKit/MultiSelect/Chips.tsx

@@ -7,26 +7,23 @@ import { themes } from '../../../constants/colors';
 import { textParser } from '../utils';
 import { CustomIcon } from '../../../lib/Icons';
 import styles from './styles';
+import { IItemData } from '.';
 
 interface IChip {
-	item: {
-		value: string;
-		imageUrl: string;
-		text: string;
-	};
-	onSelect: Function;
+	item: IItemData;
+	onSelect: (item: IItemData) => void;
 	style?: object;
 	theme: string;
 }
 
 interface IChips {
-	items: [];
-	onSelect: Function;
+	items: IItemData[];
+	onSelect: (item: IItemData) => void;
 	style?: object;
 	theme: string;
 }
 
-const keyExtractor = (item: any) => item.value.toString();
+const keyExtractor = (item: IItemData) => item.value.toString();
 
 const Chip = ({ item, onSelect, style, theme }: IChip) => (
 	<Touchable

app/containers/UIKit/MultiSelect/Input.tsx

@@ -9,10 +9,10 @@ import styles from './styles';
 
 interface IInput {
 	children?: JSX.Element;
-	onPress: Function;
+	onPress: () => void;
 	theme: string;
 	inputStyle?: object;
-	disabled?: boolean | object;
+	disabled?: boolean | null;
 	placeholder?: string;
 	loading?: boolean;
 	innerInputStyle?: object;

app/containers/UIKit/MultiSelect/Items.tsx

@@ -8,34 +8,31 @@ import * as List from '../../List';
 import { textParser } from '../utils';
 import { themes } from '../../../constants/colors';
 import styles from './styles';
+import { IItemData } from '.';
 
 interface IItem {
-	item: {
-		value: { name: string };
-		text: { text: string };
-		imageUrl: string;
-	};
-	selected: any;
+	item: IItemData;
+	selected?: string;
 	onSelect: Function;
 	theme: string;
 }
 
 interface IItems {
-	items: [];
-	selected: [];
+	items: IItemData[];
+	selected: string[];
 	onSelect: Function;
 	theme: string;
 }
 
-const keyExtractor = (item: any) => item.value.toString();
+const keyExtractor = (item: IItemData) => item.value.toString();
 
 // RectButton doesn't work on modal (Android)
 const Item = ({ item, selected, onSelect, theme }: IItem) => {
-	const itemName = item.value.name || item.text.text.toLowerCase();
+	const itemName = item.value || item.text.text.toLowerCase();
 	return (
 		<Touchable
 			testID={`multi-select-item-${itemName}`}
-			key={item}
+			key={itemName}
 			onPress={() => onSelect(item)}
 			style={[styles.item, { backgroundColor: themes[theme].backgroundColor }]}>
 			<>

app/containers/UIKit/MultiSelect/index.tsx

@@ -1,5 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { Animated, Easing, KeyboardAvoidingView, Modal, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
+import {
+	Animated,
+	Easing,
+	KeyboardAvoidingView,
+	Modal,
+	StyleSheet,
+	Text,
+	TouchableWithoutFeedback,
+	View,
+	TextStyle
+} from 'react-native';
 import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 
 import Button from '../../Button';
@@ -8,26 +18,31 @@ import { textParser } from '../utils';
 import { themes } from '../../../constants/colors';
 import I18n from '../../../i18n';
 import { isIOS } from '../../../utils/deviceInfo';
+import { useTheme } from '../../../theme';
+import { BlockContext, IText } from '../interfaces';
 import Chips from './Chips';
 import Items from './Items';
 import Input from './Input';
 import styles from './styles';
 
+export interface IItemData {
+	value: string;
+	text: { text: string };
+	imageUrl?: string;
+}
+
 interface IMultiSelect {
-	options: any[];
+	options?: IItemData[];
 	onChange: Function;
-	placeholder: {
-		text: string;
-	};
-	context?: number;
+	placeholder?: IText;
+	context?: BlockContext;
 	loading?: boolean;
 	multiselect?: boolean;
 	onSearch?: () => void;
 	onClose?: () => void;
-	inputStyle?: object;
+	inputStyle?: TextStyle;
 	value?: any[];
-	disabled?: boolean | object;
-	theme: string;
+	disabled?: boolean | null;
 	innerInputStyle?: object;
 }
 
@@ -54,9 +69,9 @@ export const MultiSelect = React.memo(
 		onClose = () => {},
 		disabled,
 		inputStyle,
-		theme,
 		innerInputStyle
 	}: IMultiSelect) => {
+		const { theme } = useTheme();
 		const [selected, select] = useState<any>(Array.isArray(values) ? values : []);
 		const [open, setOpen] = useState(false);
 		const [search, onSearchChange] = useState('');
@@ -95,7 +110,7 @@ export const MultiSelect = React.memo(
 			}).start(() => setShowContent(false));
 		};
 
-		const onSelect = (item: any) => {
+		const onSelect = (item: IItemData) => {
 			const {
 				value,
 				text: { text }

app/containers/UIKit/Overflow.tsx

@@ -6,6 +6,7 @@ import Touchable from 'react-native-platform-touchable';
 import { CustomIcon } from '../../lib/Icons';
 import ActivityIndicator from '../ActivityIndicator';
 import { themes } from '../../constants/colors';
+import { useTheme } from '../../theme';
 import { BUTTON_HIT_SLOP } from '../message/utils';
 import * as List from '../List';
 import { IOption, IOptions, IOverflow } from './interfaces';
@@ -43,9 +44,10 @@ const Options = ({ options, onOptionPress, parser, theme }: IOptions) => (
 	/>
 );
 
-const touchable: { [key: string]: any } = {};
+const touchable: { [key: string]: Touchable | null } = {};
 
-export const Overflow = ({ element, loading, action, parser, theme }: IOverflow) => {
+export const Overflow = ({ element, loading, action, parser }: IOverflow) => {
+	const { theme } = useTheme();
 	const options = element?.options || [];
 	const blockId = element?.blockId || '';
 	const [show, onShow] = useState(false);
@@ -58,7 +60,7 @@ export const Overflow = ({ element, loading, action, parser, theme }: IOverflow)
 	return (
 		<>
 			<Touchable
-				ref={(ref: any) => (touchable[blockId] = ref)}
+				ref={ref => (touchable[blockId] = ref)}
 				background={Touchable.Ripple(themes[theme].bannerBackground)}
 				onPress={() => onShow(!show)}
 				hitSlop={BUTTON_HIT_SLOP}
@@ -71,6 +73,7 @@ export const Overflow = ({ element, loading, action, parser, theme }: IOverflow)
 			</Touchable>
 			<Popover
 				isVisible={show}
+				// fromView exists in Popover Component
 				/* @ts-ignore*/
 				fromView={touchable[blockId]}
 				onRequestClose={() => onShow(false)}>

app/containers/UIKit/Section.tsx

@@ -4,6 +4,7 @@ import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 
 import { themes } from '../../constants/colors';
 import { IAccessoryComponent, IFields, ISection } from './interfaces';
+import { useTheme } from '../../theme';
 
 const styles = StyleSheet.create({
 	content: {
@@ -37,10 +38,14 @@ const Fields = ({ fields, parser, theme }: IFields) => (
 
 const accessoriesRight = ['image', 'overflow'];
 
-export const Section = ({ blockId, appId, text, fields, accessory, parser, theme }: ISection) => (
-	<View style={[styles.content, accessory && accessoriesRight.includes(accessory.type) ? styles.row : styles.column]}>
-		{text ? <View style={styles.text}>{parser.text(text)}</View> : null}
-		{fields ? <Fields fields={fields} theme={theme} parser={parser} /> : null}
-		{accessory ? <Accessory element={{ blockId, appId, ...accessory }} parser={parser} /> : null}
-	</View>
-);
+export const Section = ({ blockId, appId, text, fields, accessory, parser }: ISection) => {
+	const { theme } = useTheme();
+
+	return (
+		<View style={[styles.content, accessory && accessoriesRight.includes(accessory.type) ? styles.row : styles.column]}>
+			{text ? <View style={styles.text}>{parser.text(text)}</View> : null}
+			{fields ? <Fields fields={fields} theme={theme} parser={parser} /> : null}
+			{accessory ? <Accessory element={{ blockId, appId, ...accessory }} parser={parser} /> : null}
+		</View>
+	);
+};