1 | var __rest = (this && this.__rest) || function (s, e) {
|
2 | var t = {};
|
3 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4 | t[p] = s[p];
|
5 | if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8 | t[p[i]] = s[p[i]];
|
9 | }
|
10 | return t;
|
11 | };
|
12 | import React from 'react';
|
13 | import { Platform, StatusBar, StyleSheet, View, ImageBackground, } from 'react-native';
|
14 | import { SafeAreaView } from 'react-native-safe-area-context';
|
15 | import { withTheme } from '../config';
|
16 | import { renderNode } from '../helpers';
|
17 | import Text from '../text/Text';
|
18 | import Icon from '../icons/Icon';
|
19 | const ALIGN_STYLE = {
|
20 | left: 'flex-start',
|
21 | right: 'flex-end',
|
22 | center: 'center',
|
23 | };
|
24 | const Children = ({ style, placement, children }) => (<View style={StyleSheet.flatten([{ alignItems: ALIGN_STYLE[placement] }, style])}>
|
25 | {children == null || children === false
|
26 | ? null
|
27 | : children.text
|
28 | ? renderNode(Text, children.text, Object.assign({ numberOfLines: 1 }, children))
|
29 | : children.icon
|
30 | ? renderNode(Icon, Object.assign(Object.assign({}, children), { name: children.icon, containerStyle: StyleSheet.flatten([
|
31 | { alignItems: ALIGN_STYLE[placement] },
|
32 | children.containerStyle,
|
33 | ]) }))
|
34 | : renderNode(Text, children)}
|
35 | </View>);
|
36 | const Header = (props) => {
|
37 | var _a, _b;
|
38 | React.useEffect(() => {
|
39 | const { linearGradientProps, ViewComponent } = props;
|
40 | if (linearGradientProps && !ViewComponent) {
|
41 | console.error("You need to pass a ViewComponent to use linearGradientProps !\nExample: ViewComponent={require('react-native-linear-gradient')}");
|
42 | }
|
43 | });
|
44 | const { statusBarProps, leftComponent, centerComponent, rightComponent, leftContainerStyle, centerContainerStyle, rightContainerStyle, backgroundColor, backgroundImage, backgroundImageStyle, containerStyle, placement = 'center', barStyle, children = [], linearGradientProps, ViewComponent = linearGradientProps || !backgroundImage
|
45 | ? View
|
46 | : ImageBackground, theme, elevated } = props, attributes = __rest(props, ["statusBarProps", "leftComponent", "centerComponent", "rightComponent", "leftContainerStyle", "centerContainerStyle", "rightContainerStyle", "backgroundColor", "backgroundImage", "backgroundImageStyle", "containerStyle", "placement", "barStyle", "children", "linearGradientProps", "ViewComponent", "theme", "elevated"]);
|
47 | return (<>
|
48 | <StatusBar barStyle={barStyle} translucent={true} backgroundColor={backgroundColor || ((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary)} {...statusBarProps}/>
|
49 | <ViewComponent testID="headerContainer" {...attributes} style={StyleSheet.flatten([
|
50 | {
|
51 | borderBottomColor: '#f2f2f2',
|
52 | borderBottomWidth: StyleSheet.hairlineWidth,
|
53 | paddingHorizontal: 10,
|
54 | paddingVertical: 10,
|
55 | backgroundColor: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary,
|
56 | flexDirection: 'row',
|
57 | justifyContent: 'space-between',
|
58 | alignItems: 'center',
|
59 | },
|
60 | backgroundColor && { backgroundColor },
|
61 | elevated && styles.elevatedHeader,
|
62 | containerStyle,
|
63 | ])} source={backgroundImage} imageStyle={backgroundImageStyle} {...linearGradientProps}>
|
64 | <SafeAreaView edges={['left', 'top', 'right']} style={styles.headerSafeView}>
|
65 | <Children style={StyleSheet.flatten([
|
66 | placement === 'center' && styles.rightLeftContainer,
|
67 | leftContainerStyle,
|
68 | ])} placement="left">
|
69 | {(React.isValidElement(children) && children) ||
|
70 | children[0] ||
|
71 | leftComponent}
|
72 | </Children>
|
73 | <Children style={StyleSheet.flatten([
|
74 | styles.centerContainer,
|
75 | placement !== 'center' && {
|
76 | paddingHorizontal: Platform.select({
|
77 | android: 16,
|
78 | default: 15,
|
79 | }),
|
80 | },
|
81 | centerContainerStyle,
|
82 | ])} placement={placement}>
|
83 | {children[1] || centerComponent}
|
84 | </Children>
|
85 |
|
86 | <Children style={StyleSheet.flatten([
|
87 | placement === 'center' && styles.rightLeftContainer,
|
88 | rightContainerStyle,
|
89 | ])} placement="right">
|
90 | {children[2] || rightComponent}
|
91 | </Children>
|
92 | </SafeAreaView>
|
93 | </ViewComponent>
|
94 | </>);
|
95 | };
|
96 | const styles = StyleSheet.create({
|
97 | headerSafeView: {
|
98 | width: '100%',
|
99 | flexDirection: 'row',
|
100 | },
|
101 | centerContainer: {
|
102 | flex: 3,
|
103 | },
|
104 | rightLeftContainer: {
|
105 | flex: 1,
|
106 | },
|
107 | elevatedHeader: {
|
108 | shadowColor: '#000',
|
109 | shadowOffset: {
|
110 | width: 0,
|
111 | height: 6,
|
112 | },
|
113 | shadowOpacity: 0.6,
|
114 | shadowRadius: 8.0,
|
115 | elevation: 24,
|
116 | },
|
117 | });
|
118 | export { Header };
|
119 | export default withTheme(Header, 'Header');
|