DeptPage.js 4.3 KB
Newer Older
YoonDongMin's avatar
부채    
YoonDongMin committed
1
import React, { useState } from 'react';
YoonDongMin's avatar
DongM    
YoonDongMin committed
2
3
import { StyleSheet, Text, View, FlatList, TouchableOpacity, Modal, Alert, TouchableWithoutFeedback, Keyboard } from 'react-native';
import TodoItem from './components/todoItem';
YoonDongMin's avatar
YdM    
YoonDongMin committed
4
import InfoForm from './screens/InfoForm';
YoonDongMin's avatar
DongM    
YoonDongMin committed
5
6
7
import Ionicons from 'react-native-vector-icons/Ionicons';
import Infodetails from './screens/InfoDetails'
import ButtonsForm from './components/ButtonsForm';
YoonDongMin's avatar
YdM    
YoonDongMin committed
8
import { TabView } from 'react-native-elements';
YoonDongMin's avatar
부채    
YoonDongMin committed
9
10


YoonDongMin's avatar
YdM    
YoonDongMin committed
11
function DeptPage({ navigation }) {
YoonDongMin's avatar
DongM    
YoonDongMin committed
12
13
  const [selectedIndex, setSelectedIndex] = useState(0)
  const [modallOpen, setModallOpen] = useState(false);
YoonDongMin's avatar
YdM    
YoonDongMin committed
14
15
16
17
18
  const [todo, setTodo] = useState([
    { date: '7/10', person: 'Mark', money: '100만원', remained_money: '10만원남음', key: '1' },
    { date: '7/10', person: 'John', money: '100만원', remained_money: '10만원남음', key: '2' },
    { date: '7/10', person: 'Steve', money: '100만원', remained_money: '10만원남음', key: '3' }
]);
YoonDongMin's avatar
DongM    
YoonDongMin committed
19
  const [todos, setTodos] = useState([
YoonDongMin's avatar
YdM    
YoonDongMin committed
20
21
22
    { date: '7/10', person: '수빈이', money: '100만원', remained_money: '10만원남음', key: '1' },
    { date: '7/10', person: '수현이', money: '100만원', remained_money: '10만원남음', key: '2' },
    { date: '7/10', person: '가영이', money: '100만원', remained_money: '10만원남음', key: '3' }
YoonDongMin's avatar
DongM    
YoonDongMin committed
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
  ]);

  const addInfo = (info) => {
    info.key = Math.random().toString(); //앞에 key를 받아올수있도록 생성
    setTodos((currentInfos) => {
      return [info, ...currentInfos]; //새로운 정보와 지금까지 정보를 합친다
    });
    setModallOpen(false); //modal이 보여지지 않게
  }

  const pressHandler = (key) => {
    setTodos((prevTodos) => {
      return prevTodos.filter(todo => todo.key != key);
    });
  }
YoonDongMin's avatar
부채    
YoonDongMin committed
38
39


YoonDongMin's avatar
DongM    
YoonDongMin committed
40

YoonDongMin's avatar
부채    
YoonDongMin committed
41

YoonDongMin's avatar
DongM    
YoonDongMin committed
42
43
44
45
  return (
    <TouchableWithoutFeedback onPress={() => {
      Keyboard.dismiss();
    }}>
YoonDongMin's avatar
YdM    
YoonDongMin committed
46
      <View Style={style.container}>
YoonDongMin's avatar
DongM    
YoonDongMin committed
47
48
49
50
51
        <ButtonsForm
          onPress={(index) => setSelectedIndex(index)}
          selectedIndex={selectedIndex}
          group={["빌려준금액", "빌린금액"]} />

YoonDongMin's avatar
YdM    
YoonDongMin committed
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
        <View>
          <View style={{ width: '100%', height: '75%' }}>
            <TabView value={selectedIndex} onChange={setSelectedIndex} >
              <TabView.Item style={{ width: '100%', height: '100%' }}>
                <FlatList
                  data={todo}
                  renderItem={({ item }) => (
                    <TouchableOpacity onPress={() => navigation.navigate('InfoDetails', item)}>
                      <TodoItem item={item} pressHandler={pressHandler} />
                    </TouchableOpacity>
                  )}
                />
              </TabView.Item>
              <TabView.Item style={{ width: '100%', height: '100%' }}>
                <FlatList
                  data={todos}
                  renderItem={({ item }) => (
                    <TouchableOpacity onPress={() => navigation.navigate('InfoDetails', item)}>
                      <TodoItem item={item} pressHandler={pressHandler} />
                    </TouchableOpacity>
                  )}
YoonDongMin's avatar
DongM    
YoonDongMin committed
73
                />
YoonDongMin's avatar
YdM    
YoonDongMin committed
74
75
              </TabView.Item>
            </TabView>
YoonDongMin's avatar
DongM    
YoonDongMin committed
76
          </View>
YoonDongMin's avatar
YdM    
YoonDongMin committed
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
          <Ionicons
            name='add'
            size={24}
            style={style.modalToggle} //...은 중괄호를 풀어서 합치려고 이용함
            onPress={() => setModallOpen(true)}
          />
        </View>
        <View>
          <Modal visible={modallOpen} animationType='slide'>
            <View style={style.modalContent}>
              <Ionicons
                name='close'
                size={24}
                style={style.modalToggle}
                onPress={() => setModallOpen(false)}
              />
              <InfoForm addInfo={addInfo} />

            </View>
          </Modal>
YoonDongMin's avatar
DongM    
YoonDongMin committed
97
98
        </View>
      </View>
YoonDongMin's avatar
YdM    
YoonDongMin committed
99
    </TouchableWithoutFeedback >
YoonDongMin's avatar
DongM    
YoonDongMin committed
100
  );
YoonDongMin's avatar
부채    
YoonDongMin committed
101
102
103
}


YoonDongMin's avatar
DongM    
YoonDongMin committed
104

YoonDongMin's avatar
YdM    
YoonDongMin committed
105
106
107


const style = StyleSheet.create({
YoonDongMin's avatar
DongM    
YoonDongMin committed
108
109
  container: {
    flex: 1,
YoonDongMin's avatar
YdM    
YoonDongMin committed
110
    width: '100%',
YoonDongMin's avatar
DongM    
YoonDongMin committed
111
112
113
  },
  modalToggle: {
    borderWidth: 1,
YoonDongMin's avatar
YdM    
YoonDongMin committed
114
115
    borderColor: 'gray', //gray
    padding: 5,
YoonDongMin's avatar
DongM    
YoonDongMin committed
116
117
118
    borderRadius: 10,
    alignSelf: 'center', //위치를 center로
  },
YoonDongMin's avatar
YdM    
YoonDongMin committed
119

YoonDongMin's avatar
DongM    
YoonDongMin committed
120
121
122
123
124
125
126
127
128
129
130
131
132
  modalContent: {
    flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
  },

  TextInput: {
    borderColor: 'skyblue',
    height: 40,
    margin: 12,
    borderWidth: 1
  },
  Font: {
    fontSize: 24
  }
YoonDongMin's avatar
YdM    
YoonDongMin committed
133
134
135
});

export default DeptPage;