From 2946c4724ea71b9e7f6956a39d4e8ddae4a46466 Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Mon, 17 Jan 2022 12:10:39 -0400 Subject: [PATCH] [FIX] TypeScript's errors raised by HOCs (#3535) Co-authored-by: AlexAlexandre Co-authored-by: Diego Mello --- app/AppContainer.tsx | 2 +- app/containers/BackgroundContainer/index.tsx | 10 +- app/containers/HeaderButton/Common.tsx | 10 +- .../HeaderButton/HeaderButtonItem.tsx | 16 +-- app/containers/List/ListContainer.tsx | 4 +- app/containers/List/ListHeader.tsx | 6 +- app/containers/List/ListIcon.tsx | 12 +-- app/containers/List/ListInfo.tsx | 6 +- app/containers/List/ListItem.tsx | 41 +++---- app/containers/List/ListSection.tsx | 6 +- app/containers/List/ListSeparator.tsx | 8 +- app/containers/Loading.tsx | 6 +- app/containers/MessageActions/Header.tsx | 10 +- app/containers/MessageActions/index.tsx | 2 +- .../MessageBox/CommandsPreview/Item.tsx | 4 +- .../MessageBox/CommandsPreview/index.tsx | 4 +- app/containers/RoomHeader/RoomHeader.tsx | 16 ++- app/containers/RoomHeader/index.tsx | 7 +- app/containers/RoomTypeIcon.tsx | 20 ++-- app/containers/SafeAreaView.tsx | 12 +-- app/containers/SearchBox.tsx | 24 +++-- .../{SearchHeader.js => SearchHeader.tsx} | 16 +-- app/containers/StatusBar.tsx | 8 +- app/containers/TextInput.tsx | 2 +- app/containers/ThreadDetails.tsx | 33 +++--- app/containers/Toast.tsx | 6 +- app/containers/TwoFactor/index.tsx | 8 +- app/containers/markdown/index.tsx | 9 +- app/containers/message/Audio.tsx | 2 +- app/containers/message/Reactions.tsx | 2 +- app/containers/message/Urls.tsx | 6 +- app/containers/message/User.tsx | 22 ++-- app/containers/message/index.tsx | 100 +++++++++--------- app/containers/message/interfaces.ts | 5 +- app/definitions/IRoom.ts | 7 ++ app/definitions/IThread.ts | 12 +-- app/{ => definitions}/navigationTypes.ts | 21 +++- app/dimensions.tsx | 7 +- app/presentation/ServerItem/index.tsx | 16 +-- app/presentation/TextInput.tsx | 5 +- app/presentation/UnreadBadge/index.tsx | 20 ++-- app/share.tsx | 2 +- app/stacks/MasterDetailStack/index.tsx | 16 +-- app/stacks/types.ts | 11 +- app/theme.tsx | 8 +- app/views/AddExistingChannelView.tsx | 14 +-- app/views/AdminPanelView/index.tsx | 3 +- app/views/AutoTranslateView/index.tsx | 4 +- app/views/DefaultBrowserView.tsx | 2 +- app/views/DirectoryView/index.tsx | 6 +- app/views/InviteUsersView/index.tsx | 4 +- app/views/LanguageView/index.tsx | 2 +- app/views/LegalView.tsx | 4 +- app/views/MessagesView/index.tsx | 2 + app/views/ModalBlockView.tsx | 19 +--- app/views/PickerView.tsx | 2 +- app/views/ScreenLockConfigView.tsx | 2 +- app/views/SearchMessagesView/index.tsx | 6 +- app/views/SelectListView.tsx | 46 +++----- app/views/SelectServerView.tsx | 9 +- app/views/SettingsView/index.tsx | 6 +- app/views/ShareListView/index.tsx | 3 + app/views/ShareView/Header.tsx | 8 +- app/views/ShareView/index.tsx | 8 +- app/views/SidebarView/SidebarItem.tsx | 4 +- app/views/SidebarView/index.tsx | 36 ++++--- app/views/StatusView.tsx | 10 +- app/views/ThemeView.tsx | 2 +- .../Dropdown/DropdownItem.tsx | 10 +- .../Dropdown/DropdownItemFilter.tsx | 5 +- .../ThreadMessagesView/Dropdown/index.tsx | 16 +-- app/views/ThreadMessagesView/Item.tsx | 12 +-- app/views/WorkspaceView/index.tsx | 4 +- 73 files changed, 409 insertions(+), 410 deletions(-) rename app/containers/{SearchHeader.js => SearchHeader.tsx} (80%) rename app/{ => definitions}/navigationTypes.ts (65%) diff --git a/app/AppContainer.tsx b/app/AppContainer.tsx index b73aaf8e3..441220fec 100644 --- a/app/AppContainer.tsx +++ b/app/AppContainer.tsx @@ -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'; diff --git a/app/containers/BackgroundContainer/index.tsx b/app/containers/BackgroundContainer/index.tsx index fbe5d3077..fc26fe0ab 100644 --- a/app/containers/BackgroundContainer/index.tsx +++ b/app/containers/BackgroundContainer/index.tsx @@ -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) => ( - {text ? {text} : null} - {loading ? : null} + {text ? {text} : null} + {loading ? : null} ); diff --git a/app/containers/HeaderButton/Common.tsx b/app/containers/HeaderButton/Common.tsx index b40543ddb..0877fb4c6 100644 --- a/app/containers/HeaderButton/Common.tsx +++ b/app/containers/HeaderButton/Common.tsx @@ -29,9 +29,9 @@ export const CloseModal = React.memo( export const CancelModal = React.memo(({ onPress, testID }: Partial) => ( {isIOS ? ( - + ) : ( - + )} )); @@ -39,19 +39,19 @@ export const CancelModal = React.memo(({ onPress, testID }: Partial) => ( - + )); export const Download = React.memo(({ onPress, testID, ...props }: Partial) => ( - + )); export const Preferences = React.memo(({ onPress, testID, ...props }: Partial) => ( - + )); diff --git a/app/containers/HeaderButton/HeaderButtonItem.tsx b/app/containers/HeaderButton/HeaderButtonItem.tsx index b350232d0..08f6b5a3a 100644 --- a/app/containers/HeaderButton/HeaderButtonItem.tsx +++ b/app/containers/HeaderButton/HeaderButtonItem.tsx @@ -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: (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 <> {iconName ? ( - + ) : ( - {title} + {title} )} {badge ? badge() : null} diff --git a/app/containers/List/ListContainer.tsx b/app/containers/List/ListContainer.tsx index 408310d9f..deb9c8a71 100644 --- a/app/containers/List/ListContainer.tsx +++ b/app/containers/List/ListContainer.tsx @@ -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 ( - + {translateTitle ? I18n.t(title) : title} diff --git a/app/containers/List/ListIcon.tsx b/app/containers/List/ListIcon.tsx index 7d569dce7..71e4fbdf2 100644 --- a/app/containers/List/ListIcon.tsx +++ b/app/containers/List/ListIcon.tsx @@ -1,5 +1,5 @@ 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; + testID?: string; } const styles = StyleSheet.create({ @@ -23,7 +23,7 @@ const styles = StyleSheet.create({ const ListIcon = React.memo(({ theme, name, color, style, testID }: IListIcon) => ( - + )); diff --git a/app/containers/List/ListInfo.tsx b/app/containers/List/ListInfo.tsx index bc4f02e33..2bfe68e32 100644 --- a/app/containers/List/ListInfo.tsx +++ b/app/containers/List/ListInfo.tsx @@ -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) => ( - {translateInfo ? I18n.t(info) : info} + {translateInfo ? I18n.t(info) : info} )); diff --git a/app/containers/List/ListItem.tsx b/app/containers/List/ListItem.tsx index a05eaf9ad..87abfd2dd 100644 --- a/app/containers/List/ListItem.tsx +++ b/app/containers/List/ListItem.tsx @@ -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 ? {left()} : null} - + {translateTitle ? I18n.t(title) : title} {alert ? ( - + ) : null} {subtitle ? ( - + {translateSubtitle ? I18n.t(subtitle) : subtitle} ) : 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(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => ( 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!}> )); -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(({ ...props }: IListItem) => { if (props.onPress) { return