BudgetIzr/components/title_bar.js

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


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={styles.controlBar}>
            <View style={{
            flexDirection: 'row'
            }}>
            <Text>Objectif</Text>
            <TextInput
                keyboardType="numeric"
                value={(displayValue).toString()}
                style={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'
            }}>
            <Button 
                onPress={() => props.onChangeDuration("days")}
                title={"Jour"}></Button>
            <Button 
                onPress={() => {
                    props.onChangeDuration("weeks");
                    onDurationEdit(null);
                }}
                title={"Semaine"}></Button>
            <Button 
                title={"Mois"}
                onPress={() => {
                    props.onChangeDuration("months");
                    onDurationEdit(null);
                    }}></Button>
            <Button 
                title={"Année"}
                onPress={() => {
                    props.onChangeDuration("year")
                    onDurationEdit(null);
                    }}></Button>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    controlBar: {
      flexDirection: "row",
      justifyContent: 'space-between',
      alignItems: 'center'
    },
    input: {
        borderWidth: 0.5
    }
  });

export default TitleBar;