Chore: Clean Check component - TypeScript (#3919)

* chore: clear Check component

* chore: update tests

app/containers/Check.tsx

@@ -3,11 +3,8 @@ import { StyleSheet } from 'react-native';
 
 import { CustomIcon } from '../lib/Icons';
 import { themes } from '../constants/colors';
+import { useTheme } from '../theme';
 
-interface ICheck {
-	style?: object;
-	theme: string;
-}
 const styles = StyleSheet.create({
 	icon: {
 		width: 22,
@@ -16,8 +13,9 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Check = React.memo(({ theme, style }: ICheck) => (
-	<CustomIcon style={[styles.icon, style]} color={themes[theme].tintColor} size={22} name='check' />
-));
+const Check = React.memo(() => {
+	const { theme } = useTheme();
+	return <CustomIcon style={styles.icon} color={themes[theme].tintColor} size={22} name='check' />;
+});
 
 export default Check;

app/containers/UIKit/MultiSelect/Items.tsx

@@ -41,7 +41,7 @@ const Item = ({ item, selected, onSelect, theme }: IItem) => {
 			<>
 				{item.imageUrl ? <FastImage style={styles.itemImage} source={{ uri: item.imageUrl }} /> : null}
 				<Text style={{ color: themes[theme].titleText }}>{textParser([item.text])}</Text>
-				{selected ? <Check theme={theme} /> : null}
+				{selected ? <Check /> : null}
 			</>
 		</Touchable>
 	);

app/presentation/ServerItem/index.tsx

@@ -59,7 +59,7 @@ const ServerItem = React.memo(({ item, onPress, onLongPress, hasCheck, theme }:
 					{item.id}
 				</Text>
 			</View>
-			{hasCheck ? <Check theme={theme!} /> : null}
+			{hasCheck ? <Check /> : null}
 		</View>
 	</Pressable>
 ));

app/views/DirectoryView/Options.tsx

@@ -71,7 +71,7 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
 				<View style={styles.dropdownItemContainer}>
 					<CustomIcon style={[styles.dropdownItemIcon, { color: themes[theme].bodyText }]} size={22} name={icon} />
 					<Text style={[styles.dropdownItemText, { color: themes[theme].bodyText }]}>{I18n.t(text)}</Text>
-					{propType === itemType ? <Check theme={theme} /> : null}
+					{propType === itemType ? <Check /> : null}
 				</View>
 			</Touch>
 		);

storybook/stories/ServerItem.js

@@ -19,7 +19,18 @@ const item = {
 	iconURL: 'https://open.rocket.chat/images/logo/android-chrome-512x512.png'
 };
 
-const ServerItem = props => <ServerItemComponent item={item} hasCheck={false} {...props} />;
+const ServerItem = ({ theme = themes.light, ...props }) => (
+	<ThemeContext.Provider
+		value={{
+			theme,
+			themePreferences: {
+				currentTheme: theme,
+				darkLevel: theme
+			}
+		}}>
+		<ServerItemComponent item={item} hasCheck={false} {...props} />
+	</ThemeContext.Provider>
+);
 
 stories.add('content', () => (
 	<>
@@ -47,16 +58,10 @@ stories.add('touchable', () => (
 	</>
 ));
 
-const ThemeStory = ({ theme }) => (
-	<ThemeContext.Provider value={theme}>
-		<ServerItem theme={theme} hasCheck />
-	</ThemeContext.Provider>
-);
-
 stories.add('themes', () => (
 	<>
-		<ThemeStory theme={themes.light} />
-		<ThemeStory theme={themes.dark} />
-		<ThemeStory theme={themes.black} />
+		<ServerItem theme={themes.light} />
+		<ServerItem theme={themes.dark} />
+		<ServerItem theme={themes.black} />
 	</>
 ));