Skip to content

Commit

Permalink
Merge branch 'develop' into chore.evaluate-avatar
Browse files Browse the repository at this point in the history
  • Loading branch information
gerzonc authored Mar 17, 2022
2 parents 1710889 + a1e33c4 commit 8185b1d
Show file tree
Hide file tree
Showing 7 changed files with 59 additions and 50 deletions.
45 changes: 26 additions & 19 deletions app/containers/Header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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)
});
Expand All @@ -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>
);

export default withTheme(Header);
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 Header;
22 changes: 12 additions & 10 deletions app/containers/List/ListHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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 changes: 11 additions & 9 deletions app/containers/List/ListInfo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 changes: 2 additions & 2 deletions app/views/RoomsListView/Header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -38,7 +39,6 @@ interface IRoomHeader {
server: string;
showServerDropdown: boolean;
showSearchHeader: boolean;
theme: string;
onSearchChangeText: TextInputProps['onChangeText'];
onPress: TouchableOpacityProps['onPress'];
}
Expand All @@ -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();
Expand Down
3 changes: 1 addition & 2 deletions app/views/RoomsListView/Header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
10 changes: 5 additions & 5 deletions app/views/RoomsListView/ListHeader/index.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 ? (
Expand All @@ -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}
Expand All @@ -60,4 +60,4 @@ const ListHeader = React.memo(
}
);

export default withTheme(ListHeader);
export default ListHeader;
5 changes: 2 additions & 3 deletions app/views/RoomsListView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -922,7 +922,6 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
inquiryEnabled={inquiryEnabled}
encryptionBanner={encryptionBanner}
user={user}
theme={theme}
/>
);
};
Expand All @@ -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} />;
};

Expand Down

0 comments on commit 8185b1d

Please sign in to comment.