Unverified Commit 2946c472 authored by Gerzon Z's avatar Gerzon Z Committed by GitHub
Browse files

[FIX] TypeScript's errors raised by HOCs (#3535)


Co-authored-by: default avatarAlexAlexandre <alexalexandrejr@gmail.com>
Co-authored-by: default avatarDiego Mello <diegolmello@gmail.com>
parent 11af3503
......@@ -3,7 +3,7 @@ import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { connect } from 'react-redux';
import { SetUsernameStackParamList, StackParamList } from './navigationTypes';
import { SetUsernameStackParamList, StackParamList } from './definitions/navigationTypes';
import Navigation from './lib/Navigation';
import { defaultHeader, getActiveRouteName, navigationTheme } from './utils/navigation';
import { ROOT_INSIDE, ROOT_LOADING, ROOT_OUTSIDE, ROOT_SET_USERNAME } from './actions/app';
......
......@@ -6,9 +6,9 @@ import sharedStyles from '../../views/Styles';
import { themes } from '../../constants/colors';
interface IBackgroundContainer {
text: string;
theme: string;
loading: boolean;
text?: string;
theme?: string;
loading?: boolean;
}
const styles = StyleSheet.create({
......@@ -35,8 +35,8 @@ const styles = StyleSheet.create({
const BackgroundContainer = ({ theme, text, loading }: IBackgroundContainer) => (
<View style={styles.container}>
<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
{text ? <Text style={[styles.text, { color: themes[theme].auxiliaryTintColor }]}>{text}</Text> : null}
{loading ? <ActivityIndicator style={styles.text} color={themes[theme].auxiliaryTintColor} /> : null}
{text ? <Text style={[styles.text, { color: themes[theme!].auxiliaryTintColor }]}>{text}</Text> : null}
{loading ? <ActivityIndicator style={styles.text} color={themes[theme!].auxiliaryTintColor} /> : null}
</View>
);
......
......@@ -29,9 +29,9 @@ export const CloseModal = React.memo(
export const CancelModal = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
<Container left>
{isIOS ? (
<Item title={I18n.t('Cancel')} onPress={onPress} testID={testID} />
<Item title={I18n.t('Cancel')} onPress={onPress!} testID={testID} />
) : (
<Item iconName='close' onPress={onPress} testID={testID} />
<Item iconName='close' onPress={onPress!} testID={testID} />
)}
</Container>
));
......@@ -39,19 +39,19 @@ export const CancelModal = React.memo(({ onPress, testID }: Partial<IHeaderButto
// Right
export const More = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
<Container>
<Item iconName='kebab' onPress={onPress} testID={testID} />
<Item iconName='kebab' onPress={onPress!} testID={testID} />
</Container>
));
export const Download = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => (
<Container>
<Item iconName='download' onPress={onPress} testID={testID} {...props} />
<Item iconName='download' onPress={onPress!} testID={testID} {...props} />
</Container>
));
export const Preferences = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => (
<Container>
<Item iconName='settings' onPress={onPress} testID={testID} {...props} />
<Item iconName='settings' onPress={onPress!} testID={testID} {...props} />
</Container>
));
......
......@@ -8,12 +8,12 @@ import { themes } from '../../constants/colors';
import sharedStyles from '../../views/Styles';
interface IHeaderButtonItem {
title: string;
iconName: string;
onPress(): void;
testID: string;
theme: string;
badge(): void;
title?: string;
iconName?: string;
onPress: <T>(arg: T) => void;
testID?: string;
theme?: string;
badge?(): void;
}
export const BUTTON_HIT_SLOP = {
......@@ -44,9 +44,9 @@ const Item = ({ title, iconName, onPress, testID, theme, badge }: IHeaderButtonI
<Touchable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} style={styles.container}>
<>
{iconName ? (
<CustomIcon name={iconName} size={24} color={themes[theme].headerTintColor} />
<CustomIcon name={iconName} size={24} color={themes[theme!].headerTintColor} />
) : (
<Text style={[styles.title, { color: themes[theme].headerTintColor }]}>{title}</Text>
<Text style={[styles.title, { color: themes[theme!].headerTintColor }]}>{title}</Text>
)}
{badge ? badge() : null}
</>
......
......@@ -11,10 +11,10 @@ const styles = StyleSheet.create({
});
interface IListContainer {
children: JSX.Element;
children: React.ReactNode;
testID?: string;
}
const ListContainer = React.memo(({ children, ...props }: IListContainer) => (
// @ts-ignore
<ScrollView
contentContainerStyle={styles.container}
scrollIndicatorInsets={{ right: 1 }} // https://github.com/facebook/react-native/issues/26610#issuecomment-539843444
......
......@@ -20,13 +20,13 @@ const styles = StyleSheet.create({
interface IListHeader {
title: string;
theme: string;
translateTitle: boolean;
theme?: string;
translateTitle?: boolean;
}
const ListHeader = React.memo(({ title, theme, translateTitle = true }: IListHeader) => (
<View style={styles.container}>
<Text style={[styles.title, { color: themes[theme].infoText }]} numberOfLines={1}>
<Text style={[styles.title, { color: themes[theme!].infoText }]} numberOfLines={1}>
{translateTitle ? I18n.t(title) : title}
</Text>
</View>
......
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
import { themes } from '../../constants/colors';
import { CustomIcon } from '../../lib/Icons';
......@@ -7,11 +7,11 @@ import { withTheme } from '../../theme';
import { ICON_SIZE } from './constants';
interface IListIcon {
theme: string;
theme?: string;
name: string;
color: string;
style: object;
testID: string;
color?: string;
style?: StyleProp<ViewStyle>;
testID?: string;
}
const styles = StyleSheet.create({
......@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
const ListIcon = React.memo(({ theme, name, color, style, testID }: IListIcon) => (
<View style={[styles.icon, style]}>
<CustomIcon name={name} color={color ?? themes[theme].auxiliaryText} size={ICON_SIZE} testID={testID} />
<CustomIcon name={name} color={color ?? themes[theme!].auxiliaryText} size={ICON_SIZE} testID={testID} />
</View>
));
......
......@@ -20,13 +20,13 @@ const styles = StyleSheet.create({
interface IListHeader {
info: string;
theme: string;
translateInfo: boolean;
theme?: string;
translateInfo?: boolean;
}
const ListInfo = React.memo(({ info, theme, translateInfo = true }: IListHeader) => (
<View style={styles.container}>
<Text style={[styles.text, { color: themes[theme].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
<Text style={[styles.text, { color: themes[theme!].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
</View>
));
......
......@@ -56,11 +56,11 @@ const styles = StyleSheet.create({
interface IListItemContent {
title?: string;
subtitle?: string;
left?: Function;
right?: Function;
left?: () => JSX.Element | null;
right?: () => JSX.Element | null;
disabled?: boolean;
testID?: string;
theme: string;
theme?: string;
color?: string;
translateTitle?: boolean;
translateSubtitle?: boolean;
......@@ -89,15 +89,15 @@ const Content = React.memo(
{left ? <View style={styles.leftContainer}>{left()}</View> : null}
<View style={styles.textContainer}>
<View style={styles.textAlertContainer}>
<Text style={[styles.title, { color: color || themes[theme].titleText }]} numberOfLines={1}>
<Text style={[styles.title, { color: color || themes[theme!].titleText }]} numberOfLines={1}>
{translateTitle ? I18n.t(title) : title}
</Text>
{alert ? (
<CustomIcon style={[styles.alertIcon, { color: themes[theme].dangerColor }]} size={ICON_SIZE} name='info' />
<CustomIcon style={[styles.alertIcon, { color: themes[theme!].dangerColor }]} size={ICON_SIZE} name='info' />
) : null}
</View>
{subtitle ? (
<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
<Text style={[styles.subtitle, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
{translateSubtitle ? I18n.t(subtitle) : subtitle}
</Text>
) : null}
......@@ -112,38 +112,39 @@ const Content = React.memo(
)
);
interface IListItemButton {
interface IListButtonPress {
onPress?: Function;
}
interface IListItemButton extends IListButtonPress {
title?: string;
onPress: Function;
disabled?: boolean;
theme: string;
backgroundColor: string;
theme?: string;
backgroundColor?: string;
underlayColor?: string;
}
const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => (
const Button = React.memo<IListItemButton>(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => (
<Touch
onPress={() => onPress(props.title)}
style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
onPress={() => onPress!(props.title)}
style={{ backgroundColor: backgroundColor || themes[props.theme!].backgroundColor }}
underlayColor={underlayColor}
enabled={!props.disabled}
theme={props.theme}>
theme={props.theme!}>
<Content {...props} />
</Touch>
));
interface IListItem {
onPress: Function;
theme: string;
backgroundColor: string;
interface IListItem extends IListItemContent, IListButtonPress {
backgroundColor?: string;
}
const ListItem = React.memo(({ ...props }: IListItem) => {
const ListItem = React.memo<IListItem>(({ ...props }: IListItem) => {
if (props.onPress) {
return <Button {...props} />;
}
return (
<View style={{ backgroundColor: props.backgroundColor || themes[props.theme].backgroundColor }}>
<View style={{ backgroundColor: props.backgroundColor || themes[props.theme!].backgroundColor }}>
<Content {...props} />
</View>
);
......
......@@ -11,9 +11,9 @@ const styles = StyleSheet.create({
});
interface IListSection {
children: JSX.Element;
title: string;
translateTitle: boolean;
children: React.ReactNode;
title?: string;
translateTitle?: boolean;
}
const ListSection = React.memo(({ children, title, translateTitle }: IListSection) => (
......
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { StyleSheet, View, ViewStyle } from 'react-native';
import { themes } from '../../constants/colors';
import { withTheme } from '../../theme';
......@@ -11,12 +11,12 @@ const styles = StyleSheet.create({
});
interface IListSeparator {
style: object;
theme: string;
style?: ViewStyle;
theme?: string;
}
const ListSeparator = React.memo(({ style, theme }: IListSeparator) => (
<View style={[styles.separator, style, { backgroundColor: themes[theme].separatorColor }]} />
<View style={[styles.separator, style, { backgroundColor: themes[theme!].separatorColor }]} />
));
ListSeparator.displayName = 'List.Separator';
......
......@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
interface ILoadingProps {
visible: boolean;
theme: string;
theme?: string;
}
class Loading extends React.PureComponent<ILoadingProps, any> {
......@@ -97,7 +97,7 @@ class Loading extends React.PureComponent<ILoadingProps, any> {
const opacityAnimation = opacity.interpolate({
inputRange: [0, 1],
outputRange: [0, themes[theme].backdropOpacity],
outputRange: [0, themes[theme!].backdropOpacity],
extrapolate: 'clamp'
});
......@@ -109,7 +109,7 @@ class Loading extends React.PureComponent<ILoadingProps, any> {
{
// @ts-ignore
...StyleSheet.absoluteFill,
backgroundColor: themes[theme].backdropColor,
backgroundColor: themes[theme!].backdropColor,
opacity: opacityAnimation
}
]}
......
......@@ -17,7 +17,7 @@ interface IHeader {
server: string;
message: object;
isMasterDetail: boolean;
theme: string;
theme?: string;
}
interface THeaderItem {
......@@ -117,19 +117,19 @@ const Header = React.memo(({ handleReaction, server, message, isMasterDetail, th
const onReaction = ({ emoji }: { emoji: IEmoji }) => handleReaction(emoji, message);
const renderItem = useCallback(
({ item }) => <HeaderItem item={item} onReaction={onReaction} server={server} theme={theme} />,
({ item }) => <HeaderItem item={item} onReaction={onReaction} server={server} theme={theme!} />,
[]
);
const renderFooter = useCallback(() => <HeaderFooter onReaction={onReaction} theme={theme} />, []);
const renderFooter = useCallback(() => <HeaderFooter onReaction={onReaction} theme={theme!} />, []);
return (
<View style={[styles.container, { backgroundColor: themes[theme].focusedBackground }]}>
<View style={[styles.container, { backgroundColor: themes[theme!].focusedBackground }]}>
<FlatList
data={items}
renderItem={renderItem}
ListFooterComponent={renderFooter}
style={{ backgroundColor: themes[theme].focusedBackground }}
style={{ backgroundColor: themes[theme!].focusedBackground }}
keyExtractor={keyExtractor}
showsHorizontalScrollIndicator={false}
scrollEnabled={false}
......
......@@ -18,7 +18,7 @@ import events from '../../utils/log/events';
interface IMessageActions {
room: {
rid: string | number;
rid: string;
autoTranslateLanguage: any;
autoTranslate: any;
reactWhenReadOnly: any;
......
......@@ -14,7 +14,7 @@ interface IMessageBoxCommandsPreviewItem {
id: string;
value: string;
};
theme: string;
theme?: string;
}
const Item = ({ item, theme }: IMessageBoxCommandsPreviewItem) => {
......@@ -37,7 +37,7 @@ const Item = ({ item, theme }: IMessageBoxCommandsPreviewItem) => {
{loading ? <ActivityIndicator theme={theme} /> : null}
</FastImage>
) : (
<CustomIcon name='attach' size={36} color={themes[theme].actionTintColor} />
<CustomIcon name='attach' size={36} color={themes[theme!].actionTintColor} />
)}
</TouchableOpacity>
);
......
......@@ -10,7 +10,7 @@ import { withTheme } from '../../../theme';
interface IMessageBoxCommandsPreview {
commandPreview: [];
showCommandPreview: boolean;
theme: string;
theme?: string;
}
const CommandsPreview = React.memo(
......@@ -21,7 +21,7 @@ const CommandsPreview = React.memo(
return (
<FlatList
testID='commandbox-container'
style={[styles.mentionList, { backgroundColor: themes[theme].messageboxBackground }]}
style={[styles.mentionList, { backgroundColor: themes[theme!].messageboxBackground }]}
data={commandPreview}
renderItem={({ item }) => <Item item={item} theme={theme} />}
keyExtractor={(item: any) => item.id}
......
......@@ -68,11 +68,11 @@ interface IRoomHeader {
tmid: string;
teamMain: boolean;
status: string;
theme: string;
theme?: string;
usersTyping: [];
isGroupChat: boolean;
parentTitle: string;
onPress: Function;
onPress: () => void;
testID: string;
}
......@@ -164,7 +164,7 @@ const Header = React.memo(
renderFunc = () => (
<View style={styles.titleContainer}>
<RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} teamMain={teamMain} />
<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
<Text style={[styles.subtitle, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
{parentTitle}
</Text>
</View>
......@@ -186,9 +186,15 @@ const Header = React.memo(
{tmid ? null : (
<RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} teamMain={teamMain} />
)}
<HeaderTitle title={title} tmid={tmid} prid={prid} scale={scale} theme={theme} testID={testID} />
<HeaderTitle title={title} tmid={tmid} prid={prid} scale={scale} theme={theme!} testID={testID} />
</View>
<SubTitle usersTyping={tmid ? [] : usersTyping} subtitle={subtitle} theme={theme} renderFunc={renderFunc} scale={scale} />
<SubTitle
usersTyping={tmid ? [] : usersTyping}
subtitle={subtitle}
theme={theme!}
renderFunc={renderFunc}
scale={scale}
/>
</TouchableOpacity>
);
}
......
......@@ -13,7 +13,7 @@ interface IRoomHeaderContainerProps {
prid: string;
tmid: string;
teamMain: boolean;
usersTyping: string;
usersTyping: [];
status: string;
statusText: string;
connecting: boolean;
......@@ -79,14 +79,12 @@ class RoomHeaderContainer extends Component<IRoomHeaderContainerProps, any> {
teamMain,
prid,
tmid,
widthOffset,
status = 'offline',
statusText,
connecting,
connected,
usersTyping,
onPress,
roomUserId,
width,
height,
parentTitle,
......@@ -115,9 +113,6 @@ class RoomHeaderContainer extends Component<IRoomHeaderContainerProps, any> {
width={width}
height={height}
usersTyping={usersTyping}
widthOffset={widthOffset}
roomUserId={roomUserId}
connecting={connecting}
parentTitle={parentTitle}
isGroupChat={isGroupChat}
testID={testID}
......
import React from 'react';
import { StyleSheet } from 'react-native';
import { StyleSheet, ViewStyle } from 'react-native';
import { CustomIcon } from '../lib/Icons';
import { STATUS_COLORS, themes } from '../constants/colors';
......@@ -13,13 +13,13 @@ const styles = StyleSheet.create({
});
interface IRoomTypeIcon {
theme: string;
theme?: string;
type: string;
isGroupChat: boolean;
teamMain: boolean;
status: string;
size: number;
style: any;
isGroupChat?: boolean;
teamMain?: boolean;
status?: string;
size?: number;
style?: ViewStyle;
}
const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, theme, teamMain, size = 16 }: IRoomTypeIcon) => {
......@@ -27,11 +27,13 @@ const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, theme, team
return null;
}
const color = themes[theme].titleText;
const color = themes[theme!].titleText;
const iconStyle = [styles.icon, { color }, style];
if (type === 'd' && !isGroupChat) {
return <Status style={[iconStyle, { color: STATUS_COLORS[status] ?? STATUS_COLORS.offline }]} size={size} status={status} />;
return (
<Status style={[iconStyle, { color: STATUS_COLORS[status!] ?? STATUS_COLORS.offline }]} size={size} status={status!} />
);
}
// TODO: move this to a separate function
......
......@@ -12,16 +12,16 @@ const styles = StyleSheet.create({
});
interface ISafeAreaView {
testID: string;
theme: string;
vertical: boolean;
style: object;
children: JSX.Element;
testID?: string;
theme?: string;
vertical?: boolean;
style?: object;
children: React.ReactNode;
}
const SafeAreaView = React.memo(({ style, children, testID, theme, vertical = true, ...props }: ISafeAreaView) => (
<SafeAreaContext
style={[styles.view, { backgroundColor: themes[theme].auxiliaryBackground }, style]}
style={[styles.view, { backgroundColor: themes[theme!].auxiliaryBackground }, style]}
edges={vertical ? ['right', 'left'] : undefined}
testID={testID}
{...props}>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment