From a1e33c4a69792dc92d77f8450d723537d7d1e101 Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Thu, 17 Mar 2022 15:25:31 -0400 Subject: [PATCH] Chore: evaluate Header components - TypeScript (#3918) * update: Header components --- app/containers/Header/index.tsx | 45 +++++++++++--------- app/containers/List/ListHeader.tsx | 22 +++++----- app/containers/List/ListInfo.tsx | 20 +++++---- app/views/RoomsListView/Header/Header.tsx | 4 +- app/views/RoomsListView/Header/index.tsx | 3 +- app/views/RoomsListView/ListHeader/index.tsx | 10 ++--- app/views/RoomsListView/index.tsx | 5 +-- 7 files changed, 59 insertions(+), 50 deletions(-) diff --git a/app/containers/Header/index.tsx b/app/containers/Header/index.tsx index e9f7837c6e..17d8884097 100644 --- a/app/containers/Header/index.tsx +++ b/app/containers/Header/index.tsx @@ -5,12 +5,11 @@ import { StyleSheet, View } from 'react-native'; import { themes } from '../../constants/colors'; import { themedHeader } from '../../utils/navigation'; import { isIOS, isTablet } from '../../utils/deviceInfo'; -import { withTheme } from '../../theme'; +import { useTheme } from '../../theme'; -// Get from https://github.com/react-navigation/react-navigation/blob/master/packages/stack/src/views/Header/HeaderSegment.tsx#L69 export const headerHeight = isIOS ? 44 : 56; -export const getHeaderHeight = (isLandscape: boolean) => { +export const getHeaderHeight = (isLandscape: boolean): number => { if (isIOS) { if (isLandscape && !isTablet) { return 32; @@ -28,7 +27,13 @@ interface IHeaderTitlePosition { numIconsRight: number; } -export const getHeaderTitlePosition = ({ insets, numIconsRight }: IHeaderTitlePosition) => ({ +export const getHeaderTitlePosition = ({ + insets, + numIconsRight +}: IHeaderTitlePosition): { + left: number; + right: number; +} => ({ left: insets.left + 60, right: insets.right + Math.max(45 * numIconsRight, 15) }); @@ -43,20 +48,22 @@ const styles = StyleSheet.create({ }); interface IHeader { - theme: string; - headerLeft(): void; - headerTitle(): void; - headerRight(): void; + headerLeft: () => React.ReactElement | null; + headerTitle: () => React.ReactElement; + headerRight: () => React.ReactElement | null; } -const Header = ({ theme, headerLeft, headerTitle, headerRight }: IHeader) => ( - - - {headerLeft ? headerLeft() : null} - {headerTitle ? headerTitle() : null} - {headerRight ? headerRight() : null} - - -); - -export default withTheme(Header); +const Header = ({ headerLeft, headerTitle, headerRight }: IHeader): React.ReactElement => { + const { theme } = useTheme(); + return ( + + + {headerLeft ? headerLeft() : null} + {headerTitle ? headerTitle() : null} + {headerRight ? headerRight() : null} + + + ); +}; + +export default Header; diff --git a/app/containers/List/ListHeader.tsx b/app/containers/List/ListHeader.tsx index 9a0b977315..d9cb58eb9c 100644 --- a/app/containers/List/ListHeader.tsx +++ b/app/containers/List/ListHeader.tsx @@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native'; import sharedStyles from '../../views/Styles'; import { themes } from '../../constants/colors'; import I18n from '../../i18n'; -import { withTheme } from '../../theme'; +import { useTheme } from '../../theme'; import { PADDING_HORIZONTAL } from './constants'; const styles = StyleSheet.create({ @@ -20,18 +20,20 @@ const styles = StyleSheet.create({ interface IListHeader { title: string; - theme?: string; translateTitle?: boolean; } -const ListHeader = React.memo(({ title, theme, translateTitle = true }: IListHeader) => ( - - - {translateTitle ? I18n.t(title) : title} - - -)); +const ListHeader = React.memo(({ title, translateTitle = true }: IListHeader) => { + const { theme } = useTheme(); + return ( + + + {translateTitle ? I18n.t(title) : title} + + + ); +}); ListHeader.displayName = 'List.Header'; -export default withTheme(ListHeader); +export default ListHeader; diff --git a/app/containers/List/ListInfo.tsx b/app/containers/List/ListInfo.tsx index 2bfe68e324..baac47ccc8 100644 --- a/app/containers/List/ListInfo.tsx +++ b/app/containers/List/ListInfo.tsx @@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native'; import sharedStyles from '../../views/Styles'; import { themes } from '../../constants/colors'; -import { withTheme } from '../../theme'; +import { useTheme } from '../../theme'; import { PADDING_HORIZONTAL } from './constants'; import I18n from '../../i18n'; @@ -18,18 +18,20 @@ const styles = StyleSheet.create({ } }); -interface IListHeader { +interface IListInfo { info: string; - theme?: string; translateInfo?: boolean; } -const ListInfo = React.memo(({ info, theme, translateInfo = true }: IListHeader) => ( - - {translateInfo ? I18n.t(info) : info} - -)); +const ListInfo = React.memo(({ info, translateInfo = true }: IListInfo) => { + const { theme } = useTheme(); + return ( + + {translateInfo ? I18n.t(info) : info} + + ); +}); ListInfo.displayName = 'List.Info'; -export default withTheme(ListInfo); +export default ListInfo; diff --git a/app/views/RoomsListView/Header/Header.tsx b/app/views/RoomsListView/Header/Header.tsx index dc90a50e10..581cfacf88 100644 --- a/app/views/RoomsListView/Header/Header.tsx +++ b/app/views/RoomsListView/Header/Header.tsx @@ -8,6 +8,7 @@ import { themes } from '../../../constants/colors'; import { CustomIcon } from '../../../lib/Icons'; import { isIOS, isTablet } from '../../../utils/deviceInfo'; import { useOrientation } from '../../../dimensions'; +import { useTheme } from '../../../theme'; const styles = StyleSheet.create({ container: { @@ -38,7 +39,6 @@ interface IRoomHeader { server: string; showServerDropdown: boolean; showSearchHeader: boolean; - theme: string; onSearchChangeText: TextInputProps['onChangeText']; onPress: TouchableOpacityProps['onPress']; } @@ -52,10 +52,10 @@ const Header = React.memo( server, showServerDropdown, showSearchHeader, - theme, onSearchChangeText, onPress }: IRoomHeader) => { + const { theme } = useTheme(); const titleColorStyle = { color: themes[theme].headerTitleColor }; const isLight = theme === 'light'; const { isLandscape } = useOrientation(); diff --git a/app/views/RoomsListView/Header/index.tsx b/app/views/RoomsListView/Header/index.tsx index 0e4d1110f8..a963fed4a9 100644 --- a/app/views/RoomsListView/Header/index.tsx +++ b/app/views/RoomsListView/Header/index.tsx @@ -59,11 +59,10 @@ class RoomsListHeaderView extends PureComponent }; render() { - const { serverName, showServerDropdown, showSearchHeader, connecting, connected, isFetching, theme, server } = this.props; + const { serverName, showServerDropdown, showSearchHeader, connecting, connected, isFetching, server } = this.props; return (
{ + ({ searching, goEncryption, goQueue, queueSize, inquiryEnabled, encryptionBanner, user }: IRoomListHeader) => { if (searching) { return null; } + const { theme } = useTheme(); + return ( <> {encryptionBanner ? ( @@ -48,7 +49,6 @@ const ListHeader = React.memo( ) : null} { const { searching } = this.state; - const { queueSize, inquiryEnabled, encryptionBanner, user, theme } = this.props; + const { queueSize, inquiryEnabled, encryptionBanner, user } = this.props; return ( ); }; @@ -934,7 +933,7 @@ class RoomsListView extends React.Component; };