# 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;