# 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

    54x
    9x
    45x
    9x

    36x

    18x

    18x
    18x
    18x

    18x

    18x

    2x

    37x

    37x

    37x
    18x

    37x

    2x

    2x

     import React from 'react';
    import PropTypes from 'prop-types';
    import { StatusBar, StyleSheet, View } 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';
    import colors from '../config/colors';

    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.oneOfType([
        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: {
        backgroundColor: colors.primary,
        borderBottomColor: '#f2f2f2',
        borderBottomWidth: 1,
        padding: 15,
        height: 70,
      },
    });

    export default Header;