verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Chore: evaluate Header components - TypeScript (#3918) 

* update: Header components
This commit is contained in:
Gerzon Z 2022-03-17 15:25:31 -04:00 committed by GitHub
parent 11a809a065
commit a1e33c4a69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 58 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
app/containers/Header/index.tsx
View File

@ -5,12 +5,11 @@ import { StyleSheet, View } from 'react-native';
import { themes } from '../../constants/colors'; import { themes } from '../../constants/colors';
import { themedHeader } from '../../utils/navigation'; import { themedHeader } from '../../utils/navigation';
import { isIOS, isTablet } from '../../utils/deviceInfo'; 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 headerHeight = isIOS ? 44 : 56;
export const getHeaderHeight = (isLandscape: boolean) => { export const getHeaderHeight = (isLandscape: boolean): number => {
if (isIOS) { if (isIOS) {
if (isLandscape && !isTablet) { if (isLandscape && !isTablet) {
return 32; return 32;
@ -28,7 +27,13 @@ interface IHeaderTitlePosition {
numIconsRight: number; numIconsRight: number;
} }
export const getHeaderTitlePosition = ({ insets, numIconsRight }: IHeaderTitlePosition) => ({ export const getHeaderTitlePosition = ({
insets,
numIconsRight
}: IHeaderTitlePosition): {
left: number;
right: number;
} => ({
left: insets.left + 60, left: insets.left + 60,
right: insets.right + Math.max(45 * numIconsRight, 15) right: insets.right + Math.max(45 * numIconsRight, 15)
}); });
@ -43,20 +48,22 @@ const styles = StyleSheet.create({
}); });
interface IHeader { interface IHeader {
theme: string; headerLeft: () => React.ReactElement | null;
headerLeft(): void; headerTitle: () => React.ReactElement;
headerTitle(): void; headerRight: () => React.ReactElement | null;
headerRight(): void;
} }
const Header = ({ theme, headerLeft, headerTitle, headerRight }: IHeader) => ( const Header = ({ headerLeft, headerTitle, headerRight }: IHeader): React.ReactElement => {
<SafeAreaView style={{ backgroundColor: themes[theme].headerBackground }} edges={['top', 'left', 'right']}> const { theme } = useTheme();
<View style={[styles.container, { ...themedHeader(theme).headerStyle }]}> return (
{headerLeft ? headerLeft() : null} <SafeAreaView style={{ backgroundColor: themes[theme].headerBackground }} edges={['top', 'left', 'right']}>
{headerTitle ? headerTitle() : null} <View style={[styles.container, { ...themedHeader(theme).headerStyle }]}>
{headerRight ? headerRight() : null} {headerLeft ? headerLeft() : null}
</View> {headerTitle ? headerTitle() : null}
</SafeAreaView> {headerRight ? headerRight() : null}
); </View>
</SafeAreaView>
);
};
export default withTheme(Header); export default Header;

22
app/containers/List/ListHeader.tsx
View File

@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
import sharedStyles from '../../views/Styles'; import sharedStyles from '../../views/Styles';
import { themes } from '../../constants/colors'; import { themes } from '../../constants/colors';
import I18n from '../../i18n'; import I18n from '../../i18n';
import { withTheme } from '../../theme'; import { useTheme } from '../../theme';
import { PADDING_HORIZONTAL } from './constants'; import { PADDING_HORIZONTAL } from './constants';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -20,18 +20,20 @@ const styles = StyleSheet.create({
interface IListHeader { interface IListHeader {
title: string; title: string;
theme?: string;
translateTitle?: boolean; translateTitle?: boolean;
} }
const ListHeader = React.memo(({ title, theme, translateTitle = true }: IListHeader) => ( const ListHeader = React.memo(({ title, translateTitle = true }: IListHeader) => {
<View style={styles.container}> const { theme } = useTheme();
<Text style={[styles.title, { color: themes[theme!].infoText }]} numberOfLines={1}> return (
{translateTitle ? I18n.t(title) : title} <View style={styles.container}>
</Text> <Text style={[styles.title, { color: themes[theme].infoText }]} numberOfLines={1}>
</View> {translateTitle ? I18n.t(title) : title}
)); </Text>
</View>
);
});
ListHeader.displayName = 'List.Header'; ListHeader.displayName = 'List.Header';
export default withTheme(ListHeader); export default ListHeader;

20
app/containers/List/ListInfo.tsx
View File

@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
import sharedStyles from '../../views/Styles'; import sharedStyles from '../../views/Styles';
import { themes } from '../../constants/colors'; import { themes } from '../../constants/colors';
import { withTheme } from '../../theme'; import { useTheme } from '../../theme';
import { PADDING_HORIZONTAL } from './constants'; import { PADDING_HORIZONTAL } from './constants';
import I18n from '../../i18n'; import I18n from '../../i18n';
@ -18,18 +18,20 @@ const styles = StyleSheet.create({
} }
}); });
interface IListHeader { interface IListInfo {
info: string; info: string;
theme?: string;
translateInfo?: boolean; translateInfo?: boolean;
} }
const ListInfo = React.memo(({ info, theme, translateInfo = true }: IListHeader) => ( const ListInfo = React.memo(({ info, translateInfo = true }: IListInfo) => {
<View style={styles.container}> const { theme } = useTheme();
<Text style={[styles.text, { color: themes[theme!].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text> return (
</View> <View style={styles.container}>
)); <Text style={[styles.text, { color: themes[theme].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
</View>
);
});
ListInfo.displayName = 'List.Info'; ListInfo.displayName = 'List.Info';
export default withTheme(ListInfo); export default ListInfo;

4
app/views/RoomsListView/Header/Header.tsx
View File

@ -8,6 +8,7 @@ import { themes } from '../../../constants/colors';
import { CustomIcon } from '../../../lib/Icons'; import { CustomIcon } from '../../../lib/Icons';
import { isIOS, isTablet } from '../../../utils/deviceInfo'; import { isIOS, isTablet } from '../../../utils/deviceInfo';
import { useOrientation } from '../../../dimensions'; import { useOrientation } from '../../../dimensions';
import { useTheme } from '../../../theme';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
@ -38,7 +39,6 @@ interface IRoomHeader {
server: string; server: string;
showServerDropdown: boolean; showServerDropdown: boolean;
showSearchHeader: boolean; showSearchHeader: boolean;
theme: string;
onSearchChangeText: TextInputProps['onChangeText']; onSearchChangeText: TextInputProps['onChangeText'];
onPress: TouchableOpacityProps['onPress']; onPress: TouchableOpacityProps['onPress'];
} }
@ -52,10 +52,10 @@ const Header = React.memo(
server, server,
showServerDropdown, showServerDropdown,
showSearchHeader, showSearchHeader,
theme,
onSearchChangeText, onSearchChangeText,
onPress onPress
}: IRoomHeader) => { }: IRoomHeader) => {
const { theme } = useTheme();
const titleColorStyle = { color: themes[theme].headerTitleColor }; const titleColorStyle = { color: themes[theme].headerTitleColor };
const isLight = theme === 'light'; const isLight = theme === 'light';
const { isLandscape } = useOrientation(); const { isLandscape } = useOrientation();

3
app/views/RoomsListView/Header/index.tsx
View File

@ -59,11 +59,10 @@ class RoomsListHeaderView extends PureComponent<IRoomsListHeaderViewProps, any>
}; };
render() { render() {
const { serverName, showServerDropdown, showSearchHeader, connecting, connected, isFetching, theme, server } = this.props; const { serverName, showServerDropdown, showSearchHeader, connecting, connected, isFetching, server } = this.props;
return ( return (
<Header <Header
theme={theme}
serverName={serverName} serverName={serverName}
server={server} server={server}
showServerDropdown={showServerDropdown} showServerDropdown={showServerDropdown}

10
app/views/RoomsListView/ListHeader/index.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { withTheme } from '../../../theme'; import { useTheme } from '../../../theme';
import * as List from '../../../containers/List'; import * as List from '../../../containers/List';
import { E2E_BANNER_TYPE } from '../../../lib/encryption/constants'; import { E2E_BANNER_TYPE } from '../../../lib/encryption/constants';
import { themes } from '../../../constants/colors'; import { themes } from '../../../constants/colors';
@ -17,15 +17,16 @@ interface IRoomListHeader {
inquiryEnabled: boolean; inquiryEnabled: boolean;
encryptionBanner: TEncryptionBanner; encryptionBanner: TEncryptionBanner;
user: IUser; user: IUser;
theme: string;
} }
const ListHeader = React.memo( const ListHeader = React.memo(
({ searching, goEncryption, goQueue, queueSize, inquiryEnabled, encryptionBanner, user, theme }: IRoomListHeader) => { ({ searching, goEncryption, goQueue, queueSize, inquiryEnabled, encryptionBanner, user }: IRoomListHeader) => {
if (searching) { if (searching) {
return null; return null;
} }
const { theme } = useTheme();
return ( return (
<> <>
{encryptionBanner ? ( {encryptionBanner ? (
@ -48,7 +49,6 @@ const ListHeader = React.memo(
) : null} ) : null}
<List.Separator /> <List.Separator />
<OmnichannelStatus <OmnichannelStatus
// @ts-ignore // TODO - remove this @ts-ignore after merge omnichannel task
searching={searching} searching={searching}
goQueue={goQueue} goQueue={goQueue}
inquiryEnabled={inquiryEnabled} inquiryEnabled={inquiryEnabled}
@ -60,4 +60,4 @@ const ListHeader = React.memo(
} }
); );
export default withTheme(ListHeader); export default ListHeader;

5
app/views/RoomsListView/index.tsx
View File

@ -912,7 +912,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
renderListHeader = () => { renderListHeader = () => {
const { searching } = this.state; const { searching } = this.state;
const { queueSize, inquiryEnabled, encryptionBanner, user, theme } = this.props; const { queueSize, inquiryEnabled, encryptionBanner, user } = this.props;
return ( return (
<ListHeader <ListHeader
searching={searching} searching={searching}
@ -922,7 +922,6 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
inquiryEnabled={inquiryEnabled} inquiryEnabled={inquiryEnabled}
encryptionBanner={encryptionBanner} encryptionBanner={encryptionBanner}
user={user} user={user}
theme={theme}
/> />
); );
}; };
@ -934,7 +933,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
return null; return null;
} }
const options = this.getHeader() as any; const options = this.getHeader();
return <Header {...options} />; return <Header {...options} />;
}; };