forked from zulip/zulip-mobile
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ChatNavBar.js
72 lines (67 loc) · 2.42 KB
/
ChatNavBar.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/* @flow strict-local */
import React, { useContext } from 'react';
import { View } from 'react-native';
import Color from 'color';
import { SafeAreaView } from 'react-native-safe-area-context';
import type { Narrow, EditMessage } from '../types';
import { LoadingBanner, ZulipStatusBar } from '../common';
import { useSelector } from '../react-redux';
import { BRAND_COLOR, NAVBAR_SIZE, ThemeContext } from '../styles';
import Title from '../title/Title';
import NavBarBackButton from './NavBarBackButton';
import { getStreamColorForNarrow } from '../subscriptions/subscriptionSelectors';
import { foregroundColorFromBackground } from '../utils/color';
import { ExtraButton, InfoButton } from '../title-buttons/titleButtonFromNarrow';
type Props = $ReadOnly<{|
narrow: Narrow,
editMessage: EditMessage | null,
|}>;
export default function ChatNavBar(props: Props) {
const { narrow, editMessage } = props;
const streamColor = useSelector(state => getStreamColorForNarrow(state, narrow));
const buttonColor =
streamColor === undefined ? BRAND_COLOR : foregroundColorFromBackground(streamColor);
const themeColor = useContext(ThemeContext).color;
const textColor =
streamColor === undefined ? themeColor : foregroundColorFromBackground(streamColor);
const spinnerColor =
streamColor === undefined ? 'default' : foregroundColorFromBackground(streamColor);
return (
<>
<ZulipStatusBar backgroundColor={streamColor} />
<SafeAreaView
mode="padding"
edges={['top', 'right', 'left']}
style={{
borderColor:
streamColor === undefined
? 'hsla(0, 0%, 50%, 0.25)'
: Color(streamColor)
.darken(0.1)
.hsl()
.string(),
borderBottomWidth: 1,
backgroundColor: streamColor,
}}
>
<View
style={{
flexDirection: 'row',
height: NAVBAR_SIZE,
alignItems: 'center',
}}
>
<NavBarBackButton color={buttonColor} />
<Title color={textColor} narrow={narrow} editMessage={editMessage} />
<ExtraButton color={buttonColor} narrow={narrow} />
<InfoButton color={buttonColor} narrow={narrow} />
</View>
<LoadingBanner
spinnerColor={spinnerColor}
backgroundColor={streamColor}
textColor={textColor}
/>
</SafeAreaView>
</>
);
}