BudgetIzr/components/title_bar.js

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
import TitleBarButton from './title_bar/title_bar_button';


function TitleBar(props){
    let expenseMultiplicator = 1;
    if (props.durationMode === "year")
        expenseMultiplicator = 365
        if (props.durationMode === "weeks")
        expenseMultiplicator = 7
    if(props.durationMode === "months")
        expenseMultiplicator = 30
    const [currentEditValue, onDurationEdit] = React.useState(null);
    let displayValue = currentEditValue
    if(null == displayValue)
        displayValue = expenseMultiplicator*props.dailyExpense

    return (
        <View style={title_bar_styles.controlBar}>
            <View style={{
            flexDirection: 'row'
            }}>
            <Text>Objectif</Text>
            <TextInput
                keyboardType="number-pad"
                enablesReturnKeyAutomatically={true}
                returnKeyType="done"
                value={(displayValue).toString()}
                style={title_bar_styles.input}
                onChangeText={(value) => onDurationEdit(value)}
                onEndEditing={() => {
                    props.onChangeObjective(parseInt(parseInt( currentEditValue ) / expenseMultiplicator));
                    onDurationEdit(null);
                    }}
                />
            <Text>(/{props.durationMode})</Text>
            </View>
            <View style={{
            alignItems: 'flex-end',
            flexDirection: 'row'
            }}>
            <TitleBarButton 
                currentDurationMode={props.durationMode}
                onChangeDuration={props.onChangeDuration} 
                onDurationEdit={onDurationEdit} 
                durationMode="days"/>
            <TitleBarButton 
                currentDurationMode={props.durationMode}
                onChangeDuration={props.onChangeDuration} 
                onDurationEdit={onDurationEdit} 
                durationMode="weeks"/>
            <TitleBarButton 
                currentDurationMode={props.durationMode}
                onChangeDuration={props.onChangeDuration} 
                onDurationEdit={onDurationEdit} 
                durationMode="months"/>
            <TitleBarButton 
                currentDurationMode={props.durationMode}
                onChangeDuration={props.onChangeDuration} 
                onDurationEdit={onDurationEdit} 
                durationMode="year"/>
        </View>
    </View>

    );
}

const title_bar_styles = StyleSheet.create({
    controlBar: {
      flexDirection: "row",
      justifyContent: 'space-between',
      alignItems: 'center',
      borderBottomWidth: 0.5,
      paddingBottom: 5,
    },
    input: {
        borderWidth: 0.5,
        width: 100,
    },
    highlighted: {
        backgroundColor: "#ff8899",
        borderWidth: 3
    }
  });

export default TitleBar;