All files / header Header.js

100% Statements 18/18
100% Branches 17/17
100% Functions 3/3
100% Lines 18/18
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                18x 3x         15x 3x       12x       6x   6x 6x 6x   6x           6x     1x                     12x   12x   12x 6x             12x                   1x                                            
import React from 'react';
import { StatusBar, StyleSheet, View } from 'react-native';
import isEmpty from 'lodash.isempty';
import DummyNavButton from './DummyNavButton';
import NavButton from './NavButton';
import Title from './Title';
 
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 style={[styles.outerContainer, { backgroundColor }, outerContainerStyles]} {...attributes}>
      <StatusBar {...statusBarProps} />
      <View style={[styles.innerContainer, innerContainerStyles]}>
        {propChildren.length > 0 ? propChildren : children}
      </View>
    </View>
  );
};
 
const styles = StyleSheet.create({
  innerContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
  outerContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: '#fff',
    borderBottomColor: '#f2f2f2',
    borderBottomWidth: 1,
    padding: 15,
    height: 70,
  },
});
 
export default Header;