Home Reference Source

src/views/diary/components/Header.js

import React from 'react';
import {StyleSheet, View} from 'react-native';

/**
 * Header of the diary.
 * @param {Object} props - Properties
 * @param {Object} props.leftComponent - Left element of the header
 * @param {Object} props.middleComponent - Middle element of the header
 * @param {Object} props.rightComponent - Right element of the header
 * @returns {Object} Header of the diary.
 */
export default function Header(props) {
    // Retrieve props
    const leftComponent = props.leftComponent;
    const middleComponent = props.middleComponent;
    const rightComponent = props.rightComponent;

    let flexValue; // Size of flex view relative to whole screen.
    if (props.flexValue === undefined) {
        flexValue = 0.18;
    } else {
        flexValue = props.flexValue;
    }

    return (
        <View style={[styles.container, {flex: flexValue}]}>
            <View style={[styles.component, styles.leftContainer]}>
                {leftComponent}
            </View>
            <View style={[styles.component, styles.middleContainer]}>
                {middleComponent}
            </View>
            <View style={[styles.component, styles.rightContainer]}>
                {rightComponent}
            </View>
        </View>
    );
}

/** Local styles */
const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
    },
    component: {
        height: '100%',
        width: '100%',
        flexDirection: 'column',
    },
    leftContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'flex-start',
        padding: 10,
    },
    middleContainer: {
        flex: 5,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        alignContent: 'flex-start',
        marginBottom: -5,
    },
    rightContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'flex-end',
        padding: 10,
    },
});