All files / header Header.js

100% Statements 19/19
100% Branches 19/19
100% Functions 3/3
100% Lines 19/19
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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109                    18x 3x         15x 3x       12x       6x   6x 6x 6x   6x   6x     1x                     13x   13x   13x 6x             13x                                 1x                           1x                                    
import React from 'react';
import PropTypes from 'prop-types';
import { StatusBar, StyleSheet, View, Dimensions } from 'react-native';
import isEmpty from 'lodash.isempty';
import DummyNavButton from './DummyNavButton';
import NavButton from './NavButton';
import Title from './Title';
import ViewPropTypes from '../config/ViewPropTypes';
 
function generateChild(value, type) {
  if (React.isValidElement(value)) {
    return (
      <View key={type}>
        {value}
      </View>
    );
  } else if (typeof value === 'object' && !isEmpty(value)) {
    return type === 'center'
      ? <Title {...value} key={type} />
      : <NavButton {...value} key={type} />;
  }
  return type === 'center' ? null : <DummyNavButton key={type} />;
}
 
function populateChildren(propChildren) {
  const childrenArray = [];
 
  const leftComponent = generateChild(propChildren.leftComponent, 'left');
  const centerComponent = generateChild(propChildren.centerComponent, 'center');
  const rightComponent = generateChild(propChildren.rightComponent, 'right');
 
  childrenArray.push(leftComponent, centerComponent, rightComponent);
 
  return childrenArray;
}
 
const Header = props => {
  const {
    children,
    statusBarProps,
    leftComponent,
    centerComponent,
    rightComponent,
    backgroundColor,
    outerContainerStyles,
    innerContainerStyles,
    ...attributes
  } = props;
 
  let propChildren = [];
 
  if (leftComponent || centerComponent || rightComponent) {
    propChildren = populateChildren({
      leftComponent,
      centerComponent,
      rightComponent,
    });
  }
 
  return (
    <View
      {...attributes}
      style={[
        styles.outerContainer,
        backgroundColor && { backgroundColor },
        outerContainerStyles,
      ]}
    >
      <StatusBar {...statusBarProps} />
      <View style={[styles.innerContainer, innerContainerStyles]}>
        {propChildren.length > 0 ? propChildren : children}
      </View>
    </View>
  );
};
 
Header.propTypes = {
  leftComponent: PropTypes.object,
  centerComponent: PropTypes.object,
  rightComponent: PropTypes.object,
  backgroundColor: PropTypes.string,
  outerContainerStyles: ViewPropTypes.style,
  innerContainerStyles: ViewPropTypes.style,
  children: PropTypes.oneOf([
    PropTypes.element,
    PropTypes.arrayOf(PropTypes.element),
  ]),
  statusBarProps: PropTypes.object,
};
 
const styles = StyleSheet.create({
  innerContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
  outerContainer: {
    width: Dimensions.get('window').width,
    backgroundColor: '#476DC5',
    borderBottomColor: '#f2f2f2',
    borderBottomWidth: 1,
    padding: 15,
    height: 70,
  },
});
 
export default Header;