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 { 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) => (
<SafeAreaView style={{ backgroundColor: themes[theme].headerBackground }} edges={['top', 'left', 'right']}>
<View style={[styles.container, { ...themedHeader(theme).headerStyle }]}>
{headerLeft ? headerLeft() : null}
{headerTitle ? headerTitle() : null}
{headerRight ? headerRight() : null}
</View>
</SafeAreaView>
);
const Header = ({ headerLeft, headerTitle, headerRight }: IHeader): React.ReactElement => {
const { theme } = useTheme();
return (
<SafeAreaView style={{ backgroundColor: themes[theme].headerBackground }} edges={['top', 'left', 'right']}>
<View style={[styles.container, { ...themedHeader(theme).headerStyle }]}>
{headerLeft ? headerLeft() : null}
{headerTitle ? headerTitle() : null}
{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 { 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) => (
<View style={styles.container}>
<Text style={[styles.title, { color: themes[theme!].infoText }]} numberOfLines={1}>
{translateTitle ? I18n.t(title) : title}
</Text>
</View>
));
const ListHeader = React.memo(({ title, translateTitle = true }: IListHeader) => {
const { theme } = useTheme();
return (
<View style={styles.container}>
<Text style={[styles.title, { color: themes[theme].infoText }]} numberOfLines={1}>
{translateTitle ? I18n.t(title) : title}
</Text>
</View>
);
});
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 { 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) => (
<View style={styles.container}>
<Text style={[styles.text, { color: themes[theme!].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
</View>
));
const ListInfo = React.memo(({ info, translateInfo = true }: IListInfo) => {
const { theme } = useTheme();
return (
<View style={styles.container}>
<Text style={[styles.text, { color: themes[theme].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
</View>
);
});
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 { 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();

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

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

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

@ -1,6 +1,6 @@
import React from 'react';
import { withTheme } from '../../../theme';
import { useTheme } from '../../../theme';
import * as List from '../../../containers/List';
import { E2E_BANNER_TYPE } from '../../../lib/encryption/constants';
import { themes } from '../../../constants/colors';
@ -17,15 +17,16 @@ interface IRoomListHeader {
inquiryEnabled: boolean;
encryptionBanner: TEncryptionBanner;
user: IUser;
theme: string;
}
const ListHeader = React.memo(
({ searching, goEncryption, goQueue, queueSize, inquiryEnabled, encryptionBanner, user, theme }: IRoomListHeader) => {
({ 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}
<List.Separator />
<OmnichannelStatus
// @ts-ignore // TODO - remove this @ts-ignore after merge omnichannel task
searching={searching}
goQueue={goQueue}
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 = () => {
const { searching } = this.state;
const { queueSize, inquiryEnabled, encryptionBanner, user, theme } = this.props;
const { queueSize, inquiryEnabled, encryptionBanner, user } = this.props;
return (
<ListHeader
searching={searching}
@ -922,7 +922,6 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
inquiryEnabled={inquiryEnabled}
encryptionBanner={encryptionBanner}
user={user}
theme={theme}
/>
);
};
@ -934,7 +933,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
return null;
}
const options = this.getHeader() as any;
const options = this.getHeader();
return <Header {...options} />;
};