-
Notifications
You must be signed in to change notification settings - Fork 2.8k
/
MoneyRequestHeaderStatusBar.tsx
59 lines (52 loc) · 1.81 KB
/
MoneyRequestHeaderStatusBar.tsx
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
import type {ReactNode} from 'react';
import React from 'react';
import {View} from 'react-native';
import useThemeStyles from '@hooks/useThemeStyles';
import Badge from './Badge';
import Text from './Text';
type MoneyRequestHeaderStatusBarProps = {
/** Title displayed in badge */
title: string | ReactNode;
/** Banner Description */
description: string;
/** Whether we show the border bottom */
shouldShowBorderBottom: boolean;
/** Whether we should use the danger theme color */
danger?: boolean;
};
function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom, danger = false}: MoneyRequestHeaderStatusBarProps) {
const styles = useThemeStyles();
const borderBottomStyle = shouldShowBorderBottom ? styles.borderBottom : {};
return (
<View
style={[
styles.dFlex,
styles.flexRow,
styles.alignItemsCenter,
styles.flexGrow1,
styles.overflowHidden,
styles.ph5,
styles.pb3,
borderBottomStyle,
styles.headerStatusBarContainer,
]}
>
{typeof title === 'string' ? (
<View style={[styles.mr3]}>
<Badge
text={title}
badgeStyles={styles.ml0}
error={danger}
/>
</View>
) : (
<View style={styles.mr2}>{title}</View>
)}
<View style={[styles.flexShrink1]}>
<Text style={[styles.textLabelSupporting]}>{description}</Text>
</View>
</View>
);
}
MoneyRequestHeaderStatusBar.displayName = 'MoneyRequestHeaderStatusBar';
export default MoneyRequestHeaderStatusBar;