From 13c8e034bb6e7ea665c0e429b1e837e51c52551a Mon Sep 17 00:00:00 2001
From: UnluckyBird <martin.justinussen@gmail.com>
Date: Wed, 22 Nov 2023 14:29:32 +0100
Subject: [PATCH] Close swipe list in expenses

Fixes issue #36
Closes swipe list after modal disappears
Some dark mode compatibility fixes
---
 app/(tabs)/(index)/index.tsx    |  3 ---
 app/(tabs)/expenses/balance.tsx |  7 ++++---
 app/(tabs)/expenses/index.tsx   | 25 +++++++++++++------------
 app/(tabs)/notice.tsx           |  3 ++-
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/app/(tabs)/(index)/index.tsx b/app/(tabs)/(index)/index.tsx
index ce86d39..d6fd1a2 100644
--- a/app/(tabs)/(index)/index.tsx
+++ b/app/(tabs)/(index)/index.tsx
@@ -10,9 +10,6 @@ import Colors from '../../../constants/Colors';
 import ActionButton from 'react-native-action-button';
 import { MultiSelect } from 'react-native-element-dropdown';
 import moment from 'moment';
-import { LogBox } from 'react-native';
-
-LogBox.ignoreLogs(['Warning: componentWillReceiveProps has been renamed']);
 
 const usersDropdown = [
   { label: 'Test bruger', value: 'Test bruger' },
diff --git a/app/(tabs)/expenses/balance.tsx b/app/(tabs)/expenses/balance.tsx
index 331eb75..ba51e2d 100644
--- a/app/(tabs)/expenses/balance.tsx
+++ b/app/(tabs)/expenses/balance.tsx
@@ -1,7 +1,8 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, useColorScheme } from 'react-native';
 import { Text, View, } from '../../../components/Themed';
 import { FlatList } from 'react-native-gesture-handler';
 import { calculateBalance } from '../../../helpers/calculateBalance';
+import Colors from '../../../constants/Colors';
 
 
 type Expense = {
@@ -20,10 +21,11 @@ const calculatedBalances = calculateBalance(DATA);
 
 
 export default function BalanceScreen() {
+  const colorScheme = useColorScheme() ?? 'light';
 
   const renderItem = ({ item, index }: { item: Expense; index: number }) => {
     return (
-      <View style={[styles.container, { backgroundColor: index % 2 == 0 ? '#eeeeee' : '#D3D3D3' }]}>
+      <View style={[styles.container, { backgroundColor: index % 2 == 0 ? Colors[colorScheme].listBackgroundColor1 : Colors[colorScheme].listBackgroundColor2 }]}>
         <View style={styles.item}>
           <Text style={styles.itemText}>{item.user}</Text>
           <Text style={[styles.itemAmount, { color: item.amount >= 0 ? (item.amount == 0 ? 'black' : '#5CBCA9') : '#E35F52' }]}>
@@ -60,7 +62,6 @@ const styles = StyleSheet.create({
   },
   itemText: {
     fontSize: 24,
-    color: 'black',
     flexDirection: 'row',
   },
   itemAmount: {
diff --git a/app/(tabs)/expenses/index.tsx b/app/(tabs)/expenses/index.tsx
index a6a028c..d747856 100644
--- a/app/(tabs)/expenses/index.tsx
+++ b/app/(tabs)/expenses/index.tsx
@@ -1,10 +1,12 @@
-import { StyleSheet, Modal, Pressable, Dimensions } from 'react-native';
+import { StyleSheet, Pressable, Dimensions, useColorScheme } from 'react-native';
+import Modal from "react-native-modal";
 import React, { useState, useRef } from 'react';
 import { Text, View, } from '../../../components/Themed';
 import { FlatList } from 'react-native-gesture-handler';
 import { FontAwesome5 } from '@expo/vector-icons';
 import Swipeable from 'react-native-gesture-handler/Swipeable';
 import { calculateExpenses } from '../../../helpers/calculateExpenses';
+import Colors from '../../../constants/Colors';
 
 
 type Expense = {
@@ -28,8 +30,10 @@ const DATA: Expense[] = [
 const calculatedExpenses = calculateExpenses(DATA);
 
 export default function SettleScreen() {
+  const colorScheme = useColorScheme() ?? 'light';
   const [modalVisible, setModalVisible] = useState(false);
   const [selectedItem, setSelectedItem] = useState<Transaction | null>(null);
+  const swipeableRows : Swipeable[] = [] 
 
   const openModal = (item: Transaction) => {
     setSelectedItem(item);
@@ -39,17 +43,19 @@ export default function SettleScreen() {
   const closeModal = () => {
     setSelectedItem(null);
     setModalVisible(false);
+    swipeableRows.map((row) => row.close())
   };
 
   const renderItem = ({ item, index }: { item: Transaction; index: number }) => {
     return (
       <Swipeable
+        ref={ref => ref != null ? swipeableRows[index] = ref : undefined}
         friction={1.5}
         overshootFriction={8}
         renderLeftActions={leftSwipeAction}
         onSwipeableOpen={() => openModal(item)}
       >
-        <View style={[styles.container, { backgroundColor: index % 2 == 0 ? '#eeeeee' : '#D3D3D3' }]}>
+        <View style={[styles.container, { backgroundColor: index % 2 == 0 ? Colors[colorScheme].listBackgroundColor1 : Colors[colorScheme].listBackgroundColor2 }]}>
           <View style={styles.item}>
             <Text style={styles.itemTextFrom}>{item.from}</Text>
             <Text style={styles.itemAmount}>{item.amount.toFixed(2)} kr.</Text>
@@ -89,10 +95,10 @@ export default function SettleScreen() {
         renderItem={renderItem}
       />
       <Modal
-        animationType="none"
-        transparent={true}
-        visible={modalVisible}
-        onRequestClose={closeModal}
+        animationIn='zoomIn'
+        animationOut='zoomOut'
+        isVisible={modalVisible}
+        onBackdropPress={closeModal}
       >
         <View style={styles.modalContainer}>
           {selectedItem && (
@@ -136,7 +142,6 @@ const styles = StyleSheet.create({
   },
   itemAmount: {
     fontSize: 24,
-    color: 'black',
     flexDirection: 'row',
     justifyContent: 'flex-end'
   },
@@ -149,16 +154,12 @@ const styles = StyleSheet.create({
     padding: 10,
   },
     modalContainer: {
-    flex: 1,
     justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    alignItems: 'center'
   },
   modalContent: {
-    backgroundColor: '#fff',
     padding: 20,
     borderRadius: 10,
-    height: "40%"
   },
   modalTitleText: {
     fontSize: 30,
diff --git a/app/(tabs)/notice.tsx b/app/(tabs)/notice.tsx
index 06c62ef..07429f7 100644
--- a/app/(tabs)/notice.tsx
+++ b/app/(tabs)/notice.tsx
@@ -16,8 +16,9 @@ export default function NoticeScreen() {
         <View>
           <Text style={styles.title}>Household Rules</Text>
           <TextInput
-            style={styles.input}
+            style={[styles.input, {color: Colors[colorScheme].text}]}
             placeholder="Click to make rules"
+            placeholderTextColor={'gray'}
             value={houseRules}
             onChangeText={(text) => setHouseRules(text)}
             editable