BudgetIzr/components/add_depense.js

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
import { sqlite_exec_parameterised } from '../db/query';

export default function AddDepense(props){
    const [addingDepense, onAddDepense] = React.useState(false);
    const [depenseValue, onValueEdit] = React.useState(null);
    const [descriptionValue, onDescriptionEdit] = React.useState(null);

    return (<View style={ add_depenses_styles.overlay }>
    <View >
        {addingDepense ? 
            <View style={ add_depenses_styles.form_area }>
                <Text> Nouvelle dépense</Text>
                <View style={ add_depenses_styles.form_entry }>
                    <Text> 💸</Text>
                    <TextInput
                        keyboardType="numeric"
                        style={ add_depenses_styles.input }
                        onChangeText={ (value) => {
                            onValueEdit(value);
                        }}
                    />
                </View>
                <View style={ add_depenses_styles.form_entry }>
                    <Text> 📃</Text>
                    <TextInput style={ add_depenses_styles.input }
                        onChangeText={ (value) => {
                            onDescriptionEdit(value);
                        }}
                    />
                </View>
                <Button 
                    onPress={() => 
                        {
                            console.log(depenseValue);
                            if(null != depenseValue)
                            {
                                sqlite_exec_parameterised(
                                    "INSERT INTO expense (value, description, date) values (?, ?, ?)",
                                    [depenseValue, descriptionValue, Date.now()], (res) => {
                                        onAddDepense(false);
                                    }
                                    );
                            }
                        }}
                    title="Ajouter"/>
            </View>
         : <View/>}
    </View>
    <View style={ add_depenses_styles.button_add_parent }>
        <Button 
            style={add_depenses_styles.button_add} 
            title={!addingDepense ? "+" : "-"}
            onPress={() => onAddDepense(!addingDepense)}></Button>
    </View>
    </View>
    );
}


const add_depenses_styles = StyleSheet.create({
    overlay: {
        height: "100%",
        width: "100%",
        position: 'absolute',

    },
    form_area: {
        backgroundColor: '#f2c596',
        zIndex: 10,
        elevation: 10,
        display: 'flex',
        flexDirection: 'column'

    },
    form_entry :{
        display: 'flex',
        flexDirection: 'row',
    },
    input :{
        width: "50%",
        borderWidth: 1
    },
    button_add: {
        
    },
    button_add_parent: {
        position: 'absolute',
        bottom: 10,
        right: 10,
    }
});