-
Notifications
You must be signed in to change notification settings - Fork 2.6k
/
Header.js
44 lines (39 loc) · 1.39 KB
/
Header.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
import React from 'react';
import {View} from 'react-native';
import PropTypes from 'prop-types';
import _ from 'underscore';
import styles from '../styles/styles';
import Text from './Text';
import EnvironmentBadge from './EnvironmentBadge';
const propTypes = {
/** Title of the Header */
title: PropTypes.string.isRequired,
/** Subtitle of the header */
subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
/** Should we show the environment badge (dev/stg)? */
shouldShowEnvironmentBadge: PropTypes.bool,
};
const defaultProps = {
shouldShowEnvironmentBadge: false,
subtitle: '',
};
const Header = props => (
<View style={[styles.flex1, styles.flexRow]}>
<View style={styles.mw100}>
<Text numberOfLines={2} style={[styles.headerText, styles.textLarge]}>
{props.title}
</Text>
{/* If there's no subtitle then display a fragment to avoid an empty space which moves the main title */}
{_.isString(props.subtitle)
? Boolean(props.subtitle) && <Text style={[styles.mutedTextLabel]}>{props.subtitle}</Text>
: props.subtitle}
</View>
{props.shouldShowEnvironmentBadge && (
<EnvironmentBadge />
)}
</View>
);
Header.displayName = 'Header';
Header.propTypes = propTypes;
Header.defaultProps = defaultProps;
export default Header;